From 493eb88458f9c6c7623668219664a18f70b76cf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Thu, 16 Nov 2023 11:19:20 +0900 Subject: [PATCH 01/74] =?UTF-8?q?[fix]=20=ED=84=B0=EB=AF=B8=EB=84=90=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=AC=B8=EA=B5=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/createSchedule.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index 318a3b2c..922e3714 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -2,12 +2,12 @@ import { atom } from "recoil"; import { CurrentPageType, ScheduleAnswerType } from "@shared/types"; export const currentPageName = atom({ - key: "currentPage", + key: "currentSchedulePage", default: "작성 중인 일정", }); export const currentProgress = atom({ - key: "currentProgress", + key: "currentScheduleProgress", default: 1, }); From c2b6cd726e923800d624af48e1de7fa15390e4e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Thu, 16 Nov 2023 11:51:40 +0900 Subject: [PATCH 02/74] =?UTF-8?q?[feat]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20=EB=B0=8F=20=EB=B6=80=EC=A0=9C=EB=AA=A9=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/PageContent.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 7e6226b6..91036d15 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -35,6 +35,14 @@ const PageContent = () => { )} + {current === 4 && ( +
+ + </div> + )} </> ); }; From 8dca200258714a22dda38434462a5c3d80d7bfb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Thu, 16 Nov 2023 16:15:15 +0900 Subject: [PATCH 03/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=B0=8F=20=EB=93=9C=EB=9E=98=EA=B7=B8?= =?UTF-8?q?=EC=95=A4=EB=93=9C=EB=9E=8D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/samples/arrow.svg | 3 + public/images/samples/palette.svg | 11 +++ .../components/CategoryFrame.tsx | 62 ++++++++++++++++ .../components/CategoryItems.tsx | 29 ++++++++ .../components/CurrentDate.tsx | 14 ++++ .../components/DateMoveButton.tsx | 27 +++++++ .../components/DragnDropContainer.tsx | 74 +++++++++++++++++++ .../components/PageContent.tsx | 18 +++-- src/create-schedule/components/TimeTable.tsx | 35 +++++++++ .../components/TimeTableContainer.tsx | 26 +++++++ src/create-schedule/components/index.ts | 6 ++ src/create-schedule/constants/index.ts | 1 + src/shared/recoil/createSchedule.tsx | 8 ++ src/shared/types/index.ts | 8 ++ 14 files changed, 316 insertions(+), 6 deletions(-) create mode 100644 public/images/samples/arrow.svg create mode 100644 public/images/samples/palette.svg create mode 100644 src/create-schedule/components/CategoryFrame.tsx create mode 100644 src/create-schedule/components/CategoryItems.tsx create mode 100644 src/create-schedule/components/CurrentDate.tsx create mode 100644 src/create-schedule/components/DateMoveButton.tsx create mode 100644 src/create-schedule/components/DragnDropContainer.tsx create mode 100644 src/create-schedule/components/TimeTable.tsx create mode 100644 src/create-schedule/components/TimeTableContainer.tsx diff --git a/public/images/samples/arrow.svg b/public/images/samples/arrow.svg new file mode 100644 index 00000000..91d3c114 --- /dev/null +++ b/public/images/samples/arrow.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.2578 6.41665H2.33277C2.0106 6.41665 1.74944 6.67782 1.74944 6.99998C1.74944 7.32215 2.0106 7.58332 2.33277 7.58332H10.2578L8.36627 9.47486C8.13847 9.70266 8.13847 10.072 8.36627 10.2998C8.59408 10.5276 8.96342 10.5276 9.19123 10.2998L11.6661 7.82494C12.1217 7.36933 12.1217 6.63064 11.6661 6.17503L9.19123 3.70015C8.96342 3.47235 8.59408 3.47235 8.36627 3.70015C8.13847 3.92796 8.13847 4.2973 8.36627 4.52511L10.2578 6.41665Z" fill="white"/> +</svg> diff --git a/public/images/samples/palette.svg b/public/images/samples/palette.svg new file mode 100644 index 00000000..34ead103 --- /dev/null +++ b/public/images/samples/palette.svg @@ -0,0 +1,11 @@ +<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12.53 4.94181C14.8458 0.968184 10.0827 -1.61073 4.03014 1.15239C0.319668 2.86289 -2.25924 8.12597 2.89858 12.6522C6.55642 15.8627 15.7931 14.0469 15.7931 10.3628C15.7931 6.2839 10.0827 9.09964 12.53 4.94181ZM13.8195 11.4154C13.0826 12.047 11.9248 12.047 11.1879 11.4154C10.4511 10.7838 10.4511 10.2312 11.1879 9.59964C11.9248 8.96807 13.0826 8.96807 13.8195 9.59964C14.5563 10.2312 14.53 10.7838 13.8195 11.4154Z" fill="#F6C799"/> +<path d="M8.21448 10.5997C7.39871 9.96808 6.10925 9.96808 5.29347 10.5997C4.4777 11.2312 4.4777 12.2312 5.29347 12.8628C6.10925 13.4943 7.39871 13.4943 8.21448 12.8628C9.00395 12.2312 9.00395 11.2049 8.21448 10.5997Z" fill="#2CAECE"/> +<path d="M4.63602 7.57311C3.74129 7.15206 2.53078 7.41521 1.89921 8.17836C1.26764 8.94151 1.47817 9.88886 2.37289 10.3099C3.26761 10.731 4.47812 10.4678 5.10969 9.70465C5.74126 8.94151 5.53074 7.99415 4.63602 7.57311Z" fill="#FDF516"/> +<path d="M3.9516 4.15231C3.18845 3.73126 2.05689 3.91547 1.47795 4.57336C0.872696 5.23124 1.03059 6.09965 1.79374 6.49438C2.55688 6.91543 3.68844 6.73122 4.26738 6.07334C4.84632 5.41545 4.71475 4.57336 3.9516 4.15231Z" fill="#FF5555"/> +<path d="M6.95162 1.57337C6.21479 1.15232 5.13586 1.31022 4.55692 1.94179C3.97798 2.57336 4.08324 3.38913 4.84639 3.81018C5.58322 4.23123 6.66215 4.07333 7.24109 3.44176C7.82003 2.81019 7.68845 1.9681 6.95162 1.57337Z" fill="#83BF4F"/> +<path d="M11.2408 1.28399C10.6619 0.810316 9.68823 0.705054 9.00403 1.02084C8.34614 1.33662 8.2672 1.99451 8.84614 2.46819C9.42508 2.94186 10.3987 3.04712 11.0829 2.73134C11.7408 2.38924 11.7935 1.75767 11.2408 1.28399Z" fill="#9156B7"/> +<path d="M10.0028 9.81018C9.50284 10.3628 6.97656 10.8628 6.97656 10.8628C6.97656 10.8628 7.97655 9.94176 8.42391 8.44178C8.63443 7.73126 9.66073 7.73126 10.1081 8.12599C10.5555 8.49441 10.5028 9.25755 10.0028 9.81018Z" fill="#947151"/> +<path d="M14.9235 1.9684C15.1866 1.94208 15.6866 2.38944 15.7129 2.62628C15.7919 3.75784 11.0551 7.81042 11.0551 7.81042L10.2656 7.15253C10.2656 7.15253 13.7656 2.04734 14.9235 1.9684Z" fill="#666666"/> +<path d="M9.58203 7.91549L10.3715 8.57338L11.0557 7.81023L10.2662 7.15234L9.58203 7.91549Z" fill="#CCCCCC"/> +</svg> diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx new file mode 100644 index 00000000..535e2f5d --- /dev/null +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -0,0 +1,62 @@ +import Image from "next/image"; +import React from "react"; +import { CategoryItem } from "./DragnDropContainer"; + +interface CategoryFrameProps { + category: CategoryItem[]; + onDragStart: (index: number) => void; +} + +const CategoryFrame = ({ category, onDragStart }: CategoryFrameProps) => { + return ( + <> + {category.map((_category, index) => ( + <div + draggable + onDragStart={() => onDragStart(index)} + onDragOver={(e) => e.preventDefault()} + className={`${ + index === category.length - 1 ? "" : "mb-[8px]" + } flex h-[21px] cursor-pointer`} + key={_category.city + _category.tagBackground} + > + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} + > + <div + className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + <div + className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} + > + <Image + src="/images/samples/palette.svg" + alt="palette" + width={16} + height={15} + /> + <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> + {_category.category} + </span> + <span className="text-[10px] text-[#454545] font-medium grow"> + {_category.title} + </span> + <span className="text-[11px] text-[#00000080] font-semibold"> + {_category.city} + </span> + </div> + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} + > + <div + className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + </div> + ))} + </> + ); +}; + +export default CategoryFrame; diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx new file mode 100644 index 00000000..74fb773a --- /dev/null +++ b/src/create-schedule/components/CategoryItems.tsx @@ -0,0 +1,29 @@ +import { SCHEDULE_TITLE } from "@create-schedule/constants"; +import CategoryFrame from "./CategoryFrame"; +import { CategoryItem } from "./DragnDropContainer"; +import ScheduleTitle from "./ScheduleTitle"; + +interface CategoryItemsProps { + category: CategoryItem[]; + onDragStart: (index: number) => void; +} + +const CategoryItems = ({ category, onDragStart }: CategoryItemsProps) => { + return ( + <div className="mt-[36px] mb-[18px]"> + <ScheduleTitle title={SCHEDULE_TITLE.categoryItems} /> + <div className="w-[414px] border border-[#ADADAD] rounded-[5px] mb-[6px] focus-within:border focus-within:border-[#4285F4]"> + <input + className="w-full h-[40px] rounded-[5px] pl-[21px] outline-0" + type="text" + placeholder="카테고리별 아이템 검색" + /> + </div> + <div className="w-[414px] h-fit bg-[#E7F9EE] rounded-[5px] px-[82px] py-[8px]"> + <CategoryFrame category={category} onDragStart={onDragStart} /> + </div> + </div> + ); +}; + +export default CategoryItems; diff --git a/src/create-schedule/components/CurrentDate.tsx b/src/create-schedule/components/CurrentDate.tsx new file mode 100644 index 00000000..254a6e06 --- /dev/null +++ b/src/create-schedule/components/CurrentDate.tsx @@ -0,0 +1,14 @@ +import { useRecoilValue } from "recoil"; +import { scheduleAnswers } from "@shared/recoil"; + +const CurrentDate = () => { + const { startedAt, endedAt } = useRecoilValue(scheduleAnswers); + + return ( + <div className="w-full h-[32px] bg-[#ACBEFF] rounded-[5px] text-center leading-[32px] mb-[10px]"> + <p className="text-[18px] text-white font-semibold">{startedAt}</p> + </div> + ); +}; + +export default CurrentDate; diff --git a/src/create-schedule/components/DateMoveButton.tsx b/src/create-schedule/components/DateMoveButton.tsx new file mode 100644 index 00000000..03ebe078 --- /dev/null +++ b/src/create-schedule/components/DateMoveButton.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; + +const DateMoveButton = () => { + return ( + <div className="flex gap-[8px] float-right"> + <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px]"> + <Image + className="rotate-180 invert" + src="/images/samples/arrow.svg" + alt="arrow" + width={14} + height={14} + /> + </div> + <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] bg-[#404040]"> + <Image + src="/images/samples/arrow.svg" + alt="arrow" + width={14} + height={14} + /> + </div> + </div> + ); +}; + +export default DateMoveButton; diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx new file mode 100644 index 00000000..3c434e6e --- /dev/null +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -0,0 +1,74 @@ +import { DragEvent, useState } from "react"; +import CategoryItems from "./CategoryItems"; +import TimeTableContainer from "./TimeTableContainer"; + +export interface CategoryItem { + category: string; + title: string; + city: string; + tagBackground: string; +} + +const DragnDropContainer = () => { + const category: CategoryItem[] = [ + { + category: "문화생활", + title: "마블 영화 감상", + city: "연남동", + tagBackground: "bg-[#A3FAF2]", + }, + { + category: "문화생활", + title: "도서관 가서 신간 읽기", + city: "연남동", + tagBackground: "bg-[#FFE779]", + }, + { + category: "문화생활", + title: "국립미술관 가서 전시 관람", + city: "연남동", + tagBackground: "bg-[#FFC395]", + }, + { + category: "문화생활", + title: "독서모임 참가하기", + city: "연남동", + tagBackground: "bg-[#CFE1FF]", + }, + { + category: "문화생활", + title: "예술의 전당에서 뮤지컬 관람", + city: "연남동", + tagBackground: "bg-[#DDD1FF]", + }, + { + category: "문화생활", + title: "오일파스텔 그림그리기", + city: "연남동", + tagBackground: "bg-[#FFDCDC]", + }, + ]; + + const [selectedItem, setSelectedItem] = useState<CategoryItem | null>(null); + + const onDragStart = (index: number) => { + setSelectedItem(category[index]); + console.log("start"); + }; + + const onDrop = (e: DragEvent<HTMLTableRowElement>, index: number) => { + console.log("drop", index, selectedItem); + e.preventDefault(); + }; + + return ( + <> + <TimeTableContainer onDrop={onDrop} /> + <div className="inline-block px-[50px]"> + <CategoryItems category={category} onDragStart={onDragStart} /> + </div> + </> + ); +}; + +export default DragnDropContainer; diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 91036d15..92c3289f 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -1,6 +1,7 @@ import { SUBTITLE, TITLE } from "@create-schedule/constants"; import { useRecoilValue } from "recoil"; import { currentProgress } from "@shared/recoil"; +import DragnDropContainer from "./DragnDropContainer"; import PlanDefaultInfo from "./PlanDefaultInfo"; import Remains from "./Remains"; import ScheduleTagTemplate from "./ScheduleTagTemplate"; @@ -36,12 +37,17 @@ const PageContent = () => { </div> )} {current === 4 && ( - <div> - <Title - title={TITLE.fill} - subTitle={SUBTITLE.fillyourplan("명란마요")} - /> - </div> + <> + <div className="inline-block"> + <Title + title={TITLE.fill} + subTitle={SUBTITLE.fillyourplan("명란마요")} + /> + </div> + <div className="flex"> + <DragnDropContainer /> + </div> + </> )} </> ); diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx new file mode 100644 index 00000000..8f0e03d5 --- /dev/null +++ b/src/create-schedule/components/TimeTable.tsx @@ -0,0 +1,35 @@ +import { DragEvent, useMemo } from "react"; + +interface TimeTableProps { + onDrop: (e: DragEvent<HTMLTableRowElement>, index: number) => void; +} + +const TimeTable = ({ onDrop }: TimeTableProps) => { + const tableArray = useMemo( + () => Array.from({ length: 25 }, (_, index) => index), + [], + ); + + return ( + <table className="w-full"> + <tbody> + {tableArray.map((time, index) => ( + <tr + key={time} + className={`${ + time !== 24 ? "border-b-[0.5px] border-b-[#ACBEFF] " : "" + }min-h-[35px]`} + onDrop={(e) => onDrop(e, index)} + onDragOver={(e) => e.preventDefault()} + > + <td className="text-[#ACBEFF] font-semibold leading-[22.5px] px-[15px] py-[6px]"> + {time}:00 + </td> + </tr> + ))} + </tbody> + </table> + ); +}; + +export default TimeTable; diff --git a/src/create-schedule/components/TimeTableContainer.tsx b/src/create-schedule/components/TimeTableContainer.tsx new file mode 100644 index 00000000..7bf818e9 --- /dev/null +++ b/src/create-schedule/components/TimeTableContainer.tsx @@ -0,0 +1,26 @@ +import { DragEvent } from "react"; +import CurrentDate from "./CurrentDate"; +import DateMoveButton from "./DateMoveButton"; +import ScheduleTitle from "./ScheduleTitle"; +import TimeTable from "./TimeTable"; + +interface TimeTableContainerProps { + onDrop: (e: DragEvent<HTMLTableRowElement>, index: number) => void; +} + +const TimeTableContainer = ({ onDrop }: TimeTableContainerProps) => { + return ( + <> + <div className="w-[362px]"> + <DateMoveButton /> + <ScheduleTitle title="일정표" /> + <CurrentDate /> + <div className="w-full border border-[#ACBEFF] rounded-[5px] bg-[#FFF9FC]"> + <TimeTable onDrop={onDrop} /> + </div> + </div> + </> + ); +}; + +export default TimeTableContainer; diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index 16e13c07..2c570edf 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -1,10 +1,14 @@ export { default as BasicInfo } from "./BasicInfo"; export { default as BlockShowing } from "./BlockShowing"; +export { default as CategoryItems } from "./CategoryItems"; export { default as Continue } from "./Continue"; +export { default as CurrentDate } from "./CurrentDate"; export { default as CurrentPage } from "./CurrentPage"; export { default as CurrentRecommendTag } from "./CurrentRecommendTag"; export { default as DateCityHandler } from "./DateCityHandler"; export { default as DateCityInput } from "./DateCityInput"; +export { default as DateMoveButton } from "./DateMoveButton"; +export { default as DragnDropContainer } from "./DragnDropContainer"; export { default as FillPlan } from "./FillPlan"; export { default as FinishWriting } from "./FinishWriting"; export { default as MakeScheduleButton } from "./MakeScheduleButton"; @@ -34,5 +38,7 @@ export { default as TagRecommend } from "./TagRecommend"; export { default as Template } from "./Template"; export { default as TemplateButton } from "./TemplateButton"; export { default as TemplateRecommend } from "./TemplateRecommend"; +export { default as TimeTable } from "./TimeTable"; +export { default as TimeTableContainer } from "./TimeTableContainer"; export { default as Title } from "./Title"; export { default as WritingPlanExisted } from "./WritingPlanExisted"; diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index 2fd6c52f..bb2e7935 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -24,6 +24,7 @@ export const SCHEDULE_TITLE = { tagRecommend: "이런 태그는 어떤가요?", templateRecommend: (nickname: string) => `${nickname} 님을 위한 추천 일정 템플릿이 있어요!`, + categoryItems: "카테고리별 아이템", }; export const SCHEDULE_SUBTITLE = { diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index 922e3714..d6a9f0fe 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -20,5 +20,13 @@ export const scheduleAnswers = atom<ScheduleAnswerType>({ endedAt: "", city: "", tag: [], + items: [ + { + tag: "", + title: "", + background: "", + city: "", + }, + ], }, }); diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 94314ec3..b1063782 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -58,6 +58,14 @@ export interface ScheduleAnswerType { endedAt: string; city: string; tag: string[]; + items: [ + { + tag: string; + title: string; + background: string; + city: string; + }, + ]; } export type CalendarSelectorType = "startedAt" | "endedAt"; From dd644ee7a46869510e42898b3869f949f2ad2e7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Fri, 17 Nov 2023 12:01:13 +0900 Subject: [PATCH 04/74] =?UTF-8?q?[fix]=20=ED=84=B0=EB=AF=B8=EB=84=90=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/createSchedule.tsx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index d6a9f0fe..1357dc9e 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -1,18 +1,20 @@ +import { CategoryItem } from "@create-schedule/components/DragnDropContainer"; +import { uniqueId } from "lodash"; import { atom } from "recoil"; import { CurrentPageType, ScheduleAnswerType } from "@shared/types"; export const currentPageName = atom<CurrentPageType>({ - key: "currentSchedulePage", + key: `currentSchedulePage/${uniqueId()}`, default: "작성 중인 일정", }); export const currentProgress = atom<number>({ - key: "currentScheduleProgress", + key: `currentProgress/${uniqueId()}`, default: 1, }); export const scheduleAnswers = atom<ScheduleAnswerType>({ - key: "scheduleAnswers", + key: `scheduleAnswers/${uniqueId()}`, default: { title: "", imageSrc: "", @@ -30,3 +32,20 @@ export const scheduleAnswers = atom<ScheduleAnswerType>({ ], }, }); + +export const selectedScheduleItem = atom<CategoryItem | null>({ + key: `selectedScheduleItem/${uniqueId()}`, + default: { + category: "", + title: "", + tagBackground: "", + city: "", + startTime: "", + endTime: "", + }, +}); + +export const appliedScheduleItem = atom<CategoryItem[] | null>({ + key: `appliedScheduleItem${uniqueId()}`, + default: null, +}); From 23c91c8255581fa745a4ff425bc34c0132e6a4c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:29:06 +0900 Subject: [PATCH 05/74] =?UTF-8?q?[feat]=20=EC=8B=9C=EA=B0=84=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modalContent/ScheduleTimeSelector.tsx | 7 +++++++ src/modalContent/index.tsx | 3 +++ 2 files changed, 10 insertions(+) create mode 100644 src/modalContent/ScheduleTimeSelector.tsx diff --git a/src/modalContent/ScheduleTimeSelector.tsx b/src/modalContent/ScheduleTimeSelector.tsx new file mode 100644 index 00000000..de6ca9fc --- /dev/null +++ b/src/modalContent/ScheduleTimeSelector.tsx @@ -0,0 +1,7 @@ +import { TimeModal } from "@create-schedule/components"; + +const ScheduleTimeSelector = () => { + return <TimeModal />; +}; + +export default ScheduleTimeSelector; diff --git a/src/modalContent/index.tsx b/src/modalContent/index.tsx index 4656b592..12777ef6 100644 --- a/src/modalContent/index.tsx +++ b/src/modalContent/index.tsx @@ -1,5 +1,6 @@ import { ModalContentId } from "@shared/recoil/modal"; import CalendarSelector from "./CalendarSelector"; +import ScheduleTimeSelector from "./ScheduleTimeSelector"; import ThumbnailSelector, { ThumbnailSelectorProps } from "./ThumbnailSelector"; export interface ModalContentProps { @@ -15,6 +16,8 @@ const ModalContent = <T,>(modalProps: ModalContentProps) => { return <CalendarSelector type="startedAt" />; case "calendarSelector_end": return <CalendarSelector type="endedAt" />; + case "scheduleTimeSelector": + return <ScheduleTimeSelector />; default: return <></>; } From 6cd9b5e6eb3d4d516a2c208d7db22e804186f67d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:29:50 +0900 Subject: [PATCH 06/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index b1063782..7f05214f 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -69,3 +69,25 @@ export interface ScheduleAnswerType { } export type CalendarSelectorType = "startedAt" | "endedAt"; + +export interface CategoryItem { + category: string; + title: string; + city: string; + tagBackground: string; +} + +export interface SelectedCategoryItem extends CategoryItem { + selectedTime: number; +} + +export interface AppliedItem extends CategoryItem { + startTime: { + hour: number; + minute: number; + }; + endTime: { + hour: number; + minute: number; + }; +} From c8cd78ad145aaafa109dbc47efc86d204066c8bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:31:26 +0900 Subject: [PATCH 07/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=A6=AC=EC=BD=94?= =?UTF-8?q?=EC=9D=BC=20=EC=84=B8=ED=8C=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/createSchedule.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index 1357dc9e..c6e01bb2 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -1,7 +1,11 @@ -import { CategoryItem } from "@create-schedule/components/DragnDropContainer"; import { uniqueId } from "lodash"; import { atom } from "recoil"; -import { CurrentPageType, ScheduleAnswerType } from "@shared/types"; +import { + AppliedItem, + CurrentPageType, + ScheduleAnswerType, + SelectedCategoryItem, +} from "@shared/types"; export const currentPageName = atom<CurrentPageType>({ key: `currentSchedulePage/${uniqueId()}`, @@ -33,19 +37,18 @@ export const scheduleAnswers = atom<ScheduleAnswerType>({ }, }); -export const selectedScheduleItem = atom<CategoryItem | null>({ +export const selectedScheduleItem = atom<SelectedCategoryItem | null>({ key: `selectedScheduleItem/${uniqueId()}`, default: { category: "", title: "", tagBackground: "", city: "", - startTime: "", - endTime: "", + selectedTime: 0, }, }); -export const appliedScheduleItem = atom<CategoryItem[] | null>({ +export const appliedScheduleItem = atom<AppliedItem[] | null>({ key: `appliedScheduleItem${uniqueId()}`, default: null, }); From c5c1e00917d9f0ac8f42f1b80190d702aeb199e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:31:47 +0900 Subject: [PATCH 08/74] =?UTF-8?q?[feat]=20=EB=AA=A8=EB=8B=AC=20content=20i?= =?UTF-8?q?d=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/modal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/recoil/modal.tsx b/src/shared/recoil/modal.tsx index 1213bfd8..223f2588 100644 --- a/src/shared/recoil/modal.tsx +++ b/src/shared/recoil/modal.tsx @@ -84,4 +84,5 @@ export const useModalState = () => useRecoilState(modalState); export type ModalContentId = | "thumbnailSelector" | "calendarSelector_start" - | "calendarSelector_end"; + | "calendarSelector_end" + | "scheduleTimeSelector"; From ec022c62ff78ad924b49a1df506be8d9d1ab4c63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:32:59 +0900 Subject: [PATCH 09/74] =?UTF-8?q?[feat]=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EB=93=9C=EB=9E=98=EA=B7=B8=EC=95=A4=EB=93=9C=EB=9E=8D=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=EC=97=AC=EB=B6=80=20=EB=B0=8F=20=EB=93=9C?= =?UTF-8?q?=EB=9E=98=EA=B7=B8=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 42 +++++++++++++++---- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 535e2f5d..9f0bb650 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -1,36 +1,57 @@ import Image from "next/image"; import React from "react"; -import { CategoryItem } from "./DragnDropContainer"; +import { useSetRecoilState } from "recoil"; +import { selectedScheduleItem } from "@shared/recoil"; +import { CategoryItem } from "@shared/types"; interface CategoryFrameProps { + hasPointer?: boolean; + itemHeight?: number; category: CategoryItem[]; - onDragStart: (index: number) => void; } -const CategoryFrame = ({ category, onDragStart }: CategoryFrameProps) => { +const CategoryFrame = ({ + hasPointer, + itemHeight = 21, + category, +}: CategoryFrameProps) => { + const setSelectedItem = useSetRecoilState(selectedScheduleItem); + + const onDragStart = (index: number) => { + setSelectedItem({ + ...category[index], + selectedTime: 0, + }); + }; + return ( <> {category.map((_category, index) => ( <div - draggable - onDragStart={() => onDragStart(index)} + draggable={hasPointer} + onDragStart={() => onDragStart!(index)} onDragOver={(e) => e.preventDefault()} - className={`${ - index === category.length - 1 ? "" : "mb-[8px]" - } flex h-[21px] cursor-pointer`} + className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ + hasPointer ? "cursor-pointer " : "" + }flex`} key={_category.city + _category.tagBackground} + style={{ height: `${itemHeight}px` }} > <div className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} > <div - className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + style={{ + height: itemHeight ? `${itemHeight - 8}px` : "13px", + }} + className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} /> </div> <div className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} > <Image + draggable={false} src="/images/samples/palette.svg" alt="palette" width={16} @@ -50,6 +71,9 @@ const CategoryFrame = ({ category, onDragStart }: CategoryFrameProps) => { className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} > <div + style={{ + height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", + }} className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} /> </div> From 40e9a72445a7e5eb83602915c6da5f38c4c0a2d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:35:00 +0900 Subject: [PATCH 10/74] =?UTF-8?q?[feat]=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20pro?= =?UTF-8?q?ps=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryItems.tsx | 7 +++-- .../components/DragnDropContainer.tsx | 26 +++---------------- 2 files changed, 7 insertions(+), 26 deletions(-) diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx index 74fb773a..7cc5881c 100644 --- a/src/create-schedule/components/CategoryItems.tsx +++ b/src/create-schedule/components/CategoryItems.tsx @@ -1,14 +1,13 @@ import { SCHEDULE_TITLE } from "@create-schedule/constants"; +import { CategoryItem } from "@shared/types"; import CategoryFrame from "./CategoryFrame"; -import { CategoryItem } from "./DragnDropContainer"; import ScheduleTitle from "./ScheduleTitle"; interface CategoryItemsProps { category: CategoryItem[]; - onDragStart: (index: number) => void; } -const CategoryItems = ({ category, onDragStart }: CategoryItemsProps) => { +const CategoryItems = ({ category }: CategoryItemsProps) => { return ( <div className="mt-[36px] mb-[18px]"> <ScheduleTitle title={SCHEDULE_TITLE.categoryItems} /> @@ -20,7 +19,7 @@ const CategoryItems = ({ category, onDragStart }: CategoryItemsProps) => { /> </div> <div className="w-[414px] h-fit bg-[#E7F9EE] rounded-[5px] px-[82px] py-[8px]"> - <CategoryFrame category={category} onDragStart={onDragStart} /> + <CategoryFrame category={category} hasPointer /> </div> </div> ); diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index 3c434e6e..fbf8c731 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -1,15 +1,9 @@ -import { DragEvent, useState } from "react"; +import { CategoryItem } from "@shared/types"; import CategoryItems from "./CategoryItems"; import TimeTableContainer from "./TimeTableContainer"; -export interface CategoryItem { - category: string; - title: string; - city: string; - tagBackground: string; -} - const DragnDropContainer = () => { + // TODO: fetch category const category: CategoryItem[] = [ { category: "문화생활", @@ -49,23 +43,11 @@ const DragnDropContainer = () => { }, ]; - const [selectedItem, setSelectedItem] = useState<CategoryItem | null>(null); - - const onDragStart = (index: number) => { - setSelectedItem(category[index]); - console.log("start"); - }; - - const onDrop = (e: DragEvent<HTMLTableRowElement>, index: number) => { - console.log("drop", index, selectedItem); - e.preventDefault(); - }; - return ( <> - <TimeTableContainer onDrop={onDrop} /> + <TimeTableContainer /> <div className="inline-block px-[50px]"> - <CategoryItems category={category} onDragStart={onDragStart} /> + <CategoryItems category={category} /> </div> </> ); From 2fcec74ff864ab15c487a06adf84c9257af48419 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:35:35 +0900 Subject: [PATCH 11/74] =?UTF-8?q?[comment]=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CurrentDate.tsx | 1 + src/create-schedule/components/DateMoveButton.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/create-schedule/components/CurrentDate.tsx b/src/create-schedule/components/CurrentDate.tsx index 254a6e06..3b1c2d8b 100644 --- a/src/create-schedule/components/CurrentDate.tsx +++ b/src/create-schedule/components/CurrentDate.tsx @@ -2,6 +2,7 @@ import { useRecoilValue } from "recoil"; import { scheduleAnswers } from "@shared/recoil"; const CurrentDate = () => { + // TODO: Date 객체로 사용 const { startedAt, endedAt } = useRecoilValue(scheduleAnswers); return ( diff --git a/src/create-schedule/components/DateMoveButton.tsx b/src/create-schedule/components/DateMoveButton.tsx index 03ebe078..f3f8e5fc 100644 --- a/src/create-schedule/components/DateMoveButton.tsx +++ b/src/create-schedule/components/DateMoveButton.tsx @@ -1,6 +1,7 @@ import Image from "next/image"; const DateMoveButton = () => { + // TODO: Date 객체 사용해서 날짜 이동 return ( <div className="flex gap-[8px] float-right"> <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px]"> From bef94708142772b5ccd0dd1fe2736176e7b3ebbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:36:08 +0900 Subject: [PATCH 12/74] =?UTF-8?q?[feat]=20=EA=B3=84=EC=82=B0=EC=97=90=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=A0=20=EC=83=81=EC=88=98=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/constants/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index bb2e7935..01f25e0c 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -33,3 +33,14 @@ export const SCHEDULE_SUBTITLE = { date: "준비기간 및 모집기간 등 전체 일정을 고려해 설정해 주세요.", city: "일정을 수행할 위치를 선택해주세요.", }; + +export const PIXEL = { + itemHeight: 21, + cellHeight: 35, + padding: 6, + gap: 1, +}; + +export const TIME = { + hour: 60, +}; From 986962e73945d0f9d2d23cb35821542199c38849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:37:00 +0900 Subject: [PATCH 13/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=84=93=EC=9D=B4=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeTableContainer.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/create-schedule/components/TimeTableContainer.tsx b/src/create-schedule/components/TimeTableContainer.tsx index 7bf818e9..8f00c6aa 100644 --- a/src/create-schedule/components/TimeTableContainer.tsx +++ b/src/create-schedule/components/TimeTableContainer.tsx @@ -1,22 +1,19 @@ -import { DragEvent } from "react"; import CurrentDate from "./CurrentDate"; import DateMoveButton from "./DateMoveButton"; import ScheduleTitle from "./ScheduleTitle"; import TimeTable from "./TimeTable"; -interface TimeTableContainerProps { - onDrop: (e: DragEvent<HTMLTableRowElement>, index: number) => void; -} +interface TimeTableContainerProps {} -const TimeTableContainer = ({ onDrop }: TimeTableContainerProps) => { +const TimeTableContainer = ({}: TimeTableContainerProps) => { return ( <> - <div className="w-[362px]"> + <div className="min-w-[362px] max-w-[362px]"> <DateMoveButton /> <ScheduleTitle title="일정표" /> <CurrentDate /> <div className="w-full border border-[#ACBEFF] rounded-[5px] bg-[#FFF9FC]"> - <TimeTable onDrop={onDrop} /> + <TimeTable /> </div> </div> </> From 5103a317a732b30fcd8a5a252e5673be3bcc0d4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:37:32 +0900 Subject: [PATCH 14/74] =?UTF-8?q?[feat]=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EB=93=9C=EB=9E=8D=20=EC=8B=9C=20=EB=82=98=ED=83=80=EB=82=A0=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeModal.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/create-schedule/components/TimeModal.tsx diff --git a/src/create-schedule/components/TimeModal.tsx b/src/create-schedule/components/TimeModal.tsx new file mode 100644 index 00000000..debe8469 --- /dev/null +++ b/src/create-schedule/components/TimeModal.tsx @@ -0,0 +1,17 @@ +import ScheduleTitle from "./ScheduleTitle"; +import ShowSelectedDate from "./ShowSelectedDate"; +import ShowSelectedItem from "./ShowSelectedItem"; +import TimeDetailSelector from "./TimeDetailSelector"; + +const TimeModal = () => { + return ( + <> + <ScheduleTitle title="일정 등록" /> + <ShowSelectedItem /> + <ShowSelectedDate /> + <TimeDetailSelector /> + </> + ); +}; + +export default TimeModal; From 98054898b6cf1eaa1d4d44f02810e3843954834d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:38:00 +0900 Subject: [PATCH 15/74] =?UTF-8?q?[feat]=20=EC=84=A0=ED=83=9D=EB=90=9C=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ShowSelectedItem.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/create-schedule/components/ShowSelectedItem.tsx diff --git a/src/create-schedule/components/ShowSelectedItem.tsx b/src/create-schedule/components/ShowSelectedItem.tsx new file mode 100644 index 00000000..0494b8f0 --- /dev/null +++ b/src/create-schedule/components/ShowSelectedItem.tsx @@ -0,0 +1,16 @@ +import { useRecoilValue } from "recoil"; +import { selectedScheduleItem } from "@shared/recoil"; +import CategoryFrame from "./CategoryFrame"; + +const ShowSelectedItem = () => { + const selectedItem = useRecoilValue(selectedScheduleItem); + + return ( + <div className="flex items-center my-[23px]"> + <div className="min-w-[80px] text-[#333333]">선택 아이템</div> + <div>{selectedItem && <CategoryFrame category={[selectedItem]} />}</div> + </div> + ); +}; + +export default ShowSelectedItem; From ca96c139fb898685eec30c5bf6c90bb1f8198255 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:38:29 +0900 Subject: [PATCH 16/74] =?UTF-8?q?[feat]=20=EB=AA=A8=EB=8B=AC=20-=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=84,=20=EC=83=81=EC=84=B8=EC=84=A4=EB=AA=85,=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TimeDetailSelector.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/create-schedule/components/TimeDetailSelector.tsx diff --git a/src/create-schedule/components/TimeDetailSelector.tsx b/src/create-schedule/components/TimeDetailSelector.tsx new file mode 100644 index 00000000..17374efa --- /dev/null +++ b/src/create-schedule/components/TimeDetailSelector.tsx @@ -0,0 +1,49 @@ +import { useState } from "react"; +import { useRecoilValue } from "recoil"; +import { selectedScheduleItem } from "@shared/recoil"; +import ScheduleRegisterButton from "./ScheduleRegisterButton"; +import ScheduleTimeSelect from "./ScheduleTimeSelect"; + +const TimeDetailSelector = () => { + const selectedItem = useRecoilValue(selectedScheduleItem); + const [time, setTime] = useState({ + start: { hour: `${selectedItem?.selectedTime}시`, minute: "0분" }, + end: { hour: `${selectedItem?.selectedTime}시`, minute: "15분" }, + }); + + const handleTime = ( + key: "start" | "end", + time: "hour" | "minute", + value: number, + ) => { + setTime((prev) => ({ ...prev, [key]: { ...prev[key], [time]: value } })); + }; + + return ( + <> + <div className="flex items-center mt-[23px]"> + <div className="min-w-[80px] text-[#333333]">시간 설정</div> + <ScheduleTimeSelect + selectedItem={selectedItem} + handleTime={handleTime} + /> + </div> + <div className="text-[12px] text-[#8D8D8D] font-medium -tracking-[0.01em] ml-[80px] mt-[2px] mb-[15px]"> + 15분 단위로 선택이 가능합니다. + </div> + <div className="mb-[47px]"> + <div className="min-w-[80px] text-[#333333] mb-[5px]"> + 세부내용(선택) + </div> + <div className="h-[78px] border border-[#ADADAD] rounded-[9px] px-[16px] py-[10px] focus-within:border-[#4285F4]"> + <textarea className="w-full resize-none outline-0" /> + </div> + </div> + <div className="flex gap-[10px] justify-center"> + <ScheduleRegisterButton time={time} selectedItem={selectedItem} /> + </div> + </> + ); +}; + +export default TimeDetailSelector; From 650fc968829c75f24a1109426af3107d712fd96d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:39:22 +0900 Subject: [PATCH 17/74] =?UTF-8?q?[feat]=20=EB=AA=A8=EB=8B=AC=20-=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=9C=20=EB=82=A0=EC=A7=9C=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/ShowSelectedDate.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/create-schedule/components/ShowSelectedDate.tsx diff --git a/src/create-schedule/components/ShowSelectedDate.tsx b/src/create-schedule/components/ShowSelectedDate.tsx new file mode 100644 index 00000000..2830b317 --- /dev/null +++ b/src/create-schedule/components/ShowSelectedDate.tsx @@ -0,0 +1,13 @@ +const ShowSelectedDate = () => { + // TODO: Date 객체 사용 + return ( + <div className="flex items-center"> + <div className="min-w-[80px] text-[#333333]">일정</div> + <div className="w-full h-[29px] text-[#464646] font-medium leading-[29px] -tracking-[0.05em] bg-[#ECECEC] rounded-[5px] px-[13px]"> + 2023.10.30 + </div> + </div> + ); +}; + +export default ShowSelectedDate; From 033c29dbbcbde90350f68986e0ea60b20c30a157 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:40:08 +0900 Subject: [PATCH 18/74] =?UTF-8?q?[feat]=20=EB=AA=A8=EB=8B=AC=20-=20timesel?= =?UTF-8?q?ector?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ScheduleTimeSelect.tsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/create-schedule/components/ScheduleTimeSelect.tsx diff --git a/src/create-schedule/components/ScheduleTimeSelect.tsx b/src/create-schedule/components/ScheduleTimeSelect.tsx new file mode 100644 index 00000000..ddb8d0b0 --- /dev/null +++ b/src/create-schedule/components/ScheduleTimeSelect.tsx @@ -0,0 +1,69 @@ +import { SelectedCategoryItem } from "@shared/types"; + +interface ScheduleTimeSelectProps { + selectedItem: SelectedCategoryItem | null; + handleTime: ( + key: "start" | "end", + time: "hour" | "minute", + value: number, + ) => void; +} + +const ScheduleTimeSelect = ({ + selectedItem, + handleTime, +}: ScheduleTimeSelectProps) => { + const hourArray = Array.from({ length: 25 }, (_, index) => index); + const minuteArray = Array.from({ length: 4 }, (_, index) => index * 15); + + return ( + <> + <select + defaultValue={`${selectedItem?.selectedTime}시`} + className="h-[29px] text-[12px] text-[#727578] -tracking-[0.01em] border border-[#E0E0E0] rounded-[5px] px-[9px] outline-0 mr-[4px]" + onChange={({ target: { value } }) => + handleTime("start", "hour", parseInt(value, 10)) + } + > + {hourArray.map((hour) => ( + <option key={hour}>{hour}시</option> + ))} + </select> + <select + className="h-[29px] text-[12px] text-[#727578] -tracking-[0.01em] border border-[#E0E0E0] rounded-[5px] px-[9px] outline-0 mr-[4px]" + onChange={({ target: { value } }) => + handleTime("start", "minute", parseInt(value, 10)) + } + > + {minuteArray.map((minute) => ( + <option key={minute}>{minute}분</option> + ))} + </select> + <span className="w-[8px] border border-[#333333] mr-[4px]"></span> + <select + defaultValue={`${selectedItem?.selectedTime}시`} + className="h-[29px] text-[12px] text-[#727578] -tracking-[0.01em] border border-[#E0E0E0] rounded-[5px] px-[9px] outline-0 mr-[4px]" + onChange={({ target: { value } }) => + handleTime("end", "hour", parseInt(value, 10)) + } + > + {hourArray.map((hour) => ( + <option key={hour}>{hour}시</option> + ))} + </select> + <select + defaultValue={"15분"} + className="h-[29px] text-[12px] text-[#727578] -tracking-[0.01em] border border-[#E0E0E0] rounded-[5px] px-[9px] outline-0" + onChange={({ target: { value } }) => + handleTime("end", "minute", parseInt(value, 10)) + } + > + {minuteArray.map((minute) => ( + <option key={minute}>{minute}분</option> + ))} + </select> + </> + ); +}; + +export default ScheduleTimeSelect; From 1f4c642305e7e8597d388935309954b35b49df85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:40:44 +0900 Subject: [PATCH 19/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=9A=94=EC=86=8C=20=ED=81=AC=EA=B8=B0,?= =?UTF-8?q?=20=EB=86=92=EC=9D=B4=20=EA=B3=84=EC=82=B0=20=ED=95=A8=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/util/index.ts | 100 ++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 src/create-schedule/util/index.ts diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts new file mode 100644 index 00000000..2e6c2372 --- /dev/null +++ b/src/create-schedule/util/index.ts @@ -0,0 +1,100 @@ +import { TableArrayType } from "@create-schedule/components/TimeTable"; +import { PIXEL, TIME } from "@create-schedule/constants"; +import { Dispatch, SetStateAction } from "react"; +import { AppliedItem } from "@shared/types"; + +export const calculateItemHeight = ( + start: { hour: number; minute: number }, + end: { hour: number; minute: number }, +) => { + const { hour: startHour, minute: startMin } = start; + const { hour: endHour, minute: endMin } = end; + const hourGap = endHour - startHour; + + if (endMin < startMin) { + if (hourGap === 1 && endMin === 0) { + return { type: "sameCell", itemHeight: PIXEL.itemHeight }; + } else if (hourGap === 1 && endMin !== 0) { + return { + type: "otherCell", + itemHeight: + PIXEL.itemHeight + + ((TIME.hour + endMin - startMin) / TIME.hour) * PIXEL.cellHeight - + PIXEL.padding * 2, + }; + } else if (hourGap > 1 && endMin === 0) { + return { + type: "otherCell", + itemHeight: + (hourGap - 1) * PIXEL.cellHeight + PIXEL.itemHeight + PIXEL.gap * 2, + }; + } + return { + type: "ohterCell", + itemHeight: + PIXEL.cellHeight * (hourGap - 1) + + PIXEL.itemHeight + + PIXEL.padding * 2 + + PIXEL.gap * (hourGap + 1), + }; + } + if (endHour === startHour || (hourGap === 1 && endMin === 0)) { + return { type: "sameCell", itemHeight: PIXEL.itemHeight }; + } else if (hourGap >= 1 && endMin !== 0) { + return { + type: "otherCell", + itemHeight: + PIXEL.cellHeight * hourGap + + PIXEL.itemHeight * 0.25 - + PIXEL.padding + + PIXEL.gap * hourGap, + }; + } + + return { + type: "otherCell", + itemHeight: PIXEL.cellHeight * hourGap - PIXEL.padding * 2, + }; +}; + +export const calculateTop = (cellHeight: number) => { + if (cellHeight === 35) { + return PIXEL.padding; + } else if (cellHeight > 35 && cellHeight <= 57) { + return PIXEL.itemHeight + PIXEL.gap + PIXEL.padding; + } else if (cellHeight > 57 && cellHeight <= 79) { + return (PIXEL.itemHeight + PIXEL.gap) * 2 + PIXEL.padding; + } + return (PIXEL.itemHeight + PIXEL.gap) * 3 + PIXEL.padding; +}; + +interface CalculateTableHeightProps { + appliedItem: AppliedItem[] | null; + tableArray: TableArrayType[]; + setTableArray: Dispatch<SetStateAction<TableArrayType[]>>; +} + +export const calculateTableHeight = ({ + appliedItem, + tableArray, + setTableArray, +}: CalculateTableHeightProps) => { + if (appliedItem) { + const newTableArray = tableArray.map(({ time, cellHeight }, index) => { + const startTableItems = appliedItem.filter( + (item) => item.startTime.hour === time, + ).length; + + return { + time, + cellHeight: + startTableItems > 0 + ? PIXEL.cellHeight + + (startTableItems - 1) * PIXEL.itemHeight + + PIXEL.gap * (startTableItems - 1) + : cellHeight, + }; + }); + setTableArray(newTableArray); + } +}; From 9517b1c55008a4ce769625a5a68a660236d96bcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:41:16 +0900 Subject: [PATCH 20/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=A1=9C=EC=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeTable.tsx | 87 +++++++++++++++++--- 1 file changed, 77 insertions(+), 10 deletions(-) diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx index 8f0e03d5..e382facf 100644 --- a/src/create-schedule/components/TimeTable.tsx +++ b/src/create-schedule/components/TimeTable.tsx @@ -1,19 +1,52 @@ -import { DragEvent, useMemo } from "react"; +import { PIXEL } from "@create-schedule/constants"; +import { + calculateItemHeight, + calculateTableHeight, + calculateTop, +} from "@create-schedule/util"; +import { DragEvent, useEffect, useState } from "react"; +import { useRecoilState, useRecoilValue } from "recoil"; +import { useModal } from "@shared/hook"; +import { appliedScheduleItem, selectedScheduleItem } from "@shared/recoil"; +import { CategoryItem } from "@shared/types"; +import CategoryFrame from "./CategoryFrame"; -interface TimeTableProps { - onDrop: (e: DragEvent<HTMLTableRowElement>, index: number) => void; +export interface TableArrayType { + time: number; + cellHeight: number; } -const TimeTable = ({ onDrop }: TimeTableProps) => { - const tableArray = useMemo( - () => Array.from({ length: 25 }, (_, index) => index), - [], +const TimeTable = () => { + const [tableArray, setTableArray] = useState<TableArrayType[]>( + Array.from({ length: 25 }, (_, index) => ({ + time: index, + cellHeight: PIXEL.cellHeight, + })), ); + const { openModal } = useModal(); + const appliedItem = useRecoilValue(appliedScheduleItem); + const [selectedItem, setSelectedItem] = useRecoilState(selectedScheduleItem); + + const onDrop = (e: DragEvent<HTMLTableRowElement>, index: number) => { + setSelectedItem((prev) => ({ + ...(prev as CategoryItem), + selectedTime: index, + })); + if (selectedItem?.title && selectedItem.category && selectedItem.city) { + openModal({ contentId: "scheduleTimeSelector", isHeaderCloseBtn: true }); + } + e.preventDefault(); + }; + + useEffect(() => { + calculateTableHeight({ appliedItem, tableArray, setTableArray }); + }, [appliedItem]); + return ( <table className="w-full"> <tbody> - {tableArray.map((time, index) => ( + {tableArray.map(({ time, cellHeight }, index) => ( <tr key={time} className={`${ @@ -22,8 +55,42 @@ const TimeTable = ({ onDrop }: TimeTableProps) => { onDrop={(e) => onDrop(e, index)} onDragOver={(e) => e.preventDefault()} > - <td className="text-[#ACBEFF] font-semibold leading-[22.5px] px-[15px] py-[6px]"> - {time}:00 + <td + style={{ height: cellHeight }} + className="relative list-item list-none text-[#ACBEFF] font-semibold leading-[22px] pl-[15px] pr-[30px] py-[6px]" + > + <div className="inline-block w-[56px]">{time}:00</div> + <div className="flex flex-col gap-[1px] inline-block float-right w-[250px]"> + {appliedItem?.map((item, _index) => { + const { type, itemHeight } = calculateItemHeight( + item.startTime, + item.endTime, + ); + const top = calculateTop(cellHeight); + + if (item.startTime.hour === index) + return ( + <div + key={ + item.category + item.tagBackground + item.startTime + } + style={type === "sameCell" ? {} : { top: top }} + className={`${ + item.startTime.hour === item.endTime.hour || + (item.endTime.minute === 0 && + item.endTime.hour - item.startTime.hour === 1) + ? "relative" + : "absolute left-[80px]" + }`} + > + <CategoryFrame + category={[item]} + itemHeight={itemHeight} + /> + </div> + ); + })} + </div> </td> </tr> ))} From cde88631cf2daa949e749001e3537edf16fade1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:43:10 +0900 Subject: [PATCH 21/74] =?UTF-8?q?[chore]=20default=20export=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index 2c570edf..1ecb4294 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -1,5 +1,6 @@ export { default as BasicInfo } from "./BasicInfo"; export { default as BlockShowing } from "./BlockShowing"; +export { default as CategoryFrame } from "./CategoryFrame"; export { default as CategoryItems } from "./CategoryItems"; export { default as Continue } from "./Continue"; export { default as CurrentDate } from "./CurrentDate"; @@ -24,20 +25,27 @@ export { default as RemainChar } from "./RemainChar"; export { default as RemainContent } from "./RemainContent"; export { default as Remains } from "./Remains"; export { default as ScheduleNextButton } from "./ScheduleNextButton"; +export { default as ScheduleRegisterButton } from "./ScheduleRegisterButton"; export { default as ScheduleTagInput } from "./ScheduleTagInput"; export { default as ScheduleTagTemplate } from "./ScheduleTagTemplate"; +export { default as ScheduleTimeSelect } from "./ScheduleTimeSelect"; export { default as ScheduleTitle } from "./ScheduleTitle"; export { default as SelectCity } from "./SelectCity"; export { default as SelectDate } from "./SelectDate"; export { default as SelectMainImage } from "./SelectMainImage"; export { default as SelectMainImageBox } from "./SelectMainImageBox"; +export { default as ShowSelectedDate } from "./ShowSelectedDate"; +export { default as ShowSelectedItem } from "./ShowSelectedItem"; export { default as SideBarIntro } from "./SideBarIntro"; export { default as SideBarMenuBox } from "./SideBarMenuBox"; +export { default as TagInput } from "./TagInput"; export { default as TagNTemplate } from "./TagNTemplate"; export { default as TagRecommend } from "./TagRecommend"; export { default as Template } from "./Template"; export { default as TemplateButton } from "./TemplateButton"; export { default as TemplateRecommend } from "./TemplateRecommend"; +export { default as TimeDetailSelector } from "./TimeDetailSelector"; +export { default as TimeModal } from "./TimeModal"; export { default as TimeTable } from "./TimeTable"; export { default as TimeTableContainer } from "./TimeTableContainer"; export { default as Title } from "./Title"; From aba4b18db8c2a39e1098054af6c03bdf0eaa35ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:58:21 +0900 Subject: [PATCH 22/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 7f05214f..50f57b8b 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -91,3 +91,14 @@ export interface AppliedItem extends CategoryItem { minute: number; }; } + +export interface Start2EndTime { + start: { + hour: string; + minute: string; + }; + end: { + hour: string; + minute: string; + }; +} From 92b160ab6f4cb54110f54430b3370d972960c9fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:58:51 +0900 Subject: [PATCH 23/74] =?UTF-8?q?[feat]=20=EC=9C=A0=ED=8B=B8=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/util/index.ts | 71 ++++++++++++++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts index 2e6c2372..8651953b 100644 --- a/src/create-schedule/util/index.ts +++ b/src/create-schedule/util/index.ts @@ -1,7 +1,7 @@ import { TableArrayType } from "@create-schedule/components/TimeTable"; import { PIXEL, TIME } from "@create-schedule/constants"; import { Dispatch, SetStateAction } from "react"; -import { AppliedItem } from "@shared/types"; +import { AppliedItem, Start2EndTime } from "@shared/types"; export const calculateItemHeight = ( start: { hour: number; minute: number }, @@ -98,3 +98,72 @@ export const calculateTableHeight = ({ setTableArray(newTableArray); } }; + +export const handleTimeFormat = (time: Start2EndTime) => { + const startHour = parseInt(time.start.hour, 10); + const startMin = parseInt(time.start.minute, 10); + const endHour = parseInt(time.end.hour, 10); + const endMin = parseInt(time.end.minute, 10); + + return { startHour, startMin, endHour, endMin }; +}; + +interface HandleDurationProps { + time: Start2EndTime; + setDuration: Dispatch<SetStateAction<number>>; +} + +export const handleDuration = ({ time, setDuration }: HandleDurationProps) => { + const { startHour, startMin, endHour, endMin } = handleTimeFormat(time); + if (endMin < startMin) { + const hour = endHour - startHour - 1; + const min = 60 + endMin - startMin; + setDuration(hour + min / 60); + + return; + } + + const hour = endHour - startHour; + const min = endMin - startMin; + setDuration(hour + min / 60); +}; + +export const checkDuplication = ( + startHour: number, + startMin: number, + endHour: number, + endMin: number, + appliedItem: AppliedItem[] | null, +) => { + // 이미 존재하는 테이블 아이템에 대해 검사 + if (appliedItem) { + const isDuplicated = appliedItem.map((item) => { + const startRange = item.startTime.hour * 60 + item.startTime.minute; + const endRange = item.endTime.hour * 60 + item.endTime.minute; + const newItemStartRange = startHour * 60 + startMin; + const newItemEndRange = endHour * 60 + endMin; + + if (startRange <= newItemStartRange && endRange > newItemStartRange) { + return true; + } else if (newItemEndRange > startRange && newItemEndRange <= endRange) { + return true; + } else if (startRange > newItemStartRange && endRange < newItemEndRange) { + return true; + } + return false; + }); + + return isDuplicated; + } + // 테이블이 비었을 경우 + return [false]; +}; + +export const sortByStartTime = (appliedItem: AppliedItem[]) => { + appliedItem.sort((a, b) => { + if (a.startTime.hour !== b.startTime.hour) { + return a.startTime.hour - b.startTime.hour; + } + return a.startTime.minute - b.startTime.minute; + }); +}; From f18fd2f5bf6a3329bcb2ffb66a8dcb25e5271af2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 18 Nov 2023 22:59:38 +0900 Subject: [PATCH 24/74] =?UTF-8?q?[feat]=20=EC=84=A0=ED=83=9D=ED=95=9C=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=93=B1=EB=A1=9D=20=EB=A1=9C=EC=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ScheduleRegisterButton.tsx | 82 +++++++++++++++++++ .../components/ShowDuration.tsx | 21 +++++ src/create-schedule/components/index.ts | 1 + 3 files changed, 104 insertions(+) create mode 100644 src/create-schedule/components/ScheduleRegisterButton.tsx create mode 100644 src/create-schedule/components/ShowDuration.tsx diff --git a/src/create-schedule/components/ScheduleRegisterButton.tsx b/src/create-schedule/components/ScheduleRegisterButton.tsx new file mode 100644 index 00000000..bcd5d327 --- /dev/null +++ b/src/create-schedule/components/ScheduleRegisterButton.tsx @@ -0,0 +1,82 @@ +import { + checkDuplication, + handleTimeFormat, + sortByStartTime, +} from "@create-schedule/util"; +import { useRecoilState, useSetRecoilState } from "recoil"; +import { useModal } from "@shared/hook"; +import { appliedScheduleItem, selectedScheduleItem } from "@shared/recoil"; +import { SelectedCategoryItem, Start2EndTime } from "@shared/types"; +import ShowDuration from "./ShowDuration"; + +interface ScheduleRegisterButtonProps { + time: Start2EndTime; + selectedItem: SelectedCategoryItem | null; +} + +const ScheduleRegisterButton = ({ + time, + selectedItem, +}: ScheduleRegisterButtonProps) => { + const { closeModal } = useModal(); + const setSelectedItem = useSetRecoilState(selectedScheduleItem); + const [appliedItem, setAppliedItem] = useRecoilState(appliedScheduleItem); + + const handleDone = () => { + const { startHour, startMin, endHour, endMin } = handleTimeFormat(time); + // 시작 시간이 종료 시간보다 늦는 경우, 중복된 시간이 있는 경우 버튼 클릭 이벤트 x + if (startHour * 60 + startMin >= endHour * 60 + endMin) return; + if ( + checkDuplication(startHour, startMin, endHour, endMin, appliedItem).some( + (boolean) => boolean === true, + ) + ) + return; + + setAppliedItem((prev) => { + if (prev && selectedItem) { + const newArray = [...prev]; + newArray.push({ + ...selectedItem, + startTime: { hour: startHour, minute: startMin }, + endTime: { hour: endHour, minute: endMin }, + }); + sortByStartTime(newArray); + + return newArray; + } else if (!prev && selectedItem) { + return [ + { + ...selectedItem, + startTime: { hour: startHour, minute: startMin }, + endTime: { hour: endHour, minute: endMin }, + }, + ]; + } + + return null; + }); + setSelectedItem(null); + closeModal(); + }; + + return ( + <> + <button + className="w-[120px] h-[48px] text-[14px] text-[#B1B1B1] font-bold -tracking-[0.03em] bg-[#E9ECEF] rounded-[5px]" + onClick={closeModal} + > + 취소 + </button> + <button + className="w-[120px] h-[48px] text-white -tracking-[0.03em] bg-[#F864A1] rounded-[5px]" + onClick={() => handleDone()} + > + <div className="text-[14px] font-bold">일정등록</div> + <ShowDuration time={time} /> + </button> + </> + ); +}; + +export default ScheduleRegisterButton; diff --git a/src/create-schedule/components/ShowDuration.tsx b/src/create-schedule/components/ShowDuration.tsx new file mode 100644 index 00000000..5b8d4162 --- /dev/null +++ b/src/create-schedule/components/ShowDuration.tsx @@ -0,0 +1,21 @@ +import { handleDuration } from "@create-schedule/util"; +import { useEffect, useState } from "react"; +import { Start2EndTime } from "@shared/types"; + +interface ShowDurationProps { + time: Start2EndTime; +} + +const ShowDuration = ({ time }: ShowDurationProps) => { + const [duration, setDuration] = useState(0); + + useEffect(() => { + handleDuration({ time, setDuration }); + }, [time]); + + return ( + <div className="text-[8px] font-medium -tracking-[0.03em]">{`(${duration}시간)`}</div> + ); +}; + +export default ShowDuration; diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index 1ecb4294..dee1659e 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -34,6 +34,7 @@ export { default as SelectCity } from "./SelectCity"; export { default as SelectDate } from "./SelectDate"; export { default as SelectMainImage } from "./SelectMainImage"; export { default as SelectMainImageBox } from "./SelectMainImageBox"; +export { default as ShowDuration } from "./ShowDuration"; export { default as ShowSelectedDate } from "./ShowSelectedDate"; export { default as ShowSelectedItem } from "./ShowSelectedItem"; export { default as SideBarIntro } from "./SideBarIntro"; From 0e4153186600c981cedbe26b82132994e609e89e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 19 Nov 2023 16:04:26 +0900 Subject: [PATCH 25/74] =?UTF-8?q?[refactor]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/DragnDropContainer.tsx | 1 - src/create-schedule/components/PageContent.tsx | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index fbf8c731..79d64911 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -45,7 +45,6 @@ const DragnDropContainer = () => { return ( <> - <TimeTableContainer /> <div className="inline-block px-[50px]"> <CategoryItems category={category} /> </div> diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 92c3289f..2e10bca2 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -5,6 +5,7 @@ import DragnDropContainer from "./DragnDropContainer"; import PlanDefaultInfo from "./PlanDefaultInfo"; import Remains from "./Remains"; import ScheduleTagTemplate from "./ScheduleTagTemplate"; +import TimeTableContainer from "./TimeTableContainer"; import Title from "./Title"; const PageContent = () => { @@ -45,6 +46,7 @@ const PageContent = () => { /> </div> <div className="flex"> + <TimeTableContainer /> <DragnDropContainer /> </div> </> From f6f9d688aeced36a4840e739c30a240787daccfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:04:25 +0900 Subject: [PATCH 26/74] =?UTF-8?q?[chore]=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/samples/category_all.svg | 26 +++++++++++++++++++ public/images/samples/category_camping.svg | 23 ++++++++++++++++ .../{palette.svg => category_culture.svg} | 0 public/images/samples/category_festival.svg | 22 ++++++++++++++++ public/images/samples/category_food.svg | 7 +++++ public/images/samples/category_hiking.svg | 25 ++++++++++++++++++ public/images/samples/category_movie.svg | 12 +++++++++ public/images/samples/category_shopping.svg | 20 ++++++++++++++ public/images/samples/category_tour.svg | 9 +++++++ 9 files changed, 144 insertions(+) create mode 100644 public/images/samples/category_all.svg create mode 100644 public/images/samples/category_camping.svg rename public/images/samples/{palette.svg => category_culture.svg} (100%) create mode 100644 public/images/samples/category_festival.svg create mode 100644 public/images/samples/category_food.svg create mode 100644 public/images/samples/category_hiking.svg create mode 100644 public/images/samples/category_movie.svg create mode 100644 public/images/samples/category_shopping.svg create mode 100644 public/images/samples/category_tour.svg diff --git a/public/images/samples/category_all.svg b/public/images/samples/category_all.svg new file mode 100644 index 00000000..e51dc882 --- /dev/null +++ b/public/images/samples/category_all.svg @@ -0,0 +1,26 @@ +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.9375 17.4688C5.57812 17.4688 0.875 14.7344 0.875 8.73438C0.875 2.73438 5.57812 0 9.9375 0C12.3594 0 14.5938 0.796875 16.25 2.25C18.0469 3.84375 19 6.09375 19 8.73438C19 11.375 18.0469 13.6094 16.25 15.2031C14.5938 16.6562 12.3438 17.4688 9.9375 17.4688Z" fill="url(#paint0_radial_873_549)"/> +<path d="M17.4211 3.54199C18.2539 4.88574 18.6883 6.48574 18.6883 8.26543C18.6883 10.9061 17.7352 13.1404 15.9383 14.7342C14.282 16.1873 12.032 16.9998 9.62578 16.9998C6.80391 16.9998 3.84453 15.8514 2.09766 13.4154C3.77891 16.1748 6.94141 17.4686 9.93828 17.4686C12.3445 17.4686 14.5945 16.6561 16.2508 15.2029C18.0477 13.6092 19.0008 11.3748 19.0008 8.73418C19.0008 6.74356 18.4586 4.9748 17.4211 3.54199Z" fill="#EB8F00"/> +<path d="M14.9882 2.67656L13.7288 4.34843C13.6663 4.42968 13.5695 4.47656 13.4663 4.47187L11.3757 4.38281C11.2038 4.375 11.057 4.50937 11.0491 4.68125C11.046 4.75 11.0663 4.81718 11.1054 4.87343L12.307 6.59218C12.3648 6.675 12.3788 6.77968 12.3445 6.875L11.6132 8.8375C11.5538 9 11.6366 9.17968 11.7976 9.23906C11.8616 9.2625 11.9304 9.26406 11.996 9.24531L13.9976 8.63281C14.096 8.60312 14.2023 8.62343 14.2835 8.6875L15.9226 9.98906C16.0585 10.0953 16.2538 10.0734 16.3616 9.9375C16.4038 9.88281 16.4273 9.81718 16.4288 9.74843L16.4648 7.65625C16.4663 7.55312 16.5195 7.45781 16.6054 7.40156L18.3491 6.25C18.4929 6.15468 18.5335 5.96093 18.4382 5.81718C18.4007 5.75937 18.3445 5.71562 18.2788 5.69375L16.2991 5.0125C16.1991 4.97968 16.1226 4.89843 16.0945 4.79687L15.5382 2.77968C15.4913 2.61406 15.3179 2.51718 15.1523 2.56406C15.0866 2.58281 15.0288 2.62187 14.9882 2.67656Z" fill="url(#paint1_radial_873_549)"/> +<path d="M15.5951 2.63925L16.0639 4.81425C16.0998 4.98144 16.2232 5.11581 16.3873 5.16425L18.4779 5.78925C18.6342 5.8455 18.7154 6.01738 18.6592 6.17363C18.6373 6.23613 18.5951 6.28769 18.5389 6.32363L16.6639 7.34238C16.506 7.42207 16.406 7.58456 16.406 7.76113L16.4248 10.0408C16.4201 10.2049 16.2826 10.3346 16.117 10.3299C16.0514 10.3283 15.9873 10.3049 15.9373 10.2627L14.2998 8.79238C14.1732 8.67675 13.9935 8.64081 13.831 8.69706L11.7529 9.40488C11.5935 9.45019 11.4279 9.358 11.381 9.19863C11.3623 9.13613 11.3654 9.06894 11.3904 9.008L12.306 6.91894C12.3748 6.75956 12.3514 6.57675 12.2435 6.44081L10.9139 4.76425C10.8217 4.62519 10.8592 4.43925 10.9967 4.3455C11.0498 4.30956 11.1139 4.29238 11.1795 4.2955L13.3498 4.54238C13.5201 4.56113 13.6857 4.48613 13.7842 4.34706L15.0685 2.53144C15.1701 2.40019 15.3592 2.37675 15.4889 2.47988C15.542 2.5205 15.5779 2.57519 15.5951 2.63925Z" fill="#F44336"/> +<path d="M15.0987 4.74082L15.2549 3.24082C15.2658 3.15801 15.2783 3.01426 15.4112 3.04082C15.5158 3.0627 15.5268 3.28926 15.5268 3.28926L15.7299 4.56114C15.8049 5.04395 15.7049 5.18614 15.5237 5.24239C15.3127 5.3127 15.0549 5.17051 15.0987 4.74082Z" fill="#FF847A"/> +<path d="M16.5072 7.18748L17.9869 6.45467C18.0604 6.41405 18.1916 6.35311 18.1213 6.23905C18.0635 6.14998 17.8463 6.21717 17.8463 6.21717L16.6416 6.42498C16.2854 6.47186 16.0291 6.59686 15.965 6.8078C15.8822 7.07967 16.0932 7.35311 16.5072 7.18748Z" fill="#C62828"/> +<path d="M5.07829 2.26583L6.32829 4.10021C6.42516 4.24083 6.58923 4.3174 6.75954 4.30177L8.93454 4.08771C9.10016 4.08302 9.23923 4.21271 9.24391 4.37833C9.24548 4.4424 9.22829 4.50489 9.19235 4.55646L7.84391 6.2174C7.73454 6.35177 7.70798 6.53458 7.77516 6.69396L8.65798 8.79552C8.71579 8.95021 8.63766 9.12364 8.48298 9.18146C8.42048 9.2049 8.35329 9.20646 8.28923 9.18771L6.21579 8.44865C6.05485 8.39083 5.87516 8.42365 5.74704 8.53615L4.09391 9.98146C3.96579 10.0846 3.77829 10.0643 3.6736 9.93614C3.63141 9.88458 3.60798 9.81896 3.60798 9.75333L3.65954 7.47365C3.66423 7.30021 3.57204 7.14083 3.42204 7.0549L1.56266 6.00802C1.42204 5.92365 1.37516 5.73927 1.4611 5.59865C1.49704 5.53771 1.55485 5.49083 1.62204 5.46896L3.7236 4.87208C3.8861 4.82677 4.0111 4.69552 4.05173 4.53146L4.55016 2.36427C4.59548 2.2049 4.7611 2.11271 4.92048 2.15802C4.98298 2.17521 5.03923 2.21427 5.07829 2.26583Z" fill="#F44336"/> +<path d="M5.41656 4.39858L4.98844 2.9517C4.96813 2.87045 4.92438 2.73295 5.05563 2.70795C5.16031 2.68764 5.25875 2.89389 5.25875 2.89389L5.9275 3.98764C6.18219 4.40639 6.14156 4.57358 5.99625 4.69545C5.85094 4.81733 5.53844 4.81264 5.41656 4.39858Z" fill="#FF847A"/> +<path d="M7.64781 6.11893L8.74156 4.87831C8.79468 4.81425 8.89781 4.708 8.78218 4.62987C8.69624 4.56737 8.52124 4.71268 8.52124 4.71268L7.48531 5.36268C7.17281 5.54081 6.98375 5.75331 7.00562 5.97362C7.03218 6.26425 7.32906 6.43612 7.64781 6.11893Z" fill="#C62828"/> +<path d="M15.949 11.1907C15.7303 10.7954 15.2553 10.6219 14.8334 10.7813C13.2303 11.2485 11.5678 11.4813 9.89745 11.4735C8.22713 11.4813 6.56463 11.2485 4.96151 10.7813C4.5412 10.6219 4.0662 10.7938 3.84745 11.1875C3.63495 11.5797 3.78807 12.0344 3.96776 12.4266C4.97088 14.6297 7.18182 15.9485 9.88495 15.9563H9.90995C12.6131 15.9563 14.824 14.6297 15.8287 12.4266C16.0068 12.0313 16.1615 11.5829 15.949 11.1907Z" fill="#422B0D"/> +<path d="M12.398 15.3348C12.3402 15.2817 12.2809 15.2332 12.2215 15.1785C11.584 14.6176 10.759 14.316 9.90898 14.3332C9.03398 14.3192 8.18242 14.6098 7.49961 15.1567C7.44023 15.2051 7.37773 15.252 7.31992 15.3129C7.26211 15.3738 7.23086 15.4176 7.19336 15.4692C8.05273 15.8051 8.96836 15.977 9.8918 15.9723H9.9168C10.8012 15.9723 11.6777 15.8145 12.5059 15.5035C12.4746 15.4442 12.4387 15.3879 12.398 15.3348Z" fill="#ED7770"/> +<path d="M14.8332 10.7815C13.2301 11.2487 11.5676 11.4815 9.89727 11.4737C8.22695 11.4815 6.56445 11.2487 4.96133 10.7815C4.54102 10.6221 4.06602 10.794 3.84727 11.1877C3.81602 11.2471 3.79102 11.3096 3.77539 11.3737C3.82695 11.4002 3.88633 11.4268 3.95664 11.4549C5.83789 12.3971 7.91758 12.8752 10.0207 12.8502C12.0379 12.8737 14.0316 12.4346 15.8535 11.569C15.927 11.5377 15.9879 11.508 16.0426 11.4799C16.0301 11.3783 15.9973 11.2783 15.9488 11.1877C15.7301 10.794 15.2551 10.6205 14.8332 10.7815Z" fill="white"/> +<path d="M15.9553 11.1922C15.7334 10.7969 15.2568 10.6219 14.8318 10.7813C13.2287 11.2485 11.5662 11.4813 9.89745 11.4735C8.22713 11.4813 6.56463 11.2485 4.96151 10.7813C4.5412 10.6219 4.0662 10.7938 3.84745 11.1875C3.63495 11.5797 3.78807 12.0344 3.96776 12.4266C4.04745 12.6032 4.13651 12.7766 4.23495 12.9438C4.23495 12.9438 3.90682 11.7282 4.1912 11.3751C4.28807 11.2251 4.45057 11.1313 4.6287 11.1219C4.70213 11.1219 4.77401 11.1344 4.84432 11.1563C6.47557 11.636 8.16776 11.8782 9.86932 11.875H9.92401C11.6256 11.8782 13.3178 11.636 14.949 11.1563C15.0193 11.1344 15.0912 11.1219 15.1646 11.1219C15.3428 11.1313 15.5068 11.2251 15.6037 11.3751C15.8928 11.7282 15.5599 12.9485 15.5599 12.9485C15.6568 12.7813 15.7537 12.6094 15.8349 12.4313C16.0131 12.0391 16.1678 11.586 15.9553 11.1922Z" fill="#EB8F00"/> +<defs> +<radialGradient id="paint0_radial_873_549" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.9375 8.73438) scale(8.89995)"> +<stop offset="0.5" stop-color="#FDE030"/> +<stop offset="0.92" stop-color="#F7C02B"/> +<stop offset="1" stop-color="#F4A223"/> +</radialGradient> +<radialGradient id="paint1_radial_873_549" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.7695 6.30437) scale(3.73608)"> +<stop offset="0.2" stop-color="#FF4081"/> +<stop offset="0.88" stop-color="#CC1775"/> +</radialGradient> +</defs> +</svg> diff --git a/public/images/samples/category_camping.svg b/public/images/samples/category_camping.svg new file mode 100644 index 00000000..9b0a368b --- /dev/null +++ b/public/images/samples/category_camping.svg @@ -0,0 +1,23 @@ +<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0 0H18.7765V18.7765H0V0Z" fill="#D6EEF0"/> +<path d="M0 4.40077L1.17353 3.22724L3.08052 2.05371L6.45443 4.69416L11.1486 10.8552H0V4.40077Z" fill="#B2C1C0"/> +<path opacity="0.5" d="M11.1487 10.8552L6.4546 4.69416L3.0807 2.05371L2.64062 4.10739L3.81416 5.28092L3.52077 7.04122L4.69431 8.21475L4.10754 10.8552H11.1487Z" fill="#B2C1C0"/> +<path d="M3.07969 2.05371L1.1727 3.22724L0.585938 3.81401H1.46609L1.02601 5.01688L2.34624 4.40077L2.63962 5.86769L3.81315 5.28092L4.95734 5.86769V4.84085L6.4536 4.69416L3.07969 2.05371Z" fill="white"/> +<path opacity="0.5" d="M11.1483 10.8552L6.45419 4.69416L3.08029 2.05371L2.93359 3.52063L3.81374 5.28092L3.52036 7.04122L4.69389 8.21475L4.10713 10.8552H11.1483Z" fill="#B2C1C0"/> +<path d="M14.7278 10.1216C13.789 9.7109 12.7915 9.38818 11.7353 9.38818C10.6791 9.38818 9.74031 9.88694 8.91884 10.0923C4.10736 11.3539 0 9.38818 0 9.38818V18.7764H18.7765V10.6497C17.4856 10.7964 16.0774 10.6204 14.7278 10.1216Z" fill="#83BF4F"/> +<path d="M1.4665 14.3759C2.11462 14.3759 2.64003 13.8505 2.64003 13.2023C2.64003 12.5542 2.11462 12.0288 1.4665 12.0288C0.818377 12.0288 0.292969 12.5542 0.292969 13.2023C0.292969 13.8505 0.818377 14.3759 1.4665 14.3759Z" fill="#699635"/> +<path d="M1.75906 12.6158C2.24515 12.6158 2.6392 12.2217 2.6392 11.7356C2.6392 11.2495 2.24515 10.8555 1.75906 10.8555C1.27296 10.8555 0.878906 11.2495 0.878906 11.7356C0.878906 12.2217 1.27296 12.6158 1.75906 12.6158Z" fill="#699635"/> +<path d="M3.57866 14.3761C4.55084 14.3761 5.33896 13.588 5.33896 12.6158C5.33896 11.6436 4.55084 10.8555 3.57866 10.8555C2.60647 10.8555 1.81836 11.6436 1.81836 12.6158C1.81836 13.588 2.60647 14.3761 3.57866 14.3761Z" fill="#699635"/> +<path d="M16.3711 9.9165H17.1632V12.3222H16.3711V9.9165Z" fill="#89664C"/> +<path d="M17.4271 6.71849C17.0751 6.04371 16.4883 6.04371 16.1363 6.71849L14.904 9.00688C14.552 9.68166 14.904 10.2097 15.6962 10.2097C15.6962 10.2097 16.4883 9.91636 16.7817 9.91636C17.0751 9.91636 17.8672 10.2097 17.8672 10.2097C18.6593 10.2097 19.0114 9.68166 18.6593 9.00688L17.4271 6.71849Z" fill="#699635"/> +<path d="M17.2809 5.39802C16.9875 4.86993 16.5474 4.86993 16.254 5.39802L15.2859 7.24633C14.9925 7.77442 15.2859 8.2145 15.9313 8.2145C15.9313 8.2145 16.5768 7.92111 16.7821 7.92111C16.9875 7.92111 17.6329 8.2145 17.6329 8.2145C18.249 8.2145 18.5424 7.77442 18.2784 7.24633L17.2809 5.39802Z" fill="#75A843"/> +<path d="M17.1636 4.10737C16.9582 3.69663 16.6062 3.69663 16.4008 4.10737L15.6674 5.48627C15.462 5.897 15.6674 6.21973 16.1368 6.21973C16.1368 6.21973 16.6062 5.92634 16.7822 5.92634C16.9582 5.92634 17.4277 6.21973 17.4277 6.21973C17.8971 6.21973 18.1024 5.897 17.8971 5.48627L17.1636 4.10737Z" fill="#83BF4F"/> +<path d="M9.9765 2.05405C9.9765 2.37677 9.71246 2.64082 9.38974 2.64082H6.45591C6.13319 2.64082 5.86914 2.37677 5.86914 2.05405C5.86914 1.73133 6.13319 1.46729 6.45591 1.46729H9.38974C9.71246 1.46729 9.9765 1.73133 9.9765 2.05405Z" fill="white"/> +<path d="M11.1498 2.64097C11.1498 2.96369 10.8858 3.22773 10.563 3.22773H9.3895C9.06678 3.22773 8.80273 2.96369 8.80273 2.64097C8.80273 2.31824 9.06678 2.0542 9.3895 2.0542H10.563C10.8858 2.0542 11.1498 2.31824 11.1498 2.64097ZM12.3233 4.98803C12.3233 5.31075 12.0593 5.57479 11.7366 5.57479H10.563C10.2403 5.57479 9.97627 5.31075 9.97627 4.98803C9.97627 4.66531 10.2403 4.40126 10.563 4.40126H11.7366C12.0593 4.40126 12.3233 4.66531 12.3233 4.98803ZM15.2572 3.52111C15.2572 3.84384 14.9931 4.10788 14.6704 4.10788H13.4969C13.1741 4.10788 12.9101 3.84384 12.9101 3.52111C12.9101 3.19839 13.1741 2.93435 13.4969 2.93435H14.6704C14.9931 2.93435 15.2572 3.19839 15.2572 3.52111Z" fill="white"/> +<path d="M9.86133 11.3794H18.463L21.9993 17.7901L20.8046 20.7562L13.4454 22.0001L9.86133 11.3794Z" fill="#FFDD7D"/> +<path d="M6.6697 20.6987L6.06836 17.9029L9.63018 11.3794L13.6546 19.5215L13.0995 22.7587L6.6697 20.6987Z" fill="#DBB471"/> +<path d="M9.47627 11.3794L7.58594 21.115L10.6204 22.0001L9.47627 11.3794Z" fill="#89664C"/> +<path d="M9.48756 11.3794C9.48756 11.3794 10.2036 17.3289 11.3798 19.5416L10.6638 22.0001L9.48756 11.3794ZM7.54413 21.115L6.82812 19.1974C6.82812 19.1974 9.12956 13.4937 9.48756 11.3794L7.54413 21.115Z" fill="#FFDD7D"/> +<path d="M5.57392 14.3759C6.22205 14.3759 6.74745 13.8505 6.74745 13.2023C6.74745 12.5542 6.22205 12.0288 5.57392 12.0288C4.9258 12.0288 4.40039 12.5542 4.40039 13.2023C4.40039 13.8505 4.9258 14.3759 5.57392 14.3759Z" fill="#699635"/> +<path d="M12.9982 19.2288L21.9999 18.207L21.2371 21.5512L12.8965 22.7588L12.9982 19.2288Z" fill="#DBB471"/> +</svg> diff --git a/public/images/samples/palette.svg b/public/images/samples/category_culture.svg similarity index 100% rename from public/images/samples/palette.svg rename to public/images/samples/category_culture.svg diff --git a/public/images/samples/category_festival.svg b/public/images/samples/category_festival.svg new file mode 100644 index 00000000..d87f9d6d --- /dev/null +++ b/public/images/samples/category_festival.svg @@ -0,0 +1,22 @@ +<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0 20.1368L2.98581 19.0953L0.729092 18.0537L0 20.1368Z" fill="#F7B600"/> +<path d="M8.64533 11.596L4.44437 7.36035L3.75 9.3046L8.64533 11.596Z" fill="#FFDD7D"/> +<path d="M3.75014 9.30469L2.98633 11.492L12.2909 15.8318L12.7423 15.6929L8.64547 11.5961L3.75014 9.30469Z" fill="#F7B600"/> +<path d="M2.25586 13.679L9.19959 16.9078L12.2896 15.8315L2.98495 11.4917L2.25586 13.679Z" fill="#FFDD7D"/> +<path d="M1.49414 15.8665L6.077 18.019L9.20169 16.908L2.25795 13.6792L1.49414 15.8665Z" fill="#F7B600"/> +<path d="M1.49233 15.8667L0.728516 18.054L2.98523 19.0955L6.07519 18.0193L1.49233 15.8667Z" fill="#FFDD7D"/> +<path d="M10.381 9.79088C12.7072 12.0823 13.9223 14.6515 13.0891 15.4847C12.2211 16.318 9.65194 15.1376 7.29107 12.8114C4.96492 10.52 3.74977 7.95079 4.58302 7.11754C5.45099 6.28429 8.02017 7.49944 10.381 9.79088Z" fill="#493816"/> +<path d="M7.46405 3.99271C6.90855 3.19419 7.49876 2.847 8.26257 2.98587C7.53348 2.11791 7.98483 1.49297 9.13054 1.736C9.47773 1.80544 8.99167 2.39566 8.6792 2.39566C9.6166 3.09003 9.09582 3.85384 8.08898 3.68025C8.99167 4.8954 7.46405 4.58293 6.76967 4.65237C6.59608 5.55505 7.63764 6.59661 7.29045 6.59661C6.52664 6.59661 5.27677 3.71497 7.46405 3.99271Z" fill="#42ADE2"/> +<path d="M14.7556 5.65904C14.2348 5.90207 12.7766 3.61064 14.582 3.57592C13.5404 2.63852 13.6793 2.18718 15.0681 2.15246C13.471 0.555399 16.0055 -9.951e-05 16.2485 0.833149C16.3179 1.07618 15.4847 0.624836 15.2069 1.07618C14.8945 1.59696 17.1512 2.95099 14.825 2.84683C15.693 3.7148 15.7277 4.13142 14.3737 4.2703C14.5473 4.54805 15.1028 5.52017 14.7556 5.65904Z" fill="#FF8736"/> +<path d="M15.3457 11.0752L15.8665 10.6239C15.8665 10.6239 16.3525 11.353 16.6997 11.6307C16.9775 10.3808 16.908 9.65174 18.3315 10.485C17.533 8.33243 18.8523 9.13096 20.1369 9.72118C20.0674 9.16568 20.1369 9.23512 20.6924 9.06152C21.1784 10.9016 19.8591 10.3461 18.8176 9.7559C19.4425 11.4224 18.7829 11.3182 17.4635 10.7627C17.4288 11.4571 17.2205 12.2556 16.8039 12.3251C16.3178 12.464 15.3457 11.0752 15.3457 11.0752Z" fill="#ED4C5C"/> +<path d="M11.4569 5.93689C10.8319 6.77014 9.8251 7.22148 9.09601 7.95057C8.3322 8.71439 7.88086 10.7975 7.88086 10.7975C7.88086 10.7975 8.15861 8.61023 8.8877 7.77698C9.54736 7.01317 10.5195 6.45767 11.0403 5.58971C11.9429 3.99265 11.1097 1.90953 9.92926 0.694373C10.1723 0.486061 10.5195 0.208312 10.6931 0C11.8388 1.42347 12.8109 4.16624 11.4569 5.93689Z" fill="#C28FEF"/> +<path d="M12.533 7.70749C11.6303 8.36715 10.9706 9.33927 10.3457 10.242C9.79018 11.0405 8.01953 12.0473 8.01953 12.0473C8.01953 12.0473 9.68603 10.9016 10.2068 10.0684C10.8317 9.0268 11.4567 7.95052 12.4288 7.18671C14.373 5.69381 17.1853 5.83268 19.3725 6.63121C19.2337 6.94368 18.9906 7.60334 18.9906 7.60334C18.9906 7.60334 14.373 6.35346 12.533 7.70749Z" fill="#FF8736"/> +<path d="M16.387 7.53396C15.7968 8.29777 15.5191 9.23517 15.0677 10.1031C14.6511 10.9017 14.0956 11.6655 13.2971 12.0821C12.3944 12.5334 10.4154 12.3946 10.4154 12.3946C10.4154 12.3946 12.3944 12.3599 13.2276 11.8044C14.0609 11.2489 14.5122 10.2767 14.8247 9.37405C15.4496 7.63812 16.2134 5.76331 18.0188 4.9995C18.123 5.31196 18.366 5.97162 18.366 5.97162C18.366 5.97162 17.3592 6.24937 16.387 7.53396ZM0.419922 3.9319L1.40177 2.94971L2.38396 3.93155L1.40211 4.91409L0.419922 3.9319Z" fill="#42ADE2"/> +<path d="M1.79492 7.01212L2.77642 6.03027L3.75826 7.01212L2.77642 7.99396L1.79492 7.01212Z" fill="#FF8736"/> +<path d="M4.29102 2.36856L5.27286 1.38672L6.2547 2.36856L5.27286 3.35041L4.29102 2.36856Z" fill="#ED4C5C"/> +<path d="M15 14.1292L15.9818 13.147L16.9637 14.1292L15.9818 15.111L15 14.1292Z" fill="#C28FEF"/> +<path d="M12.8125 17.495L13.7943 16.5132L14.7765 17.4954L13.7943 18.4772L12.8125 17.495Z" fill="#ED4C5C"/> +<path d="M17.1094 18.2644L18.0912 17.2822L19.0731 18.2644L18.0912 19.2463L17.1094 18.2644Z" fill="#FF8736"/> +<path d="M18.0808 13.7941L19.0627 12.8122L20.0445 13.7941L19.0627 14.7763L18.0808 13.7941ZM16.4414 3.41041L17.4232 2.42822L18.4054 3.41041L17.4236 4.39226L16.4414 3.41041Z" fill="#42ADE2"/> +<path d="M5.91797 9.30167L6.90016 8.31982L7.882 9.30167L6.90016 10.2839L5.91797 9.30167Z" fill="#ED4C5C"/> +</svg> diff --git a/public/images/samples/category_food.svg b/public/images/samples/category_food.svg new file mode 100644 index 00000000..6e01ad29 --- /dev/null +++ b/public/images/samples/category_food.svg @@ -0,0 +1,7 @@ +<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.2688 15.6676C14.3189 15.6676 17.6021 12.3843 17.6021 8.33427C17.6021 4.2842 14.3189 1.00098 10.2688 1.00098C6.21877 1.00098 2.93555 4.2842 2.93555 8.33427C2.93555 12.3843 6.21877 15.6676 10.2688 15.6676Z" fill="#C3C5C7"/> +<path d="M10.2376 3.36764C7.37095 3.36764 5.0043 5.56763 4.9043 8.33428V8.16761C4.9043 5.3343 7.30428 3.00098 10.2376 3.00098C13.1709 3.00098 15.5709 5.30096 15.5709 8.16761V8.33428C15.4709 5.56763 13.1376 3.36764 10.2376 3.36764Z" fill="#80898E"/> +<path d="M10.2376 13.3006C13.1042 13.3006 15.4709 11.1006 15.5709 8.33398V8.50065C15.5709 11.334 13.1709 13.6673 10.2376 13.6673C7.30428 13.6673 4.9043 11.3673 4.9043 8.50065V8.33398C5.03763 11.1006 7.37095 13.3006 10.2376 13.3006Z" fill="white"/> +<path d="M0.502956 0.134264C0.569622 -0.165734 0.736287 0.134264 0.736287 0.134264C0.736287 0.134264 0.802954 3.36758 1.13629 3.40091C1.50295 3.46758 1.23628 0.067598 1.66962 0.00093169C2.06961 -0.0657346 1.83628 3.46758 2.20295 3.43424C2.56961 3.40091 2.63628 0.134264 2.63628 0.134264C2.63628 0.134264 2.80294 -0.165734 2.86961 0.134264C3.83627 3.96757 3.06961 5.53423 3.06961 5.53423C3.06961 5.53423 2.93627 5.86756 2.60294 5.86756C2.56961 5.86756 2.60294 14.9675 2.60294 16.2008C2.60294 16.8008 0.769621 16.7675 0.769621 16.2008C0.769621 14.9675 0.802954 5.86756 0.769621 5.86756C0.436289 5.86756 0.302957 5.53423 0.302957 5.53423C0.302957 5.53423 -0.497038 3.96757 0.502956 0.134264Z" fill="#80898E"/> +<path d="M19.802 0.000976562C19.402 0.000976562 17.6686 1.2343 17.6686 5.83428C17.6686 7.30093 18.4686 7.30093 18.4686 8.23426V16.4342C18.4686 16.4342 19.3353 17.0009 20.002 16.3675V0.134309C20.002 0.134309 20.002 0.000976562 19.802 0.000976562Z" fill="#80898E"/> +</svg> diff --git a/public/images/samples/category_hiking.svg b/public/images/samples/category_hiking.svg new file mode 100644 index 00000000..518d6bf1 --- /dev/null +++ b/public/images/samples/category_hiking.svg @@ -0,0 +1,25 @@ +<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M11.1772 15.9312C11.1772 15.9312 0.825168 19.0919 0.802824 19.3205C0.78048 19.5491 4.94673 21.3865 11.9094 21.2902C18.5506 21.1991 21.1167 19.5044 21.1614 19.3205C21.2061 19.1366 11.4058 15.8847 11.1772 15.9312Z" fill="#B9CE46"/> +<path d="M10.7008 7.24455L9.96 6.31299C9.96 6.31299 8.76375 7.56768 8.44063 7.90971C8.1175 8.25174 7.86828 8.44939 7.71359 8.7708C7.49188 9.22971 6.78891 13.1914 6.78891 13.1914L4.75563 15.2797C4.75563 15.2797 4.37234 15.0408 4.27781 15.1181C4.18328 15.1955 1.06891 18.908 1.06891 18.908L0.800781 19.3188C0.800781 19.3188 1.41953 19.4563 1.61031 19.4374C1.70312 19.4288 2.16031 19.3239 2.67766 19.2706C3.2225 19.2139 3.91859 19.2603 3.99594 19.2517C4.08359 19.2431 4.38609 19.1538 4.38609 19.1538L7.09141 17.5399L9.31375 16.9881L11.347 17.9008L15.3363 18.0916L17.5208 14.8242L12.7719 8.53533L10.7008 7.24455Z" fill="#9EA2A3"/> +<path d="M4.90829 16.8043C4.90829 16.8043 4.83438 16.5929 4.77938 16.4365C4.72438 16.2801 4.75704 15.2798 4.75704 15.2798C4.75704 15.2798 5.99625 16.012 6.13375 16.1323C6.27125 16.2526 7.49844 17.0174 7.49844 17.0174C7.49844 17.0174 8.37329 16.9074 8.6775 16.8885C8.98172 16.8696 9.50766 16.8971 9.50766 16.8971L9.30485 17.1928C9.30485 17.1928 7.32313 17.8373 6.9725 17.949C6.62188 18.059 4.37547 19.202 4.37891 19.159C4.38579 19.0696 4.96329 18.2429 4.96329 18.2429L4.90829 16.8043Z" fill="#717A7C"/> +<path d="M13.8764 17.782L5.4098 19.1192C5.4098 19.1192 5.00073 19.4819 5.04198 19.5781C5.08323 19.6744 6.64558 19.9648 7.18527 20.0336C7.72495 20.1023 11.4151 20.3103 11.8156 20.2828C12.216 20.2553 16.3084 20.0473 16.8756 19.9786C17.4428 19.9098 19.3489 19.7775 19.4743 19.7208C19.7167 19.6108 20.8287 19.0109 20.8287 19.0109C20.8287 19.0109 19.5843 17.0481 19.3351 16.5772C19.0859 16.108 18.6717 15.2641 18.3812 14.9736C18.0907 14.6831 17.8828 14.5594 17.8828 14.5594C17.8828 14.5594 17.4909 13.6484 17.0337 13.0675C16.5782 12.4866 16.0368 11.4691 15.8925 11.3247C15.3442 10.7781 15.2445 10.8039 15.2445 10.8039L15.5882 14.9461C15.5882 14.9461 14.9523 16.218 14.7306 16.5634C14.5123 16.9123 13.8764 17.782 13.8764 17.782Z" fill="#717A7C"/> +<path d="M10.8347 4.74728L10.668 8.11947L12.6291 9.33634C12.6291 9.33634 13.2186 10.8471 13.2461 10.9863C13.2736 11.1238 13.2203 11.4968 13.2753 11.5931C13.3303 11.6893 14.3461 12.3888 14.3856 12.3906C14.6108 12.4026 15.0766 12.3218 15.0491 12.2806C15.0216 12.2393 15.2347 11.3421 15.2347 11.3421C15.2347 11.3421 13.8872 9.15759 13.5967 8.54915C13.3062 7.94072 12.2148 6.36462 12.0894 6.10165C11.9639 5.83869 11.3709 4.96728 11.2455 4.82978C11.12 4.69228 10.9189 4.65103 10.8347 4.74728Z" fill="#717A7C"/> +<path d="M11.6904 11.1806C11.6904 11.1806 12.6168 9.65434 12.6443 9.42059C12.6718 9.18684 11.8984 7.76199 11.7042 7.2498C11.51 6.73762 10.9995 5.68746 10.9445 5.54996C10.8895 5.41246 10.8345 4.74902 10.8345 4.74902C10.8345 4.74902 10.4478 5.16324 10.3086 5.49496C10.1711 5.82668 9.65028 6.64309 9.65028 6.64309C9.65028 6.64309 9.97685 8.53715 10.1023 9.35184C10.2261 10.1682 10.3189 11.239 10.3 11.2786C10.1814 11.5192 9.38388 13.4579 9.38388 13.4579C9.38388 13.4579 9.28075 14.3981 9.377 14.4943C9.47325 14.5906 10.0318 14.7178 10.0748 14.6525C10.159 14.527 10.1573 14.0509 10.1573 14.0509C10.1573 14.0509 11.7076 11.9575 11.7575 11.8543C11.7764 11.8148 11.6904 11.1806 11.6904 11.1806Z" fill="#C0C0C0"/> +<path d="M8.53234 11.33C8.52719 11.122 8.22297 10.1354 8.16797 9.91373C8.11297 9.69201 7.99609 8.59717 7.84313 8.59717C7.69188 8.59717 6.99062 10.5256 6.92016 10.7061C6.85141 10.8865 5.87 13.0006 5.74453 13.2498C5.62078 13.499 5.05359 14.5767 4.94359 14.7572C4.83359 14.9376 4.6875 15.2436 4.6875 15.2436L7.49594 17.019L8.51 16.9039C8.51 16.9039 7.91703 15.3106 7.77781 14.9514C7.63859 14.5922 7.47359 14.0112 7.47359 14.0112C7.47359 14.0112 7.795 13.2412 8.00469 12.6878C8.21609 12.1309 8.53922 11.5362 8.53234 11.33Z" fill="#C0C0C0"/> +<path d="M4.3523 15.1198C4.35917 15.1456 4.39527 15.7936 4.37636 16.1803C4.35745 16.5687 4.28183 16.9572 4.28183 16.9572L3.14574 18.4353C3.14574 18.4353 1.09011 19.2311 0.96636 19.2689C0.84261 19.3067 0.803079 19.3204 0.803079 19.3204C0.803079 19.3204 0.545266 19.164 1.31699 18.3219C2.31386 17.2339 3.58917 15.7437 3.75074 15.5564C4.03777 15.2229 4.33339 15.0425 4.3523 15.1198Z" fill="#C0C0C0"/> +<path d="M6.84038 15.5701C6.72351 15.5581 6.57569 15.9482 6.49663 16.2387C6.43991 16.4432 6.07382 17.4796 6.03085 17.6807C5.98616 17.8835 5.75929 18.4817 5.82116 18.5092C5.88304 18.5349 6.36257 18.5693 6.61866 18.516C6.87304 18.4628 7.42991 18.0159 7.42991 17.911C7.42991 17.8062 7.18929 16.7199 7.16694 16.591C7.10507 16.2215 7.02257 15.589 6.84038 15.5701Z" fill="#367C2D"/> +<path d="M18.3405 17.1564C18.2374 17.1135 17.9745 18.2771 17.9195 18.6878C17.8645 19.0986 17.7184 19.8789 17.7562 19.9563C17.8662 20.1746 19.0384 20.0302 19.1518 19.8428C19.1845 19.7896 19.0195 18.9147 18.9009 18.5452C18.7393 18.0399 18.607 17.2682 18.3405 17.1564Z" fill="#367C2D"/> +<path d="M20.3943 15.6905C20.2327 15.6974 20.0608 17.1085 19.9543 17.4162C19.834 17.7651 19.4318 19.4168 19.5985 19.6058C19.7652 19.7949 20.4029 19.6454 20.64 19.5766C20.8686 19.5113 21.0663 19.4013 21.1213 19.2793C21.1763 19.1572 21.0457 18.1724 20.8875 17.4849C20.726 16.7888 20.6486 15.6785 20.3943 15.6905Z" fill="#367C2D"/> +<path d="M5.40811 19.1209C5.40811 19.1209 5.85327 19.2893 7.3778 19.3838C8.90233 19.4784 9.6517 19.4698 9.6517 19.4698L13.1339 18.961L13.9245 17.7098C13.9245 17.7098 12.8726 17.6702 12.314 17.6513C11.7555 17.6324 10.9219 17.629 10.884 17.5259C10.8462 17.421 11.8242 16.7112 12.0992 16.5702C12.3742 16.4276 13.0376 16.352 13.1889 16.1921C13.3401 16.0305 15.2514 14.9529 15.4869 14.9443C15.724 14.934 16.4631 15.3895 16.604 15.3413C16.7467 15.2932 16.1125 13.6157 16.0283 13.3012C16.0214 13.2737 15.6862 11.6391 15.6759 11.6082C15.5969 11.3659 15.3545 10.7368 15.2015 10.8124C15.0503 10.888 14.7942 11.4655 14.6051 12.043C14.4161 12.6205 14.3026 12.9248 14.2081 13.0657C14.1136 13.2066 13.0153 13.9096 12.8623 14.0695C12.7111 14.231 12.2556 14.5713 11.9806 14.6848C11.7056 14.7982 11.4409 14.7982 11.2415 14.9787C11.0422 15.1591 10.7964 15.472 10.5214 15.7641C10.2464 16.058 9.6878 16.7318 9.50389 16.8968C9.31998 17.0618 9.15498 17.2216 9.15498 17.2216C9.15498 17.2216 7.82639 17.598 7.37951 17.8146C6.93608 18.0329 5.29295 19.0916 5.40811 19.1209Z" fill="#C0C0C0"/> +<path d="M13.1516 18.2239C13.0279 18.2342 12.8543 19.1623 12.7924 19.3685C12.758 19.4854 12.471 20.2846 12.5483 20.4187C12.703 20.6937 13.9749 20.6198 14.0316 20.4754C14.0866 20.331 13.669 19.3651 13.5916 19.1864C13.5125 19.011 13.3338 18.2084 13.1516 18.2239Z" fill="#367C2D"/> +<path d="M19.2137 8.94088C19.0676 9.08697 19.0625 9.31901 19.2241 9.45135C19.3667 9.56994 19.6022 9.4926 19.6898 9.38604C19.7775 9.27947 19.7672 9.04744 19.6503 8.93057C19.5334 8.81369 19.3014 8.85322 19.2137 8.94088Z" fill="white"/> +<path opacity="0.5" d="M19.2616 11.115C19.1052 11.2869 19.1567 11.543 19.3011 11.6375C19.4455 11.7321 19.662 11.7235 19.7686 11.5929C19.8631 11.476 19.8735 11.2422 19.7291 11.0979C19.6036 10.9724 19.363 11.0033 19.2616 11.115Z" fill="white"/> +<path opacity="0.6" d="M14.7811 5.51051C14.7365 5.65317 14.8258 5.81473 14.9616 5.83879C15.1043 5.86457 15.2504 5.82332 15.2899 5.68754C15.3294 5.55004 15.2796 5.37817 15.0836 5.34379C14.8877 5.30942 14.8035 5.43317 14.7811 5.51051Z" fill="white"/> +<path d="M16.2483 7.9252C16.2483 7.9252 16.3755 7.4577 16.4683 7.44223C16.5612 7.42677 16.7468 7.94411 16.7468 7.94411C16.7468 7.94411 17.2091 7.95958 17.2246 8.03177C17.2401 8.10567 16.898 8.38239 16.898 8.38239C16.898 8.38239 17.0252 8.81552 16.9719 8.87052C16.9187 8.9238 16.4941 8.65052 16.4941 8.65052C16.4941 8.65052 16.1143 8.97192 16.0266 8.91348C15.939 8.85505 16.1005 8.37208 16.1005 8.37208C16.1005 8.37208 15.7396 8.11427 15.7344 8.02661C15.7276 7.93895 16.2483 7.9252 16.2483 7.9252Z" fill="white"/> +<path d="M5.76541 6.63805C5.76541 6.63805 5.93213 6.15852 6.03353 6.15336C6.13322 6.1482 6.27931 6.63289 6.27931 6.63289C6.27931 6.63289 6.77431 6.63805 6.80869 6.71024C6.85166 6.80305 6.49072 7.11758 6.49072 7.11758C6.49072 7.11758 6.60759 7.58508 6.55259 7.6418C6.49072 7.70367 6.06275 7.45789 6.06275 7.45789C6.06275 7.45789 5.62275 7.76383 5.52822 7.68133C5.44572 7.60914 5.61759 7.11242 5.61759 7.11242C5.61759 7.11242 5.20509 6.81164 5.22744 6.72742C5.25666 6.61055 5.76541 6.63805 5.76541 6.63805Z" fill="white"/> +<path opacity="0.5" d="M2.03703 7.92499C1.93391 7.91983 1.79297 8.02296 1.79297 8.19999C1.79297 8.33061 1.91844 8.4389 2.02672 8.4389C2.18313 8.4389 2.29141 8.3203 2.28625 8.18452C2.27938 8.00749 2.14531 7.93015 2.03703 7.92499Z" fill="white"/> +<path d="M3.17422 10.4893C3.18453 10.6852 3.2825 10.8519 3.53687 10.8451C3.79125 10.8382 4.00093 10.448 3.75859 10.2194C3.51625 9.99083 3.16047 10.2263 3.17422 10.4893Z" fill="white"/> +<path d="M1.48713 12.8873C1.60744 13.0214 1.89619 12.9681 1.90307 12.7326C1.90994 12.5178 1.80166 12.4164 1.60057 12.4439C1.40119 12.4714 1.34104 12.724 1.48713 12.8873Z" fill="white"/> +<path d="M7.89096 15.9587C7.78956 15.9931 7.66409 16.3849 7.54549 16.7906C7.46987 17.0467 7.24987 17.8149 7.30315 17.8527C7.35643 17.8906 7.88753 17.9163 8.09721 17.7874C8.3069 17.6585 8.45987 17.5468 8.48737 17.4712C8.51487 17.3956 8.27424 16.7287 8.18143 16.4846C8.10924 16.3007 7.99753 15.9209 7.89096 15.9587Z" fill="#367C2D"/> +<path opacity="0.5" d="M6.10728 3.45117C5.95088 3.62305 6.00244 3.87914 6.14682 3.97367C6.29119 4.0682 6.50775 4.05961 6.61432 3.92899C6.70885 3.81211 6.71916 3.57836 6.57478 3.43399C6.44932 3.31024 6.20697 3.34117 6.10728 3.45117Z" fill="white"/> +</svg> diff --git a/public/images/samples/category_movie.svg b/public/images/samples/category_movie.svg new file mode 100644 index 00000000..fd9a5881 --- /dev/null +++ b/public/images/samples/category_movie.svg @@ -0,0 +1,12 @@ +<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M21.8847 14.2602L21.5769 13.4053C21.3375 13.5079 21.0639 13.3711 20.9955 13.1317C20.8929 12.8924 21.0297 12.6188 21.2691 12.5504L20.9271 11.6271C20.6878 11.7296 20.4142 11.5929 20.3458 11.3535C20.2432 11.1141 20.38 10.8405 20.6194 10.7721L20.3116 9.9172C20.0722 10.0198 19.7986 9.883 19.7302 9.64363C19.6277 9.40425 19.7644 9.13067 20.0038 9.06227L19.696 8.20735C19.4567 8.27574 19.2173 8.17315 19.1147 7.96797C18.1914 8.07056 17.268 7.5576 16.9603 6.63428L4.17055 11.2167C4.54672 12.2768 3.99956 13.4395 2.93945 13.8499L5.43584 20.6551C6.49595 20.2789 7.65866 20.8261 8.06902 21.8862L20.8246 17.2354C20.4826 16.3121 20.8587 15.3203 21.6453 14.8074C21.5427 14.6022 21.6453 14.3286 21.8847 14.2602Z" fill="#FBBF67"/> +<path d="M19.3542 15.9698L8.34271 19.9709C7.76135 20.176 7.11161 19.8683 6.87223 19.2869L4.92299 13.918C4.71781 13.3366 5.02558 12.6869 5.60694 12.4475L16.6184 8.44643C17.1998 8.24125 17.8495 8.54902 18.0889 9.13037L20.0381 14.4993C20.2433 15.1149 19.9355 15.7646 19.3542 15.9698ZM5.81212 13.0288C5.50434 13.1314 5.36756 13.4734 5.47015 13.747L7.41938 19.1159C7.52198 19.4237 7.86395 19.5605 8.13752 19.4579L19.149 15.4568C19.4568 15.3543 19.5936 15.0123 19.491 14.7387L17.5417 9.36975C17.4391 9.06198 17.0972 8.92519 16.8236 9.02778L5.81212 13.0288Z" fill="#FF5555"/> +<path d="M10.5672 14.7392L10.2595 14.8418C10.2253 14.8418 10.1911 14.8418 10.1911 14.8076L10.0201 14.4656L9.81491 14.534L9.9175 14.9102C9.9175 14.9444 9.9175 14.9786 9.8833 14.9786L9.57553 15.0812C9.54133 15.0812 9.54133 15.0812 9.50713 15.047L8.92578 12.6874C8.92578 12.6532 8.92578 12.619 8.95998 12.619L9.40454 12.448C9.43874 12.448 9.47294 12.448 9.47294 12.4822L10.5672 14.6708C10.6014 14.705 10.6014 14.7392 10.5672 14.7392ZM9.8491 14.0895L9.43874 13.2003H9.40454L9.67812 14.1237L9.8491 14.0895ZM11.217 12.6874L11.6274 13.8501C11.6957 14.0895 11.5932 14.3288 11.3538 14.4314L10.8408 14.6024C10.8066 14.6024 10.7724 14.6024 10.7724 14.5682L10.0885 12.6532C10.0885 12.619 10.0885 12.5848 10.1227 12.5848L10.6356 12.4138C10.875 12.3454 11.1486 12.448 11.217 12.6874ZM10.8408 12.8584C10.8408 12.8242 10.7724 12.79 10.7382 12.79L10.6014 12.8242L11.0802 14.1237L11.1828 14.0895C11.217 14.0895 11.2512 14.0211 11.217 13.9869L10.8408 12.8584ZM12.6533 11.7299L13.3714 13.6449C13.3714 13.6791 13.3714 13.7133 13.3372 13.7133L13.0294 13.8159C12.9952 13.8159 12.961 13.8159 12.961 13.7817L12.6191 12.8926L12.6875 13.7817C12.6875 13.8159 12.6533 13.8159 12.6533 13.7817L12.1403 13.0635L12.4823 13.9527C12.4823 13.9869 12.4823 14.0211 12.4481 14.0211L12.1403 14.1237C12.1061 14.1237 12.0719 14.1237 12.0719 14.0895L11.3538 12.1744C11.3538 12.1402 11.3538 12.106 11.388 12.106L11.6616 12.0034C11.6957 12.0034 11.7299 12.0034 11.7299 12.0376L12.3797 12.9952L12.2771 11.8666C12.2771 11.8324 12.2771 11.7983 12.3113 11.7983L12.5849 11.6957C12.6191 11.6957 12.6533 11.6957 12.6533 11.7299ZM14.0553 13.4055C14.0553 13.4397 14.0554 13.4739 14.0212 13.4739L13.7134 13.5765C13.6792 13.5765 13.645 13.5765 13.645 13.5423L12.961 11.6273C12.961 11.5931 12.961 11.5589 12.9952 11.5589L13.303 11.4563C13.3372 11.4563 13.3714 11.4563 13.3714 11.4905L14.0553 13.4055ZM14.5683 11.0459L14.6709 11.3537C14.6709 11.3879 14.6709 11.4221 14.6367 11.4221L14.3973 11.5247L14.9787 13.0977C14.9787 13.1319 14.9787 13.1661 14.9445 13.1661L14.6367 13.2687C14.6025 13.2687 14.5683 13.2687 14.5683 13.2345L14.0212 11.6273L13.7818 11.7299C13.7476 11.7299 13.7134 11.7299 13.7134 11.6957L13.6108 11.3879C13.6108 11.3537 13.6108 11.3195 13.645 11.3195L14.4999 11.0117C14.5341 11.0117 14.5683 11.0117 14.5683 11.0459ZM12.2087 17.2014L12.0719 17.2356C11.8325 17.304 11.5932 17.2014 11.4906 16.962L10.9434 15.389C10.875 15.1496 10.9776 14.9102 11.217 14.8076L11.3538 14.7734C11.5932 14.705 11.8325 14.8076 11.9351 15.047L12.5165 16.62C12.5849 16.8252 12.4481 17.0988 12.2087 17.2014ZM11.4222 15.1496C11.3538 15.1838 11.3196 15.218 11.3538 15.2864L11.9009 16.8252C11.9009 16.8594 11.9693 16.8936 12.0035 16.8594H12.0377C12.0719 16.8594 12.1061 16.791 12.1061 16.7568L11.559 15.218C11.5248 15.1496 11.4564 15.1496 11.4222 15.1496ZM13.2688 14.534L13.987 16.4491C13.987 16.4833 13.987 16.5175 13.9528 16.5175L13.7476 16.5859C13.7134 16.5859 13.6792 16.5859 13.6792 16.5517L12.9952 15.7993L13.303 16.6884C13.303 16.7226 13.303 16.7568 13.2688 16.7568L12.961 16.8594C12.9268 16.8594 12.8926 16.8594 12.8926 16.8252L12.1745 14.9102C12.1745 14.876 12.1745 14.8418 12.2087 14.8418L12.4481 14.7734C12.4823 14.7734 12.5165 14.7734 12.5165 14.8076L13.2346 15.6625L12.8926 14.6708C12.8926 14.6366 12.8926 14.6024 12.9268 14.6024L13.2346 14.4998C13.2346 14.4998 13.2688 14.4998 13.2688 14.534ZM14.9787 15.7651L15.0813 16.0729C15.0813 16.1071 15.0813 16.1413 15.0471 16.1413L14.3289 16.4149C14.2947 16.4149 14.2605 16.4149 14.2605 16.3807L13.5424 14.4656C13.5424 14.4314 13.5424 14.3972 13.5766 14.3972L14.2947 14.1237C14.3289 14.1237 14.3631 14.1237 14.3631 14.1579L14.4657 14.4656C14.4657 14.4998 14.4657 14.534 14.4315 14.534L14.0553 14.6708L14.1921 15.047L14.5341 14.9102C14.5683 14.9102 14.6025 14.9102 14.6025 14.9444L14.7051 15.2522C14.7051 15.2864 14.7051 15.3206 14.6709 15.3206L14.3289 15.4573L14.4999 15.9019L14.8761 15.7651C14.9445 15.7309 14.9787 15.7309 14.9787 15.7651Z" fill="#89664C"/> +<g opacity="0.5"> +<path d="M8.68652 18.7401L19.0825 10.0198C18.5695 9.40426 18.5011 8.61773 18.7747 7.93379C17.9539 7.89959 17.2358 7.38663 16.928 6.6001L4.1725 11.2167C4.54867 12.2768 4.00152 13.4395 2.94141 13.8499L3.72794 16.0385L5.77977 18.5007C6.66889 17.7484 7.93419 17.8852 8.68652 18.7401Z" fill="#947151"/> +<path opacity="0.5" d="M8.68652 18.7401L19.0825 10.0198C18.5695 9.40426 18.5011 8.61773 18.7747 7.93379C17.9539 7.89959 17.2358 7.38663 16.928 6.6001L4.1725 11.2167C4.54867 12.2768 4.00152 13.4395 2.94141 13.8499L3.72794 16.0385L5.77977 18.5007C6.66889 17.7484 7.93419 17.8852 8.68652 18.7401Z" fill="#947151"/> +</g> +<path d="M17.9535 5.50574L17.3721 4.7876C17.167 4.95858 16.8934 4.92439 16.7224 4.7192C16.5514 4.51402 16.5856 4.24044 16.7908 4.06946L16.2094 3.35132C16.0043 3.5223 15.7307 3.48811 15.5597 3.28292C15.3887 3.07774 15.4229 2.80416 15.6281 2.63318L15.0467 1.91504C14.8416 2.08602 14.568 2.05183 14.397 1.84664C14.1576 1.70986 14.1918 1.43628 14.3628 1.26529L13.7814 0.547154C13.5763 0.71814 13.3027 0.683943 13.1317 0.512957C12.311 0.923322 11.2851 0.752337 10.6353 0L0.23938 8.72027C0.991717 9.60939 0.854928 10.9089 0 11.627L4.65081 17.2012C5.50574 16.483 6.80523 16.5856 7.52337 17.4405L17.9193 8.72027C17.3037 7.96793 17.3037 6.90782 17.8509 6.15548C17.7483 5.9503 17.7825 5.67672 17.9535 5.50574Z" fill="#FBBF67"/> +<path d="M16.1419 8.00207L7.1823 15.5254C6.70354 15.9358 5.9854 15.8674 5.57503 15.3886L1.91594 11.0114C1.50557 10.5327 1.57397 9.81452 2.05273 9.40415L11.0124 1.88078C11.4911 1.47042 12.2093 1.53881 12.6196 2.01757L16.2787 6.3948C16.6891 6.87356 16.6207 7.5917 16.1419 8.00207ZM2.4289 9.84871C2.18952 10.0539 2.15532 10.3959 2.3605 10.6352L6.01959 15.0467C6.22478 15.2861 6.56675 15.3203 6.80613 15.1151L15.7658 7.5917C16.0052 7.38652 16.0394 7.04455 15.8342 6.80517L12.1751 2.39374C11.9699 2.15436 11.6279 2.12016 11.3885 2.32534L2.4289 9.84871Z" fill="#FF5555"/> +<path d="M7.4894 9.84867L7.25002 10.0539C7.21582 10.088 7.18162 10.0539 7.18162 10.0539L6.90805 9.78027L6.70286 9.91706L6.94224 10.2248V10.2932L6.70286 10.4984C6.66867 10.5326 6.66867 10.4984 6.63447 10.4984L5.30078 8.48078V8.41239L5.67695 8.10461C5.71115 8.07042 5.74534 8.07042 5.74534 8.10461L7.4894 9.78027V9.84867ZM6.60027 9.4725L5.91633 8.75436L5.88213 8.78856L6.46348 9.57509L6.60027 9.4725ZM7.38681 7.69425L8.17334 8.65177C8.34433 8.85695 8.31013 9.13053 8.10495 9.30151L7.69458 9.64349C7.66038 9.67768 7.62619 9.64349 7.62619 9.64349L6.2925 8.07042C6.2583 8.03622 6.2925 8.00202 6.2925 8.00202L6.70286 7.66005C6.94224 7.48907 7.21582 7.48907 7.38681 7.69425ZM7.07903 7.96783C7.04483 7.93363 6.97644 7.93363 6.94224 7.96783L6.83965 8.03622L7.72878 9.09633L7.83137 9.02794C7.86557 8.99374 7.86557 8.95954 7.83137 8.89115L7.07903 7.96783ZM8.41272 6.29217L9.74641 7.86523C9.7806 7.89943 9.74641 7.93363 9.74641 7.93363L9.47283 8.13881C9.43863 8.17301 9.40444 8.13881 9.40444 8.13881L8.78889 7.42067L9.16506 8.2414C9.16506 8.2756 9.16506 8.2756 9.13086 8.2756L8.41272 7.76264L9.02827 8.48078C9.06247 8.51498 9.02827 8.54918 9.02827 8.54918L8.75469 8.75436C8.72049 8.78856 8.6863 8.75436 8.6863 8.75436L7.35261 7.18129C7.31841 7.14709 7.35261 7.1129 7.35261 7.1129L7.59199 6.90772C7.62619 6.87352 7.66038 6.90772 7.66038 6.90772L8.58371 7.55746L8.10495 6.53155V6.46315L8.34433 6.25797C8.37852 6.29217 8.41272 6.29217 8.41272 6.29217ZM10.3278 7.38647C10.362 7.42067 10.3278 7.45487 10.3278 7.45487L10.0884 7.66005C10.0542 7.69425 10.02 7.66005 10.02 7.66005L8.6863 6.08698C8.6521 6.05279 8.6863 6.01859 8.6863 6.01859L8.92568 5.81341C8.95987 5.77921 8.99407 5.81341 8.99407 5.81341L10.3278 7.38647ZM9.98579 4.99268L10.191 5.23206C10.2252 5.26625 10.191 5.30045 10.191 5.30045L9.98579 5.47144L11.0801 6.77093C11.1143 6.80512 11.0801 6.83932 11.0801 6.83932L10.8407 7.0445H10.7723L9.67801 5.74501L9.47283 5.916C9.43863 5.95019 9.40444 5.916 9.40444 5.916L9.19925 5.67662C9.16506 5.64242 9.19925 5.60822 9.19925 5.60822L9.91739 5.02687C9.91739 4.99268 9.95159 4.99268 9.98579 4.99268ZM9.8832 11.5927L9.78061 11.6953C9.57542 11.8663 9.30185 11.8321 9.13086 11.6269L8.07075 10.3616C7.89976 10.1564 7.93396 9.88286 8.13914 9.71188L8.24173 9.60929C8.44692 9.4383 8.72049 9.4725 8.89148 9.67768L9.91739 10.943C10.0884 11.1482 10.0542 11.4217 9.8832 11.5927ZM8.41272 9.95126C8.34433 9.98546 8.34433 10.0539 8.37852 10.088L9.43863 11.3191C9.47283 11.3533 9.50703 11.3533 9.57542 11.3191L9.60962 11.2849C9.64382 11.2508 9.64382 11.1824 9.60962 11.1482L8.54951 9.95126C8.51531 9.91706 8.44692 9.91706 8.41272 9.95126ZM9.95159 8.72016L11.2853 10.2932C11.3195 10.3274 11.2853 10.3616 11.2853 10.3616L11.1143 10.4984C11.0801 10.5326 11.0459 10.5326 11.0459 10.4984L10.1568 10.0197L10.7723 10.7378C10.8065 10.772 10.7723 10.8062 10.7723 10.8062L10.5329 11.0114C10.4987 11.0456 10.4645 11.0114 10.4645 11.0114L9.13086 9.4383C9.09666 9.40411 9.13086 9.36991 9.13086 9.36991L9.30185 9.23312C9.33604 9.19892 9.37024 9.19892 9.37024 9.23312L10.3278 9.78027L9.64382 8.99374C9.60962 8.95954 9.64382 8.92535 9.64382 8.92535L9.8832 8.72016H9.95159ZM11.9692 9.30151L12.1744 9.54089C12.2086 9.57509 12.1744 9.60929 12.1744 9.60929L11.5931 10.1222C11.5589 10.1564 11.5247 10.1222 11.5247 10.1222L10.191 8.54918C10.1568 8.51498 10.191 8.48078 10.191 8.48078L10.7723 7.96783C10.8065 7.93363 10.8407 7.96783 10.8407 7.96783L11.0459 8.20721C11.0801 8.2414 11.0459 8.2756 11.0459 8.2756L10.7381 8.54918L11.0117 8.85695L11.2853 8.61757C11.3195 8.58337 11.3537 8.61757 11.3537 8.61757L11.5589 8.85695C11.5931 8.89115 11.5589 8.92535 11.5589 8.92535L11.2853 9.16472L11.5931 9.54089L11.9008 9.26732C11.935 9.26732 11.9692 9.26732 11.9692 9.30151Z" fill="#89664C"/> +</svg> diff --git a/public/images/samples/category_shopping.svg b/public/images/samples/category_shopping.svg new file mode 100644 index 00000000..fca75581 --- /dev/null +++ b/public/images/samples/category_shopping.svg @@ -0,0 +1,20 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0.310547 10.9967L0.619918 0L8.15733 0.703117L7.65108 11.3061L0.310547 10.9967Z" fill="#ED4C5C"/> +<path d="M8.01514 5.06244L8.07139 3.65621L5.37143 3.43121L5.51205 0.309373L3.74019 0.140625L3.6277 2.53122L3.59957 3.29059L0.393359 3.03747L0.365234 4.64057L3.57145 4.83744L3.37457 11.278L5.1183 11.3624L5.31518 4.92182L8.01514 5.06244Z" fill="#FCBE10"/> +<path d="M2.98123 3.74072C2.98123 3.74072 2.86873 5.51258 1.54688 6.52506L2.69999 6.63756L2.55936 8.0438C2.55936 8.0438 3.90935 6.46882 4.13434 3.85322L2.98123 3.74072ZM5.93432 4.02197C5.93432 4.02197 5.70933 5.79382 6.83431 7.03131L5.6812 6.91881L5.54058 8.32504C5.54058 8.32504 4.49996 6.52506 4.75309 3.90947L5.93432 4.02197Z" fill="#FFCE31"/> +<path d="M4.33082 3.96534C4.30269 4.41534 3.7402 4.80908 3.12146 4.83721L2.61521 4.86533C1.99647 4.89346 1.60272 4.66846 1.74335 4.33097C1.88397 3.99347 1.94022 3.48723 1.85585 3.14973C1.77147 2.81223 2.19334 2.64349 2.81208 2.78411L3.2902 2.89661C3.90895 3.03723 4.35894 3.51535 4.33082 3.96534Z" fill="#FFE62E"/> +<path d="M1.91172 4.3874C1.85547 4.41552 1.91172 4.47177 1.91172 4.4999C1.96797 4.55615 2.10859 4.64052 2.36171 4.66864H2.61484L3.12108 4.64052C3.45858 4.61239 3.79607 4.47177 3.99294 4.2749C3.99294 4.30302 2.53046 3.88115 1.91172 4.3874Z" fill="#FFCE31"/> +<path d="M4.55594 3.9656C4.52781 4.4156 4.97781 4.89372 5.56842 5.03434L6.04654 5.14684C6.63716 5.28746 7.08716 5.11872 7.00278 4.78122C6.91841 4.44372 6.97466 3.90936 7.11528 3.59998C7.2559 3.29061 6.86216 3.03749 6.24342 3.06561L5.73717 3.09374C5.14655 3.14999 4.61219 3.51561 4.55594 3.9656Z" fill="#FFE62E"/> +<path d="M6.86292 4.83753C6.91917 4.89378 6.8348 4.9219 6.8348 4.95003C6.77855 5.00628 6.6098 5.06253 6.35668 5.0344C6.27231 5.0344 6.18793 5.00628 6.10356 5.00628L5.62544 4.89378C5.28794 4.8094 5.0067 4.61253 4.83795 4.38753C4.83795 4.35941 6.35668 4.24691 6.86292 4.83753ZM4.38795 3.82504C4.38795 3.82504 4.21921 3.93754 3.90983 3.60004C3.54421 3.2063 2.86922 3.62817 3.65671 3.90941C4.07858 4.05004 4.38795 3.82504 4.38795 3.82504ZM4.52858 3.85317C4.52858 3.85317 4.6692 3.99379 5.06295 3.71254C5.51294 3.40317 6.07543 3.90941 5.25982 4.05004C4.80982 4.10629 4.52858 3.85317 4.52858 3.85317Z" fill="#FFCE31"/> +<path d="M4.38755 4.58441C4.05005 4.55628 3.96568 4.78128 4.02193 3.93754C4.1063 3.0938 4.16255 3.34692 4.50005 3.37505C4.83754 3.40317 4.92192 3.17818 4.86567 4.02192C4.80942 4.86566 4.72504 4.61253 4.38755 4.58441Z" fill="#FFCE31"/> +<path d="M4.38707 4.58449C4.13395 4.55636 4.02145 4.80949 4.10583 3.93762C4.1902 3.06576 4.21832 3.31888 4.49957 3.347C4.75269 3.37513 4.86519 3.12201 4.78082 3.99387C4.69644 4.86574 4.66832 4.61261 4.38707 4.58449Z" fill="#FFE62E"/> +<path d="M10.9121 3.45933L12.2621 0L17.3527 1.57498L16.5652 4.38745L10.9121 3.45933Z" fill="#C28FEF"/> +<path d="M12.7969 3.76891L14.5687 4.05015L15.5531 0.984564L13.8656 0.450195L12.7969 3.76891Z" fill="#FFE62E"/> +<path d="M9.11133 3.1499V8.63421L17.9987 8.54984V3.1499H9.11133Z" fill="#42ADE2"/> +<path d="M9.1117 3.1499L7.62109 3.74052V8.63421H9.1117V3.1499Z" fill="#0071BC"/> +<path d="M4.49997 17.9999L2.25 16.8749V7.3125H4.49997V17.9999Z" fill="#3E4347"/> +<path d="M2.24997 16.8749L0 17.9999V7.3125H2.24997V16.8749ZM4.49995 7.3125H17.9998V17.9999H4.49995V7.3125Z" fill="#62727A"/> +<path d="M8.99999 10.687C9.46597 10.687 9.84373 10.3092 9.84373 9.84325C9.84373 9.37727 9.46597 8.99951 8.99999 8.99951C8.53401 8.99951 8.15625 9.37727 8.15625 9.84325C8.15625 10.3092 8.53401 10.687 8.99999 10.687Z" fill="#3E4347"/> +<path d="M14.625 10.687C15.091 10.687 15.4687 10.3092 15.4687 9.84325C15.4687 9.37727 15.091 8.99951 14.625 8.99951C14.159 8.99951 13.7812 9.37727 13.7812 9.84325C13.7812 10.3092 14.159 10.687 14.625 10.687Z" fill="#3E4347"/> +<path d="M8.71875 9.84355V12.7966C8.71875 14.681 9.81561 16.2279 11.8125 16.3122C12.8531 16.3403 13.7812 15.7497 14.3999 14.9341C14.8499 14.3154 14.9062 13.556 14.9062 12.7966V9.84355C14.9062 9.47793 14.3437 9.47793 14.3437 9.84355V13.4154C14.2874 14.7654 13.0781 15.7216 11.8125 15.7497C10.575 15.7779 9.59061 14.8497 9.33749 13.6966C9.22499 13.2185 9.28124 12.656 9.28124 12.1779V9.84355C9.28124 9.47793 8.71875 9.47793 8.71875 9.84355Z" fill="#D0D0D0"/> +</svg> diff --git a/public/images/samples/category_tour.svg b/public/images/samples/category_tour.svg new file mode 100644 index 00000000..7061d097 --- /dev/null +++ b/public/images/samples/category_tour.svg @@ -0,0 +1,9 @@ +<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.62891 3.36929L4.17691 0.821289L4.7973 1.44168L2.2493 3.98968L1.62891 3.36929ZM6.08102 4.01005L8.62933 1.46268L9.24972 2.08307L6.70141 4.63044L6.08102 4.01005ZM14.8195 16.5611L17.3681 14.0137L17.9885 14.6345L15.4399 17.1818L14.8195 16.5611ZM14.1831 12.0814L16.7317 9.53406L17.3521 10.1548L14.8032 12.7021L14.1831 12.0814Z" fill="#ACB8BF"/> +<path d="M17.0416 18.3926L15.569 5.20139L13.595 3.22741L0.403805 1.75476C-0.222856 1.69209 -0.0975235 3.25874 0.623136 3.60341L10.5557 8.24069L15.193 18.1733C15.5377 18.8939 17.1043 19.0193 17.0416 18.3926Z" fill="#42ADE2"/> +<path d="M18.5759 1.91173C19.2652 0.564407 18.2312 -0.469583 16.8839 0.219744C15.1606 1.09707 12.6226 3.07105 10.0533 5.60902C6.04265 9.61965 3.47335 13.5989 4.31934 14.4763C5.16533 15.3223 9.17596 12.753 13.1866 8.74232C15.7246 6.20435 17.6985 3.63504 18.5759 1.91173Z" fill="#DAE3EA"/> +<path d="M6.38868 18.2364L5.88735 13.5991L5.19802 12.9098L0.560736 12.4085C0.341405 12.3771 0.372738 12.9411 0.623402 13.0665L4.10137 14.6958L5.73068 18.1738C5.85602 18.4244 6.42001 18.4558 6.38868 18.2364Z" fill="#42ADE2"/> +<path d="M5.69889 13.8497C4.2889 15.2597 3.00425 16.231 2.81625 16.0117C2.62825 15.8237 3.59958 14.5077 4.97823 13.0977C6.38821 11.6877 7.67287 10.7164 7.8922 10.9357C8.04887 11.1237 7.07754 12.4397 5.69889 13.8497Z" fill="#ACB8BF"/> +<path d="M18.1069 2.41324C18.2636 1.84924 18.2009 1.31658 17.8563 0.940584C17.5116 0.595921 16.9476 0.501921 16.4149 0.68992L15.3496 1.34791C15.8823 1.15991 16.6656 1.44191 17.0103 1.78658C17.3863 2.16257 17.6369 2.91456 17.4489 3.44723L18.1069 2.41324Z" fill="#3E4347"/> +<path d="M16.1836 2.41132L17.9552 0.638184L18.1548 0.837462L16.3829 2.61091L16.1836 2.41132Z" fill="#DAE3EA"/> +</svg> From 0edaedfc93e05409d5e79ee49694e89fc84274bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:04:53 +0900 Subject: [PATCH 27/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=83=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/constants/index.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index 01f25e0c..c2ff41c5 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -44,3 +44,15 @@ export const PIXEL = { export const TIME = { hour: 60, }; + +export const CATEGORY_TAGS = [ + { imageSrc: "/images/samples/category_all.svg", title: "전체" }, + { imageSrc: "/images/samples/category_movie.svg", title: "영화" }, + { imageSrc: "/images/samples/category_festival.svg", title: "축제" }, + { imageSrc: "/images/samples/category_camping.svg", title: "캠핑" }, + { imageSrc: "/images/samples/category_tour.svg", title: "관광" }, + { imageSrc: "/images/samples/category_shopping.svg", title: "쇼핑" }, + { imageSrc: "/images/samples/category_food.svg", title: "음식점" }, + { imageSrc: "/images/samples/category_culture.svg", title: "문화생활" }, + { imageSrc: "/images/samples/category_hiking.svg", title: "등산" }, +]; From 4a4ef1b56fdd8d51ef25284431ae01ceae76a366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:05:09 +0900 Subject: [PATCH 28/74] =?UTF-8?q?[feat]=20type=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 50f57b8b..bea15e08 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -75,6 +75,7 @@ export interface CategoryItem { title: string; city: string; tagBackground: string; + imageSrc: string; } export interface SelectedCategoryItem extends CategoryItem { @@ -102,3 +103,14 @@ export interface Start2EndTime { minute: string; }; } + +export type CategoryTags = + | "전체" + | "영화" + | "축제" + | "캠핑" + | "관광" + | "쇼핑" + | "음식점" + | "문화생활" + | "등산"; From 064eec17249fd23295e1c20839683b528e87e1c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:05:26 +0900 Subject: [PATCH 29/74] =?UTF-8?q?[chore]=20default=20export=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index dee1659e..ce535ad6 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -1,7 +1,9 @@ export { default as BasicInfo } from "./BasicInfo"; export { default as BlockShowing } from "./BlockShowing"; +export { default as Categories } from "./Categories"; export { default as CategoryFrame } from "./CategoryFrame"; export { default as CategoryItems } from "./CategoryItems"; +export { default as CategoryTagBox } from "./CategoryTagBox"; export { default as Continue } from "./Continue"; export { default as CurrentDate } from "./CurrentDate"; export { default as CurrentPage } from "./CurrentPage"; From 4af240ee9072fec039487b1a0cd2531596d023b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:06:08 +0900 Subject: [PATCH 30/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=83=9C=EA=B7=B8=20=EB=B0=95=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryTagBox.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/create-schedule/components/CategoryTagBox.tsx diff --git a/src/create-schedule/components/CategoryTagBox.tsx b/src/create-schedule/components/CategoryTagBox.tsx new file mode 100644 index 00000000..70355084 --- /dev/null +++ b/src/create-schedule/components/CategoryTagBox.tsx @@ -0,0 +1,42 @@ +import Image from "next/image"; +import { CategoryTags } from "@shared/types"; + +interface CategoryTagBoxProps { + imageSrc: string; + title: string; + clickedCategory: CategoryTags; + handleClickCategory: (value: CategoryTags) => void; +} + +const CategoryTagBox = ({ + imageSrc, + title, + clickedCategory, + handleClickCategory, +}: CategoryTagBoxProps) => { + return ( + <div + className="inline-block cursor-pointer" + onClick={() => handleClickCategory(title as CategoryTags)} + > + <div + className={`${ + clickedCategory === title + ? "bg-[#F864A1] text-white " + : "bg-[#F2F4F6] text-[#61676D] " + }flex items-center w-fit h-[36px] rounded-[18px] px-[12px] gap-[8px]`} + > + <Image + draggable={false} + src={imageSrc} + alt={imageSrc} + width={18} + height={18} + /> + <span className="text-[12px] font-medium">{title}</span> + </div> + </div> + ); +}; + +export default CategoryTagBox; From 698d1a56ca7ed051ff333f7e98998ccd9234ee00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:06:38 +0900 Subject: [PATCH 31/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=91=9C=EC=8B=9C=20=EB=B0=95=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/Categories.tsx | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/create-schedule/components/Categories.tsx diff --git a/src/create-schedule/components/Categories.tsx b/src/create-schedule/components/Categories.tsx new file mode 100644 index 00000000..63d3f260 --- /dev/null +++ b/src/create-schedule/components/Categories.tsx @@ -0,0 +1,33 @@ +import { CATEGORY_TAGS } from "@create-schedule/constants"; +import { CategoryTags } from "@shared/types"; +import CategoryTagBox from "./CategoryTagBox"; +import ScheduleTitle from "./ScheduleTitle"; + +interface CategoriesProps { + clickedCategory: CategoryTags; + handleClickCategory: (value: CategoryTags) => void; +} + +const Categories = ({ + clickedCategory, + handleClickCategory, +}: CategoriesProps) => { + return ( + <> + <ScheduleTitle title="카테고리" /> + <div className="flex flex-wrap w-[414px] gap-[6px]"> + {CATEGORY_TAGS.map(({ imageSrc, title }) => ( + <CategoryTagBox + key={imageSrc + title} + imageSrc={imageSrc} + title={title} + clickedCategory={clickedCategory} + handleClickCategory={handleClickCategory} + /> + ))} + </div> + </> + ); +}; + +export default Categories; From db0cc0876a2b9102702671b4ea11055e5d04cdf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:08:14 +0900 Subject: [PATCH 32/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=EC=97=90=20=EB=94=B0=EB=A5=B8=20imageSrc=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 111 +++++++++--------- .../components/DragnDropContainer.tsx | 52 +++++++- 2 files changed, 106 insertions(+), 57 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 9f0bb650..e6d1bd2f 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -2,17 +2,19 @@ import Image from "next/image"; import React from "react"; import { useSetRecoilState } from "recoil"; import { selectedScheduleItem } from "@shared/recoil"; -import { CategoryItem } from "@shared/types"; +import { CategoryItem, CategoryTags } from "@shared/types"; interface CategoryFrameProps { hasPointer?: boolean; itemHeight?: number; + clickedCategory: CategoryTags; category: CategoryItem[]; } const CategoryFrame = ({ hasPointer, itemHeight = 21, + clickedCategory, category, }: CategoryFrameProps) => { const setSelectedItem = useSetRecoilState(selectedScheduleItem); @@ -26,59 +28,62 @@ const CategoryFrame = ({ return ( <> - {category.map((_category, index) => ( - <div - draggable={hasPointer} - onDragStart={() => onDragStart!(index)} - onDragOver={(e) => e.preventDefault()} - className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ - hasPointer ? "cursor-pointer " : "" - }flex`} - key={_category.city + _category.tagBackground} - style={{ height: `${itemHeight}px` }} - > - <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} - > + {category.map( + (_category, index) => + clickedCategory === _category.category && ( <div - style={{ - height: itemHeight ? `${itemHeight - 8}px` : "13px", - }} - className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} - /> - </div> - <div - className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} - > - <Image - draggable={false} - src="/images/samples/palette.svg" - alt="palette" - width={16} - height={15} - /> - <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> - {_category.category} - </span> - <span className="text-[10px] text-[#454545] font-medium grow"> - {_category.title} - </span> - <span className="text-[11px] text-[#00000080] font-semibold"> - {_category.city} - </span> - </div> - <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} - > - <div - style={{ - height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", - }} - className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} - /> - </div> - </div> - ))} + draggable={hasPointer} + onDragStart={() => onDragStart!(index)} + onDragOver={(e) => e.preventDefault()} + className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ + hasPointer ? "cursor-pointer " : "" + }flex`} + key={_category.city + _category.tagBackground} + style={{ height: `${itemHeight}px` }} + > + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} + > + <div + style={{ + height: itemHeight ? `${itemHeight - 8}px` : "13px", + }} + className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + <div + className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} + > + <Image + draggable={false} + src={_category.imageSrc} + alt={_category.imageSrc} + width={16} + height={15} + /> + <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> + {_category.category} + </span> + <span className="text-[10px] text-[#454545] font-medium grow"> + {_category.title} + </span> + <span className="text-[11px] text-[#00000080] font-semibold"> + {_category.city} + </span> + </div> + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} + > + <div + style={{ + height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", + }} + className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + </div> + ), + )} </> ); }; diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index 79d64911..d506df86 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -1,52 +1,96 @@ -import { CategoryItem } from "@shared/types"; +import { useState } from "react"; +import { CategoryItem, CategoryTags } from "@shared/types"; +import Categories from "./Categories"; import CategoryItems from "./CategoryItems"; -import TimeTableContainer from "./TimeTableContainer"; const DragnDropContainer = () => { + const [clickedCategory, setClickedCategory] = useState<CategoryTags>("전체"); // TODO: fetch category const category: CategoryItem[] = [ + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#A3FAF2]", + imageSrc: "/images/samples/category_shopping.svg", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#FFE779]", + imageSrc: "/images/samples/category_shopping.svg", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#FFC395]", + imageSrc: "/images/samples/category_shopping.svg", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#CFE1FF]", + imageSrc: "/images/samples/category_shopping.svg", + }, { category: "문화생활", title: "마블 영화 감상", city: "연남동", tagBackground: "bg-[#A3FAF2]", + imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "도서관 가서 신간 읽기", city: "연남동", tagBackground: "bg-[#FFE779]", + imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "국립미술관 가서 전시 관람", city: "연남동", tagBackground: "bg-[#FFC395]", + imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "독서모임 참가하기", city: "연남동", tagBackground: "bg-[#CFE1FF]", + imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "예술의 전당에서 뮤지컬 관람", city: "연남동", tagBackground: "bg-[#DDD1FF]", + imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "오일파스텔 그림그리기", city: "연남동", tagBackground: "bg-[#FFDCDC]", + imageSrc: "/images/samples/category_culture.svg", }, ]; + const handleClickCategory = (value: CategoryTags) => { + setClickedCategory(value); + }; + return ( <> - <div className="inline-block px-[50px]"> - <CategoryItems category={category} /> + <div className="inline-block h-fit px-[50px]"> + <Categories + clickedCategory={clickedCategory} + handleClickCategory={handleClickCategory} + /> + <CategoryItems category={category} clickedCategory={clickedCategory} /> </div> </> ); From 8c6465a8b35385f0bd1c9b7e4b2ecfb1e367ac15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:08:45 +0900 Subject: [PATCH 33/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=81=B4=EB=A6=AD=20=EB=A1=9C=EC=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CategoryItems.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx index 7cc5881c..20e2c8c1 100644 --- a/src/create-schedule/components/CategoryItems.tsx +++ b/src/create-schedule/components/CategoryItems.tsx @@ -1,13 +1,14 @@ import { SCHEDULE_TITLE } from "@create-schedule/constants"; -import { CategoryItem } from "@shared/types"; +import { CategoryItem, CategoryTags } from "@shared/types"; import CategoryFrame from "./CategoryFrame"; import ScheduleTitle from "./ScheduleTitle"; interface CategoryItemsProps { category: CategoryItem[]; + clickedCategory: CategoryTags; } -const CategoryItems = ({ category }: CategoryItemsProps) => { +const CategoryItems = ({ category, clickedCategory }: CategoryItemsProps) => { return ( <div className="mt-[36px] mb-[18px]"> <ScheduleTitle title={SCHEDULE_TITLE.categoryItems} /> @@ -19,7 +20,11 @@ const CategoryItems = ({ category }: CategoryItemsProps) => { /> </div> <div className="w-[414px] h-fit bg-[#E7F9EE] rounded-[5px] px-[82px] py-[8px]"> - <CategoryFrame category={category} hasPointer /> + <CategoryFrame + clickedCategory={clickedCategory} + category={category} + hasPointer + /> </div> </div> ); From d867eec76da0ebb0efea073a49e6920c6a616050 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Mon, 20 Nov 2023 20:13:27 +0900 Subject: [PATCH 34/74] =?UTF-8?q?[design]=20=EB=A7=88=EC=A7=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CategoryItems.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx index 20e2c8c1..e2a6bb67 100644 --- a/src/create-schedule/components/CategoryItems.tsx +++ b/src/create-schedule/components/CategoryItems.tsx @@ -10,7 +10,7 @@ interface CategoryItemsProps { const CategoryItems = ({ category, clickedCategory }: CategoryItemsProps) => { return ( - <div className="mt-[36px] mb-[18px]"> + <div className="my-[36px]"> <ScheduleTitle title={SCHEDULE_TITLE.categoryItems} /> <div className="w-[414px] border border-[#ADADAD] rounded-[5px] mb-[6px] focus-within:border focus-within:border-[#4285F4]"> <input From 35b42c3c8b1af2b7ea206dfa21933cd36e973ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:10:05 +0900 Subject: [PATCH 35/74] =?UTF-8?q?[feat]=20=EC=A7=81=EC=A0=91=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=9C=20=EC=95=84=EC=9D=B4=ED=85=9C=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CustomItems.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/create-schedule/components/CustomItems.tsx diff --git a/src/create-schedule/components/CustomItems.tsx b/src/create-schedule/components/CustomItems.tsx new file mode 100644 index 00000000..1367bc22 --- /dev/null +++ b/src/create-schedule/components/CustomItems.tsx @@ -0,0 +1,30 @@ +import { useRecoilValue } from "recoil"; +import { useModal } from "@shared/hook"; +import { customItem } from "@shared/recoil"; +import CategoryFrame from "./CategoryFrame"; + +const CustomItems = () => { + const { openModal } = useModal(); + const customItems = useRecoilValue(customItem); + + const makeNewItem = () => { + openModal({ + contentId: "customScheduleSelector", + isHeaderCloseBtn: true, + }); + }; + + return ( + <> + {customItems && <CategoryFrame category={customItems} hasPointer />} + <button + className="w-[281px] h-[33px] text-[#505960] border border-dashed border-[#D9D9D9] rounded-[8px]" + onClick={makeNewItem} + > + + + </button> + </> + ); +}; + +export default CustomItems; From 65346b66ee90e6ae329e88d6fb8f56afba90af65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:11:26 +0900 Subject: [PATCH 36/74] =?UTF-8?q?[feat]=20=EC=A7=81=EC=A0=91=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=9C=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DragnDropContainer.tsx | 2 ++ src/create-schedule/components/MakeCustomItem.tsx | 13 +++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 src/create-schedule/components/MakeCustomItem.tsx diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index d506df86..994fdb2a 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { CategoryItem, CategoryTags } from "@shared/types"; import Categories from "./Categories"; import CategoryItems from "./CategoryItems"; +import MakeCustomItem from "./MakeCustomItem"; const DragnDropContainer = () => { const [clickedCategory, setClickedCategory] = useState<CategoryTags>("전체"); @@ -91,6 +92,7 @@ const DragnDropContainer = () => { handleClickCategory={handleClickCategory} /> <CategoryItems category={category} clickedCategory={clickedCategory} /> + <MakeCustomItem /> </div> </> ); diff --git a/src/create-schedule/components/MakeCustomItem.tsx b/src/create-schedule/components/MakeCustomItem.tsx new file mode 100644 index 00000000..1ce2e109 --- /dev/null +++ b/src/create-schedule/components/MakeCustomItem.tsx @@ -0,0 +1,13 @@ +import CustomItems from "./CustomItems"; +import ScheduleTitle from "./ScheduleTitle"; + +const MakeCustomItem = () => { + return ( + <> + <ScheduleTitle title="나만의 아이템 만들기" /> + <CustomItems /> + </> + ); +}; + +export default MakeCustomItem; From da41e7883d9254043ff99dfd76998ed7d946ad70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:11:59 +0900 Subject: [PATCH 37/74] =?UTF-8?q?[feat]=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=9A=A9=20=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modalContent/CustomScheduleSelector.tsx | 82 +++++++++++++++++++++ src/modalContent/index.tsx | 3 + src/shared/recoil/modal.tsx | 3 +- 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/modalContent/CustomScheduleSelector.tsx diff --git a/src/modalContent/CustomScheduleSelector.tsx b/src/modalContent/CustomScheduleSelector.tsx new file mode 100644 index 00000000..ef7aada1 --- /dev/null +++ b/src/modalContent/CustomScheduleSelector.tsx @@ -0,0 +1,82 @@ +import { ScheduleTitle } from "@create-schedule/components"; +import { useState } from "react"; +import { useSetRecoilState } from "recoil"; +import { useModal } from "@shared/hook"; +import { customItem } from "@shared/recoil"; +import { CategoryItem } from "@shared/types"; + +const CustomScheduleSelector = () => { + const { closeModal } = useModal(); + const [newItem, setNewItem] = useState<CategoryItem>({ + category: "", + title: "", + city: "", + tagBackground: "", + imageSrc: "", + }); + const setCustomItems = useSetRecoilState(customItem); + + const handleInput = (key: keyof CategoryItem, value: string) => { + setNewItem((prev) => ({ ...prev, [key]: value })); + }; + + const makeNewItem = () => { + setCustomItems((prev) => { + if (prev) { + const newArray = [...prev]; + newArray.push(newItem); + + return newArray; + } + + return [newItem]; + }); + closeModal(); + }; + + return ( + <> + <ScheduleTitle title="나만의 아이템 만들기" /> + <div className="inline-block text-[#333333] mb-[8px]">아이템명</div> + <span className="w-[11px] h-[22px] text-[#FF0000] text-xl font-light"> + * + </span> + <input + className="w-[362px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px]" + type="text" + placeholder="산책하기" + onChange={({ target: { value } }) => handleInput("title", value)} + /> + <div className="text-[#333333] mb-[8px]">위치(선택)</div> + <input + className="w-[362px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px]" + type="text" + placeholder="위치" + onChange={({ target: { value } }) => handleInput("city", value)} + /> + <div className="text-[#333333] mb-[8px]">세부내용(선택)</div> + <div className="w-[362px] h-[78px] border border-[#ADADAD] rounded-[9px] px-[16px] py-[10px] mb-[17px] focus-within:border-[#4285F4]"> + <textarea + className="w-full resize-none outline-0" + placeholder="집 근처 공원 산책" + /> + </div> + <div className="w-[362px] text-center"> + <button + className="w-[120px] h-[48px] text-[14px] text-[#B1B1B1] font-bold -tracking-[0.03em] bg-[#E9ECEF] rounded-[5px] mr-[10px]" + onClick={closeModal} + > + 취소 + </button> + <button + className="w-[120px] h-[48px] text-[14px] text-white font-bold -tracking-[0.03em] bg-[#F864A1] rounded-[5px]" + onClick={makeNewItem} + > + 아이템 등록 + </button> + </div> + </> + ); +}; + +export default CustomScheduleSelector; diff --git a/src/modalContent/index.tsx b/src/modalContent/index.tsx index 12777ef6..eca66e6b 100644 --- a/src/modalContent/index.tsx +++ b/src/modalContent/index.tsx @@ -1,5 +1,6 @@ import { ModalContentId } from "@shared/recoil/modal"; import CalendarSelector from "./CalendarSelector"; +import CustomScheduleSelector from "./CustomScheduleSelector"; import ScheduleTimeSelector from "./ScheduleTimeSelector"; import ThumbnailSelector, { ThumbnailSelectorProps } from "./ThumbnailSelector"; @@ -18,6 +19,8 @@ const ModalContent = <T,>(modalProps: ModalContentProps) => { return <CalendarSelector type="endedAt" />; case "scheduleTimeSelector": return <ScheduleTimeSelector />; + case "customScheduleSelector": + return <CustomScheduleSelector />; default: return <></>; } diff --git a/src/shared/recoil/modal.tsx b/src/shared/recoil/modal.tsx index 223f2588..7cd1758c 100644 --- a/src/shared/recoil/modal.tsx +++ b/src/shared/recoil/modal.tsx @@ -85,4 +85,5 @@ export type ModalContentId = | "thumbnailSelector" | "calendarSelector_start" | "calendarSelector_end" - | "scheduleTimeSelector"; + | "scheduleTimeSelector" + | "customScheduleSelector"; From 69391549562aafd7ef8d6bb2c73129b78ec56fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:12:30 +0900 Subject: [PATCH 38/74] =?UTF-8?q?[feat]=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/createSchedule.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index c6e01bb2..3b87a65d 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -2,6 +2,7 @@ import { uniqueId } from "lodash"; import { atom } from "recoil"; import { AppliedItem, + CategoryItem, CurrentPageType, ScheduleAnswerType, SelectedCategoryItem, @@ -44,6 +45,7 @@ export const selectedScheduleItem = atom<SelectedCategoryItem | null>({ title: "", tagBackground: "", city: "", + imageSrc: "", selectedTime: 0, }, }); @@ -52,3 +54,8 @@ export const appliedScheduleItem = atom<AppliedItem[] | null>({ key: `appliedScheduleItem${uniqueId()}`, default: null, }); + +export const customItem = atom<CategoryItem[] | null>({ + key: `customScheduleItem${uniqueId()}`, + default: null, +}); From 39580720493fd28d29e750ea9544bab5c4f5d142 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:13:08 +0900 Subject: [PATCH 39/74] =?UTF-8?q?[fix]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=94=84=EB=A0=88=EC=9E=84=EC=9D=B4=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=9E=84=EC=8B=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 63 +++++++++++++++++-- 1 file changed, 58 insertions(+), 5 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index e6d1bd2f..278d3f6c 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -7,7 +7,7 @@ import { CategoryItem, CategoryTags } from "@shared/types"; interface CategoryFrameProps { hasPointer?: boolean; itemHeight?: number; - clickedCategory: CategoryTags; + clickedCategory?: CategoryTags; category: CategoryItem[]; } @@ -28,12 +28,12 @@ const CategoryFrame = ({ return ( <> - {category.map( - (_category, index) => + {category.map((_category, index) => + clickedCategory ? ( clickedCategory === _category.category && ( <div draggable={hasPointer} - onDragStart={() => onDragStart!(index)} + onDragStart={() => onDragStart(index)} onDragOver={(e) => e.preventDefault()} className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ hasPointer ? "cursor-pointer " : "" @@ -82,7 +82,60 @@ const CategoryFrame = ({ /> </div> </div> - ), + ) + ) : ( + <div + draggable={hasPointer} + onDragStart={() => onDragStart(index)} + onDragOver={(e) => e.preventDefault()} + className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ + hasPointer ? "cursor-pointer " : "" + }flex`} + key={_category.city + _category.tagBackground} + style={{ height: `${itemHeight}px` }} + > + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} + > + <div + style={{ + height: itemHeight ? `${itemHeight - 8}px` : "13px", + }} + className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + <div + className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} + > + <Image + draggable={false} + src={_category.imageSrc} + alt={_category.imageSrc} + width={16} + height={15} + /> + <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> + {_category.category} + </span> + <span className="text-[10px] text-[#454545] font-medium grow"> + {_category.title} + </span> + <span className="text-[11px] text-[#00000080] font-semibold"> + {_category.city} + </span> + </div> + <div + className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} + > + <div + style={{ + height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", + }} + className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + /> + </div> + </div> + ), )} </> ); From f4533182081c5a8edf2e9a7ca7935200508601b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 01:13:16 +0900 Subject: [PATCH 40/74] =?UTF-8?q?[chore]=20default=20export=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index ce535ad6..5cd526dc 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -8,12 +8,14 @@ export { default as Continue } from "./Continue"; export { default as CurrentDate } from "./CurrentDate"; export { default as CurrentPage } from "./CurrentPage"; export { default as CurrentRecommendTag } from "./CurrentRecommendTag"; +export { default as CustomItems } from "./CustomItems"; export { default as DateCityHandler } from "./DateCityHandler"; export { default as DateCityInput } from "./DateCityInput"; export { default as DateMoveButton } from "./DateMoveButton"; export { default as DragnDropContainer } from "./DragnDropContainer"; export { default as FillPlan } from "./FillPlan"; export { default as FinishWriting } from "./FinishWriting"; +export { default as MakeCustomItem } from "./MakeCustomItem"; export { default as MakeScheduleButton } from "./MakeScheduleButton"; export { default as MenuContent } from "./MenuContent"; export { default as MenuContentContainer } from "./MenuContentContainer"; From c4c72285adecb3f9d95962d56ac3444ad833fc83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 13:23:13 +0900 Subject: [PATCH 41/74] =?UTF-8?q?[refactor]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=95=84=ED=84=B0=EB=A7=81=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 76 ++++--------------- 1 file changed, 15 insertions(+), 61 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 278d3f6c..2790fa7a 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -26,71 +26,25 @@ const CategoryFrame = ({ }); }; + const filteredCategory = clickedCategory + ? category.filter( + (_category) => + clickedCategory === "전체" || clickedCategory === _category.category, + ) + : category; + return ( <> - {category.map((_category, index) => - clickedCategory ? ( - clickedCategory === _category.category && ( - <div - draggable={hasPointer} - onDragStart={() => onDragStart(index)} - onDragOver={(e) => e.preventDefault()} - className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ - hasPointer ? "cursor-pointer " : "" - }flex`} - key={_category.city + _category.tagBackground} - style={{ height: `${itemHeight}px` }} - > - <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} - > - <div - style={{ - height: itemHeight ? `${itemHeight - 8}px` : "13px", - }} - className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} - /> - </div> - <div - className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} - > - <Image - draggable={false} - src={_category.imageSrc} - alt={_category.imageSrc} - width={16} - height={15} - /> - <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> - {_category.category} - </span> - <span className="text-[10px] text-[#454545] font-medium grow"> - {_category.title} - </span> - <span className="text-[11px] text-[#00000080] font-semibold"> - {_category.city} - </span> - </div> - <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} - > - <div - style={{ - height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", - }} - className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} - /> - </div> - </div> - ) - ) : ( + {filteredCategory.map((_category, index) => { + const isLastIndex = index === category.length - 1; + const pointer = hasPointer ? "cursor-pointer " : ""; + + return ( <div draggable={hasPointer} onDragStart={() => onDragStart(index)} onDragOver={(e) => e.preventDefault()} - className={`${index === category.length - 1 ? "" : "mb-[8px] "}${ - hasPointer ? "cursor-pointer " : "" - }flex`} + className={`${isLastIndex ? "" : "mb-[8px] "}${pointer}flex`} key={_category.city + _category.tagBackground} style={{ height: `${itemHeight}px` }} > @@ -135,8 +89,8 @@ const CategoryFrame = ({ /> </div> </div> - ), - )} + ); + })} </> ); }; From ffec97c77d2157b5312a7ce12c2a40de97a6bce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 14:20:13 +0900 Subject: [PATCH 42/74] =?UTF-8?q?[feat]=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=A7=A4=ED=95=91=20=EC=9C=A0=ED=8B=B8=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/util/index.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts index 8651953b..8a39d1dd 100644 --- a/src/create-schedule/util/index.ts +++ b/src/create-schedule/util/index.ts @@ -1,7 +1,7 @@ import { TableArrayType } from "@create-schedule/components/TimeTable"; import { PIXEL, TIME } from "@create-schedule/constants"; import { Dispatch, SetStateAction } from "react"; -import { AppliedItem, Start2EndTime } from "@shared/types"; +import { AppliedItem, CategoryTags, Start2EndTime } from "@shared/types"; export const calculateItemHeight = ( start: { hour: number; minute: number }, @@ -167,3 +167,24 @@ export const sortByStartTime = (appliedItem: AppliedItem[]) => { return a.startTime.minute - b.startTime.minute; }); }; + +export const handleImageSrc = (category: CategoryTags) => { + switch (category) { + case "영화": + return "/images/samples/category_movie.svg"; + case "축제": + return "/images/samples/category_festival.svg"; + case "캠핑": + return "/images/samples/category_camping.svg"; + case "관광": + return "/images/samples/category_tour.svg"; + case "쇼핑": + return "/images/samples/category_shopping.svg"; + case "음식점": + return "/images/samples/category_food.svg"; + case "문화생활": + return "/images/samples/category_culture.svg"; + case "등산": + return "/images/samples/category_hiking.svg"; + } +}; From 51ecc2184cbacb74ebf5413c7077afea7def4273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 14:20:36 +0900 Subject: [PATCH 43/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=9D=B8=ED=84=B0?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index bea15e08..66c18aee 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -71,11 +71,10 @@ export interface ScheduleAnswerType { export type CalendarSelectorType = "startedAt" | "endedAt"; export interface CategoryItem { - category: string; + category: CategoryTags; title: string; city: string; tagBackground: string; - imageSrc: string; } export interface SelectedCategoryItem extends CategoryItem { From 73a1c1dc4ccc929bc50a74744e205b40c2670188 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 14:21:59 +0900 Subject: [PATCH 44/74] =?UTF-8?q?[feat]=20=EC=84=A0=ED=83=9D=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EA=B0=92=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/createSchedule.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index 3b87a65d..cab64652 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -40,14 +40,7 @@ export const scheduleAnswers = atom<ScheduleAnswerType>({ export const selectedScheduleItem = atom<SelectedCategoryItem | null>({ key: `selectedScheduleItem/${uniqueId()}`, - default: { - category: "", - title: "", - tagBackground: "", - city: "", - imageSrc: "", - selectedTime: 0, - }, + default: null, }); export const appliedScheduleItem = atom<AppliedItem[] | null>({ From 7428260dc6ac8b0586b4cdcef095ee180957b235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 14:22:34 +0900 Subject: [PATCH 45/74] =?UTF-8?q?[feat]=20=ED=83=9C=EA=B7=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=A7=A4=ED=95=91=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CategoryFrame.tsx | 6 ++++-- src/create-schedule/components/DragnDropContainer.tsx | 10 ---------- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 2790fa7a..e50070bb 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -1,3 +1,4 @@ +import { handleImageSrc } from "@create-schedule/util"; import Image from "next/image"; import React from "react"; import { useSetRecoilState } from "recoil"; @@ -38,6 +39,7 @@ const CategoryFrame = ({ {filteredCategory.map((_category, index) => { const isLastIndex = index === category.length - 1; const pointer = hasPointer ? "cursor-pointer " : ""; + const imageSrc = handleImageSrc(_category.category); return ( <div @@ -63,8 +65,8 @@ const CategoryFrame = ({ > <Image draggable={false} - src={_category.imageSrc} - alt={_category.imageSrc} + src={imageSrc!} + alt={imageSrc} width={16} height={15} /> diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index 994fdb2a..1356e392 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -13,70 +13,60 @@ const DragnDropContainer = () => { title: "용산 아이파크몰", city: "용산", tagBackground: "bg-[#A3FAF2]", - imageSrc: "/images/samples/category_shopping.svg", }, { category: "쇼핑", title: "용산 아이파크몰", city: "용산", tagBackground: "bg-[#FFE779]", - imageSrc: "/images/samples/category_shopping.svg", }, { category: "쇼핑", title: "용산 아이파크몰", city: "용산", tagBackground: "bg-[#FFC395]", - imageSrc: "/images/samples/category_shopping.svg", }, { category: "쇼핑", title: "용산 아이파크몰", city: "용산", tagBackground: "bg-[#CFE1FF]", - imageSrc: "/images/samples/category_shopping.svg", }, { category: "문화생활", title: "마블 영화 감상", city: "연남동", tagBackground: "bg-[#A3FAF2]", - imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "도서관 가서 신간 읽기", city: "연남동", tagBackground: "bg-[#FFE779]", - imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "국립미술관 가서 전시 관람", city: "연남동", tagBackground: "bg-[#FFC395]", - imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "독서모임 참가하기", city: "연남동", tagBackground: "bg-[#CFE1FF]", - imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "예술의 전당에서 뮤지컬 관람", city: "연남동", tagBackground: "bg-[#DDD1FF]", - imageSrc: "/images/samples/category_culture.svg", }, { category: "문화생활", title: "오일파스텔 그림그리기", city: "연남동", tagBackground: "bg-[#FFDCDC]", - imageSrc: "/images/samples/category_culture.svg", }, ]; From 0269a842a16f04b81fcb6f90cfc8f3b751cebe13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 14:24:13 +0900 Subject: [PATCH 46/74] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20'=EA=B8=B0=ED=83=80'=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 66c18aee..6efa31a4 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -112,4 +112,5 @@ export type CategoryTags = | "쇼핑" | "음식점" | "문화생활" - | "등산"; + | "등산" + | "기타"; From f3c2c6138a93844230506f9349e332fec52f0e3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 15:14:10 +0900 Subject: [PATCH 47/74] =?UTF-8?q?[design]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=94=84=EB=A0=88=EC=9E=84=20=EB=84=93=EC=9D=B4=20?= =?UTF-8?q?=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CategoryFrame.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index e50070bb..7e2260d1 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -46,7 +46,9 @@ const CategoryFrame = ({ draggable={hasPointer} onDragStart={() => onDragStart(index)} onDragOver={(e) => e.preventDefault()} - className={`${isLastIndex ? "" : "mb-[8px] "}${pointer}flex`} + className={`${ + isLastIndex ? "" : "mb-[8px] " + }${pointer}flex w-[250px]`} key={_category.city + _category.tagBackground} style={{ height: `${itemHeight}px` }} > From fc0972dcb3373d1229adeae51a5608d837ed6e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 15:14:34 +0900 Subject: [PATCH 48/74] =?UTF-8?q?[design]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4,=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CategoryItems.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx index e2a6bb67..d115dc2e 100644 --- a/src/create-schedule/components/CategoryItems.tsx +++ b/src/create-schedule/components/CategoryItems.tsx @@ -19,7 +19,7 @@ const CategoryItems = ({ category, clickedCategory }: CategoryItemsProps) => { placeholder="카테고리별 아이템 검색" /> </div> - <div className="w-[414px] h-fit bg-[#E7F9EE] rounded-[5px] px-[82px] py-[8px]"> + <div className="w-[414px] h-[181px] bg-[#E7F9EE] rounded-[5px] px-[78px] py-[8px] overflow-FAQ"> <CategoryFrame clickedCategory={clickedCategory} category={category} From d13c03721fe9de036d65e64f97db717d7f579603 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 15:15:13 +0900 Subject: [PATCH 49/74] =?UTF-8?q?[feat]=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B8=B0=20default=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modalContent/CustomScheduleSelector.tsx | 66 +++++++++++++++------ 1 file changed, 47 insertions(+), 19 deletions(-) diff --git a/src/modalContent/CustomScheduleSelector.tsx b/src/modalContent/CustomScheduleSelector.tsx index ef7aada1..09ec72cd 100644 --- a/src/modalContent/CustomScheduleSelector.tsx +++ b/src/modalContent/CustomScheduleSelector.tsx @@ -8,11 +8,10 @@ import { CategoryItem } from "@shared/types"; const CustomScheduleSelector = () => { const { closeModal } = useModal(); const [newItem, setNewItem] = useState<CategoryItem>({ - category: "", + category: "기타", title: "", city: "", tagBackground: "", - imageSrc: "", }); const setCustomItems = useSetRecoilState(customItem); @@ -37,23 +36,52 @@ const CustomScheduleSelector = () => { return ( <> <ScheduleTitle title="나만의 아이템 만들기" /> - <div className="inline-block text-[#333333] mb-[8px]">아이템명</div> - <span className="w-[11px] h-[22px] text-[#FF0000] text-xl font-light"> - * - </span> - <input - className="w-[362px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px]" - type="text" - placeholder="산책하기" - onChange={({ target: { value } }) => handleInput("title", value)} - /> - <div className="text-[#333333] mb-[8px]">위치(선택)</div> - <input - className="w-[362px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px]" - type="text" - placeholder="위치" - onChange={({ target: { value } }) => handleInput("city", value)} - /> + <div className="text-[#333333] mb-[8px]"> + 카테고리 + <span className="w-[11px] h-[22px] text-[#FF0000] text-xl font-light"> + * + </span> + </div> + <div className="w-[362px] h-[57px] border border-[#ADADAD] rounded-[9px] px-[16px] mb-[13px] focus-within:border-[#4285F4]"> + <select + defaultValue="기타" + className="w-full h-full text-[#333333] outline-0" + onChange={({ target: { value } }) => handleInput("category", value)} + > + <option>기타</option> + <option>영화</option> + <option>축제</option> + <option>캠핑</option> + <option>관광</option> + <option>쇼핑</option> + <option>음식점</option> + <option>문화생활</option> + <option>등산</option> + </select> + </div> + <div className="inline-block"> + <div className="text-[#333333] mb-[8px]"> + 아이템명 + <span className="w-[11px] h-[22px] text-[#FF0000] text-xl font-light"> + * + </span> + </div> + <input + className="w-[180px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px] mr-[2px]" + type="text" + placeholder="산책하기" + onChange={({ target: { value } }) => handleInput("title", value)} + /> + </div> + <div className="inline-block"> + <div className="text-[#333333] mb-[8px]">위치(선택)</div> + <input + className="w-[180px] h-[57px] border border-[#ADADAD] px-[16px] rounded-[9px] mb-[13px]" + type="text" + placeholder="위치" + onChange={({ target: { value } }) => handleInput("city", value)} + /> + </div> <div className="text-[#333333] mb-[8px]">세부내용(선택)</div> <div className="w-[362px] h-[78px] border border-[#ADADAD] rounded-[9px] px-[16px] py-[10px] mb-[17px] focus-within:border-[#4285F4]"> <textarea From 70ee08b169cdd853376a35baf31a040c680e3276 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 15:16:29 +0900 Subject: [PATCH 50/74] =?UTF-8?q?[refactor]=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20constant=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DragnDropContainer.tsx | 65 +------------------ src/create-schedule/constants/index.ts | 65 ++++++++++++++++++- 2 files changed, 66 insertions(+), 64 deletions(-) diff --git a/src/create-schedule/components/DragnDropContainer.tsx b/src/create-schedule/components/DragnDropContainer.tsx index 1356e392..d258df35 100644 --- a/src/create-schedule/components/DragnDropContainer.tsx +++ b/src/create-schedule/components/DragnDropContainer.tsx @@ -1,5 +1,6 @@ +import { category } from "@create-schedule/constants"; import { useState } from "react"; -import { CategoryItem, CategoryTags } from "@shared/types"; +import { CategoryTags } from "@shared/types"; import Categories from "./Categories"; import CategoryItems from "./CategoryItems"; import MakeCustomItem from "./MakeCustomItem"; @@ -7,68 +8,6 @@ import MakeCustomItem from "./MakeCustomItem"; const DragnDropContainer = () => { const [clickedCategory, setClickedCategory] = useState<CategoryTags>("전체"); // TODO: fetch category - const category: CategoryItem[] = [ - { - category: "쇼핑", - title: "용산 아이파크몰", - city: "용산", - tagBackground: "bg-[#A3FAF2]", - }, - { - category: "쇼핑", - title: "용산 아이파크몰", - city: "용산", - tagBackground: "bg-[#FFE779]", - }, - { - category: "쇼핑", - title: "용산 아이파크몰", - city: "용산", - tagBackground: "bg-[#FFC395]", - }, - { - category: "쇼핑", - title: "용산 아이파크몰", - city: "용산", - tagBackground: "bg-[#CFE1FF]", - }, - { - category: "문화생활", - title: "마블 영화 감상", - city: "연남동", - tagBackground: "bg-[#A3FAF2]", - }, - { - category: "문화생활", - title: "도서관 가서 신간 읽기", - city: "연남동", - tagBackground: "bg-[#FFE779]", - }, - { - category: "문화생활", - title: "국립미술관 가서 전시 관람", - city: "연남동", - tagBackground: "bg-[#FFC395]", - }, - { - category: "문화생활", - title: "독서모임 참가하기", - city: "연남동", - tagBackground: "bg-[#CFE1FF]", - }, - { - category: "문화생활", - title: "예술의 전당에서 뮤지컬 관람", - city: "연남동", - tagBackground: "bg-[#DDD1FF]", - }, - { - category: "문화생활", - title: "오일파스텔 그림그리기", - city: "연남동", - tagBackground: "bg-[#FFDCDC]", - }, - ]; const handleClickCategory = (value: CategoryTags) => { setClickedCategory(value); diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index c2ff41c5..ed614044 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -1,4 +1,4 @@ -import { PlanSubTitle, PlanTitle } from "@shared/types"; +import { CategoryItem, PlanSubTitle, PlanTitle } from "@shared/types"; export const TITLE: PlanTitle = { remains: "잠깐, 작성중이던 일정이 있어요", @@ -56,3 +56,66 @@ export const CATEGORY_TAGS = [ { imageSrc: "/images/samples/category_culture.svg", title: "문화생활" }, { imageSrc: "/images/samples/category_hiking.svg", title: "등산" }, ]; + +export const category: CategoryItem[] = [ + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#A3FAF2]", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#FFE779]", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#FFC395]", + }, + { + category: "쇼핑", + title: "용산 아이파크몰", + city: "용산", + tagBackground: "bg-[#CFE1FF]", + }, + { + category: "문화생활", + title: "마블 영화 감상", + city: "연남동", + tagBackground: "bg-[#A3FAF2]", + }, + { + category: "문화생활", + title: "도서관 가서 신간 읽기", + city: "연남동", + tagBackground: "bg-[#FFE779]", + }, + { + category: "문화생활", + title: "국립미술관 가서 전시 관람", + city: "연남동", + tagBackground: "bg-[#FFC395]", + }, + { + category: "문화생활", + title: "독서모임 참가하기", + city: "연남동", + tagBackground: "bg-[#CFE1FF]", + }, + { + category: "문화생활", + title: "예술의 전당에서 뮤지컬 관람", + city: "연남동", + tagBackground: "bg-[#DDD1FF]", + }, + { + category: "문화생활", + title: "오일파스텔 그림그리기", + city: "연남동", + tagBackground: "bg-[#FFDCDC]", + }, +]; From 2eb17c744972db86e47eca259b3716fee5579c10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 21 Nov 2023 22:22:00 +0900 Subject: [PATCH 51/74] =?UTF-8?q?[feat]=20=EA=B8=B0=ED=83=80=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/samples/category_etc.svg | 30 +++++++++++++++++++ .../components/CategoryTagBox.tsx | 4 +-- src/create-schedule/constants/index.ts | 10 +++++-- 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 public/images/samples/category_etc.svg diff --git a/public/images/samples/category_etc.svg b/public/images/samples/category_etc.svg new file mode 100644 index 00000000..ca0e2682 --- /dev/null +++ b/public/images/samples/category_etc.svg @@ -0,0 +1,30 @@ +<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M20.2387 1.51738C20.166 1.04047 19.7719 0.803711 19.7719 0.803711C19.1936 0.876431 15.8552 2.32406 15.8552 2.32406L15.7453 3.26266L8.53758 10.3232C8.46655 10.3943 8.4767 10.5143 8.55957 10.5921L9.69941 11.732C9.78735 11.8064 9.9108 11.8064 9.97507 11.7303C9.97507 11.7303 10.5923 11.5155 11.3229 10.6953C11.81 10.1491 11.673 9.83112 11.9284 9.54531C13.8411 7.4043 16.5012 4.42786 16.7093 4.19448L17.5904 4.21985C17.7459 4.22493 17.8914 4.14206 17.9675 4.00677C18.1924 3.60427 18.6812 2.757 19.0143 2.39847C19.3035 2.0873 19.4168 2.12789 19.8007 2.01627C20.1761 1.90466 20.2945 1.8776 20.2387 1.51738Z" fill="#2F7889"/> +<path d="M8.90407 9.95095C8.90407 9.95095 8.29187 9.25419 7.66783 9.53492C6.83409 9.91036 7.40401 10.8456 6.28954 11.2328C5.0719 11.6539 4.20941 12.4572 4.62544 13.4314C5.0719 14.4765 6.85438 14.5357 6.93894 17.2162C6.97953 18.4998 7.89614 18.4676 8.30202 18.0465C9.01399 17.3041 8.94297 15.0075 9.67862 14.189C10.4143 13.3705 12.2373 13.5802 12.8986 12.0548C12.8986 12.0548 11.7655 13.1929 10.3263 12.07C9.6448 11.5373 9.65325 10.6494 9.65325 10.6494L8.90407 9.95095Z" fill="#FFFDE7"/> +<path d="M10.6723 8.63223C10.6723 8.63223 10.7467 8.70833 10.5303 8.52231C10.0669 8.12488 9.75065 9.53024 9.0336 8.81826C8.08486 8.01665 8.36728 7.30805 9.10294 6.51659C9.46315 6.12932 9.61874 5.95005 9.54771 5.49851C9.48852 5.11462 9.13 4.87109 8.64971 4.87109C8.18126 4.89815 7.34751 5.52388 6.54591 6.71446C5.32658 8.524 5.90496 9.48457 4.6349 10.4519C3.36653 11.4176 0.564276 11.7592 0.371484 14.208C0.261558 15.6133 0.914346 16.4149 1.74978 17.4415C2.32815 18.1535 3.71829 19.3829 4.75328 19.9004C5.78827 20.4179 7.07186 20.7037 8.13052 19.9985C10.4745 18.4376 10.1244 16.8513 10.5201 15.8247C10.975 14.6477 12.1031 15.0417 13.2598 13.9374C14.1189 13.1696 14.31 12.3951 14.2576 11.8759C14.2018 11.3432 13.7316 10.7868 13.2902 10.8578C13.1211 10.7783 13.3072 11.2755 13.1634 11.5664C12.7998 12.3054 12.2164 12.7367 11.4435 12.1279C10.8195 11.6357 11.5517 10.3741 11.5517 10.3741L11.0681 9.79575L10.6723 8.63223Z" fill="#C62828"/> +<path d="M10.3113 8.27C10.3113 8.27 10.3857 8.34611 10.1692 8.16008C9.70583 7.76266 8.75371 9.03779 8.03835 8.32581C7.37372 7.66457 8.3343 6.63973 9.0429 5.94973C9.65172 5.46775 9.07165 4.8471 8.65393 4.87077C8.18548 4.89783 6.98983 5.16165 6.18822 6.35223C4.9689 8.16177 5.54727 9.12235 4.27721 10.0897C3.25575 10.8659 1.62717 11.1653 0.600632 12.5334C0.343576 12.8767 0.140637 13.0374 0.0121087 13.8458C-0.0978166 15.2511 0.554971 16.0527 1.3904 17.0793C1.96878 17.7912 3.35891 19.0207 4.3939 19.5382C5.42889 20.0557 6.5755 20.3415 7.63585 19.6363C9.9798 18.0753 9.56039 16.2996 9.95612 15.2714C10.411 14.0944 11.8435 14.4732 13.0002 13.3705C13.7646 12.6416 13.9523 12.0328 13.8999 11.5136C13.8627 11.1416 13.6006 10.9742 13.4044 10.8828C13.2353 10.8034 12.9495 10.9133 12.8057 11.2059C12.4421 11.9449 11.8587 12.3761 11.0858 11.7673C10.4618 11.2752 11.1044 9.86984 11.1044 9.86984L10.3113 8.27Z" fill="#F44336"/> +<path d="M8.56015 9.69061C8.43332 9.59421 7.75347 9.16297 7.16325 9.70583C6.52738 10.291 7.04487 11.0909 6.03863 11.2448C4.76519 11.441 4.00924 12.2899 4.42527 13.264C4.87173 14.3092 6.85715 14.5307 6.94171 17.2129C6.9823 18.4965 7.88031 18.444 8.30479 18.0432C9.28735 17.1131 8.71912 15.0583 9.68139 14.1857C10.5117 13.4331 11.77 13.8441 12.372 12.7905C12.4786 12.6045 12.4853 12.4404 12.23 12.547C11.7598 12.7431 11.173 12.8429 10.532 12.2155C10.0095 11.7014 10.1025 10.9894 10.1025 10.9894C10.1025 10.9894 8.68022 9.78193 8.56015 9.69061Z" fill="#FFFDE7"/> +<path d="M8.32954 15.9613C8.53029 15.7475 8.52136 15.413 8.30961 15.2142C8.09785 15.0154 7.76345 15.0275 7.5627 15.2413C7.36196 15.4551 7.37088 15.7896 7.58264 15.9884C7.79439 16.1873 8.12879 16.1751 8.32954 15.9613Z" fill="#82AEC0"/> +<path d="M7.563 15.2428C7.74734 15.0381 8.10079 14.9874 8.33924 15.1836C8.45593 15.2783 8.53542 15.4237 8.54726 15.5827C8.55909 15.74 8.4999 15.9023 8.39167 16.0207C8.28174 16.1374 8.12277 16.2067 7.9655 16.205C7.80653 16.2033 7.65601 16.1323 7.55455 16.0224C7.34146 15.7958 7.37021 15.4389 7.563 15.2428ZM7.563 15.2428C7.4683 15.3442 7.41756 15.4846 7.4294 15.6199C7.44124 15.7552 7.51058 15.8803 7.61035 15.9581C7.81498 16.1222 8.11094 16.0748 8.26652 15.904C8.42887 15.7383 8.45762 15.4389 8.28005 15.2444C8.19549 15.1497 8.06697 15.0872 7.92998 15.0855C7.79638 15.0821 7.6594 15.1413 7.563 15.2428Z" fill="#2F7889"/> +<path d="M8.17348 17.3858C8.3429 17.2054 8.33563 16.9233 8.15724 16.7558C7.97885 16.5883 7.69689 16.5988 7.52747 16.7793C7.35805 16.9597 7.36532 17.2417 7.54371 17.4092C7.7221 17.5768 8.00406 17.5663 8.17348 17.3858Z" fill="#82AEC0"/> +<path d="M7.52705 16.7778C7.68264 16.6053 7.98028 16.558 8.1866 16.7237C8.28638 16.8032 8.35741 16.9283 8.36925 17.0653C8.38109 17.2006 8.33035 17.3427 8.23565 17.4441C8.14094 17.5439 8.00227 17.6048 7.86698 17.6014C7.72999 17.5997 7.60146 17.5354 7.51521 17.4407C7.33595 17.2446 7.3647 16.9435 7.52705 16.7778ZM7.52705 16.7778C7.44757 16.8641 7.40529 16.9824 7.41713 17.0957C7.42727 17.2107 7.48816 17.3122 7.57271 17.3765C7.74521 17.5101 7.98705 17.4661 8.11219 17.3257C8.2441 17.1904 8.27285 16.9469 8.12911 16.7829C8.05977 16.7034 7.95322 16.6476 7.83823 16.6459C7.72323 16.6442 7.60823 16.6932 7.52705 16.7778Z" fill="#2F7889"/> +<path d="M16.6878 3.76977L15.6054 2.61133L8.35203 10.0034C8.281 10.0744 8.29115 10.1945 8.37402 10.2723L9.51893 11.3715C9.60687 11.4459 9.73033 11.4459 9.79459 11.3698L16.6878 3.76977Z" fill="#F7CF92"/> +<path d="M15.3631 2.80599L15.3141 2.61151C15.1805 2.18872 15.4274 2.08556 15.5339 2.04666C16.2171 1.79975 18.4799 0.889911 18.9704 0.764765C19.3915 0.658222 20.0256 0.690354 20.0747 1.31777C20.0899 1.52071 19.9411 1.60696 19.7449 1.65601C19.4202 1.73549 19.2105 1.72873 18.8317 2.16843C18.5087 2.54217 18.0233 3.3404 17.8085 3.71922C17.7375 3.84606 17.6039 3.92385 17.4551 3.92554L16.6163 3.84606L15.3631 2.80599Z" fill="#F7CF92"/> +<path d="M7.48047 10.3701C7.60054 10.3904 7.70539 10.4259 7.81194 10.4597C7.87958 10.5325 7.9523 10.6001 8.02164 10.6711L8.44274 11.0922L8.86384 11.5133L9.07523 11.7247C9.10905 11.8313 9.14457 11.9361 9.16655 12.0545C9.04817 12.0325 8.94332 11.997 8.83678 11.9632L8.62538 11.7518L8.20429 11.3307L7.78319 10.9096C7.71216 10.8403 7.64451 10.7675 7.57179 10.6999C7.53628 10.5967 7.50076 10.4902 7.48047 10.3701Z" fill="#82AEC0"/> +<path d="M6.17969 11.6738C6.29976 11.6941 6.40461 11.7296 6.51116 11.7635C6.5788 11.8362 6.65152 11.9038 6.72086 11.9749L7.14196 12.396L7.56306 12.8171L7.77445 13.0284C7.80827 13.135 7.84379 13.2398 7.86577 13.3582C7.74739 13.3362 7.64254 13.3007 7.536 13.2669L7.3246 13.0555L6.9035 12.6344L6.48241 12.2133C6.41138 12.144 6.34373 12.0712 6.27101 12.0036C6.2338 11.8988 6.19998 11.7939 6.17969 11.6738Z" fill="#82AEC0"/> +<path d="M5.49892 12.645C5.60716 12.7008 5.69679 12.7651 5.78811 12.831C5.83039 12.9207 5.87943 13.0086 5.92341 13.0966L6.19737 13.6259L6.47134 14.1552L6.60832 14.419C6.60832 14.5307 6.61002 14.6423 6.59479 14.7607C6.48825 14.7032 6.39862 14.6389 6.3073 14.5746L6.17031 14.3108L5.89804 13.7815L5.62407 13.2521C5.57841 13.1642 5.53444 13.0746 5.48539 12.9883C5.4837 12.8767 5.48201 12.7651 5.49892 12.645Z" fill="#82AEC0"/> +<path d="M3.9668 14.9432L15.5512 2.95117" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M4.18164 15.1378L15.7424 3.1001" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M4.39648 15.3342L15.9184 3.26611" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M4.61133 15.5286L16.0858 3.43848" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M4.82812 15.7245L16.2908 3.5752" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M5.04297 15.9207L16.4972 3.74609" stroke="#82AEC0" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M2.95952 14.7133C2.91386 14.7623 2.90202 14.8266 2.93416 14.857L5.18001 16.9236C5.21215 16.954 5.27641 16.9371 5.32207 16.8881L6.08309 16.0932C6.12875 16.0442 6.14059 15.9799 6.10846 15.9495L3.8626 13.8829C3.83047 13.8525 3.76621 13.8694 3.72054 13.9184L2.95952 14.7133Z" fill="#2F7889"/> +<path d="M6.1516 8.11608C6.01462 8.09071 5.94021 7.96218 5.99432 7.64425C6.14484 6.74793 6.73674 5.92434 7.56203 5.54045C7.85122 5.40515 8.12011 5.42883 8.17592 5.77721C8.20467 5.96154 8.10489 6.14081 7.836 6.29639C7.23394 6.64815 6.66064 7.16227 6.48645 7.83704C6.42219 8.08057 6.30381 8.14314 6.1516 8.11608Z" fill="#FF7043"/> +<path d="M15.7739 1.88426C15.8593 1.76509 15.7926 1.57099 15.6248 1.45073C15.4571 1.33048 15.2518 1.3296 15.1664 1.44877C15.081 1.56794 15.1477 1.76204 15.3155 1.8823C15.4832 2.00255 15.6885 2.00343 15.7739 1.88426Z" fill="#82AEC0"/> +<path d="M16.4516 1.63719C16.5371 1.51802 16.4703 1.32392 16.3026 1.20366C16.1348 1.0834 15.9296 1.08253 15.8441 1.2017C15.7587 1.32087 15.8254 1.51497 15.9932 1.63522C16.1609 1.75548 16.3662 1.75636 16.4516 1.63719Z" fill="#82AEC0"/> +<path d="M17.1274 1.39109C17.2128 1.27192 17.1461 1.07783 16.9784 0.957568C16.8106 0.837311 16.6054 0.836432 16.5199 0.955605C16.4345 1.07478 16.5012 1.26887 16.669 1.38913C16.8367 1.50939 17.042 1.51027 17.1274 1.39109Z" fill="#82AEC0"/> +<path d="M17.8051 1.14354C17.8906 1.02436 17.8238 0.830267 17.6561 0.71001C17.4883 0.589753 17.2831 0.588874 17.1977 0.708047C17.1122 0.827219 17.179 1.02132 17.3467 1.14157C17.5145 1.26183 17.7197 1.26271 17.8051 1.14354Z" fill="#82AEC0"/> +<path d="M18.4829 0.89793C18.5683 0.778757 18.5016 0.584661 18.3338 0.464404C18.1661 0.344147 17.9608 0.343268 17.8754 0.462441C17.79 0.581614 17.8567 0.77571 18.0244 0.895967C18.1922 1.01622 18.3974 1.0171 18.4829 0.89793Z" fill="#82AEC0"/> +<path d="M19.1606 0.651348C19.246 0.532175 19.1793 0.338079 19.0116 0.217822C18.8438 0.0975651 18.6386 0.0966863 18.5531 0.215859C18.4677 0.335032 18.5344 0.529128 18.7022 0.649385C18.8699 0.769642 19.0752 0.770521 19.1606 0.651348Z" fill="#82AEC0"/> +</svg> diff --git a/src/create-schedule/components/CategoryTagBox.tsx b/src/create-schedule/components/CategoryTagBox.tsx index 70355084..42c38deb 100644 --- a/src/create-schedule/components/CategoryTagBox.tsx +++ b/src/create-schedule/components/CategoryTagBox.tsx @@ -3,7 +3,7 @@ import { CategoryTags } from "@shared/types"; interface CategoryTagBoxProps { imageSrc: string; - title: string; + title: CategoryTags; clickedCategory: CategoryTags; handleClickCategory: (value: CategoryTags) => void; } @@ -17,7 +17,7 @@ const CategoryTagBox = ({ return ( <div className="inline-block cursor-pointer" - onClick={() => handleClickCategory(title as CategoryTags)} + onClick={() => handleClickCategory(title)} > <div className={`${ diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index ed614044..08b0dfe9 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -1,4 +1,9 @@ -import { CategoryItem, PlanSubTitle, PlanTitle } from "@shared/types"; +import { + CategoryItem, + CategoryTags, + PlanSubTitle, + PlanTitle, +} from "@shared/types"; export const TITLE: PlanTitle = { remains: "잠깐, 작성중이던 일정이 있어요", @@ -45,7 +50,7 @@ export const TIME = { hour: 60, }; -export const CATEGORY_TAGS = [ +export const CATEGORY_TAGS: { imageSrc: string; title: CategoryTags }[] = [ { imageSrc: "/images/samples/category_all.svg", title: "전체" }, { imageSrc: "/images/samples/category_movie.svg", title: "영화" }, { imageSrc: "/images/samples/category_festival.svg", title: "축제" }, @@ -55,6 +60,7 @@ export const CATEGORY_TAGS = [ { imageSrc: "/images/samples/category_food.svg", title: "음식점" }, { imageSrc: "/images/samples/category_culture.svg", title: "문화생활" }, { imageSrc: "/images/samples/category_hiking.svg", title: "등산" }, + { imageSrc: "/images/samples/category_etc.svg", title: "기타" }, ]; export const category: CategoryItem[] = [ From a87324c29fb9edf17991b9e538c4da6fa2ced90b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:08:58 +0900 Subject: [PATCH 52/74] =?UTF-8?q?[design]=20text=20overflow=20ellipsis=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 7e2260d1..8a9716c8 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -65,20 +65,22 @@ const CategoryFrame = ({ <div className={`${_category.tagBackground} flex items-center w-[234px] p-[3px]`} > - <Image - draggable={false} - src={imageSrc!} - alt={imageSrc} - width={16} - height={15} - /> - <span className="text-[10px] text-[#454545] font-semibold ml-[4px] mr-[10px]"> + {imageSrc && ( + <Image + draggable={false} + src={imageSrc} + alt={imageSrc} + width={16} + height={15} + /> + )} + <span className="text-[10px] text-[#454545] font-semibold shrink-0 ml-[4px] mr-[10px]"> {_category.category} </span> - <span className="text-[10px] text-[#454545] font-medium grow"> + <span className="text-[10px] text-[#454545] font-medium grow truncate"> {_category.title} </span> - <span className="text-[11px] text-[#00000080] font-semibold"> + <span className="max-w-[40px] text-[11px] text-[#00000080] font-semibold truncate"> {_category.city} </span> </div> From e715cbe8fcdff159b6f55a006490a434c31ccc0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:09:38 +0900 Subject: [PATCH 53/74] =?UTF-8?q?[design]=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=B0=95=EC=8A=A4=EB=AA=A8?= =?UTF-8?q?=EB=8D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CustomItems.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/components/CustomItems.tsx b/src/create-schedule/components/CustomItems.tsx index 1367bc22..186d4ea6 100644 --- a/src/create-schedule/components/CustomItems.tsx +++ b/src/create-schedule/components/CustomItems.tsx @@ -16,7 +16,9 @@ const CustomItems = () => { return ( <> - {customItems && <CategoryFrame category={customItems} hasPointer />} + <div className="w-[250px] mb-[12px]"> + {customItems && <CategoryFrame category={customItems} hasPointer />} + </div> <button className="w-[281px] h-[33px] text-[#505960] border border-dashed border-[#D9D9D9] rounded-[8px]" onClick={makeNewItem} From 2369894fdcf778e292dd7f390470fd4ca0f0b6bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:10:50 +0900 Subject: [PATCH 54/74] =?UTF-8?q?[feat]=20=EC=BB=A4=EC=8A=A4=ED=85=80?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=AA=A8=EB=8B=AC=20=EC=83=89=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/constants/index.ts | 18 +++++ src/modalContent/CustomScheduleSelector.tsx | 73 +++++++++++++++++---- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index 86a7da6f..9bea47de 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -156,3 +156,21 @@ export const templateContent = [ requiredTime: "2~3일 일정", }, ]; + +export const itemColor = [ + "bg-[#A3FAF2]", + "bg-[#FFE779]", + "bg-[#FFC395]", + "bg-[#CFE1FF]", + "bg-[#DDD1FF]", + "bg-[#FFDCDC]", + "bg-[#9BF2CE]", + "bg-[#FFB8B4]", + "bg-[#95CCFF]", + "bg-[#EEB785]", + "bg-[#FFD1EA]", + "bg-[#D8D8D8]", + "bg-[#D8B9F8]", + "bg-[#FF9292]", + "bg-[#A1A1A1]", +]; diff --git a/src/modalContent/CustomScheduleSelector.tsx b/src/modalContent/CustomScheduleSelector.tsx index 09ec72cd..fe8e4f49 100644 --- a/src/modalContent/CustomScheduleSelector.tsx +++ b/src/modalContent/CustomScheduleSelector.tsx @@ -1,4 +1,6 @@ import { ScheduleTitle } from "@create-schedule/components"; +import { itemColor } from "@create-schedule/constants"; +import Image from "next/image"; import { useState } from "react"; import { useSetRecoilState } from "recoil"; import { useModal } from "@shared/hook"; @@ -7,6 +9,7 @@ import { CategoryItem } from "@shared/types"; const CustomScheduleSelector = () => { const { closeModal } = useModal(); + const [isError, setIsError] = useState(false); const [newItem, setNewItem] = useState<CategoryItem>({ category: "기타", title: "", @@ -20,21 +23,25 @@ const CustomScheduleSelector = () => { }; const makeNewItem = () => { - setCustomItems((prev) => { - if (prev) { - const newArray = [...prev]; - newArray.push(newItem); + if (newItem.category && newItem.tagBackground && newItem.title) { + setCustomItems((prev) => { + if (prev) { + const newArray = [...prev]; + newArray.push(newItem); - return newArray; - } + return newArray; + } - return [newItem]; - }); - closeModal(); + return [newItem]; + }); + closeModal(); + return; + } + setIsError(true); }; return ( - <> + <div className="w-[362px]"> <ScheduleTitle title="나만의 아이템 만들기" /> <div className="text-[#333333] mb-[8px]"> 카테고리 @@ -42,7 +49,7 @@ const CustomScheduleSelector = () => { * </span> </div> - <div className="w-[362px] h-[57px] border border-[#ADADAD] rounded-[9px] px-[16px] mb-[13px] focus-within:border-[#4285F4]"> + <div className="w-full h-[57px] border border-[#ADADAD] rounded-[9px] px-[16px] mb-[13px] focus-within:border-[#4285F4]"> <select defaultValue="기타" className="w-full h-full text-[#333333] outline-0" @@ -59,6 +66,35 @@ const CustomScheduleSelector = () => { <option>등산</option> </select> </div> + <div className="text-[#333333] mb-[8px]"> + 아이템 색 + <span className="w-[11px] h-[22px] text-[#FF0000] text-xl font-light"> + * + </span> + </div> + <div className="flex flex-wrap w-full gap-[5px] mb-[12px]"> + {itemColor.map((color, index) => ( + <span + key={`${color}-${index}`} + className={`${ + newItem.tagBackground === color ? "brightness-90 " : "" + }${color} w-[23px] h-[23px] rounded-[50%] text-[0px] cursor-pointer`} + onClick={() => handleInput("tagBackground", color)} + > + color + {newItem.tagBackground === color && ( + <div className="text-center pt-[4px] brightness-0"> + <Image + src="/images/samples/checked.svg" + alt="checked" + width={15} + height={15} + /> + </div> + )} + </span> + ))} + </div> <div className="inline-block"> <div className="text-[#333333] mb-[8px]"> 아이템명 @@ -83,13 +119,22 @@ const CustomScheduleSelector = () => { /> </div> <div className="text-[#333333] mb-[8px]">세부내용(선택)</div> - <div className="w-[362px] h-[78px] border border-[#ADADAD] rounded-[9px] px-[16px] py-[10px] mb-[17px] focus-within:border-[#4285F4]"> + <div className="w-full h-[78px] border border-[#ADADAD] rounded-[9px] px-[16px] py-[10px] focus-within:border-[#4285F4]"> <textarea className="w-full resize-none outline-0" placeholder="집 근처 공원 산책" /> </div> - <div className="w-[362px] text-center"> + + {isError ? ( + <div className="w-full h-[18px] text-center text-[12px] text-[#FF2330] leading-[18px] my-[6px]"> + 필수 입력 정보를 모두 입력해주세요.(카테고리, 아이템 색, 아이템명) + </div> + ) : ( + <div className="w-full h-[18px] my-[6px]"></div> + )} + + <div className="w-full text-center"> <button className="w-[120px] h-[48px] text-[14px] text-[#B1B1B1] font-bold -tracking-[0.03em] bg-[#E9ECEF] rounded-[5px] mr-[10px]" onClick={closeModal} @@ -103,7 +148,7 @@ const CustomScheduleSelector = () => { 아이템 등록 </button> </div> - </> + </div> ); }; From cbbaf310db1a8a1872d29b51f7f7ccfaa82aa77f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:12:01 +0900 Subject: [PATCH 55/74] =?UTF-8?q?[feat]=20=EC=A0=9C=EB=AA=A9=20=EA=B8=80?= =?UTF-8?q?=EC=9E=90=EC=88=98=20=EC=A0=9C=ED=95=9C=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PlanTitleInput.tsx | 10 ++++---- src/create-schedule/components/RemainChar.tsx | 24 ------------------- src/create-schedule/components/index.ts | 1 - src/create-schedule/constants/index.ts | 2 ++ 4 files changed, 8 insertions(+), 29 deletions(-) delete mode 100644 src/create-schedule/components/RemainChar.tsx diff --git a/src/create-schedule/components/PlanTitleInput.tsx b/src/create-schedule/components/PlanTitleInput.tsx index c1d294d7..1e0fa31a 100644 --- a/src/create-schedule/components/PlanTitleInput.tsx +++ b/src/create-schedule/components/PlanTitleInput.tsx @@ -1,11 +1,11 @@ -import { SCHEDULE_TITLE } from "@create-schedule/constants"; +import { SCHEDULE_TITLE, TITLE_MAX_LENGTH } from "@create-schedule/constants"; import { useRecoilState } from "recoil"; import { scheduleAnswers } from "@shared/recoil"; -import RemainChar from "./RemainChar"; import ScheduleTitle from "./ScheduleTitle"; const PlanTitleInput = () => { const [{ title }, setTitle] = useRecoilState(scheduleAnswers); + const remainChar = TITLE_MAX_LENGTH - title.length; const handleTitle = (title: string) => { setTitle((prev) => ({ ...prev, title })); @@ -18,10 +18,12 @@ const PlanTitleInput = () => { className="w-[628px] h-[55px] border border-[#E0E0E0] rounded-[5px] px-[26px]" type="text" placeholder="일정 제목을 입력해주세요." - maxLength={40} + maxLength={TITLE_MAX_LENGTH} onChange={({ target: { value } }) => handleTitle(value)} /> - <RemainChar title={title} /> + <div className="text-[12px] text-[#8D8D8D] font-medium -tracking-[0.01em]"> + {remainChar < 0 ? 0 : remainChar}자 남음 + </div> </div> ); }; diff --git a/src/create-schedule/components/RemainChar.tsx b/src/create-schedule/components/RemainChar.tsx deleted file mode 100644 index fbb49385..00000000 --- a/src/create-schedule/components/RemainChar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useEffect, useState } from "react"; - -interface RemainCharProps { - title: string; -} - -const RemainChar = ({ title }: RemainCharProps) => { - const [remainChar, setRemainChar] = useState(40); - - useEffect(() => { - setRemainChar(() => { - if (40 - title.length < 0) return 0; - return 40 - title.length; - }); - }, [title.length]); - - return ( - <div className="text-[12px] text-[#8D8D8D] font-medium -tracking-[0.01em]"> - {remainChar}자 남음 - </div> - ); -}; - -export default RemainChar; diff --git a/src/create-schedule/components/index.ts b/src/create-schedule/components/index.ts index 3e1969b9..2dad7c63 100644 --- a/src/create-schedule/components/index.ts +++ b/src/create-schedule/components/index.ts @@ -25,7 +25,6 @@ export { default as PlanDefaultInfo } from "./PlanDefaultInfo"; export { default as PlanMainImage } from "./PlanMainImage"; export { default as PlanSideBar } from "./PlanSideBar"; export { default as PlanTitleInput } from "./PlanTitleInput"; -export { default as RemainChar } from "./RemainChar"; export { default as RemainContent } from "./RemainContent"; export { default as Remains } from "./Remains"; export { default as ScheduleNextButton } from "./ScheduleNextButton"; diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index 9bea47de..06bf1c30 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -174,3 +174,5 @@ export const itemColor = [ "bg-[#FF9292]", "bg-[#A1A1A1]", ]; + +export const TITLE_MAX_LENGTH = 40; From 81167300d209f0e29738f071f35698fb3cc25fa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:13:24 +0900 Subject: [PATCH 56/74] =?UTF-8?q?[fix]=20=EB=93=9C=EB=9E=98=EA=B7=B8?= =?UTF-8?q?=EC=95=A4=EB=93=9C=EB=9E=8D=20=EB=AA=A8=EB=8B=AC=20=EC=98=A4?= =?UTF-8?q?=ED=94=88=20=EC=A1=B0=EA=B1=B4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx index e382facf..322f1b2f 100644 --- a/src/create-schedule/components/TimeTable.tsx +++ b/src/create-schedule/components/TimeTable.tsx @@ -33,7 +33,11 @@ const TimeTable = () => { ...(prev as CategoryItem), selectedTime: index, })); - if (selectedItem?.title && selectedItem.category && selectedItem.city) { + if ( + selectedItem?.title && + selectedItem.category && + selectedItem.tagBackground + ) { openModal({ contentId: "scheduleTimeSelector", isHeaderCloseBtn: true }); } e.preventDefault(); From 57d847cb29bc59abec45d66d53be45e82ba57e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:13:52 +0900 Subject: [PATCH 57/74] =?UTF-8?q?[feat]=20=EA=B8=B0=ED=83=80=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/util/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts index 8a39d1dd..b9dec53b 100644 --- a/src/create-schedule/util/index.ts +++ b/src/create-schedule/util/index.ts @@ -186,5 +186,7 @@ export const handleImageSrc = (category: CategoryTags) => { return "/images/samples/category_culture.svg"; case "등산": return "/images/samples/category_hiking.svg"; + case "기타": + return "/images/samples/category_etc.svg"; } }; From 600231b0bff4ac79d9bb25ad368959603f9d6012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 00:16:44 +0900 Subject: [PATCH 58/74] =?UTF-8?q?[remove]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=A6=AC=EC=BD=94=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/recoil/planTitle.tsx | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 src/shared/recoil/planTitle.tsx diff --git a/src/shared/recoil/planTitle.tsx b/src/shared/recoil/planTitle.tsx deleted file mode 100644 index 134da2f5..00000000 --- a/src/shared/recoil/planTitle.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { SUBTITLE, TITLE } from "@create-schedule/constants"; -import { atom } from "recoil"; -import { PlanSubTitle, PlanTitle } from "@shared/types"; - -export const planTitle = atom<PlanTitle>({ - key: "planTitle", - default: { - remains: TITLE.remains, - nthPlan: (nickname: string, number: number) => - `${nickname} 님의 ${number}번째 일정`, - tag: "태그 및 일정 템플릿", - fill: "일정 채우기", - finish: "작성 마무리", - }, -}); - -export const planSubTitle = atom<PlanSubTitle>({ - key: "planSubTitle", - default: { - fighting: (nickname: string) => SUBTITLE.fighting(nickname), - withyou: SUBTITLE.withyou, - fillyourplan: (nickname: string) => SUBTITLE.fillyourplan(nickname), - }, -}); From 62307029615aa3e55ba6f6dcc87184c0020570e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 01:13:49 +0900 Subject: [PATCH 59/74] =?UTF-8?q?[feat]=20=EC=8B=9C=EC=9E=91=EC=9D=BC,=20?= =?UTF-8?q?=EC=A2=85=EB=A3=8C=EC=9D=BC=20=ED=83=80=EC=9E=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/types/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 4ccfd170..bb5a1e3b 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -54,8 +54,8 @@ export interface PlanSubTitle { export interface ScheduleAnswerType { title: string; imageSrc: string; - startedAt: string; - endedAt: string; + startedAt: Date | null; + endedAt: Date | null; city: string; tag: string[]; items: [ From 79065f402377281e3b4c2b3f96c483c6a834097f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 01:14:12 +0900 Subject: [PATCH 60/74] =?UTF-8?q?[feat]=20=EC=9C=A0=ED=8B=B8=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/util/index.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts index b9dec53b..be255a72 100644 --- a/src/create-schedule/util/index.ts +++ b/src/create-schedule/util/index.ts @@ -190,3 +190,33 @@ export const handleImageSrc = (category: CategoryTags) => { return "/images/samples/category_etc.svg"; } }; + +export const handleDateFormat = (value: Date) => { + const year = value.getFullYear(); + const month = String(value.getMonth() + 1).padStart(2, "0"); + const day = String(value.getDate()).padStart(2, "0"); + + return `${year}.${month}.${day}`; +}; + +export const handleCurrentDate = (prev: Date | null, type: "next" | "prev") => { + if (prev && type === "next") { + const newDate = new Date( + prev.getFullYear(), + prev.getMonth(), + prev.getDate() + 1, + ); + + return newDate; + } else if (prev && type === "prev") { + const newDate = new Date( + prev.getFullYear(), + prev.getMonth(), + prev.getDate() - 1, + ); + + return newDate; + } + + return null; +}; From ad697e1809988a6f696de87c57994adcb5707ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 01:15:01 +0900 Subject: [PATCH 61/74] =?UTF-8?q?[feat]=20=EB=AA=A8=EB=8B=AC,=20recoil=20D?= =?UTF-8?q?ate=20=ED=83=80=EC=9E=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modalContent/CalendarSelector.tsx | 5 +---- src/shared/recoil/createSchedule.tsx | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/modalContent/CalendarSelector.tsx b/src/modalContent/CalendarSelector.tsx index c9153417..8fd5807a 100644 --- a/src/modalContent/CalendarSelector.tsx +++ b/src/modalContent/CalendarSelector.tsx @@ -13,10 +13,7 @@ const CalendarSelector = ({ type }: CalendarSelectorProps) => { const setAnswer = useSetRecoilState(scheduleAnswers); const handleDate = (date: Date) => { - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = String(date.getDate()).padStart(2, "0"); - setAnswer((prev) => ({ ...prev, [type]: `${year}.${month}.${day}` })); + setAnswer((prev) => ({ ...prev, [type]: date })); closeModal(); }; diff --git a/src/shared/recoil/createSchedule.tsx b/src/shared/recoil/createSchedule.tsx index cab64652..bb2a9583 100644 --- a/src/shared/recoil/createSchedule.tsx +++ b/src/shared/recoil/createSchedule.tsx @@ -23,8 +23,8 @@ export const scheduleAnswers = atom<ScheduleAnswerType>({ default: { title: "", imageSrc: "", - startedAt: "", - endedAt: "", + startedAt: null, + endedAt: null, city: "", tag: [], items: [ From 86d1902fba03aaa76a754cdfe62bc1a4b02863f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 01:15:55 +0900 Subject: [PATCH 62/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=82=A0=EC=A7=9C=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CurrentDate.tsx | 14 +++--- .../components/DateCityInput.tsx | 18 +++++++- .../components/DateContainer.tsx | 46 +++++++++++++++++++ .../components/DateMoveButton.tsx | 17 +++++-- .../components/ScheduleNextButton.tsx | 27 +++++++---- .../components/TimeTableContainer.tsx | 8 +--- 6 files changed, 103 insertions(+), 27 deletions(-) create mode 100644 src/create-schedule/components/DateContainer.tsx diff --git a/src/create-schedule/components/CurrentDate.tsx b/src/create-schedule/components/CurrentDate.tsx index 3b1c2d8b..5c442b16 100644 --- a/src/create-schedule/components/CurrentDate.tsx +++ b/src/create-schedule/components/CurrentDate.tsx @@ -1,13 +1,15 @@ -import { useRecoilValue } from "recoil"; -import { scheduleAnswers } from "@shared/recoil"; +import { handleDateFormat } from "@create-schedule/util"; -const CurrentDate = () => { - // TODO: Date 객체로 사용 - const { startedAt, endedAt } = useRecoilValue(scheduleAnswers); +interface CurrentDateProps { + currentDate: Date | null; +} +const CurrentDate = ({ currentDate }: CurrentDateProps) => { return ( <div className="w-full h-[32px] bg-[#ACBEFF] rounded-[5px] text-center leading-[32px] mb-[10px]"> - <p className="text-[18px] text-white font-semibold">{startedAt}</p> + <p className="text-[18px] text-white font-semibold"> + {currentDate && handleDateFormat(currentDate)} + </p> </div> ); }; diff --git a/src/create-schedule/components/DateCityInput.tsx b/src/create-schedule/components/DateCityInput.tsx index aa6b92c0..23e88b5e 100644 --- a/src/create-schedule/components/DateCityInput.tsx +++ b/src/create-schedule/components/DateCityInput.tsx @@ -1,3 +1,5 @@ +import { handleDateFormat } from "@create-schedule/util"; +import { useMemo } from "react"; import { useRecoilValue } from "recoil"; import { scheduleAnswers } from "@shared/recoil"; import DateCityHandler from "./DateCityHandler"; @@ -15,6 +17,18 @@ const DateCityInput = ({ }: DateCityInputProps) => { const answer = useRecoilValue(scheduleAnswers); + const startDate = useMemo(() => { + if (answer.startedAt) { + return handleDateFormat(answer.startedAt); + } + }, [answer.startedAt]); + + const endDate = useMemo(() => { + if (answer.endedAt) { + return handleDateFormat(answer.endedAt); + } + }, [answer.endedAt]); + return ( <div className="relative inline-block"> <DateCityHandler callType={callType} /> @@ -25,7 +39,9 @@ const DateCityInput = ({ placeholder={placeholder} value={ answerType && callType.includes("date") - ? answer[answerType] + ? callType === "date_start" + ? startDate + : endDate : answer.city } /> diff --git a/src/create-schedule/components/DateContainer.tsx b/src/create-schedule/components/DateContainer.tsx new file mode 100644 index 00000000..d07d57fc --- /dev/null +++ b/src/create-schedule/components/DateContainer.tsx @@ -0,0 +1,46 @@ +import { handleCurrentDate } from "@create-schedule/util"; +import { useState } from "react"; +import { useRecoilValue } from "recoil"; +import { scheduleAnswers } from "@shared/recoil"; +import CurrentDate from "./CurrentDate"; +import DateMoveButton from "./DateMoveButton"; +import ScheduleTitle from "./ScheduleTitle"; + +const DateContainer = () => { + const { startedAt, endedAt } = useRecoilValue(scheduleAnswers); + const [currentDate, setCurrentDate] = useState(startedAt); + + const onClick = (type: "next" | "prev") => { + if (type === "next") { + if ( + endedAt?.getMonth() === currentDate?.getMonth() && + endedAt?.getDate() === currentDate?.getDate() + ) + return; + + setCurrentDate((prev) => { + return handleCurrentDate(prev, type); + }); + } else if (type === "prev") { + if ( + startedAt?.getMonth() === currentDate?.getMonth() && + startedAt?.getDate() === currentDate?.getDate() + ) + return; + + setCurrentDate((prev) => { + return handleCurrentDate(prev, type); + }); + } + }; + + return ( + <> + <DateMoveButton onClick={onClick} /> + <ScheduleTitle title="일정표" /> + <CurrentDate currentDate={currentDate} /> + </> + ); +}; + +export default DateContainer; diff --git a/src/create-schedule/components/DateMoveButton.tsx b/src/create-schedule/components/DateMoveButton.tsx index f3f8e5fc..6bc1877c 100644 --- a/src/create-schedule/components/DateMoveButton.tsx +++ b/src/create-schedule/components/DateMoveButton.tsx @@ -1,10 +1,16 @@ import Image from "next/image"; -const DateMoveButton = () => { - // TODO: Date 객체 사용해서 날짜 이동 +interface DateMoveButtonProps { + onClick: (type: "next" | "prev") => void; +} + +const DateMoveButton = ({ onClick }: DateMoveButtonProps) => { return ( <div className="flex gap-[8px] float-right"> - <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px]"> + <div + className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] cursor-pointer" + onClick={() => onClick("prev")} + > <Image className="rotate-180 invert" src="/images/samples/arrow.svg" @@ -13,7 +19,10 @@ const DateMoveButton = () => { height={14} /> </div> - <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] bg-[#404040]"> + <div + className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] bg-[#404040] cursor-pointer" + onClick={() => onClick("next")} + > <Image src="/images/samples/arrow.svg" alt="arrow" diff --git a/src/create-schedule/components/ScheduleNextButton.tsx b/src/create-schedule/components/ScheduleNextButton.tsx index d512869c..c727ba3f 100644 --- a/src/create-schedule/components/ScheduleNextButton.tsx +++ b/src/create-schedule/components/ScheduleNextButton.tsx @@ -1,3 +1,4 @@ +import { handleDateFormat } from "@create-schedule/util"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { useModal } from "@shared/hook"; import { currentProgress, scheduleAnswers } from "@shared/recoil"; @@ -13,16 +14,22 @@ const ScheduleNextButton = ({ value, callType }: ScheduleNextButtonProps) => { const setCurrentProgress = useSetRecoilState(currentProgress); const handleInputCheck = () => { - const startDate = parseInt(answer.startedAt.replace(/\./g, "")); - const endDate = parseInt(answer.endedAt.replace(/\./g, "")); - - if (endDate - startDate < 0) { - openAlert({ - title: "종료일은 시작일보다 전일 수 없어요.", - isHeaderCloseBtn: true, - }); - - return false; + if (answer.startedAt && answer.endedAt) { + const startDate = parseInt( + handleDateFormat(answer.startedAt).replace(/\./g, ""), + ); + const endDate = parseInt( + handleDateFormat(answer.endedAt).replace(/\./g, ""), + ); + + if (endDate - startDate < 0) { + openAlert({ + title: "종료일은 시작일보다 전일 수 없어요.", + isHeaderCloseBtn: true, + }); + + return false; + } } return true; diff --git a/src/create-schedule/components/TimeTableContainer.tsx b/src/create-schedule/components/TimeTableContainer.tsx index 8f00c6aa..efc967c2 100644 --- a/src/create-schedule/components/TimeTableContainer.tsx +++ b/src/create-schedule/components/TimeTableContainer.tsx @@ -1,6 +1,4 @@ -import CurrentDate from "./CurrentDate"; -import DateMoveButton from "./DateMoveButton"; -import ScheduleTitle from "./ScheduleTitle"; +import DateContainer from "./DateContainer"; import TimeTable from "./TimeTable"; interface TimeTableContainerProps {} @@ -9,9 +7,7 @@ const TimeTableContainer = ({}: TimeTableContainerProps) => { return ( <> <div className="min-w-[362px] max-w-[362px]"> - <DateMoveButton /> - <ScheduleTitle title="일정표" /> - <CurrentDate /> + <DateContainer /> <div className="w-full border border-[#ACBEFF] rounded-[5px] bg-[#FFF9FC]"> <TimeTable /> </div> From 7e45c3db33ae17838ca4d861ea70e9c6e4330a22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 01:26:11 +0900 Subject: [PATCH 63/74] =?UTF-8?q?[design]=20=EB=82=A0=EC=A7=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=B2=84=ED=8A=BC=20=ED=98=B8=EB=B2=84=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/DateMoveButton.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/create-schedule/components/DateMoveButton.tsx b/src/create-schedule/components/DateMoveButton.tsx index 6bc1877c..1dda4c1a 100644 --- a/src/create-schedule/components/DateMoveButton.tsx +++ b/src/create-schedule/components/DateMoveButton.tsx @@ -8,11 +8,11 @@ const DateMoveButton = ({ onClick }: DateMoveButtonProps) => { return ( <div className="flex gap-[8px] float-right"> <div - className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] cursor-pointer" + className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] cursor-pointer group hover:bg-[#404040]" onClick={() => onClick("prev")} > <Image - className="rotate-180 invert" + className="rotate-180 invert group-hover:invert-0" src="/images/samples/arrow.svg" alt="arrow" width={14} @@ -20,10 +20,11 @@ const DateMoveButton = ({ onClick }: DateMoveButtonProps) => { /> </div> <div - className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] bg-[#404040] cursor-pointer" + className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] cursor-pointer group hover:bg-[#404040]" onClick={() => onClick("next")} > <Image + className="invert group-hover:invert-0" src="/images/samples/arrow.svg" alt="arrow" width={14} From 8118766e29b6ffe3ed470eafb1876ed611ac3b8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 18:05:18 +0900 Subject: [PATCH 64/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=9A=94=EC=9D=BC=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/CurrentDate.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/create-schedule/components/CurrentDate.tsx b/src/create-schedule/components/CurrentDate.tsx index 5c442b16..067a44b9 100644 --- a/src/create-schedule/components/CurrentDate.tsx +++ b/src/create-schedule/components/CurrentDate.tsx @@ -1,4 +1,4 @@ -import { handleDateFormat } from "@create-schedule/util"; +import { getDay, handleDateFormat } from "@create-schedule/util"; interface CurrentDateProps { currentDate: Date | null; @@ -7,9 +7,12 @@ interface CurrentDateProps { const CurrentDate = ({ currentDate }: CurrentDateProps) => { return ( <div className="w-full h-[32px] bg-[#ACBEFF] rounded-[5px] text-center leading-[32px] mb-[10px]"> - <p className="text-[18px] text-white font-semibold"> + <p className="inline-block text-[18px] text-white font-semibold mr-[6px]"> {currentDate && handleDateFormat(currentDate)} </p> + <p className="inline-block text-[18px] text-[#333C57] font-semibold"> + {currentDate && getDay(currentDate)} + </p> </div> ); }; From af79d5bfcc2d302afec25164a8d186017a7952f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 18:05:46 +0900 Subject: [PATCH 65/74] =?UTF-8?q?[feat]=20=EC=9A=94=EC=9D=BC=20=EB=A6=AC?= =?UTF-8?q?=ED=84=B4=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/constants/index.ts | 2 ++ src/create-schedule/util/index.ts | 8 +++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/create-schedule/constants/index.ts b/src/create-schedule/constants/index.ts index 06bf1c30..de041a3c 100644 --- a/src/create-schedule/constants/index.ts +++ b/src/create-schedule/constants/index.ts @@ -176,3 +176,5 @@ export const itemColor = [ ]; export const TITLE_MAX_LENGTH = 40; + +export const WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; diff --git a/src/create-schedule/util/index.ts b/src/create-schedule/util/index.ts index be255a72..3fc44e70 100644 --- a/src/create-schedule/util/index.ts +++ b/src/create-schedule/util/index.ts @@ -1,5 +1,5 @@ import { TableArrayType } from "@create-schedule/components/TimeTable"; -import { PIXEL, TIME } from "@create-schedule/constants"; +import { PIXEL, TIME, WEEK } from "@create-schedule/constants"; import { Dispatch, SetStateAction } from "react"; import { AppliedItem, CategoryTags, Start2EndTime } from "@shared/types"; @@ -220,3 +220,9 @@ export const handleCurrentDate = (prev: Date | null, type: "next" | "prev") => { return null; }; + +export const getDay = (value: Date) => { + const currentDayIndex = value.getDay(); + + return WEEK[currentDayIndex]; +}; From 0d6dc0e35f913c6f778cdb87fe2fbbc0adcba56b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 18:06:12 +0900 Subject: [PATCH 66/74] =?UTF-8?q?[feat]=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?= =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modalContent/index.tsx | 3 +++ src/shared/components/ScheduleCard.tsx | 9 +++++++-- src/shared/recoil/modal.tsx | 3 ++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/modalContent/index.tsx b/src/modalContent/index.tsx index eca66e6b..a805e935 100644 --- a/src/modalContent/index.tsx +++ b/src/modalContent/index.tsx @@ -2,6 +2,7 @@ import { ModalContentId } from "@shared/recoil/modal"; import CalendarSelector from "./CalendarSelector"; import CustomScheduleSelector from "./CustomScheduleSelector"; import ScheduleTimeSelector from "./ScheduleTimeSelector"; +import TemplatePreview from "./TemplatePreview"; import ThumbnailSelector, { ThumbnailSelectorProps } from "./ThumbnailSelector"; export interface ModalContentProps { @@ -21,6 +22,8 @@ const ModalContent = <T,>(modalProps: ModalContentProps) => { return <ScheduleTimeSelector />; case "customScheduleSelector": return <CustomScheduleSelector />; + case "templatePreview": + return <TemplatePreview />; default: return <></>; } diff --git a/src/shared/components/ScheduleCard.tsx b/src/shared/components/ScheduleCard.tsx index 729c221f..6be96623 100644 --- a/src/shared/components/ScheduleCard.tsx +++ b/src/shared/components/ScheduleCard.tsx @@ -1,5 +1,6 @@ import { Continue, TemplateButton } from "@create-schedule/components"; import { useState } from "react"; +import { useModal } from "@shared/hook"; // TODO: 일정 타입 지정 export interface Schedule { @@ -17,9 +18,13 @@ interface ScheduleCardProps { } const ScheduleCard = ({ content, callType }: ScheduleCardProps) => { + const { openModal } = useModal(); const [clickedContent, setClickedContent] = useState<number | null>(null); - const handleClick = (index: number) => { + const onClick = (index: number) => { + if (callType === "template") { + openModal({ contentId: "templatePreview", isHeaderCloseBtn: true }); + } setClickedContent(index); }; @@ -32,7 +37,7 @@ const ScheduleCard = ({ content, callType }: ScheduleCardProps) => { className={`${ clickedContent === index ? "border-[#22AFFF]" : "border-[#E0E0E0]" } w-[151px] h-[196px] border rounded-[5px] cursor-pointer`} - onClick={() => handleClick(index)} + onClick={() => onClick(index)} > <div className="w-[149px] h-[113px] bg-black rounded-t-[5px]"> {_content.imageSrc} diff --git a/src/shared/recoil/modal.tsx b/src/shared/recoil/modal.tsx index 02ba6bee..ffcd3cc6 100644 --- a/src/shared/recoil/modal.tsx +++ b/src/shared/recoil/modal.tsx @@ -90,4 +90,5 @@ export type ModalContentId = | "calendarSelector_start" | "calendarSelector_end" | "scheduleTimeSelector" - | "customScheduleSelector"; + | "customScheduleSelector" + | "templatePreview"; From ebcef7a8da001b8443b21f8f2ef27e423c1a65c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 18:06:23 +0900 Subject: [PATCH 67/74] =?UTF-8?q?[feat]=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?= =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeTable.tsx | 72 +++++++++++--------- src/modalContent/TemplatePreview.tsx | 32 +++++++++ 2 files changed, 73 insertions(+), 31 deletions(-) create mode 100644 src/modalContent/TemplatePreview.tsx diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx index 322f1b2f..ca5fa509 100644 --- a/src/create-schedule/components/TimeTable.tsx +++ b/src/create-schedule/components/TimeTable.tsx @@ -8,7 +8,7 @@ import { DragEvent, useEffect, useState } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; import { useModal } from "@shared/hook"; import { appliedScheduleItem, selectedScheduleItem } from "@shared/recoil"; -import { CategoryItem } from "@shared/types"; +import { AppliedItem, CategoryItem } from "@shared/types"; import CategoryFrame from "./CategoryFrame"; export interface TableArrayType { @@ -16,7 +16,12 @@ export interface TableArrayType { cellHeight: number; } -const TimeTable = () => { +interface TimeTableProps { + callType: "template" | "custom"; + initialData?: AppliedItem[]; +} + +const TimeTable = ({ callType, initialData }: TimeTableProps) => { const [tableArray, setTableArray] = useState<TableArrayType[]>( Array.from({ length: 25 }, (_, index) => ({ time: index, @@ -43,6 +48,37 @@ const TimeTable = () => { e.preventDefault(); }; + const renderItems = ( + items: AppliedItem[], + cellHeight: number, + index: number, + ) => { + return items.map((item, _index) => { + const { type, itemHeight } = calculateItemHeight( + item.startTime, + item.endTime, + ); + const top = calculateTop(cellHeight); + + if (item.startTime.hour === index) + return ( + <div + key={item.category + item.tagBackground + item.startTime} + style={type === "sameCell" ? {} : { top: top }} + className={`${ + item.startTime.hour === item.endTime.hour || + (item.endTime.minute === 0 && + item.endTime.hour - item.startTime.hour === 1) + ? "relative" + : "absolute left-[80px]" + }`} + > + <CategoryFrame category={[item]} itemHeight={itemHeight} /> + </div> + ); + }); + }; + useEffect(() => { calculateTableHeight({ appliedItem, tableArray, setTableArray }); }, [appliedItem]); @@ -65,35 +101,9 @@ const TimeTable = () => { > <div className="inline-block w-[56px]">{time}:00</div> <div className="flex flex-col gap-[1px] inline-block float-right w-[250px]"> - {appliedItem?.map((item, _index) => { - const { type, itemHeight } = calculateItemHeight( - item.startTime, - item.endTime, - ); - const top = calculateTop(cellHeight); - - if (item.startTime.hour === index) - return ( - <div - key={ - item.category + item.tagBackground + item.startTime - } - style={type === "sameCell" ? {} : { top: top }} - className={`${ - item.startTime.hour === item.endTime.hour || - (item.endTime.minute === 0 && - item.endTime.hour - item.startTime.hour === 1) - ? "relative" - : "absolute left-[80px]" - }`} - > - <CategoryFrame - category={[item]} - itemHeight={itemHeight} - /> - </div> - ); - })} + {callType === "template" + ? initialData && renderItems(initialData, cellHeight, index) + : appliedItem && renderItems(appliedItem, cellHeight, index)} </div> </td> </tr> diff --git a/src/modalContent/TemplatePreview.tsx b/src/modalContent/TemplatePreview.tsx new file mode 100644 index 00000000..38d0026c --- /dev/null +++ b/src/modalContent/TemplatePreview.tsx @@ -0,0 +1,32 @@ +import { CurrentDate, TimeTable } from "@create-schedule/components"; +import { useModal } from "@shared/hook"; + +const TemplatePreview = () => { + const { closeModal } = useModal(); + const currentDate = new Date(); // TODO: 날짜 받아오기 + + return ( + <div className="w-[95%]"> + <div className="text-[18px] text-[#333333] font-medium -tracking-[0.5px] mb-[12px]"> + 템플릿 미리 보기 + </div> + <div> + <CurrentDate currentDate={currentDate} /> + </div> + <div className="w-full border border-[#ACBEFF] rounded-[5px] bg-[#FFF9FC] mb-[12px]"> + {/* TODO: initialData 받아오기 */} + <TimeTable callType="template" /> + </div> + <div className="text-center"> + <button + className="w-[81px] h-[48px] text-[14px] text-white font-bold -tracking-[0.03em] bg-[#F864A1] rounded-[5px]" + onClick={closeModal} + > + 확인 + </button> + </div> + </div> + ); +}; + +export default TemplatePreview; From 4ffa24c035d72ab775d1373db49bb13a822c238d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sun, 26 Nov 2023 23:53:23 +0900 Subject: [PATCH 68/74] =?UTF-8?q?[feat]=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MakeScheduleButton.tsx | 5 ++-- .../components/ScheduleNextButton.tsx | 17 +++++++++-- .../components/ScheduleTagTemplate.tsx | 19 ++++++++++-- src/create-schedule/components/Template.tsx | 19 ++++++++++-- .../components/TemplateButton.tsx | 29 ++++++++++++++----- .../components/TemplateRecommend.tsx | 12 ++++++-- src/shared/components/ScheduleCard.tsx | 23 ++++++++++++--- 7 files changed, 100 insertions(+), 24 deletions(-) diff --git a/src/create-schedule/components/MakeScheduleButton.tsx b/src/create-schedule/components/MakeScheduleButton.tsx index 89a069e5..824ff141 100644 --- a/src/create-schedule/components/MakeScheduleButton.tsx +++ b/src/create-schedule/components/MakeScheduleButton.tsx @@ -1,6 +1,7 @@ -import { HTMLAttributes } from "react"; +import { ButtonHTMLAttributes } from "react"; -interface MakeScheduleButtonProps extends HTMLAttributes<HTMLButtonElement> { +interface MakeScheduleButtonProps + extends ButtonHTMLAttributes<HTMLButtonElement> { value: string; buttonStyle: string; } diff --git a/src/create-schedule/components/ScheduleNextButton.tsx b/src/create-schedule/components/ScheduleNextButton.tsx index c727ba3f..7597898f 100644 --- a/src/create-schedule/components/ScheduleNextButton.tsx +++ b/src/create-schedule/components/ScheduleNextButton.tsx @@ -1,14 +1,20 @@ import { handleDateFormat } from "@create-schedule/util"; +import { ButtonHTMLAttributes } from "react"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { useModal } from "@shared/hook"; import { currentProgress, scheduleAnswers } from "@shared/recoil"; -interface ScheduleNextButtonProps { +interface ScheduleNextButtonProps + extends ButtonHTMLAttributes<HTMLButtonElement> { value: string; callType: "basicInfo" | "template"; } -const ScheduleNextButton = ({ value, callType }: ScheduleNextButtonProps) => { +const ScheduleNextButton = ({ + value, + callType, + ...props +}: ScheduleNextButtonProps) => { const { openAlert } = useModal(); const answer = useRecoilValue(scheduleAnswers); const setCurrentProgress = useSetRecoilState(currentProgress); @@ -46,8 +52,13 @@ const ScheduleNextButton = ({ value, callType }: ScheduleNextButtonProps) => { return ( <> <button - className="w-[423px] h-[48px] text-[14px] text-white font-bold -tracking-[0.03em] bg-[#F864A1] rounded-[5px] mb-[9px]" + className={`${ + props.disabled + ? "text-[#B1B1B1] bg-[#E9ECEF] " + : "text-white bg-[#F864A1] " + }w-[423px] h-[48px] text-[14px] font-bold -tracking-[0.03em] rounded-[5px] mb-[9px]`} onClick={handleCurrentProgress} + {...props} > {value} </button> diff --git a/src/create-schedule/components/ScheduleTagTemplate.tsx b/src/create-schedule/components/ScheduleTagTemplate.tsx index f0847de7..211644c7 100644 --- a/src/create-schedule/components/ScheduleTagTemplate.tsx +++ b/src/create-schedule/components/ScheduleTagTemplate.tsx @@ -1,12 +1,21 @@ import { SCHEDULE_TITLE } from "@create-schedule/constants"; +import { useState } from "react"; import ScheduleNextButton from "./ScheduleNextButton"; import ScheduleTagInput from "./ScheduleTagInput"; import ScheduleTitle from "./ScheduleTitle"; import TagRecommend from "./TagRecommend"; -import TemplateButton from "./TemplateButton"; import TemplateRecommend from "./TemplateRecommend"; const ScheduleTagTemplate = () => { + const [isClicked, setIsClicked] = useState({ + template: false, + custom: false, + }); + + const onClick = (key: "template" | "custom") => { + setIsClicked((prev) => ({ ...prev, [key]: !prev[key] })); + }; + return ( <> <ScheduleTitle title={SCHEDULE_TITLE.tag} /> @@ -14,9 +23,13 @@ const ScheduleTagTemplate = () => { <div className="mb-[38px]"> <TagRecommend /> </div> - <TemplateRecommend /> + <TemplateRecommend isClicked={isClicked} onClick={onClick} /> <div className="w-full text-center mt-[60px]"> - <ScheduleNextButton value="다음으로 넘어갈까요?" callType="template" /> + <ScheduleNextButton + disabled={!isClicked.custom} + value="다음으로 넘어갈까요?" + callType="template" + /> </div> </> ); diff --git a/src/create-schedule/components/Template.tsx b/src/create-schedule/components/Template.tsx index 54bed351..e6687ee5 100644 --- a/src/create-schedule/components/Template.tsx +++ b/src/create-schedule/components/Template.tsx @@ -1,8 +1,23 @@ import { templateContent } from "@create-schedule/constants"; import { ScheduleCard } from "@shared/components"; -const Template = () => { - return <ScheduleCard content={templateContent} callType="template" />; +interface TemplateProps { + isClicked: { + template: boolean; + custom: boolean; + }; + onClick: (key: "template" | "custom") => void; +} + +const Template = ({ isClicked, onClick }: TemplateProps) => { + return ( + <ScheduleCard + content={templateContent} + callType="template" + isClicked={isClicked} + onClick={onClick} + /> + ); }; export default Template; diff --git a/src/create-schedule/components/TemplateButton.tsx b/src/create-schedule/components/TemplateButton.tsx index 9b593c7c..a261fc06 100644 --- a/src/create-schedule/components/TemplateButton.tsx +++ b/src/create-schedule/components/TemplateButton.tsx @@ -4,15 +4,19 @@ import MakeScheduleButton from "./MakeScheduleButton"; interface TemplateButtonProps { clickedContent: number | null; + template: boolean; + custom: boolean; + onClick: (key: "template" | "custom") => void; } -const TemplateButton = ({ clickedContent }: TemplateButtonProps) => { +const TemplateButton = ({ + template, + custom, + clickedContent, + onClick, +}: TemplateButtonProps) => { const setCurrentProgress = useSetRecoilState(currentProgress); - const handleCurrentProgress = () => { - setCurrentProgress((prev) => prev + 1); - }; - const handleSelectTemplate = () => { if (clickedContent) { setCurrentProgress((prev) => prev + 1); @@ -22,14 +26,23 @@ const TemplateButton = ({ clickedContent }: TemplateButtonProps) => { return ( <div className="w-full text-center mt-[16px]"> <MakeScheduleButton + disabled={!template} value="선택한 템플릿 바로가기" - buttonStyle="text-[#00D179] border-[#00D179] mr-[9px]" + buttonStyle={`${ + !template + ? "text-[#666666] border-[#E0E0E0] cursor-not-allowed" + : "text-[#00D179] border-[#00D179] cursor-pointer" + } mr-[9px]`} onClick={handleSelectTemplate} /> <MakeScheduleButton value="직접 만들기" - buttonStyle="text-[#666666] border-[#E0E0E0] hover:bg-[#E7F9EE] hover:text-[#00D179]" - onClick={handleCurrentProgress} + buttonStyle={`${ + !custom + ? "text-[#666666] border-[#E0E0E0]" + : "text-[#00D179] bg-[#E7F9EE]" + }`} + onClick={() => onClick("custom")} /> </div> ); diff --git a/src/create-schedule/components/TemplateRecommend.tsx b/src/create-schedule/components/TemplateRecommend.tsx index f11c1d45..fc373d71 100644 --- a/src/create-schedule/components/TemplateRecommend.tsx +++ b/src/create-schedule/components/TemplateRecommend.tsx @@ -2,14 +2,22 @@ import { SCHEDULE_TITLE } from "@create-schedule/constants"; import ScheduleTitle from "./ScheduleTitle"; import Template from "./Template"; -const TemplateRecommend = () => { +interface TemplateRecommendProps { + isClicked: { + template: boolean; + custom: boolean; + }; + onClick: (key: "template" | "custom") => void; +} + +const TemplateRecommend = ({ isClicked, onClick }: TemplateRecommendProps) => { return ( <> <ScheduleTitle title={SCHEDULE_TITLE.templateRecommend("명란마요")} textSize="text-[16px]" /> - <Template /> + <Template isClicked={isClicked} onClick={onClick} /> </> ); }; diff --git a/src/shared/components/ScheduleCard.tsx b/src/shared/components/ScheduleCard.tsx index 6be96623..4e023e0e 100644 --- a/src/shared/components/ScheduleCard.tsx +++ b/src/shared/components/ScheduleCard.tsx @@ -15,14 +15,25 @@ export interface Schedule { interface ScheduleCardProps { content: Schedule[]; callType: "remain" | "template"; + isClicked: { + template: boolean; + custom: boolean; + }; + onClick?: (key: "template" | "custom") => void; } -const ScheduleCard = ({ content, callType }: ScheduleCardProps) => { +const ScheduleCard = ({ + content, + callType, + isClicked, + onClick: handleClickCard, +}: ScheduleCardProps) => { const { openModal } = useModal(); const [clickedContent, setClickedContent] = useState<number | null>(null); const onClick = (index: number) => { - if (callType === "template") { + if (callType === "template" && handleClickCard) { + handleClickCard("template"); openModal({ contentId: "templatePreview", isHeaderCloseBtn: true }); } setClickedContent(index); @@ -65,8 +76,12 @@ const ScheduleCard = ({ content, callType }: ScheduleCardProps) => { ))} </div> <div> - {callType === "template" ? ( - <TemplateButton clickedContent={clickedContent} /> + {callType === "template" && handleClickCard ? ( + <TemplateButton + {...isClicked} + clickedContent={clickedContent} + onClick={handleClickCard} + /> ) : ( <Continue /> )} From 0423a8e5c72ea703016921b9e2d4849e75a2b63c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Fri, 1 Dec 2023 15:05:34 +0900 Subject: [PATCH 69/74] =?UTF-8?q?[feat]=20=ED=83=80=EC=9E=84=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=8B=A4=EC=9D=8C=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/PageContent.tsx | 9 ++++++++- src/create-schedule/components/TimeTableContainer.tsx | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 2e10bca2..7165ab2f 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -4,6 +4,7 @@ import { currentProgress } from "@shared/recoil"; import DragnDropContainer from "./DragnDropContainer"; import PlanDefaultInfo from "./PlanDefaultInfo"; import Remains from "./Remains"; +import ScheduleNextButton from "./ScheduleNextButton"; import ScheduleTagTemplate from "./ScheduleTagTemplate"; import TimeTableContainer from "./TimeTableContainer"; import Title from "./Title"; @@ -45,9 +46,15 @@ const PageContent = () => { subTitle={SUBTITLE.fillyourplan("명란마요")} /> </div> - <div className="flex"> + <div className="flex flex-wrap"> <TimeTableContainer /> <DragnDropContainer /> + <div className="ml-[80px] mt-[80px]"> + <ScheduleNextButton + value="다음으로 넘어갈까요?" + callType="template" + /> + </div> </div> </> )} diff --git a/src/create-schedule/components/TimeTableContainer.tsx b/src/create-schedule/components/TimeTableContainer.tsx index efc967c2..be6a7d5e 100644 --- a/src/create-schedule/components/TimeTableContainer.tsx +++ b/src/create-schedule/components/TimeTableContainer.tsx @@ -9,7 +9,7 @@ const TimeTableContainer = ({}: TimeTableContainerProps) => { <div className="min-w-[362px] max-w-[362px]"> <DateContainer /> <div className="w-full border border-[#ACBEFF] rounded-[5px] bg-[#FFF9FC]"> - <TimeTable /> + <TimeTable callType="custom" /> </div> </div> </> From eefb44296597fbe9a97d59c811590c94dc45759a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Tue, 5 Dec 2023 21:43:03 +0900 Subject: [PATCH 70/74] =?UTF-8?q?[fix]=20prop=20=EB=88=84=EB=9D=BD=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/ScheduleCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/ScheduleCard.tsx b/src/shared/components/ScheduleCard.tsx index 4e023e0e..0ccad844 100644 --- a/src/shared/components/ScheduleCard.tsx +++ b/src/shared/components/ScheduleCard.tsx @@ -15,7 +15,7 @@ export interface Schedule { interface ScheduleCardProps { content: Schedule[]; callType: "remain" | "template"; - isClicked: { + isClicked?: { template: boolean; custom: boolean; }; @@ -76,7 +76,7 @@ const ScheduleCard = ({ ))} </div> <div> - {callType === "template" && handleClickCard ? ( + {callType === "template" && handleClickCard && isClicked ? ( <TemplateButton {...isClicked} clickedContent={clickedContent} From 3fd784fb35d7787f63565ee7cfd876fabc91d9e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Wed, 6 Dec 2023 18:39:40 +0900 Subject: [PATCH 71/74] =?UTF-8?q?[design]=20=ED=99=94=EB=A9=B4=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=B4=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/PageContent.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 7165ab2f..49b62571 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -49,12 +49,12 @@ const PageContent = () => { <div className="flex flex-wrap"> <TimeTableContainer /> <DragnDropContainer /> - <div className="ml-[80px] mt-[80px]"> - <ScheduleNextButton - value="다음으로 넘어갈까요?" - callType="template" - /> - </div> + </div> + <div className="w-[628px] mt-[40px] text-center"> + <ScheduleNextButton + value="다음으로 넘어갈까요?" + callType="template" + /> </div> </> )} From 061a9702d4ed1fb1e472988289ee2a54867c0aa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 16 Dec 2023 15:27:19 +0900 Subject: [PATCH 72/74] =?UTF-8?q?[design]=20em=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/Categories.tsx | 2 +- src/create-schedule/components/CategoryItems.tsx | 8 ++++---- src/create-schedule/components/CurrentDate.tsx | 4 ++-- src/create-schedule/components/CustomItems.tsx | 4 ++-- src/create-schedule/components/DateMoveButton.tsx | 2 +- src/create-schedule/components/PageContent.tsx | 2 +- src/create-schedule/components/ScheduleTitle.tsx | 4 ++-- src/create-schedule/components/TimeTable.tsx | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/create-schedule/components/Categories.tsx b/src/create-schedule/components/Categories.tsx index 63d3f260..bca80d67 100644 --- a/src/create-schedule/components/Categories.tsx +++ b/src/create-schedule/components/Categories.tsx @@ -15,7 +15,7 @@ const Categories = ({ return ( <> <ScheduleTitle title="카테고리" /> - <div className="flex flex-wrap w-[414px] gap-[6px]"> + <div className="flex flex-wrap w-[414px] gap-1.5"> {CATEGORY_TAGS.map(({ imageSrc, title }) => ( <CategoryTagBox key={imageSrc + title} diff --git a/src/create-schedule/components/CategoryItems.tsx b/src/create-schedule/components/CategoryItems.tsx index d115dc2e..b52d1b50 100644 --- a/src/create-schedule/components/CategoryItems.tsx +++ b/src/create-schedule/components/CategoryItems.tsx @@ -10,16 +10,16 @@ interface CategoryItemsProps { const CategoryItems = ({ category, clickedCategory }: CategoryItemsProps) => { return ( - <div className="my-[36px]"> + <div className="my-9"> <ScheduleTitle title={SCHEDULE_TITLE.categoryItems} /> - <div className="w-[414px] border border-[#ADADAD] rounded-[5px] mb-[6px] focus-within:border focus-within:border-[#4285F4]"> + <div className="w-[414px] border border-[#ADADAD] rounded-[5px] mb-1.5 focus-within:border focus-within:border-[#4285F4]"> <input - className="w-full h-[40px] rounded-[5px] pl-[21px] outline-0" + className="w-full h-10 rounded-[5px] pl-[21px] outline-0" type="text" placeholder="카테고리별 아이템 검색" /> </div> - <div className="w-[414px] h-[181px] bg-[#E7F9EE] rounded-[5px] px-[78px] py-[8px] overflow-FAQ"> + <div className="w-[414px] h-[181px] bg-[#E7F9EE] rounded-[5px] px-[78px] py-2 overflow-FAQ"> <CategoryFrame clickedCategory={clickedCategory} category={category} diff --git a/src/create-schedule/components/CurrentDate.tsx b/src/create-schedule/components/CurrentDate.tsx index 067a44b9..43c499d5 100644 --- a/src/create-schedule/components/CurrentDate.tsx +++ b/src/create-schedule/components/CurrentDate.tsx @@ -6,8 +6,8 @@ interface CurrentDateProps { const CurrentDate = ({ currentDate }: CurrentDateProps) => { return ( - <div className="w-full h-[32px] bg-[#ACBEFF] rounded-[5px] text-center leading-[32px] mb-[10px]"> - <p className="inline-block text-[18px] text-white font-semibold mr-[6px]"> + <div className="w-full h-8 bg-[#ACBEFF] rounded-[5px] text-center leading-[32px] mb-2.5"> + <p className="inline-block text-[18px] text-white font-semibold mr-1.5"> {currentDate && handleDateFormat(currentDate)} </p> <p className="inline-block text-[18px] text-[#333C57] font-semibold"> diff --git a/src/create-schedule/components/CustomItems.tsx b/src/create-schedule/components/CustomItems.tsx index 186d4ea6..d82c6df4 100644 --- a/src/create-schedule/components/CustomItems.tsx +++ b/src/create-schedule/components/CustomItems.tsx @@ -16,11 +16,11 @@ const CustomItems = () => { return ( <> - <div className="w-[250px] mb-[12px]"> + <div className="w-[250px] mb-3"> {customItems && <CategoryFrame category={customItems} hasPointer />} </div> <button - className="w-[281px] h-[33px] text-[#505960] border border-dashed border-[#D9D9D9] rounded-[8px]" + className="w-[281px] h-[33px] text-[#505960] border border-dashed border-[#D9D9D9] rounded-lg" onClick={makeNewItem} > + diff --git a/src/create-schedule/components/DateMoveButton.tsx b/src/create-schedule/components/DateMoveButton.tsx index 1dda4c1a..8d8c781c 100644 --- a/src/create-schedule/components/DateMoveButton.tsx +++ b/src/create-schedule/components/DateMoveButton.tsx @@ -6,7 +6,7 @@ interface DateMoveButtonProps { const DateMoveButton = ({ onClick }: DateMoveButtonProps) => { return ( - <div className="flex gap-[8px] float-right"> + <div className="flex float-right gap-2"> <div className="flex justify-center w-[33px] h-[33px] border border-[#1918251A] rounded-[100px] cursor-pointer group hover:bg-[#404040]" onClick={() => onClick("prev")} diff --git a/src/create-schedule/components/PageContent.tsx b/src/create-schedule/components/PageContent.tsx index 49b62571..9fcea2be 100644 --- a/src/create-schedule/components/PageContent.tsx +++ b/src/create-schedule/components/PageContent.tsx @@ -50,7 +50,7 @@ const PageContent = () => { <TimeTableContainer /> <DragnDropContainer /> </div> - <div className="w-[628px] mt-[40px] text-center"> + <div className="w-[628px] mt-10 text-center"> <ScheduleNextButton value="다음으로 넘어갈까요?" callType="template" diff --git a/src/create-schedule/components/ScheduleTitle.tsx b/src/create-schedule/components/ScheduleTitle.tsx index b4280987..d583de6e 100644 --- a/src/create-schedule/components/ScheduleTitle.tsx +++ b/src/create-schedule/components/ScheduleTitle.tsx @@ -15,13 +15,13 @@ const ScheduleTitle = ({ <> <div className={`${ - hasSubTitle ? "mb-[9px]" : "mb-[12px]" + hasSubTitle ? "mb-[9px]" : "mb-3" } ${textSize} w-full text-[#333333] font-medium -tracking-[0.5px]`} > {title} </div> {hasSubTitle && ( - <div className="text-[12px] text-[#8D8D8D] font-medium -tracking-[0.01em] mb-[12px]"> + <div className="text-[12px] text-[#8D8D8D] font-medium -tracking-[0.01em] mb-3"> {subTitle} </div> )} diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx index ca5fa509..9632acb3 100644 --- a/src/create-schedule/components/TimeTable.tsx +++ b/src/create-schedule/components/TimeTable.tsx @@ -97,7 +97,7 @@ const TimeTable = ({ callType, initialData }: TimeTableProps) => { > <td style={{ height: cellHeight }} - className="relative list-item list-none text-[#ACBEFF] font-semibold leading-[22px] pl-[15px] pr-[30px] py-[6px]" + className="relative list-item list-none text-[#ACBEFF] font-semibold leading-[22px] pl-[15px] pr-[30px] py-1.5" > <div className="inline-block w-[56px]">{time}:00</div> <div className="flex flex-col gap-[1px] inline-block float-right w-[250px]"> From 4bf57b37accd3f1907a978540c849d6d15638801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 16 Dec 2023 15:31:15 +0900 Subject: [PATCH 73/74] =?UTF-8?q?[fix]=20pointer=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EB=B0=B1=ED=8B=B1=20=EC=95=88=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryFrame.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/create-schedule/components/CategoryFrame.tsx b/src/create-schedule/components/CategoryFrame.tsx index 8a9716c8..80743763 100644 --- a/src/create-schedule/components/CategoryFrame.tsx +++ b/src/create-schedule/components/CategoryFrame.tsx @@ -38,7 +38,6 @@ const CategoryFrame = ({ <> {filteredCategory.map((_category, index) => { const isLastIndex = index === category.length - 1; - const pointer = hasPointer ? "cursor-pointer " : ""; const imageSrc = handleImageSrc(_category.category); return ( @@ -46,20 +45,20 @@ const CategoryFrame = ({ draggable={hasPointer} onDragStart={() => onDragStart(index)} onDragOver={(e) => e.preventDefault()} - className={`${ - isLastIndex ? "" : "mb-[8px] " - }${pointer}flex w-[250px]`} + className={`${isLastIndex ? "" : "mb-2 "}${ + hasPointer ? "cursor-pointer " : "" + }flex w-[250px]`} key={_category.city + _category.tagBackground} style={{ height: `${itemHeight}px` }} > <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[4px_0_0_4px]`} + className={`${_category.tagBackground} brightness-90 inline-block w-2 rounded-[4px_0_0_4px]`} > <div style={{ height: itemHeight ? `${itemHeight - 8}px` : "13px", }} - className={`${_category.tagBackground} brightness-125 w-[2px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + className={`${_category.tagBackground} brightness-125 w-0.5 rounded-[1px] opacity-[40%] mx-auto my-1`} /> </div> <div @@ -74,7 +73,7 @@ const CategoryFrame = ({ height={15} /> )} - <span className="text-[10px] text-[#454545] font-semibold shrink-0 ml-[4px] mr-[10px]"> + <span className="text-[10px] text-[#454545] font-semibold shrink-0 ml-1 mr-2.5"> {_category.category} </span> <span className="text-[10px] text-[#454545] font-medium grow truncate"> @@ -85,13 +84,13 @@ const CategoryFrame = ({ </span> </div> <div - className={`${_category.tagBackground} brightness-90 inline-block w-[8px] rounded-[0_4px_4px_0] `} + className={`${_category.tagBackground} brightness-90 inline-block w-2 rounded-[0_4px_4px_0]`} > <div style={{ height: itemHeight ? `${Number(itemHeight) - 8}px` : "13px", }} - className={`${_category.tagBackground} brightness-125 w-[2px] h-[13px] rounded-[1px] opacity-[40%] mx-auto my-[4px]`} + className={`${_category.tagBackground} brightness-125 w-0.5 h-[13px] rounded-[1px] opacity-[40%] mx-auto my-1`} /> </div> </div> From 9fb5f0c0d40b3fc2d2e24c4d7abb650d2313e141 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= <jinwook.fe@gmail.com> Date: Sat, 16 Dec 2023 15:44:49 +0900 Subject: [PATCH 74/74] =?UTF-8?q?[design]=20flexbox=EC=9D=98=20inline=20bl?= =?UTF-8?q?ock=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create-schedule/components/TimeTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/create-schedule/components/TimeTable.tsx b/src/create-schedule/components/TimeTable.tsx index 9632acb3..8947a421 100644 --- a/src/create-schedule/components/TimeTable.tsx +++ b/src/create-schedule/components/TimeTable.tsx @@ -100,7 +100,7 @@ const TimeTable = ({ callType, initialData }: TimeTableProps) => { className="relative list-item list-none text-[#ACBEFF] font-semibold leading-[22px] pl-[15px] pr-[30px] py-1.5" > <div className="inline-block w-[56px]">{time}:00</div> - <div className="flex flex-col gap-[1px] inline-block float-right w-[250px]"> + <div className="flex flex-col gap-[1px] float-right w-[250px]"> {callType === "template" ? initialData && renderItems(initialData, cellHeight, index) : appliedItem && renderItems(appliedItem, cellHeight, index)}