From a57c9abdbc8846a21537a46eab4368be4502d007 Mon Sep 17 00:00:00 2001
From: "j._.jinoo" <jinoo0306@naver.com>
Date: Wed, 19 Jun 2024 16:30:11 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat=20:=20=EC=A7=80=EB=8F=84=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/home/Body.tsx  | 9 +++------
 src/app/layout.tsx     | 6 ++++++
 src/app/posts/page.tsx | 6 ------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/home/Body.tsx b/src/app/home/Body.tsx
index 5fa7030..95a8edd 100644
--- a/src/app/home/Body.tsx
+++ b/src/app/home/Body.tsx
@@ -8,7 +8,6 @@
 
 'use client';
 
-import Script from 'next/script';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
@@ -195,10 +194,6 @@ function Distance() {
           className="m-4 h-[28rem] w-[50rem] border border-zinc-300"
           id="map"
         >
-          <Script
-            src={process.env.NEXT_PUBLIC_KAKAO_SDK_URL}
-            strategy="beforeInteractive"
-          />
           {locPosition ? (
             <Map
               center={locPosition}
@@ -221,7 +216,9 @@ function Distance() {
               ))}
             </Map>
           ) : (
-            <p className="flex items-center justify-center">Loading map...</p>
+            <p className="flex items-center justify-center">
+              GPS 기능을 활성화 해 주세요.
+            </p>
           )}
         </div>
       </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4be9f62..12db98f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './styles/globals.css';
+import Script from 'next/script';
 import StoreProvider from './StoreProvider.tsx';
 import Header from './components/Header.tsx';
 import Footer from './components/Footer.tsx';
