From c4a2cce7127699b4a72a1325d428d07d2eaf87f8 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:09:33 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Design:=20Header=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EB=B0=B0=EA=B2=BD=ED=99=94=EB=A9=B4=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 22f78d64..4d03a2c1 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -151,19 +151,20 @@ const Header = ({
                   }
                 ></div>
                 <div className="h-[1.875rem] w-[4rem] animate-pulseAuth font-semibold text-black hover:text-main dark:text-slate-200"></div>
+                <div className="text-gray-400">|</div>
               </>
             ) : userId > 0 ? (
               <>
                 <Link href={"/mypage"} className={"relative rounded-[50%]"}>
                   <Image
-                    className="rounded-full border-[0.018125rem] border-[#B8EDD9] dark:bg-slate-200"
+                    className="rounded-full bg-[#F2FAF7] dark:bg-slate-200"
                     src="/user_sex_man_default_image.svg"
                     alt="user_sex_man_default_image"
                     width={30}
                     height={30}
                   />
                 </Link>
-                <div className="text-gray-400">|</div>
+
                 <button
                   onClick={logoutHandler}
                   className="font-semibold text-black hover:text-main dark:text-slate-200"

From e52d0cb81f19723e136ea00f3eccb6f721dd89d1 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:14:19 +0900
Subject: [PATCH 2/8] =?UTF-8?q?Design:=20=EC=A0=95=EB=B3=B4=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx                         | 2 +-
 src/components/informations/detail/InformationViewer.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 4d03a2c1..1f87275a 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -157,7 +157,7 @@ const Header = ({
               <>
                 <Link href={"/mypage"} className={"relative rounded-[50%]"}>
                   <Image
-                    className="rounded-full bg-[#F2FAF7] dark:bg-slate-200"
+                    className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7] dark:bg-slate-200"
                     src="/user_sex_man_default_image.svg"
                     alt="user_sex_man_default_image"
                     width={30}
diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
index 5bf8dde2..c7460a9c 100644
--- a/src/components/informations/detail/InformationViewer.tsx
+++ b/src/components/informations/detail/InformationViewer.tsx
@@ -24,7 +24,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
           <div className="flex flex-row items-end justify-between py-4">
             <div className="flex flex-row items-center gap-2">
               <Image
-                className="rounded-full shadow dark:bg-slate-200"
+                className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7] dark:bg-slate-200"
                 src={`${data.userImage}`}
                 alt="userImage"
                 width={48}
@@ -63,7 +63,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
             <div className="flex flex-row items-end justify-between py-4">
               <div className="flex flex-row items-center gap-2">
                 <Image
-                  className="rounded-full shadow dark:bg-slate-200"
+                  className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7] dark:bg-slate-200"
                   src={`${data.userImage}`}
                   alt="userImage"
                   width={48}

