Feat: 일정 만들기 추가 구현

pages/create-schedule/index.tsx

@@ -1,12 +1,48 @@
 import { PlanContent, PlanSideBar } from "@create-schedule/components";
+import axios from "axios";
+import { GetServerSideProps } from "next";
+import { CREATE_SCHEDULE_PATH } from "@shared/constants";
+import { TemplateSchedule, TemporarySchedule } from "@shared/types";
 
-const CreateSchedule = () => {
+interface CreateScheduleProps {
+  temporary: TemporarySchedule[];
+  templates: TemplateSchedule[];
+}
+
+const CreateSchedule = ({ temporary, templates }: CreateScheduleProps) => {
   return (
     <div className="w-full h-without-header mt-[78px]">
       <PlanSideBar />
-      <PlanContent />
+      <PlanContent temporary={temporary} templates={templates} />
     </div>
   );
 };
 
 export default CreateSchedule;
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  try {
+    const [temporary, templates] = await axios.all([
+      axios.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/${CREATE_SCHEDULE_PATH.temporary}`,
+      ),
+      axios.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/${CREATE_SCHEDULE_PATH.templates}`,
+      ),
+    ]);
+
+    return {
+      props: {
+        temporary: temporary.data as TemporarySchedule[],
+        templates: templates.data as TemplateSchedule[],
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        temporary: [],
+        templates: [],
+      },
+    };
+  }
+};

src/create-schedule/components/BasicInfo.tsx

@@ -1,31 +1,51 @@
-import { useState } from "react";
+import { BASIC_INFO_TAG } from "@create-schedule/constants";
+import { useEffect, useState } from "react";
 import MenuContent from "./MenuContent";
 import MenuContentContainer from "./MenuContentContainer";
 import SideBarMenuBox from "./SideBarMenuBox";
 
-interface BasicInfoProps {}
+interface BasicInfoProps {
+  currentProgress: number;
+  currentTab: string;
+  handleTab: (value: string) => void;
+}
 
-const BasicInfo = ({}: BasicInfoProps) => {
-  const boxTitle = "기본정보";
+const BasicInfo = ({
+  currentProgress,
+  currentTab,
+  handleTab,
+}: BasicInfoProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev);
   };
 
