Design: Breadcrumb.tsx 수정

TripInfoWeb · Aug 30, 2024 · f86dfe4 · f86dfe4
1 parent 6ab925a
commit f86dfe4
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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>