From 05f44671255a47d50617a13639f49cc057671755 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:17:40 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Design:=20=EC=A0=95=EB=B3=B4=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A7=80=EB=8F=84=20UI?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/common/KakaoMapLinkContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/common/KakaoMapLinkContainer.tsx b/src/containers/common/KakaoMapLinkContainer.tsx
index 4c3d786d..3ada7dfc 100644
--- a/src/containers/common/KakaoMapLinkContainer.tsx
+++ b/src/containers/common/KakaoMapLinkContainer.tsx
@@ -76,7 +76,7 @@ const KakaoMapLinkContainer = ({
   return (
     <a
       id="map"
-      className={`${loading ? "animate-pulse" : ""} h-48 w-full rounded-2xl border-[0.0625rem] bg-slate-200 dark:opacity-65`}
+      className={`${loading ? "animate-pulse" : ""} h-48 w-full rounded-t-2xl border-[0.0625rem] bg-slate-200 dark:opacity-65`}
       href={`https://map.kakao.com/link/map/${placeId.toString() !== "0" ? placeId : `${placeName},${placeYAxis},${placeXAxis}`}`}
       target="_blank"
     />

From 673be52278259366c56bd619f0d440c533972d59 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:23:42 +0900
Subject: [PATCH 4/8] =?UTF-8?q?Fix:=20=EC=A0=95=EB=B3=B4=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C=20=EA=B8=80=EC=9E=90?=
 =?UTF-8?q?=EA=B0=80=20=EC=9C=84=20=EC=95=84=EB=9E=98=EB=A1=9C=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/informations/common/ItemTag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/informations/common/ItemTag.tsx b/src/components/informations/common/ItemTag.tsx
index 3ab7846f..595a9be9 100644
--- a/src/components/informations/common/ItemTag.tsx
+++ b/src/components/informations/common/ItemTag.tsx
@@ -21,7 +21,7 @@ const ItemTag = ({
 }: Props) => {
   return (
     <div
-      className={`flex flex-row items-center gap-1 rounded-full border-[0.0625rem] px-2 py-1 font-medium ${borderColor} ${cursorPointer ? "cursor-pointer" : ""} ${hover}`}
+      className={`flex flex-row items-center gap-1 text-nowrap rounded-full border-[0.0625rem] px-2 py-1 font-medium ${borderColor} ${cursorPointer ? "cursor-pointer" : ""} ${hover}`}
       onClick={onClick}
     >
       <p className={`${textColor} text-xs`}>#{tag}</p>

From c761913719f0a71d4a9c15e868a057987754ca10 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:27:29 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Fix:=20=EC=A0=95=EB=B3=B4=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=9C=20=EC=A0=9C=EB=AA=A9=EC=9D=84=2050?=
 =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/informations/write/InformationEditor.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
index f3c325a2..07cdbf33 100644
--- a/src/components/informations/write/InformationEditor.tsx
+++ b/src/components/informations/write/InformationEditor.tsx
@@ -62,12 +62,14 @@ const InformationEditor = ({
           제목<span className="text-2xl text-main">*</span>
         </h2>
         <input
-          className="h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
+          className="h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent px-5 text-sm font-medium outline-none hover:border-main focus:border-main"
           type="text"
           name="title"
           placeholder="제목을 입력하세요."
           value={editorStore.title}
-          onChange={(e) => editorStore.setEditor({ title: e.target.value })}
+          onChange={(e) =>
+            editorStore.setEditor({ title: e.target.value.slice(0, 50) })
+          }
           required={true}
         />
       </div>

From ea1383436c4310864632afbe6c7b39eabd82ccd2 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:30:31 +0900
Subject: [PATCH 6/8] =?UTF-8?q?Fix:=20=EC=A0=95=EB=B3=B4=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EA=B2=80=EC=83=89=20=EC=8B=9C=20=EA=B3=B5=EB=B0=B1?=
 =?UTF-8?q?=EC=9D=84=20=EB=84=A3=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/informations/list/InformationSearchContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx
index 86e805a7..122a300f 100644
--- a/src/containers/informations/list/InformationSearchContainer.tsx
+++ b/src/containers/informations/list/InformationSearchContainer.tsx
@@ -17,7 +17,7 @@ const InformationSearchContainer = () => {
   const router = useRouter();
 
   const onChangeTagName = (value: string) => {
-    setTagName(value.slice(0, 15));
+    setTagName(value.trim().slice(0, 15));
   };
 
   const searchByTagName = () => {

From 6ab925adf39c7df5dc8aea4eb7e3561d1cb2843e Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 00:37:20 +0900
Subject: [PATCH 7/8] =?UTF-8?q?Design:=20=EC=A0=95=EB=B3=B4=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EB=AA=A9=20=EA=B8=80=EC=9E=90=20=EC=88=98?=
 =?UTF-8?q?=EB=A5=BC=20=EC=84=B8=EB=A1=9C=202=EC=A4=84=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/InformationItem.tsx | 2 +-
 src/styles/globals.css                    | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/common/InformationItem.tsx b/src/components/common/InformationItem.tsx
index 60240d73..3fb61425 100644
--- a/src/components/common/InformationItem.tsx
+++ b/src/components/common/InformationItem.tsx
@@ -88,7 +88,7 @@ const InformationItem = ({
       </div>
       <div className="flex h-28 flex-col justify-between rounded-b-xl bg-white px-5 py-4 dark:bg-slate-800">
         <Link
-          className="p-1 font-bold hover:text-main dark:text-slate-200"
+          className="truncate-vertical-information-title p-1 font-bold hover:text-main dark:text-slate-200"
           href={`/informations/${informationId}`}
         >
           {title}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 64f6a4c5..4edae700 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -63,6 +63,15 @@ body {
   background: linear-gradient(to bottom, #dad0e9, #bae5ee);
 }
 
+.truncate-vertical-information-title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 .truncate-vertical {
   text-overflow: ellipsis;
   overflow: hidden;

From f86dfe4d8433f3f73da04310a6c542130625482d Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 31 Aug 2024 01:11:45 +0900
Subject: [PATCH 8/8] =?UTF-8?q?Design:=20Breadcrumb.tsx=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/diary/[id]/loading.tsx                |  9 +++-
 src/app/diary/[id]/page.tsx                   |  9 +++-
 src/app/diary/edit/[id]/page.tsx              |  9 +++-
 src/app/diary/write/page.tsx                  |  9 +++-
 src/app/gathering/write/page.tsx              |  2 +-
 .../informations/(detail)/[id]/loading.tsx    | 12 ++++-
 src/app/informations/(detail)/[id]/page.tsx   | 12 ++++-
 src/app/informations/edit/[id]/page.tsx       | 12 ++++-
 src/app/informations/write/page.tsx           | 12 ++++-
 src/components/common/Breadcrumb.tsx          | 51 +++++++++----------
 src/components/common/PagePath.tsx            | 21 --------
 .../gathering/editor/GatheringEditor.tsx      | 29 +++--------
 12 files changed, 100 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/common/PagePath.tsx

diff --git a/src/app/diary/[id]/loading.tsx b/src/app/diary/[id]/loading.tsx
index c3f25c0a..2e5e7ade 100644
--- a/src/app/diary/[id]/loading.tsx
+++ b/src/app/diary/[id]/loading.tsx
@@ -1,10 +1,15 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryViewerSkeleton from "@/components/skeleton/diary/detail/DiaryViewerSkeleton";
 
 export default function Loading() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 상세" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 상세", href: "" },
+        ]}
+      />
       <DiaryViewerSkeleton />
     </div>
   );
diff --git a/src/app/diary/[id]/page.tsx b/src/app/diary/[id]/page.tsx
index 3045cb4b..6ed5b9d5 100644
--- a/src/app/diary/[id]/page.tsx
+++ b/src/app/diary/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryViewerContainer from "@/containers/diary/detail/DiaryViewerContainer";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
 import { cookies } from "next/headers";
@@ -46,7 +46,12 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 상세" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 상세", href: "" },
+        ]}
+      />
       <DiaryViewerContainer data={data} />
     </div>
   );
diff --git a/src/app/diary/edit/[id]/page.tsx b/src/app/diary/edit/[id]/page.tsx
index 5977df65..ee016f79 100644
--- a/src/app/diary/edit/[id]/page.tsx
+++ b/src/app/diary/edit/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryEditorContainer from "@/containers/diary/edit/DiaryEditorContainer";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
 import { cookies } from "next/headers";
@@ -46,7 +46,12 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 수정하기" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 수정하기", href: "" },
+        ]}
+      />
       <DiaryEditorContainer diaryData={data} />
     </div>
   );
diff --git a/src/app/diary/write/page.tsx b/src/app/diary/write/page.tsx
index 0ec8152c..e256131a 100644
--- a/src/app/diary/write/page.tsx
+++ b/src/app/diary/write/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryEditorContainer from "@/containers/diary/write/DiaryEditorContainer";
 import { Metadata } from "next";
 
@@ -10,7 +10,12 @@ export const metadata: Metadata = {
 export default function page() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 등록하기" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 등록하기", href: "" },
+        ]}
+      />
       <DiaryEditorContainer />
     </div>
   );