+  useEffect(() => {
+    if (currentProgress === 2) {
+      setIsOpen(true);
+    }
+  }, [currentProgress]);
+
   return (
     <>
       <SideBarMenuBox
-        title={boxTitle}
+        title="기본정보"
         isOpen={isOpen}
         isAccordion
         handleToggle={handleToggle}
       />
       {isOpen && (
         <MenuContentContainer>
-          <MenuContent title="카테고리 태그 입력" boxTitle={boxTitle} />
-          <MenuContent title="시작일 종료일 설정" boxTitle={boxTitle} />
-          <MenuContent title="위치 선택" boxTitle={boxTitle} />
+          {BASIC_INFO_TAG.map((title) => (
+            <MenuContent
+              key={title}
+              title={title}
+              targetProgress={2}
+              currentTab={currentTab}
+              handleTab={handleTab}
+            />
+          ))}
         </MenuContentContainer>
       )}
     </>

src/create-schedule/components/Continue.tsx

@@ -1,16 +1,10 @@
 import { useSetRecoilState } from "recoil";
-import { currentPageName, currentProgress } from "@shared/recoil";
+import { currentScheduleProgress } from "@shared/recoil";
 import BlockShowing from "./BlockShowing";
 import MakeScheduleButton from "./MakeScheduleButton";
 
 const Continue = () => {
-  const setCurrentPage = useSetRecoilState(currentPageName);
-  const setCurrentProgress = useSetRecoilState(currentProgress);
-
-  const handleCurrentPageElements = () => {
-    setCurrentPage("기본정보");
-    setCurrentProgress(2);
-  };
+  const setCurrentProgress = useSetRecoilState(currentScheduleProgress);
 
   return (
     <div className="w-fit px-[100px] py-[15px]">
@@ -21,7 +15,7 @@ const Continue = () => {
       <MakeScheduleButton
         value="새로 만들기"
         buttonStyle="text-[#666666] border-[#E0E0E0]"
-        onClick={handleCurrentPageElements}
+        onClick={() => setCurrentProgress(2)}
       />
       <div className="w-fit py-[22px] mx-auto">
         <BlockShowing />

src/create-schedule/components/CurrentPage.tsx

@@ -1,9 +1,28 @@
 import Image from "next/image";
-import { useRecoilValue } from "recoil";
-import { currentPageName } from "@shared/recoil";
+import { useEffect, useState } from "react";
+import { CurrentPageType } from "@shared/types";
 
-const CurrentPage = () => {
-  const currentPage = useRecoilValue(currentPageName);
+interface CurrentPageProps {
+  currentProgress: number;
+}
+
+const CurrentPage = ({ currentProgress }: CurrentPageProps) => {
+  const [pageName, setPageName] = useState<CurrentPageType>("작성 중인 일정");
+
+  useEffect(() => {
+    switch (currentProgress) {
+      case 1:
+        return setPageName("작성 중인 일정");
+      case 2:
+        return setPageName("기본정보");
+      case 3:
+        return setPageName("태그 및 일정 템플릿");
+      case 4:
+        return setPageName("일정 채우기");
+      case 5:
+        return setPageName("작성 마무리");
+    }
+  }, [currentProgress]);
 
   return (
     <div className="flex w-fit items-center gap-[6px] h-[24px] mb-[32px]">
@@ -31,7 +50,7 @@ const CurrentPage = () => {
         height={12.5}
       />
       <div className="text-[12px] text-[#757575] font-medium -tracking-[0.5px]">
-        {currentPage}
+        {pageName}
       </div>
     </div>
   );

src/create-schedule/components/DateCityHandler.tsx

@@ -1,7 +1,7 @@
 import { useModal } from "@shared/hook";
 
 interface DateCityHandlerProps {
-  callType: "date_start" | "date_end" | "city";
+  callType: "date_start" | "date_end" | "city_first" | "city_second";
 }
 
 const DateCityHandler = ({ callType }: DateCityHandlerProps) => {
@@ -17,7 +17,9 @@ const DateCityHandler = ({ callType }: DateCityHandlerProps) => {
           ? callType === "date_start"
             ? "calendarSelector_start"
             : "calendarSelector_end"
-          : "thumbnailSelector" // TODO: citySelector
+          : callType === "city_first"
+          ? "citySelector_first"
+          : "citySelector_second"
       }`,
     });
   };

src/create-schedule/components/DateCityInput.tsx

@@ -3,8 +3,8 @@ import { scheduleAnswers } from "@shared/recoil";
 import DateCityHandler from "./DateCityHandler";
 
 interface DateCityInputProps {
-  callType: "date_start" | "date_end" | "city";
-  answerType?: "startedAt" | "endedAt";
+  callType: "date_start" | "date_end" | "city_first" | "city_second";
+  answerType?: "startAt" | "endAt";
   placeholder: string;
 }
 
@@ -26,7 +26,9 @@ const DateCityInput = ({
         value={
           answerType && callType.includes("date")
             ? answer[answerType]
-            : answer.city
+            : callType === "city_first"
+            ? answer.location.split(" ")[0]
+            : answer.location.split(" ")[1] ?? ""
         }
       />
     </div>

src/create-schedule/components/FillPlan.tsx

@@ -1,8 +1,22 @@
+import { useSetRecoilState } from "recoil";
+import { currentScheduleProgress } from "@shared/recoil";
 import SideBarMenuBox from "./SideBarMenuBox";
 
-const FillPlan = () => {
+interface FillPlanProps {
+  handleTab: (value: string) => void;
+}
+
+const FillPlan = ({ handleTab }: FillPlanProps) => {
+  const setCurrentProgress = useSetRecoilState(currentScheduleProgress);
+
   return (
-    <div className="border-b-2 border-[#F1F1F1]">
+    <div
+      className="border-b-2 border-[#F1F1F1]"
+      onClick={() => {
+        handleTab("일정 채우기");
+        setCurrentProgress(4);
+      }}
+    >
       <SideBarMenuBox title="일정 채우기" />
     </div>
   );

src/create-schedule/components/FinishWriting.tsx

@@ -1,28 +1,51 @@
-import { useState } from "react";
+import { FINISH_WRITING_TAG } from "@create-schedule/constants";
+import { useEffect, useState } from "react";
 import MenuContent from "./MenuContent";
 import MenuContentContainer from "./MenuContentContainer";
 import SideBarMenuBox from "./SideBarMenuBox";
 
-const FinishWriting = () => {
-  const boxTitle = "작성 마무리";
+interface FinishWritingProps {
+  currentProgress: number;
+  currentTab: string;
+  handleTab: (value: string) => void;
+}
+
+const FinishWriting = ({
+  currentProgress,
+  currentTab,
+  handleTab,
+}: FinishWritingProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev);
   };
 
+  useEffect(() => {
+    if (currentProgress === 5) {
+      setIsOpen(true);
+    }
+  }, [currentProgress]);
+
   return (
     <>
       <SideBarMenuBox
-        title={boxTitle}
+        title="작성 마무리"
         isOpen={isOpen}
         isAccordion
         handleToggle={handleToggle}
       />
       {isOpen && (
         <MenuContentContainer>
-          <MenuContent title="공개범위 설정" boxTitle={boxTitle} />
-          <MenuContent title="일정 소개" boxTitle={boxTitle} />
+          {FINISH_WRITING_TAG.map((title) => (
+            <MenuContent
+              key={title}
+              title={title}
+              targetProgress={5}
+              currentTab={currentTab}
+              handleTab={handleTab}
+            />
+          ))}
         </MenuContentContainer>
       )}
     </>

src/create-schedule/components/LocationModal.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { LOCATION } from "@shared/constants";
+import { LocationType } from "@shared/types";
+
+interface LocationModalProps {
+  callType: "first" | "second";
+  handleLocation: (value: string) => void;
+  firstLocation?: string;
+}
+
+const LocationModal = ({
+  callType,
+  handleLocation,
+  firstLocation,
+}: LocationModalProps) => {
+  const [clickedCity, setClickedCity] = useState("");
+
+  const onClick = (index: number) => {
+    if (callType === "first") {
+      setClickedCity(Object.keys(LOCATION)[index]);
+    } else if (firstLocation) {
+      setClickedCity(LOCATION[firstLocation as keyof LocationType][index]);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-[8px]">
+        {callType === "first"
+          ? Object.keys(LOCATION).map((location, index) => (
+              <div key={`${location}-${index}`}>
+                <div
+                  className={`${
+                    clickedCity === location
+                      ? "text-[#F864A1] border-[#F864A1]"
+                      : "text-[#333333] border-[#E0E0E0]"
+                  } w-[120px] h-[40px] text-[14px]  text-center border  rounded-[9px] py-[6.5px] cursor-pointer`}
+                  onClick={() => onClick(index)}
+                >
+                  {location}
+                </div>
+              </div>
+            ))
+          : firstLocation &&
+            LOCATION[firstLocation as keyof LocationType].map(
+              (location, index) => (
+                <div key={`${location}-${index}`}>
+                  <div
+                    className={`${
+                      clickedCity === location
+                        ? "text-[#F864A1] border-[#F864A1]"
+                        : "text-[#333333] border-[#E0E0E0]"
+                    } w-[120px] h-[40px] text-[14px]  text-center border  rounded-[9px] py-[6.5px] cursor-pointer`}
+                    onClick={() => onClick(index)}
+                  >
+                    {location}
+                  </div>
+                </div>
+              ),
+            )}
+      </div>
+      <div className="w-[376px] text-center mt-[24px]">
+        <button
+          disabled={clickedCity === ""}
+          className={`${
+            clickedCity
+              ? "text-white bg-[#F864A1]"
+              : "text-[#B1B1B1] bg-[#E9ECEF]"
+          } w-[120px] h-[40px] text-center rounded-[9px] mx-auto`}
+          onClick={() => handleLocation(clickedCity)}
+        >
+          완료
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default LocationModal;