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,48 @@
-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 {
+  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 (
     <>
       <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}
+              boxTitle="기본정보"
+              targetProgress={2}
+              currentTab={currentTab}
+              handleTab={handleTab}
+            />
+          ))}
         </MenuContentContainer>
       )}
     </>

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 (
-    <div className="border-b-2 border-[#F1F1F1]">
+    <div
+      className="border-b-2 border-[#F1F1F1]"
+      onClick={() => {
+        handleTab("일정 채우기");
+        setCurrentPage("일정 채우기");
+        setCurrentProgress(4);
+      }}
+    >
       <SideBarMenuBox title="일정 채우기" />
     </div>
   );

src/create-schedule/components/FinishWriting.tsx

@@ -1,28 +1,52 @@
-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 {
+  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);
+    }
+  }, [current]);
+
   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}
+              boxTitle="작성 마무리"
+              targetProgress={5}
+              currentTab={currentTab}
+              handleTab={handleTab}
+            />
+          ))}
         </MenuContentContainer>
       )}
     </>

src/create-schedule/components/MenuContent.tsx

@@ -1,24 +1,37 @@
 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 (
     <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);
+        setCurrentPage(boxTitle);
+        setCurrentProgress(targetProgress);
+      }}
     >
-      {title}
+      <a href={`#${title}`}>{title}</a>
     </div>
   );
 };

src/create-schedule/components/PageContent.tsx

@@ -1,13 +1,26 @@
 import { SUBTITLE, TITLE } from "@create-schedule/constants";
-import { useRecoilValue } from "recoil";
+import { useEffect } from "react";
+import { useRecoilState } 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 {
+  remains: ScheduleCardSection[];
+  templates: ScheduleCardSection[];
+}
+
+const PageContent = ({ remains, templates }: PageContentProps) => {
+  const [current, setCurrent] = useRecoilState(currentProgress);
+
+  useEffect(() => {
+    if (remains.length === 0 && current !== 2) {
+      setCurrent(2);
+    }
+  }, [remains]);
 
   return (
     <>
@@ -17,7 +30,7 @@ const PageContent = () => {
             title={TITLE.remains}
             subTitle={SUBTITLE.fighting("명란마요")}
           />
-          <Remains />
+          <Remains remains={remains} />
         </>
       )}
       {current === 2 && (
@@ -32,7 +45,7 @@ const PageContent = () => {
       {current === 3 && (
         <div className="w-[628px]">
           <Title title={TITLE.tag} subTitle={SUBTITLE.withyou} />
-          <ScheduleTagTemplate />
+          <ScheduleTagTemplate templates={templates} />
         </div>
       )}
     </>

src/create-schedule/components/PlanContent.tsx

@@ -1,11 +1,17 @@
+import { ScheduleCardSection } from "@shared/types";
 import CurrentPage from "./CurrentPage";
 import PageContent from "./PageContent";
 
-const PlanContent = () => {
+interface PlanContentProps {
+  remains: ScheduleCardSection[];
+  templates: ScheduleCardSection[];
+}
+
+const PlanContent = ({ remains, templates }: PlanContentProps) => {
   return (
     <div className="absolute inline-block w-planContent h-planScrollbar px-[66px] py-[36px] overflow-FAQ">
       <CurrentPage />
-      <PageContent />
+      <PageContent remains={remains} templates={templates} />
     </div>
   );
 };

src/create-schedule/components/PlanSideBar.tsx

@@ -1,17 +1,60 @@
+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";
 import BasicInfo from "./BasicInfo";
 import FillPlan from "./FillPlan";
 import FinishWriting from "./FinishWriting";
 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:
+        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("");
+    }
+  }, [current]);
+
   return (
     <div className="inline-block w-[241px] h-full border-r-2 border-[#F1F1F1]">
       <SideBarIntro />
-      <BasicInfo />
-      <TagNTemplate />
-      <FillPlan />
-      <FinishWriting />
+      <BasicInfo
+        current={current}
+        currentTab={currentTab}
+        handleTab={handleTab}
+      />
+      <TagNTemplate
+        current={current}
+        currentTab={currentTab}
+        handleTab={handleTab}
+      />
+      <FillPlan handleTab={handleTab} />
+      <FinishWriting
+        current={current}
+        currentTab={currentTab}
+        handleTab={handleTab}
+      />
     </div>
   );
 };

src/create-schedule/components/PlanTitleInput.tsx

@@ -12,7 +12,7 @@ const PlanTitleInput = () => {
   };
 
   return (
-    <div className="mb-[30px]">
+    <div id="일정 제목 입력" className="mb-[30px]">
       <ScheduleTitle title={SCHEDULE_TITLE.planTitle} />
       <input
         className="w-[628px] h-[55px] border border-[#E0E0E0] rounded-[5px] px-[26px]"