diff --git a/src/app/gathering/write/page.tsx b/src/app/gathering/write/page.tsx
index eccf6beb..d1a5a434 100644
--- a/src/app/gathering/write/page.tsx
+++ b/src/app/gathering/write/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function page() {
   return (
-    <div className={"min-h-[calc(100vh-25rem)] w-full pb-[2rem] pt-[2rem]"}>
+    <div className={"min-h-[calc(100vh-25rem)] w-full pb-[2rem]"}>
       <GatheringWriteContainer />
     </div>
   );
diff --git a/src/app/informations/(detail)/[id]/loading.tsx b/src/app/informations/(detail)/[id]/loading.tsx
index 64ae5258..8a9a51a1 100644
--- a/src/app/informations/(detail)/[id]/loading.tsx
+++ b/src/app/informations/(detail)/[id]/loading.tsx
@@ -1,11 +1,19 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewerSkeleton from "@/components/skeleton/informations/detail/InformationViewerSkeleton";
 import RecommendationListSkeleton from "@/components/skeleton/informations/detail/RecommendationListSkeleton";
 
 export default function Loading() {
   return (
     <div className="flex flex-col items-center">
-      <PagePath first="정보" second="정보 상세" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 상세", href: "" },
+        ]}
+      />
       <InformationViewerSkeleton />
       <RecommendationListSkeleton />
     </div>
diff --git a/src/app/informations/(detail)/[id]/page.tsx b/src/app/informations/(detail)/[id]/page.tsx
index 6b58c810..621aab36 100644
--- a/src/app/informations/(detail)/[id]/page.tsx
+++ b/src/app/informations/(detail)/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewer from "@/components/informations/detail/InformationViewer";
 import RecommendationList from "@/components/informations/detail/RecommendationList";
 import { InformationDetailDto } from "@/types/InformationDto";
@@ -51,7 +51,15 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="정보" second="정보 상세" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 상세", href: "" },
+        ]}
+      />
       <InformationViewer informationId={informationId} data={data} />
       <RecommendationList data={data} />
     </div>
