Feat: 일정 만들기 추가 구현

pages/_app.tsx

@@ -6,7 +6,10 @@ import Confirm from "@shared/modal/Confirm";
 import Modal from "@shared/modal/Modal";
 import "@shared/styles/globals.css";
 
-if (process.env.NODE_ENV === "development" && process.env.MOCK === "true") {
+if (
+  process.env.NEXT_PUBLIC_NODE_ENV === "development" &&
+  process.env.NEXT_PUBLIC_MOCK === "true"
+) {
   import("mock");
 }
 

pages/create-schedule/index.tsx

@@ -1,12 +1,43 @@
 import { PlanContent, PlanSideBar } from "@create-schedule/components";
+import axios from "axios";
+import { GetServerSideProps } from "next";
+import { ScheduleCardSection } from "@shared/types";
 
-const CreateSchedule = () => {
+interface CreateScheduleProps {
+  remains: ScheduleCardSection[];
+  templates: ScheduleCardSection[];
+}
+
+const CreateSchedule = ({ remains, templates }: CreateScheduleProps) => {
   return (
     <div className="w-full h-without-header mt-[78px]">
       <PlanSideBar />
-      <PlanContent />
+      <PlanContent remains={remains} templates={templates} />
     </div>
   );
 };
 
 export default CreateSchedule;
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  try {
+    const [remainResponse, templateResponse] = await axios.all([
+      axios.get(`${process.env.NEXT_PUBLIC_BASE_URL}/remains`),
+      axios.get(`${process.env.NEXT_PUBLIC_BASE_URL}/templates`),
+    ]);
+
+    return {
+      props: {
+        remains: remainResponse.data as ScheduleCardSection[],
+        templates: templateResponse.data as ScheduleCardSection[],
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        remains: [],
+        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/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/MenuContent.tsx

@@ -1,24 +1,32 @@
 import { useSetRecoilState } from "recoil";
-import { currentPageName } from "@shared/recoil";
-import { CurrentPageType } from "@shared/types";
+import { currentScheduleProgress } from "@shared/recoil";
 
 interface MenuContentProps {
   title: string;
-  boxTitle: CurrentPageType;
-  isClicked?: boolean;
+  targetProgress: number;
+  currentTab: string;
+  handleTab: (value: string) => void;
 }
 
-const MenuContent = ({ title, boxTitle, isClicked }: MenuContentProps) => {
-  const setCurrentPage = useSetRecoilState(currentPageName);
+const MenuContent = ({
+  title,
+  targetProgress,
+  currentTab,
+  handleTab,
+}: MenuContentProps) => {
+  const setCurrentProgress = useSetRecoilState(currentScheduleProgress);
 
   return (
     <div
       className={`${
-        isClicked ? "text-[#F864A1]" : "text-[#333333]"
+        currentTab === title ? "text-[#F864A1]" : "text-[#333333]"
       } h-1/2 leading-[23px] py-[6px] cursor-pointer`}
-      onClick={() => setCurrentPage(boxTitle)}
+      onClick={() => {
+        handleTab(title);
+        setCurrentProgress(targetProgress);
+      }}
     >
-      {title}
+      <a href={`#${title}`}>{title}</a>
     </div>
   );
 };

src/create-schedule/components/PageContent.tsx

@@ -1,26 +1,33 @@
 import { SUBTITLE, TITLE } from "@create-schedule/constants";
-import { useRecoilValue } from "recoil";
-import { currentProgress } from "@shared/recoil";
+import { ScheduleCardSection } from "@shared/types";
 import PlanDefaultInfo from "./PlanDefaultInfo";
 import Remains from "./Remains";
 import ScheduleTagTemplate from "./ScheduleTagTemplate";
 import Title from "./Title";
 
-const PageContent = () => {
-  const current = useRecoilValue(currentProgress);
+interface PageContentProps {
+  currentProgress: number;
+  remains: ScheduleCardSection[];
+  templates: ScheduleCardSection[];
+}
 
+const PageContent = ({
+  currentProgress,
+  remains,
+  templates,
+}: PageContentProps) => {
   return (
     <>
-      {current === 1 && (
+      {currentProgress === 1 && (
         <>
           <Title
             title={TITLE.remains}
             subTitle={SUBTITLE.fighting("명란마요")}
           />
-          <Remains />
+          <Remains remains={remains} />
         </>
       )}
-      {current === 2 && (
+      {currentProgress === 2 && (
         <div className="w-[628px]">
           <Title
             title={TITLE.nthPlan("명란마요", 5)}
@@ -29,10 +36,10 @@ const PageContent = () => {
           <PlanDefaultInfo />
         </div>
       )}
-      {current === 3 && (
+      {currentProgress === 3 && (
         <div className="w-[628px]">
           <Title title={TITLE.tag} subTitle={SUBTITLE.withyou} />
-          <ScheduleTagTemplate />
+          <ScheduleTagTemplate templates={templates} />
         </div>
       )}
     </>