@@ -31,6 +32,11 @@ export default function RootLayout({
           <Suspense fallback={<div>로딩중인데요?ㅋㅋ</div>}>
             <Header />
             <StoreProvider>
+              <Script
+                type="text/javascript"
+                src={process.env.NEXT_PUBLIC_KAKAO_SDK_URL}
+                strategy="beforeInteractive"
+              ></Script>
               <div className="flex min-h-screen min-w-full">{children}</div>
             </StoreProvider>
             <Footer />
diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
index db2b6f8..5bb6ab0 100644
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@@ -25,7 +25,6 @@ import { DateTimePicker } from '@mui/x-date-pickers';
 import 'react-quill/dist/quill.snow.css';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
-import Script from 'next/script';
 import { postMeetings, getMeetingsData, editMeeting } from '@/api/meetings.ts';
 import utc from 'dayjs/plugin/utc'; // UTC 플러그인을 사용
 import timezone from 'dayjs/plugin/timezone';
@@ -465,11 +464,6 @@ function page() {
 
   return (
     <div className="mt-20 flex h-full w-full flex-col items-center justify-center">
-      <Script
-        type="text/javascript"
-        src={process.env.NEXT_PUBLIC_KAKAO_SDK_URL}
-        strategy="beforeInteractive"
-      />
       <WarningAlert errorMessage={errorMessage} showAlert={showAlert} />
       <div className="flex h-full w-full flex-col px-4 md:px-40 lg:px-60 xl:px-80">
         {/* 제목 입력 및 카테고리 선택 */}

From fb3eeb8fff253256924ee249e004151f65f54d49 Mon Sep 17 00:00:00 2001
From: "j._.jinoo" <jinoo0306@naver.com>
Date: Sun, 23 Jun 2024 03:48:04 +0900
Subject: [PATCH 2/5] =?UTF-8?q?design=20:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=B0=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/posts/page.tsx | 238 +++++++++++++++++++++--------------------
 1 file changed, 122 insertions(+), 116 deletions(-)

diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
index 5bb6ab0..a96d463 100644
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@@ -465,7 +465,7 @@ function page() {
   return (
     <div className="mt-20 flex h-full w-full flex-col items-center justify-center">
       <WarningAlert errorMessage={errorMessage} showAlert={showAlert} />
-      <div className="flex h-full w-full flex-col px-4 md:px-40 lg:px-60 xl:px-80">
+      <div className="flex h-full w-full flex-col px-60 md:px-60 lg:px-80 xl:px-[32rem]">
         {/* 제목 입력 및 카테고리 선택 */}
         <div className="flex h-12 w-full flex-row">
           <input
@@ -503,123 +503,142 @@ function page() {
             </Select>
           </FormControl>
         </div>
+        <div className="mt-4 flex w-full flex-row">
+          <div className="flex w-1/2 flex-col pr-4">
+            {/* 장소 선택 */}
+            <div className="mt-8 flex w-full flex-col sm:flex-row">
+              <SearchAddressModal isOpen={meetingAddressModalOpen} />
+              <div className="flex w-full flex-col justify-start">
+                <p className="text-bold flex text-sm font-bold">
+                  모임 장소를 입력해 주세요!
+                </p>
+                <div className="mt-4 flex h-12 w-full flex-row sm:w-full">
+                  <input
+                    className="border-1 mr-4 flex w-full items-center justify-start border border-zinc-300 pl-2 text-sm focus:outline-none sm:text-base"
+                    readOnly
+                    type="text"
+                    value={placeName}
+                    placeholder="주소"
+                  />
+                  <button
+                    className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
+                    onClick={() => setMeetingAddressModalOpen(true)}
+                  >
+                    주소 검색
+                  </button>
+                </div>
+
+                <input
+                  type="text"
+                  placeholder="상세 주소"
+                  className="border-1 mt-4 flex h-12 w-[21rem] border border-zinc-300 p-2 text-sm focus:outline-none sm:w-full sm:text-base"
+                  onChange={(e) => (addressDetailRef.current = e.target.value)}
+                  onBlur={() => setAddressDetail(addressDetailRef.current)}
+                />
+              </div>
+            </div>
+
+            {/* 날짜 선택 */}
+            <p className="text-bold mt-12 flex text-sm font-bold">
+              약속 날짜를 입력해 주세요!
+            </p>
+            <div className="mt-4 flex w-full">
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <DateTimePicker
+                  className="flex w-full"
+                  label="날짜 선택"
+                  value={dayjs(meetingTime)}
+                  onChange={handleDateChange}
+                />
+              </LocalizationProvider>
+            </div>
 
-        {/* 장소 선택 */}
-        <div className="mt-8 flex h-60 w-full flex-col sm:flex-row">
-          <SearchAddressModal isOpen={meetingAddressModalOpen} />
-          <div className="flex w-1/2 flex-col justify-end ">
-            <p className="flex text-sm text-zinc-300">
-              모임 장소를 입력해 주세요!
+            {/* 인원수 선택 */}
+            <p className="text-bold mt-12 flex text-sm font-bold">
+              본인을 포함해 모일 최대 인원수를 입력해 주세요!
             </p>
-            <div className="mt-4 flex h-12 w-[21rem] flex-row sm:w-full">
+            <div className="mt-4 flex w-full flex-row rounded-lg border border-solid bg-white p-1 font-sans hover:border-slate-400  focus-visible:outline-0">
               <input
-                className="border-1 mr-4 flex w-full items-center justify-start border border-zinc-300 pl-2 text-sm focus:outline-none sm:text-base"
-                readOnly
-                type="text"
-                value={placeName}
-                placeholder="주소"
+                type="number"
+                className="w-full border-0 bg-white p-2 text-left text-sm focus:outline-none sm:text-base"
+                value={numPeople}
+                onChange={(e) => {
+                  if (Number(e.target.value) < originNumPeople) {
+                    setNumPeople(originNumPeople);
+                  } else if (Number(e.target.value) > 99) {
+                    setNumPeople(99);
+                  } else setNumPeople(Number(e.target.value));
+                }}
+                min={originNumPeople}
+                max={99}
+                placeholder="인원수를 입력해 주세요"
               />
-              <button
-                className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
-                onClick={() => setMeetingAddressModalOpen(true)}
-              >
-                주소 검색
-              </button>
+              <div className="flex flex-col">
+                <button
+                  className="flex h-5 w-5 cursor-pointer flex-row items-center justify-center rounded-t-md border border-b-0 border-slate-200 bg-slate-50 font-[system-ui] transition-all duration-300 hover:bg-indigo-500 hover:text-slate-50"
+                  onClick={() => {
+                    if (numPeople < originNumPeople) {
+                      setNumPeople(originNumPeople);
+                    } else if (numPeople < 100) {
+                      setNumPeople((prevNum) => prevNum + 1);
+                    } else {
+                      setNumPeople(99);
+                    }
+                  }}
+                >
+                  ▴
+                </button>
+                <button
+                  className="flex h-5 w-5 cursor-pointer flex-row items-center justify-center rounded-b-md border border-t-0 border-slate-200 bg-slate-50 font-[system-ui] transition-all duration-300 hover:bg-indigo-500 hover:text-slate-50"
+                  onClick={() => {
+                    if (numPeople > 100) {
+                      setNumPeople(99);
+                    } else if (numPeople > originNumPeople) {
+                      setNumPeople((prevNum) => prevNum - 1);
+                    } else {
+                      setNumPeople(originNumPeople);
+                    }
+                  }}
+                >
+                  ▾
+                </button>
+              </div>
             </div>
-
-            <input
-              type="text"
-              placeholder="상세 주소"
-              className="border-1 mr-4 mt-4 flex h-12 w-[21rem] border border-zinc-300 p-2 text-sm focus:outline-none sm:w-full sm:text-base"
-              onChange={(e) => (addressDetailRef.current = e.target.value)}
-              onBlur={() => setAddressDetail(addressDetailRef.current)}
-            />
           </div>
-          <div
-            className="b mt-2 flex h-96 w-[21rem] border border-zinc-300 sm:ml-4 sm:mt-0 sm:h-60 sm:w-1/2"
-            id="map"
-          >
-            <Map // 지도를 표시할 컨테이너
-              center={center} // 지도의 중심좌표
-              style={{ width: '100%', height: '100%' }}
+          <div className="flex w-1/2 flex-col pl-4">
+            <div
+              className="b mt-16 flex h-5/6 w-full border border-zinc-300"
+              id="map"
             >
-              <MapMarker position={center} /> {/* 사용자의 위치에 마커 표시 */}
-            </Map>
+              <Map // 지도를 표시할 컨테이너
+                center={center} // 지도의 중심좌표
+                style={{ width: '100%', height: '100%' }}
+              >
+                <MapMarker position={center} />{' '}
+                {/* 사용자의 위치에 마커 표시 */}
+              </Map>
+            </div>
           </div>
         </div>
 
-        {/* 날짜 선택 */}
-        <p className="mt-12 flex text-sm text-zinc-300">
-          약속 날짜를 입력해 주세요!
-        </p>
-        <div className="mt-4 flex w-full">
-          <LocalizationProvider dateAdapter={AdapterDayjs}>
-            <DateTimePicker
-              className="flex w-80"
-              label="날짜 선택"
-              value={dayjs(meetingTime)}
-              onChange={handleDateChange}
-            />
-          </LocalizationProvider>
-        </div>
-
-        {/* 인원수 선택 */}
-        <p className="mt-12 flex text-sm text-zinc-300">
-          본인을 포함해 모일 최대 인원수를 입력해 주세요!
-        </p>
-        <div className="mt-4 flex w-52 flex-row rounded-lg border border-solid bg-white p-1 font-sans hover:border-slate-400  focus-visible:outline-0">
-          <input
-            type="number"
-            className="w-full border-0 bg-white p-2 text-left text-sm focus:outline-none sm:text-base"
-            value={numPeople}
-            onChange={(e) => {
-              if (Number(e.target.value) < originNumPeople) {
-                setNumPeople(originNumPeople);
-              } else if (Number(e.target.value) > 99) {
-                setNumPeople(99);
-              } else setNumPeople(Number(e.target.value));
-            }}
-            min={originNumPeople}
-            max={99}
-            placeholder="인원수를 입력해 주세요"
+        <div className="mb-12 mt-12 flex h-full w-full flex-col">
+          {/* React-Quill 컴포넌트 */}
+          <ReactQuill
+            theme="snow" // 에디터의 테마 설정
+            value={editorHtml} // 현재 편집 중인 HTML 내용
+            onChange={(html: any) => {
+              setEditorHtml(html);
+            }} // 내용이 변경될 때 호출되는 콜백 함수
+            className="h-72 w-full sm:h-96"
+            placeholder="어떤 모임을 가질 지 설명해주세요!"
           />
-          <div className="flex flex-col">
-            <button
-              className="flex h-5 w-5 cursor-pointer flex-row items-center justify-center rounded-t-md border border-b-0 border-slate-200 bg-slate-50 font-[system-ui] transition-all duration-300 hover:bg-indigo-500 hover:text-slate-50"
-              onClick={() => {
-                if (numPeople < originNumPeople) {
-                  setNumPeople(originNumPeople);
-                } else if (numPeople < 100) {
-                  setNumPeople((prevNum) => prevNum + 1);
-                } else {
-                  setNumPeople(99);
-                }
-              }}
-            >
-              ▴
-            </button>
-            <button
-              className="flex h-5 w-5 cursor-pointer flex-row items-center justify-center rounded-b-md border border-t-0 border-slate-200 bg-slate-50 font-[system-ui] transition-all duration-300 hover:bg-indigo-500 hover:text-slate-50"
-              onClick={() => {
-                if (numPeople > 100) {
-                  setNumPeople(99);
-                } else if (numPeople > originNumPeople) {
-                  setNumPeople((prevNum) => prevNum - 1);
-                } else {
-                  setNumPeople(originNumPeople);
-                }
-              }}
-            >
-              ▾
-            </button>
-          </div>
         </div>
 
         {/* 참가 방식 결정 */}
 
         {!(postType === 'edit' && meetingId !== undefined) && (
           <div>
-            <p className="mt-12 flex text-sm text-zinc-300">
+            <p className="text-bold mt-8 flex text-sm font-bold">
               참가 방식을 선택해 주세요!
             </p>
             <div className="mt-4 flex h-14 w-60 flex-row items-center justify-start rounded-2xl bg-gray-200 p-4 shadow-md sm:h-16 sm:w-72">
@@ -648,27 +667,14 @@ function page() {
           </div>
         )}
 
-        <div className="mb-12 mt-12 flex h-full w-full flex-col">
-          {/* React-Quill 컴포넌트 */}
-          <ReactQuill
-            theme="snow" // 에디터의 테마 설정
-            value={editorHtml} // 현재 편집 중인 HTML 내용
-            onChange={(html: any) => {
-              setEditorHtml(html);
-            }} // 내용이 변경될 때 호출되는 콜백 함수
-            className="h-72 w-full sm:h-96"
-            placeholder="어떤 모임을 가질 지 설명해주세요!"
-          />
-        </div>
-
         {/* 이미지 업로드 */}
         {!(postType === 'edit' && meetingId !== undefined) && (
           <div>
-            <p className="mt-8 flex text-sm text-zinc-300">
+            <p className="text-bold mt-8 flex text-sm font-bold">
               모임 대표 사진을 업로드해 주세요! (최대 8장)
             </p>
 
-            <div className="flex h-auto w-full flex-row overflow-x-scroll">
+            <div className="flex h-auto w-full flex-row">
               <input
                 ref={fileInputRef}
                 type="file"

From e036c173ee3ad2d8315bdf912162526d373a61f6 Mon Sep 17 00:00:00 2001
From: "j._.jinoo" <jinoo0306@naver.com>
Date: Sun, 23 Jun 2024 04:01:06 +0900
Subject: [PATCH 3/5] =?UTF-8?q?design=20:=20=EB=A9=94=EB=89=B4=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index ae05f85..4d87522 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -165,7 +165,7 @@ function Header() {
 
         {/* 메뉴 푸터 */}
         <button
-          className="m-8 flex h-12 w-full flex-col"
+          className="mb-8 flex h-12 w-full flex-col p-8"
           onClick={() => {
             if (data) {
               logout();

From dfe6ca3ad063dd4da67cde27fbcda8bf6082c11c Mon Sep 17 00:00:00 2001
From: "j._.jinoo" <jinoo0306@naver.com>
Date: Sun, 23 Jun 2024 04:14:23 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat=20:=20=ED=86=A0=ED=81=B0=20=EC=9E=AC?=
 =?UTF-8?q?=EB=B0=9C=EA=B8=89=20=EB=A1=9C=EC=A7=81=20formApi=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EC=97=90=EB=8F=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axios.config.ts | 54 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/api/axios.config.ts b/src/api/axios.config.ts
index 5fc1828..3fe9c66 100644
--- a/src/api/axios.config.ts
+++ b/src/api/axios.config.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable implicit-arrow-linebreak */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable consistent-return */
 import axios from 'axios';
@@ -40,10 +42,23 @@ const api = axios.create({
   baseURL: BASE_URL, // 기본 URL 설정
   headers: {
     'Content-Type': 'application/json',
-    Authorization: `Bearer ${accessToken}`,
+    // Authorization: `Bearer ${accessToken}`,
   },
 });
 
+api.interceptors.request.use(
+  (config) => {
+    const token = getCookie('accessToken'); // 요청 직전에 액세스 토큰을 쿠키에서 가져옵니다.
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`; // 헤더에 액세스 토큰을 설정합니다.
+    }
+    return config;
+  },
+  (error) =>
+    // 요청 에러가 발생했을 경우 처리
+    Promise.reject(error),
+);
+
 api.interceptors.response.use(
   (response) => response, // 성공 응답은 그대로 반환
   async (error) => {
@@ -69,7 +84,7 @@ api.interceptors.response.use(
 
 export { api };
 
-export const formApi = axios.create({
+const formApi = axios.create({
   withCredentials: true,
   baseURL: BASE_URL,
   headers: {
@@ -77,3 +92,38 @@ export const formApi = axios.create({
     Authorization: `Bearer ${accessToken}`,
   },
 });
+
+formApi.interceptors.request.use(
+  (config) => {
+    const token = getCookie('accessToken');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+formApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        const data = await reIssuedToken();
+        formApi.defaults.headers.common.Authorization = `Bearer ${data.data.access_token}`;
+        originalRequest.headers.Authorization = `Bearer ${data.data.access_token}`;
+
+        return formApi(originalRequest);
+      } catch (refreshError) {
+        console.error('Failed to refresh token:', refreshError);
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export { formApi };

From 79082c0a18ebb0116d6163a0f8fa50ca89b81087 Mon Sep 17 00:00:00 2001
From: "j._.jinoo" <jinoo0306@naver.com>
Date: Sun, 23 Jun 2024 19:33:21 +0900
Subject: [PATCH 5/5] =?UTF-8?q?refactor=20:=20=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/Header.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index 4d87522..38554f7 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -8,7 +8,7 @@ import category from '@/util/category.json';
 import { useQuery } from '@tanstack/react-query';
 import { login, logout } from '@/api/user.ts';
 import ignorePath from '../styles/ignorePath.ts';
-import { getCookie, removeCookie } from '../cookies.tsx';
+import { removeCookie } from '../cookies.tsx';
 
 const mont = Montserrat({ subsets: ['latin'], weight: ['500'] });
 
@@ -20,18 +20,11 @@ function Header() {
   const router = useRouter();
   const path = usePathname() || '';
 
-  const { data, isLoading, isError } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['login'],
     queryFn: login,
   });
 
-  // 토큰이 있는데 401 에러가 발생하면 새로고침
-  if (isError && getCookie('accessToken')) {
-    // setTimeout(() => {
-    //   window.location.reload();
-    // }, 100);
-  }
-
   if (ignorePath().includes(path)) {
     return null;
   }