diff --git a/src/app/informations/edit/[id]/page.tsx b/src/app/informations/edit/[id]/page.tsx
index 8162c645..57362848 100644
--- a/src/app/informations/edit/[id]/page.tsx
+++ b/src/app/informations/edit/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationEditorContainer from "@/containers/informations/edit/InformationEditorContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
 
@@ -45,7 +45,15 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex flex-col items-center">
-      <PagePath first="정보" second="정보 수정하기" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 수정하기", href: "" },
+        ]}
+      />
       <InformationEditorContainer informationId={informationId} data={data} />
     </div>
   );
diff --git a/src/app/informations/write/page.tsx b/src/app/informations/write/page.tsx
index dbc1c405..07ece1d8 100644
--- a/src/app/informations/write/page.tsx
+++ b/src/app/informations/write/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationEditorContainer from "@/containers/informations/write/InformationEditorContainer";
 import { Metadata } from "next";
 
@@ -10,7 +10,15 @@ export const metadata: Metadata = {
 export default function page() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="정보" second={"정보 등록하기"} />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 등록하기", href: "" },
+        ]}
+      />
       <InformationEditorContainer />
     </div>
   );
diff --git a/src/components/common/Breadcrumb.tsx b/src/components/common/Breadcrumb.tsx
index 30ecd109..09a8a579 100644
--- a/src/components/common/Breadcrumb.tsx
+++ b/src/components/common/Breadcrumb.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { FC } from "react";
+import { IoIosArrowForward } from "react-icons/io";
 
 interface Category {
   label: string;
@@ -20,37 +21,31 @@ interface BreadcrumbsProps {
       { label: "질문 등록하기", href: "" },
     ];
 */
-    
 
-const Breadcrumbs: FC<BreadcrumbsProps> = ({
-  categories,
-}) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ categories }) => {
   return (
-      <nav className="flex items-center gap-[.5rem] text-[0.75rem] text-gray2 mb-4">
-        <div className="text-gray1">
-          <Link href={"/"}>
-            <Image
-              src={"/home-icon.svg"}
-              alt={"home-icon-image"}
-              width={10}
-              height={10}
-            />
-          </Link>
+    <nav className="flex w-full items-center gap-[.25rem] py-10 text-xs text-gray2">
+      <div className="text-gray1">
+        <Link href={"/"}>
+          <Image
+            src={"/home-icon.svg"}
+            alt={"home-icon-image"}
+            width={12}
+            height={12}
+          />
+        </Link>
+      </div>
+      {categories.map((i, index) => (
+        <div key={index} className={"flex flex-row items-center gap-[.25rem]"}>
+          <IoIosArrowForward />
+          {categories.length == index + 1 ? (
+            <span className="font-semibold text-gray1"> {i.label} </span>
+          ) : (
+            <Link href={i.href}> {i.label} </Link>
+          )}
         </div>
-        {
-        categories.map((i,index) => 
-            <div className={"flex gap-[.5rem]"}>
-                <div> {">"} </div>
-                {
-              categories.length == index + 1 ? 
-              <span className="text-black font-semibold"> {i.label} </span>
-              :
-              <Link href={i.href}> {i.label} </Link>
-                }
-            </div>
-        )    
-        }
-      </nav>
+      ))}
+    </nav>
   );
 };
 
