Merge pull request #245 from TripInfoWeb/dev_diary

Design: 여행일기 등록 페이지 UI 수정
TripInfoWeb · Aug 31, 2024 · 732673b · 732673b
2 parents 5a11f62 + a084935
commit 732673b
Show file tree

Hide file tree

Showing 18 changed files with 169 additions and 205 deletions.
diff --git a/src/app/diary/[id]/loading.tsx b/src/app/diary/[id]/loading.tsx
@@ -6,7 +6,7 @@ export default function Loading() {
     <div className="flex w-full flex-col items-center">
       <Breadcrumbs
         categories={[
-          { label: "여행 일기", href: "/diary/list" },
+          { label: "여행 일기", href: "/diary/list?page=1" },
           { label: "일기 상세", href: "" },
         ]}
       />

diff --git a/src/app/diary/[id]/page.tsx b/src/app/diary/[id]/page.tsx
@@ -48,7 +48,7 @@ export default async function page({ params: { id } }: Props) {
     <div className="flex w-full flex-col items-center">
       <Breadcrumbs
         categories={[
-          { label: "여행 일기", href: "/diary/list" },
+          { label: "여행 일기", href: "/diary/list?page=1" },
           { label: "일기 상세", href: "" },
         ]}
       />

diff --git a/src/app/diary/edit/[id]/page.tsx b/src/app/diary/edit/[id]/page.tsx
@@ -48,7 +48,7 @@ export default async function page({ params: { id } }: Props) {
     <div className="flex w-full flex-col items-center">
       <Breadcrumbs
         categories={[
-          { label: "여행 일기", href: "/diary/list" },
+          { label: "여행 일기", href: "/diary/list?page=1" },
           { label: "일기 수정하기", href: "" },
         ]}
       />

diff --git a/src/app/diary/write/page.tsx b/src/app/diary/write/page.tsx
@@ -12,7 +12,7 @@ export default function page() {
     <div className="flex w-full flex-col items-center">
       <Breadcrumbs
         categories={[
-          { label: "여행 일기", href: "/diary/list" },
+          { label: "여행 일기", href: "/diary/list?page=1" },
           { label: "일기 등록하기", href: "" },
         ]}
       />

diff --git a/src/components/common/Breadcrumb.tsx b/src/components/common/Breadcrumb.tsx
@@ -12,16 +12,6 @@ interface BreadcrumbsProps {
   categories: Category[];
 }
 
-/**
- * 
- * @props 데이터 예시 
-    const categories = [
-      { label: "지원&안내", href: "/support" },
-      { label: "QnA", href: "/support?menu=qna" },
-      { label: "질문 등록하기", href: "" },
-    ];
-*/
-
 const Breadcrumbs: FC<BreadcrumbsProps> = ({ categories }) => {
   return (
     <nav className="flex w-full items-center gap-[.25rem] py-10 text-xs text-gray2">

diff --git a/src/components/diary/write/PlaceModal.tsx → src/components/diary/write/AddressModal.tsx b/src/components/diary/write/PlaceModal.tsx → src/components/diary/write/AddressModal.tsx
@@ -3,22 +3,21 @@ import { TiLocation } from "react-icons/ti";
 import { DebouncedState } from "use-debounce";
 
 interface Props {
-  placeInfos:
+  addressInfos:
     | {
-        place_name: string;
         address_name: string;
       }[]
     | undefined;
-  handleLocationSearch: DebouncedState<(search: string) => void>;
-  onResetPlace: () => void;
-  onChangePlace: (value: { place_name: string; address_name: string }) => void;
+  handleAddressSearch: DebouncedState<(search: string) => void>;
+  onResetAddress: () => void;
+  onChangeAddress: (value: { address_name: string }) => void;
 }
 
-const PlaceModal = ({
-  placeInfos,
-  handleLocationSearch,
-  onResetPlace,
-  onChangePlace,
+const AddressModal = ({
+  addressInfos,
+  handleAddressSearch,
+  onResetAddress,
+  onChangeAddress,
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
@@ -27,36 +26,33 @@ const PlaceModal = ({
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main dark:text-slate-400"
             size={"2.5rem"}
-            onClick={onResetPlace}
+            onClick={onResetAddress}
           />
         </div>
         <div className="flex flex-col gap-8 px-5">
           <div className="flex w-full flex-col gap-2">
             <h3 className="text-lg font-medium text-black dark:text-slate-200">
-              장소 검색하기
+              지역 검색하기
             </h3>
             <div className="flex h-80 flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]">
               <input
                 className="h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full dark:bg-search-icon-dark-mode"
                 type="text"
-                placeholder="장소명을 입력하세요. (Ex. 테라로사 포스코센터점)"
-                onChange={(e) => handleLocationSearch(e.target.value)}
+                placeholder="도로명주소를 입력하세요. (Ex. 용산구 청파로)"
+                onChange={(e) => handleAddressSearch(e.target.value)}
               />
               <div className="flex h-64 flex-col items-start gap-2 overflow-y-auto px-6 py-4">
-                {placeInfos?.map((placeInfo, index) => (
+                {addressInfos?.map((addressInfo, index) => (
                   <button
                     key={index}
                     className="flex w-full flex-col gap-1 hover:bg-gray-100 dark:hover:bg-slate-600"
                     type="button"
-                    onClick={() => onChangePlace(placeInfo)}
+                    onClick={() => onChangeAddress(addressInfo)}
                   >
                     <div className="flex flex-row items-center gap-2 text-sm text-black dark:text-slate-200">
                       <TiLocation />
-                      {placeInfo.place_name}
+                      {addressInfo.address_name}
                     </div>
-                    <span className="text-xs text-gray1 dark:text-slate-400">
-                      {placeInfo.address_name}
-                    </span>
                   </button>
                 ))}
               </div>
@@ -68,4 +64,4 @@ const PlaceModal = ({
   );
 };
 
-export default PlaceModal;
+export default AddressModal;
diff --git a/src/components/diary/write/DateRangeModal.tsx b/src/components/diary/write/DateRangeModal.tsx
@@ -6,21 +6,23 @@ import { Dispatch, SetStateAction } from "react";
 import { ko } from "date-fns/locale";
 
 interface Props {
+  width: number;
   state: any[];
   setState: Dispatch<SetStateAction<any[]>>;
   closeModal: () => void;
   onChangeDateRange: () => void;
 }
 
 const DateRangeModal = ({
+  width,
   state,
   setState,
   closeModal,
   onChangeDateRange,
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-fit scale-110 flex-col gap-4 rounded-xl bg-white p-6 dark:bg-slate-800">
+      <div className="flex h-fit w-fit flex-col gap-4 rounded-xl bg-white p-6 dark:bg-slate-800">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main dark:text-slate-400"
@@ -33,13 +35,15 @@ const DateRangeModal = ({
           onChange={(item) => setState([item.selection])}
           moveRangeOnFirstSelection={false}
           ranges={state}
+          months={width >= 744 ? 2 : 1}
+          direction="horizontal"
           minDate={new Date("1970-1-1")}
           maxDate={new Date()}
           locale={ko}
           rangeColors={["#00B488"]}
         />
         <button
-          className="h-10 w-32 self-center rounded-full bg-main text-white hover:scale-105"
+          className="h-10 w-32 self-center rounded-full bg-main text-[0.9375rem] text-white hover:scale-105"
           type="button"
           onClick={() => onChangeDateRange()}
         >

diff --git a/src/components/diary/write/DiaryEditor.tsx b/src/components/diary/write/DiaryEditor.tsx
@@ -1,9 +1,10 @@
 import Image from "next/image";
-import PlaceModalContainer from "@/containers/diary/write/PlaceModalContainer";
+import AddressModalContainer from "@/containers/diary/write/AddressModalContainer";
 import DateRangeModalContainer from "@/containers/diary/write/DateRangeModalContainer";
 import { useDiaryEditorStoreType } from "@/store/diaryEditorStore";
 import dynamic from "next/dynamic";
 import QuillEditorSkeleton from "@/components/skeleton/common/QuillEditorSkeleton";
+import { FormEvent } from "react";
 
 const QuillEditorContainer = dynamic(
   () => import("@/containers/diary/write/QuillEditorContainer"),
@@ -17,12 +18,12 @@ interface Props {
   text: string;
   diaryEditorStore: useDiaryEditorStoreType;
   dateRangeModal: boolean;
-  placeModal: boolean;
+  addressModal: boolean;
   loading: boolean;
   showDateRangeModal: () => void;
   closeDateRangeModal: () => void;
-  showPlaceModal: () => void;
-  closePlaceModal: () => void;
+  showAddressModal: () => void;
+  closeAddressModal: () => void;
   setCurrentDay: (day: number) => void;
   onSubmit: () => void;
 }
@@ -31,12 +32,12 @@ const DiaryEditor = ({
   text,
   diaryEditorStore,
   dateRangeModal,
-  placeModal,
+  addressModal,
   loading,
   showDateRangeModal,
   closeDateRangeModal,
-  showPlaceModal,
-  closePlaceModal,
+  showAddressModal,
+  closeAddressModal,
   setCurrentDay,
   onSubmit,
 }: Props) => {
@@ -45,91 +46,75 @@ const DiaryEditor = ({
       {dateRangeModal && (
         <DateRangeModalContainer closeModal={closeDateRangeModal} />
       )}
-      {placeModal && <PlaceModalContainer closeModal={closePlaceModal} />}
+      {addressModal && <AddressModalContainer closeModal={closeAddressModal} />}
       <h1 className="text-[1.75rem] font-bold text-black dark:text-slate-200">
         {`일기 ${text}하기`}
       </h1>
       <p className="mt-6 text-gray1 dark:text-slate-400">
         새로운 <span className="text-main">경험을 기록</span>하고 나만의
         추억카드를 만들어보세요!
       </p>
-      <div className="mt-[4.6875rem] flex h-[3.3125rem] flex-row items-center gap-7">
-        <h2 className="text-lg font-semibold text-black dark:text-slate-200">
-          제목<span className="text-2xl text-main">*</span>
+      <div className="mt-[4.6875rem] flex h-[3.3125rem] flex-row items-center gap-[0.625rem]">
+        <h2 className="w-[2.625rem] text-lg font-semibold text-black dark:text-slate-200">
+          제목<span className="text-main">*</span>
         </h2>
         <input
           className="h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm outline-none hover:border-main"
           type="text"
           name="title"
           placeholder="제목을 입력하세요."
           value={diaryEditorStore.title}
+          maxLength={50}
           onChange={(e) =>
             diaryEditorStore.setDiaryEditor({ title: e.target.value })
           }
         />
       </div>
-      <div className="mt-12 flex flex-row items-center gap-[6.75rem] max-[1024px]:flex-col max-[1024px]:items-start max-[1024px]:gap-12">
-        <div className="flex flex-row items-center gap-7 max-[1024px]:items-start">
-          <h2 className="text-lg font-semibold text-black dark:text-slate-200">
-            날짜<span className="text-2xl text-main">*</span>
+      <div className="mt-10 flex flex-row items-center gap-40 max-[1024px]:flex-col max-[1024px]:items-start max-[1024px]:gap-10">
+        <div className="flex h-[3.3125rem] flex-row items-center gap-[0.625rem] max-[1024px]:w-full">
+          <h2 className="w-[2.625rem] text-lg font-semibold text-black dark:text-slate-200">
+            날짜<span className="text-main">*</span>
           </h2>
-          <div className="flex flex-row items-center gap-[1.125rem] max-[585px]:flex-col">
-            <button
-              className={`${diaryEditorStore.startDate ? "text-black" : "text-gray2"} h-[3.3125rem] w-[11.375rem] flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-start text-sm hover:border-main`}
-              type="button"
-              onClick={() => showDateRangeModal()}
-            >
-              {diaryEditorStore.startDate?.toLocaleDateString("ko-KR") ?? (
-                <div className="flex flex-row items-center gap-2">
-                  {"YYYY.MM.DD"}
-                  <Image
-                    src={"/calendar-icon.svg"}
-                    alt={"calendar-icon"}
-                    width={16}
-                    height={16}
-                  />
-                </div>
-              )}
-            </button>
-            <p className="text-lg font-semibold text-black">~</p>
-            <button
-              className={`${diaryEditorStore.endDate ? "text-black" : "text-gray2"} h-[3.3125rem] w-[11.375rem] rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-start text-sm hover:border-main`}
-              type="button"
-              onClick={() => showDateRangeModal()}
-            >
-              {diaryEditorStore.endDate?.toLocaleDateString("ko-KR") ?? (
-                <div className="flex flex-row items-center gap-2">
-                  {"YYYY.MM.DD"}
-                  <Image
-                    src={"/calendar-icon.svg"}
-                    alt={"calendar-icon"}
-                    width={16}
-                    height={16}
-                  />
-                </div>
-              )}
-            </button>
-          </div>
+          <button
+            className={`${diaryEditorStore.startDate ? "text-black" : "text-gray2"} h-[3.3125rem] w-[21.75rem] flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-start text-sm hover:border-main`}
+            type="button"
+            onClick={() => showDateRangeModal()}
+          >
+            {diaryEditorStore.startDate !== null &&
+            diaryEditorStore.endDate !== null ? (
+              <p>{`${diaryEditorStore.startDate.toLocaleDateString("ko-KR")} ~ ${diaryEditorStore.endDate?.toLocaleDateString("ko-KR")}`}</p>
+            ) : (
+              <div className="flex flex-row items-center gap-2">
+                {"YYYY.MM.DD"}
+                <Image
+                  src={"/calendar-icon.svg"}
+                  alt={"calendar-icon"}
+                  width={16}
+                  height={16}
+                />
+              </div>
+            )}
+          </button>
         </div>
         {diaryEditorStore.days > 0 && (
-          <div className="flex h-[3.3125rem] flex-grow flex-row items-center gap-7 max-[1024px]:w-full">
-            <h2 className="text-lg font-semibold text-black dark:text-slate-200">
-              장소<span className="text-2xl text-main">*</span>
+          <div className="flex h-[3.3125rem] flex-grow flex-row items-center gap-[0.625rem] max-[1024px]:w-full">
+            <h2 className="w-[2.625rem] text-lg font-semibold text-black dark:text-slate-200">
+              지역<span className="text-main">*</span>
             </h2>
             <button
               className={`${diaryEditorStore.address[diaryEditorStore.currentDay - 1] === "" ? "text-gray2" : "text-black"} h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-start text-sm outline-none hover:border-main`}
               type="button"
-              onClick={() => showPlaceModal()}
+              onClick={() => showAddressModal()}
             >
               {diaryEditorStore.address[diaryEditorStore.currentDay - 1] === ""
-                ? "장소명을 입력하세요."
-                : diaryEditorStore.placeName[diaryEditorStore.currentDay - 1]}
+                ? "지역명을 입력하세요."
+                : diaryEditorStore.address[diaryEditorStore.currentDay - 1]}
             </button>
           </div>
         )}
       </div>
       {diaryEditorStore.days > 0 && (
-        <div className="mt-14 flex h-6 w-full flex-row items-center gap-14 overflow-x-auto">
+        <div className="mt-14 flex h-7 w-full flex-row items-center gap-14 overflow-x-auto overflow-y-hidden pb-2">
           <Image
             className="hidden dark:block"
             src="/day-text-dark-mode.svg"
@@ -167,7 +152,7 @@ const DiaryEditor = ({
             {["최고", "좋아", "무난", "슬퍼", "화나"].map((value, index) => (
               <button
                 key={index + 1}
-                className={`${diaryEditorStore.moodLevels[diaryEditorStore.currentDay - 1] === index + 1 ? "text-main" : "text-gray1"} flex h-[5.75rem] w-[6.5rem] flex-col items-center justify-between py-[0.5625rem] text-[0.9375rem] hover:bg-[#F2FAF7] hover:text-main dark:text-slate-400`}
+                className={`${diaryEditorStore.moodLevels[diaryEditorStore.currentDay - 1] === index + 1 ? "bg-[#F2FAF7] text-main" : "text-gray1"} flex h-[5.75rem] w-[6.5rem] flex-col items-center justify-between py-[0.5625rem] text-[0.9375rem] hover:bg-[#F2FAF7] hover:text-main dark:text-slate-400`}
                 onClick={() =>
                   diaryEditorStore.changeMoodLevel(
                     diaryEditorStore.currentDay - 1,

diff --git a/src/components/diary/write/QuillEditor.tsx b/src/components/diary/write/QuillEditor.tsx
@@ -2,8 +2,8 @@ import "react-quill/dist/quill.snow.css";
 import "@/styles/quillEditor.css";
 import ReactQuill from "react-quill";
 import { RefObject } from "react";
-import { HashLoader } from "react-spinners";
 import HashSpinner from "@/components/common/HashSpinner";
+import { FaRegImage } from "react-icons/fa6";
 
 interface Props {
   loading: boolean;
@@ -21,8 +21,12 @@ const QuillEditor = ({
   onChange,
 }: Props) => {
   return (
-    <div>
+    <div className="flex flex-col">
       <HashSpinner loading={loading} />
+      <div className="-mb-2 mt-8 flex flex-row items-center gap-2 text-sm font-medium text-gray1">
+        <FaRegImage />
+        <p>Day1에 최소 1장의 이미지를 등록해 주세요.</p>
+      </div>
       <ReactQuill
         ref={quillRef}
         theme="snow"