Merge pull request #244 from TripInfoWeb/dev_informations

Fix: 정보 UI 오류 수정
TripInfoWeb · Aug 30, 2024 · 5a11f62 · 5a11f62
2 parents 0243733 + f86dfe4
commit 5a11f62
Show file tree

Hide file tree

Showing 20 changed files with 122 additions and 97 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/Header.tsx b/src/components/common/Header.tsx
@@ -151,6 +151,7 @@ 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 ? (
               <>
@@ -159,14 +160,14 @@ const Header = ({
                   className={"relative rounded-[50%]"}
                 >
                   <Image
-                    className="rounded-full border-[0.018125rem] border-[#B8EDD9] 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}
                     height={30}
                   />
                 </Link>
-                <div className="text-gray-400">|</div>
+
                 <button
                   onClick={logoutHandler}
                   className="font-semibold text-black hover:text-main dark:text-slate-200"

diff --git 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/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>

diff --git 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>

diff --git 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}

diff --git 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>

diff --git 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"
     />