diff --git a/src/components/common/PagePath.tsx b/src/components/common/PagePath.tsx
deleted file mode 100644
index 1c01d53a..00000000
--- a/src/components/common/PagePath.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IoIosArrowForward } from "react-icons/io";
-import { IoHome } from "react-icons/io5";
-
-interface Props {
-  first: string;
-  second: string;
-}
-
-const PagePath = ({ first, second }: Props) => {
-  return (
-    <div className="flex w-full flex-row items-center gap-1 py-10 text-xs font-medium text-gray2 dark:text-slate-400">
-      <IoHome />
-      <IoIosArrowForward />
-      <p>{first}</p>
-      <IoIosArrowForward />
-      <p className="font-semibold text-gray1 dark:text-slate-200">{second}</p>
-    </div>
-  );
-};
-
-export default PagePath;
diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
index 82fc6bb5..17b7e354 100644
--- a/src/components/gathering/editor/GatheringEditor.tsx
+++ b/src/components/gathering/editor/GatheringEditor.tsx
@@ -12,6 +12,7 @@ import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { useFormContext } from "react-hook-form";
 import GatheringEditorTimeContainer from "./GatheringEditorTimeContainer";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 
 interface IGatheringEditorEditProps {
   isEdit: true;
@@ -35,28 +36,14 @@ const GatheringEditor = (props: IGatheringEditorProps) => {
 
   return (
     <div className={"flex w-full max-w-[60rem] flex-col"}>
-      <div className="flex gap-[.25rem] text-[.625rem] text-gray2">
-        <div className="text-gray1">
-          <Link href={"/"}>
-            <Image
-              src={"/home-icon.svg"}
-              alt={"home-icon-image"}
-              width={10}
-              height={10}
-            />
-          </Link>
-        </div>
-        <div> {">"} </div>
-        <div>
-          <Link href={"/gathering"}> 모임 </Link>
-        </div>
-        <div> {">"} </div>
-        <div className={"font-bold text-gray1"}>
-          {props.isEdit ? "모임 수정하기" : "모임 등록하기"}
-        </div>
-      </div>
+      <Breadcrumbs
+        categories={[
+          { label: "모임", href: "/gathering" },
+          { label: props.isEdit ? "모임 수정하기" : "모임 등록하기", href: "" },
+        ]}
+      />
       <div className="flex flex-col gap-[1.5rem]">
-        <h1 className={"pt-[2.25rem] text-3xl font-semibold"}>
+        <h1 className={"text-3xl font-semibold"}>
           {props.isEdit ? "모임 수정하기" : "모임 등록하기"}
         </h1>
         <p>