From bedefe747a6e650450674f90aae6a98fe77839f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Sun, 26 Nov 2023 15:00:03 +0900 Subject: [PATCH 01/28] =?UTF-8?q?[feat]=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=ED=9B=84=20=EB=8C=80=ED=91=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SelectMainImage.tsx | 40 ++++++++++++++----- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/create-schedule/components/SelectMainImage.tsx b/src/create-schedule/components/SelectMainImage.tsx index 2c014267..cb48a2a3 100644 --- a/src/create-schedule/components/SelectMainImage.tsx +++ b/src/create-schedule/components/SelectMainImage.tsx @@ -1,19 +1,34 @@ +import axios from "axios"; import { ThumbnailSelectorProps } from "modalContent/ThumbnailSelector"; import Image from "next/image"; -import { useSetRecoilState } from "recoil"; +import { useRecoilState } from "recoil"; import { useModal } from "@shared/hook"; import { scheduleAnswers } from "@shared/recoil"; const SelectMainImage = () => { - const setImageSrc = useSetRecoilState(scheduleAnswers); + const [{ imageSrc }, setImageSrc] = useRecoilState(scheduleAnswers); const { openModal } = useModal(); + const getImage = async (id: string) => { + try { + const image = await axios.get(`https://api.pexels.com/v1/photos/${id}`, { + headers: { + "Content-Type": "application/json", + Authorization: process.env.NEXT_PUBLIC_IMAGE_API_KEY, + }, + }); + setImageSrc((prev) => ({ ...prev, imageSrc: image.data.src.large })); + } catch (error) { + console.log(error); + } + }; + const handleModal = () => { openModal({ contentId: "thumbnailSelector", isHeaderCloseBtn: true, okCallback: (id: string) => { - setImageSrc((prev) => ({ ...prev, imageSrc: id })); + getImage(id); }, }); }; @@ -23,16 +38,19 @@ const SelectMainImage = () => { className="w-[222px] h-[126px] border border-[#E0E0E0] rounded-[5px] mr-[8px] cursor-pointer" onClick={handleModal} > -
+
camera -
- 이미지 선택하기 -
+ {!imageSrc && ( +
+ 이미지 선택하기 +
+ )}
); From d0158b30be0116c983aeaa1f7de16561bb8394e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Mon, 27 Nov 2023 21:18:20 +0900 Subject: [PATCH 02/28] =?UTF-8?q?[feat]=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=ED=81=B4=EB=A6=AD=20=EC=83=81=ED=83=9C=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 --- src/create-schedule/components/BasicInfo.tsx | 37 ++++++++++++---- src/create-schedule/components/FillPlan.tsx | 20 ++++++++- .../components/FinishWriting.tsx | 35 ++++++++++++--- .../components/MenuContent.tsx | 23 +++++++--- .../components/PlanSideBar.tsx | 43 +++++++++++++++++-- .../components/SideBarMenuBox.tsx | 11 +++-- .../components/TagNTemplate.tsx | 35 ++++++++++++--- 7 files changed, 167 insertions(+), 37 deletions(-) diff --git a/src/create-schedule/components/BasicInfo.tsx b/src/create-schedule/components/BasicInfo.tsx index 683c851c..60182977 100644 --- a/src/create-schedule/components/BasicInfo.tsx +++ b/src/create-schedule/components/BasicInfo.tsx @@ -1,31 +1,52 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import MenuContent from "./MenuContent"; import MenuContentContainer from "./MenuContentContainer"; import SideBarMenuBox from "./SideBarMenuBox"; -interface BasicInfoProps {} +interface BasicInfoProps { + current: number; + currentTab: string; + handleTab: (value: string) => void; +} -const BasicInfo = ({}: BasicInfoProps) => { - const boxTitle = "기본정보"; +const BasicInfo = ({ current, currentTab, handleTab }: BasicInfoProps) => { const [isOpen, setIsOpen] = useState(false); const handleToggle = () => { setIsOpen((prev) => !prev); }; + useEffect(() => { + if (current === 2) { + setIsOpen(true); + } + }, [current]); + return ( <> {isOpen && ( - - - + {[ + "일정 제목 입력", + "대표 이미지 설정", + "시작일 종료일 설정", + "위치 선택", + ].map((title) => ( + + ))} )} diff --git a/src/create-schedule/components/FillPlan.tsx b/src/create-schedule/components/FillPlan.tsx index ea579d36..d200c6cb 100644 --- a/src/create-schedule/components/FillPlan.tsx +++ b/src/create-schedule/components/FillPlan.tsx @@ -1,8 +1,24 @@ +import { useSetRecoilState } from "recoil"; +import { currentPageName, currentProgress } from "@shared/recoil"; import SideBarMenuBox from "./SideBarMenuBox"; -const FillPlan = () => { +interface FillPlanProps { + handleTab: (value: string) => void; +} + +const FillPlan = ({ handleTab }: FillPlanProps) => { + const setCurrentPage = useSetRecoilState(currentPageName); + const setCurrentProgress = useSetRecoilState(currentProgress); + return ( -
+
{ + handleTab("일정 채우기"); + setCurrentPage("일정 채우기"); + setCurrentProgress(4); + }} + >
); diff --git a/src/create-schedule/components/FinishWriting.tsx b/src/create-schedule/components/FinishWriting.tsx index e928e653..cc69e927 100644 --- a/src/create-schedule/components/FinishWriting.tsx +++ b/src/create-schedule/components/FinishWriting.tsx @@ -1,28 +1,51 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import MenuContent from "./MenuContent"; import MenuContentContainer from "./MenuContentContainer"; import SideBarMenuBox from "./SideBarMenuBox"; -const FinishWriting = () => { - const boxTitle = "작성 마무리"; +interface FinishWritingProps { + current: number; + currentTab: string; + handleTab: (value: string) => void; +} + +const FinishWriting = ({ + current, + currentTab, + handleTab, +}: FinishWritingProps) => { const [isOpen, setIsOpen] = useState(false); const handleToggle = () => { setIsOpen((prev) => !prev); }; + useEffect(() => { + if (current === 5) { + setIsOpen(true); + } + }, []); + return ( <> {isOpen && ( - - + {["공개범위 설정", "일정 소개"].map((title) => ( + + ))} )} diff --git a/src/create-schedule/components/MenuContent.tsx b/src/create-schedule/components/MenuContent.tsx index a3d6b9ee..de1bb4d9 100644 --- a/src/create-schedule/components/MenuContent.tsx +++ b/src/create-schedule/components/MenuContent.tsx @@ -1,22 +1,35 @@ import { useSetRecoilState } from "recoil"; -import { currentPageName } from "@shared/recoil"; +import { currentPageName, currentProgress } from "@shared/recoil"; import { CurrentPageType } from "@shared/types"; interface MenuContentProps { title: string; boxTitle: CurrentPageType; - isClicked?: boolean; + targetProgress: number; + currentTab: string; + handleTab: (value: string) => void; } -const MenuContent = ({ title, boxTitle, isClicked }: MenuContentProps) => { +const MenuContent = ({ + title, + boxTitle, + targetProgress, + currentTab, + handleTab, +}: MenuContentProps) => { const setCurrentPage = useSetRecoilState(currentPageName); + const setCurrentProgress = useSetRecoilState(currentProgress); return (
setCurrentPage(boxTitle)} + onClick={() => { + handleTab(title); + setCurrentPage(boxTitle); + setCurrentProgress(targetProgress); + }} > {title}
diff --git a/src/create-schedule/components/PlanSideBar.tsx b/src/create-schedule/components/PlanSideBar.tsx index 235d45bd..409102be 100644 --- a/src/create-schedule/components/PlanSideBar.tsx +++ b/src/create-schedule/components/PlanSideBar.tsx @@ -1,3 +1,6 @@ +import { useEffect, useState } from "react"; +import { useRecoilValue } from "recoil"; +import { currentProgress } from "@shared/recoil"; import BasicInfo from "./BasicInfo"; import FillPlan from "./FillPlan"; import FinishWriting from "./FinishWriting"; @@ -5,13 +8,45 @@ import SideBarIntro from "./SideBarIntro"; import TagNTemplate from "./TagNTemplate"; const PlanSideBar = () => { + const current = useRecoilValue(currentProgress); + const [currentTab, setCurrentTab] = useState("일정 제목 입력"); + + const handleTab = (value: string) => { + setCurrentTab(value); + }; + + useEffect(() => { + switch (current) { + case 2: + return setCurrentTab("일정 제목 입력"); + case 3: + return setCurrentTab("제목 및 썸네일"); + case 5: + return setCurrentTab("공개범위 설정"); + default: + return setCurrentTab(""); + } + }, [current]); + return (
- - - - + + + +
); }; diff --git a/src/create-schedule/components/SideBarMenuBox.tsx b/src/create-schedule/components/SideBarMenuBox.tsx index 75f5a43d..991b3218 100644 --- a/src/create-schedule/components/SideBarMenuBox.tsx +++ b/src/create-schedule/components/SideBarMenuBox.tsx @@ -14,16 +14,15 @@ const SideBarMenuBox = ({ handleToggle, }: SideBarMenuBoxProps) => { return ( -
+

{title}

{isAccordion && ( - // TODO: rotate image, onclick - + fold { - const boxTitle = "태그 및 일정 템플릿"; +interface TagNTemplateProps { + current: number; + currentTab: string; + handleTab: (value: string) => void; +} + +const TagNTemplate = ({ + current, + currentTab, + handleTab, +}: TagNTemplateProps) => { const [isOpen, setIsOpen] = useState(false); const handleToggle = () => { setIsOpen((prev) => !prev); }; + useEffect(() => { + if (current === 3) { + setIsOpen(true); + } + }, [current]); + return ( <> {isOpen && ( - - + {["제목 및 썸네일", "태그 및 일정 템플릿"].map((title) => ( + + ))} )} From 5ec47095b728d0ca1026e2270cee6bfa1a1991ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Mon, 27 Nov 2023 21:23:15 +0900 Subject: [PATCH 03/28] =?UTF-8?q?[feat]=20constant=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/BasicInfo.tsx | 8 ++------ src/create-schedule/components/FinishWriting.tsx | 5 +++-- src/create-schedule/components/PlanSideBar.tsx | 2 +- src/create-schedule/components/TagNTemplate.tsx | 3 ++- src/create-schedule/constants/index.ts | 11 +++++++++++ 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/create-schedule/components/BasicInfo.tsx b/src/create-schedule/components/BasicInfo.tsx index 60182977..42a36baf 100644 --- a/src/create-schedule/components/BasicInfo.tsx +++ b/src/create-schedule/components/BasicInfo.tsx @@ -1,3 +1,4 @@ +import { BASIC_INFO_TAG } from "@create-schedule/constants"; import { useEffect, useState } from "react"; import MenuContent from "./MenuContent"; import MenuContentContainer from "./MenuContentContainer"; @@ -32,12 +33,7 @@ const BasicInfo = ({ current, currentTab, handleTab }: BasicInfoProps) => { /> {isOpen && ( - {[ - "일정 제목 입력", - "대표 이미지 설정", - "시작일 종료일 설정", - "위치 선택", - ].map((title) => ( + {BASIC_INFO_TAG.map((title) => ( @@ -36,7 +37,7 @@ const FinishWriting = ({ /> {isOpen && ( - {["공개범위 설정", "일정 소개"].map((title) => ( + {FINISH_WRITING_TAG.map((title) => ( { case 2: return setCurrentTab("일정 제목 입력"); case 3: - return setCurrentTab("제목 및 썸네일"); + return setCurrentTab("태그"); case 5: return setCurrentTab("공개범위 설정"); default: diff --git a/src/create-schedule/components/TagNTemplate.tsx b/src/create-schedule/components/TagNTemplate.tsx index e9346fa7..17fc1d20 100644 --- a/src/create-schedule/components/TagNTemplate.tsx +++ b/src/create-schedule/components/TagNTemplate.tsx @@ -1,3 +1,4 @@ +import { TAG_N_TEMPLATE_TAG } from "@create-schedule/constants"; import { useEffect, useState } from "react"; import MenuContent from "./MenuContent"; import MenuContentContainer from "./MenuContentContainer"; @@ -36,7 +37,7 @@ const TagNTemplate = ({ /> {isOpen && ( - {["제목 및 썸네일", "태그 및 일정 템플릿"].map((title) => ( + {TAG_N_TEMPLATE_TAG.map((title) => ( Date: Mon, 27 Nov 2023 21:47:11 +0900 Subject: [PATCH 04/28] =?UTF-8?q?[fix]=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EB=B2=84=EA=B7=B8=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/PlanSideBar.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/create-schedule/components/PlanSideBar.tsx b/src/create-schedule/components/PlanSideBar.tsx index 36a757d3..bdd68a19 100644 --- a/src/create-schedule/components/PlanSideBar.tsx +++ b/src/create-schedule/components/PlanSideBar.tsx @@ -1,3 +1,8 @@ +import { + BASIC_INFO_TAG, + FINISH_WRITING_TAG, + TAG_N_TEMPLATE_TAG, +} from "@create-schedule/constants"; import { useEffect, useState } from "react"; import { useRecoilValue } from "recoil"; import { currentProgress } from "@shared/recoil"; @@ -10,6 +15,13 @@ import TagNTemplate from "./TagNTemplate"; const PlanSideBar = () => { const current = useRecoilValue(currentProgress); const [currentTab, setCurrentTab] = useState("일정 제목 입력"); + console.log( + currentTab === + ("일정 제목 입력" || + "대표 이미지 설정" || + "시작일 종료일 설정" || + "장소 선택"), + ); const handleTab = (value: string) => { setCurrentTab(value); @@ -18,10 +30,13 @@ const PlanSideBar = () => { useEffect(() => { switch (current) { case 2: + if (BASIC_INFO_TAG.includes(currentTab)) return; return setCurrentTab("일정 제목 입력"); case 3: + if (TAG_N_TEMPLATE_TAG.includes(currentTab)) return; return setCurrentTab("태그"); case 5: + if (FINISH_WRITING_TAG.includes(currentTab)) return; return setCurrentTab("공개범위 설정"); default: return setCurrentTab(""); From 5f3fa95c9763d989387c93a95a17295e6d8c8fda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B1?= Date: Mon, 27 Nov 2023 21:49:36 +0900 Subject: [PATCH 05/28] =?UTF-8?q?[feat]=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EB=A9=94=EB=89=B4=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=ED=95=B4=EB=8B=B9=20=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?= =?UTF-8?q?=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 --- src/create-schedule/components/MenuContent.tsx | 2 +- src/create-schedule/components/PlanSideBar.tsx | 7 ------- src/create-schedule/components/PlanTitleInput.tsx | 2 +- src/create-schedule/components/ScheduleTagInput.tsx | 5 ++++- src/create-schedule/components/SelectCity.tsx | 2 +- src/create-schedule/components/SelectDate.tsx | 2 +- src/create-schedule/components/SelectMainImage.tsx | 2 ++ src/create-schedule/components/TemplateRecommend.tsx | 4 ++-- 8 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/create-schedule/components/MenuContent.tsx b/src/create-schedule/components/MenuContent.tsx index de1bb4d9..38378025 100644 --- a/src/create-schedule/components/MenuContent.tsx +++ b/src/create-schedule/components/MenuContent.tsx @@ -31,7 +31,7 @@ const MenuContent = ({ setCurrentProgress(targetProgress); }} > - {title} + {title}
); }; diff --git a/src/create-schedule/components/PlanSideBar.tsx b/src/create-schedule/components/PlanSideBar.tsx index bdd68a19..c8920ac6 100644 --- a/src/create-schedule/components/PlanSideBar.tsx +++ b/src/create-schedule/components/PlanSideBar.tsx @@ -15,13 +15,6 @@ import TagNTemplate from "./TagNTemplate"; const PlanSideBar = () => { const current = useRecoilValue(currentProgress); const [currentTab, setCurrentTab] = useState("일정 제목 입력"); - console.log( - currentTab === - ("일정 제목 입력" || - "대표 이미지 설정" || - "시작일 종료일 설정" || - "장소 선택"), - ); const handleTab = (value: string) => { setCurrentTab(value); diff --git a/src/create-schedule/components/PlanTitleInput.tsx b/src/create-schedule/components/PlanTitleInput.tsx index c1d294d7..17bc47e1 100644 --- a/src/create-schedule/components/PlanTitleInput.tsx +++ b/src/create-schedule/components/PlanTitleInput.tsx @@ -12,7 +12,7 @@ const PlanTitleInput = () => { }; return ( -
+
{ const { tag } = useRecoilValue(scheduleAnswers); return ( -
+
diff --git a/src/create-schedule/components/SelectCity.tsx b/src/create-schedule/components/SelectCity.tsx index c4f33543..0e409f3d 100644 --- a/src/create-schedule/components/SelectCity.tsx +++ b/src/create-schedule/components/SelectCity.tsx @@ -4,7 +4,7 @@ import ScheduleTitle from "./ScheduleTitle"; const SelectCity = () => { return ( -
+
{ return ( -
+
{ }); setImageSrc((prev) => ({ ...prev, imageSrc: image.data.src.large })); } catch (error) { + // TODO: Error handling console.log(error); } }; @@ -35,6 +36,7 @@ const SelectMainImage = () => { return (
diff --git a/src/create-schedule/components/TemplateRecommend.tsx b/src/create-schedule/components/TemplateRecommend.tsx index f11c1d45..8c202aae 100644 --- a/src/create-schedule/components/TemplateRecommend.tsx +++ b/src/create-schedule/components/TemplateRecommend.tsx @@ -4,13 +4,13 @@ import Template from "./Template"; const TemplateRecommend = () => { return ( - <> +