회고 생성 플로우 (API 연동 제외)

package.json

@@ -14,13 +14,16 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-query-devtools": "^5.49.2",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.7.2",
     "framer-motion": "^11.2.13",
     "jotai": "^2.8.4",
     "jotai-devtools": "^0.10.0",
     "js-cookie": "^3.0.5",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.24.0"
   },

src/app/retrospectCreate/RetrospectCreate.tsx

@@ -0,0 +1,98 @@
+import { css } from "@emotion/react";
+import { useAtom } from "jotai";
+import { createContext } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icon } from "@/component/common/Icon";
+import { ProgressBar } from "@/component/common/ProgressBar";
+import { Spacing } from "@/component/common/Spacing";
+import { DueDate, MainInfo, CustomTemplate, Start } from "@/component/retrospectCreate";
+import { PATHS } from "@/config/paths";
+import { useMultiStepForm } from "@/hooks/useMultiStepForm";
+import { DefaultLayout } from "@/layout/DefaultLayout";
+import { dueDateAtom } from "@/store/retrospect/retrospectCreate";
+import { DESIGN_SYSTEM_COLOR } from "@/style/variable";
+
+type RetrospectCreateContextState = {
+  totalStepsCnt: number;
+  goNext: ReturnType<typeof useMultiStepForm>["goNext"];
+};
+
+export const RetrospectCreateContext = createContext<RetrospectCreateContextState>({ totalStepsCnt: 0, goNext: () => {} });
+
+export function RetrospectCreate() {
+  const navigate = useNavigate();
+  const steps = ["start", "mainInfo", "customTemplate", "dueDate"] as const;
+  const themeMap = {
+    start: {
+      background: "dark",
+      iconColor: DESIGN_SYSTEM_COLOR.white,
+    },
+    mainInfo: {
+      background: "default",
+      iconColor: DESIGN_SYSTEM_COLOR.black,
+    },
+    customTemplate: {
+      background: "gray",
+      iconColor: DESIGN_SYSTEM_COLOR.black,
+    },
+    dueDate: {
+      background: "default",
+      iconColor: DESIGN_SYSTEM_COLOR.black,
+    },
+  } as const;
+
+  // const [mainInfo] = useAtom(mainInfoAtom);
+  // const [questions] = useAtom(questionsAtom);
+  const [date] = useAtom(dueDateAtom);
+
+  const { currentStep, goNext, goPrev, totalStepsCnt, currentStepIndex } = useMultiStepForm({
+    steps,
+    redirectPath: PATHS.completeRetrospectCreate(),
+  });
+
+  const conditionalIncrementPage = () => {
+    if (currentStep === "dueDate") {
+      if (!date.date || !date.time) {
+        return currentStepIndex - 1;
+      }
+    }
+    return currentStepIndex;
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    /*TODO - API 연동*/
+  };
+
+  return (
+    <DefaultLayout
+      LeftComp={
+        <Icon icon={"ic_arrow_back"} onClick={() => (currentStepIndex === 0 ? navigate(-1) : goPrev())} color={themeMap[currentStep]["iconColor"]} />
+      }
+      theme={themeMap[currentStep]["background"]}
+    >
+      <div
+        css={css`
+          visibility: ${currentStep === "start" ? "hidden" : "visible"};
+        `}
+      >
+        <ProgressBar curPage={conditionalIncrementPage()} lastPage={totalStepsCnt - 1} />
+      </div>
+      <Spacing size={2.9} />
+      <form
+        onSubmit={handleSubmit}
+        css={css`
+          flex: 1 1 0;
+        `}
+      >
+        <RetrospectCreateContext.Provider value={{ totalStepsCnt, goNext }}>
+          {currentStep === "start" && <Start />}
+          {currentStep === "mainInfo" && <MainInfo />}
+          {currentStep === "customTemplate" && <CustomTemplate />}
+          {currentStep === "dueDate" && <DueDate />}
+        </RetrospectCreateContext.Provider>
+      </form>
+    </DefaultLayout>
+  );
+}

src/app/retrospectCreate/RetrospectCreateComplete.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from "react-router-dom";
+
+import { ButtonProvider } from "@/component/common/button";
+import { Header } from "@/component/common/header";
+import { Spacing } from "@/component/common/Spacing";
+import { DefaultLayout } from "@/layout/DefaultLayout";
+
+export function RetrospectCreateComplete() {
+  const navigate = useNavigate();
+  return (
+    <DefaultLayout>
+      <Spacing size={2.9} />
+      <Header title={"회고가 완성되었어요!\n바로 회고를 작성해볼까요?"} contents="다음 회고에서도 해당 템플릿으로 제공해드릴게요!" />
+      <ButtonProvider sort="horizontal">
+        <ButtonProvider.Gray onClick={() => navigate(-1)}>끝내기</ButtonProvider.Gray>
+        <ButtonProvider.Primary
+          onClick={() => {
+            /**TODO - 해당 템플릿을 가지고 회고 작성 페이지로 이동 */
+          }}
+        >
+          작성하기
+        </ButtonProvider.Primary>
+      </ButtonProvider>
+    </DefaultLayout>
+  );
+}

src/assets/svgs/calendar/index.ts

@@ -0,0 +1,2 @@
+export { default as ic_next_chevron } from "./ic_next_chevron.svg?react";
+export { default as ic_prev_chevron } from "./ic_prev_chevron.svg?react";

src/assets/svgs/common/index.ts

@@ -8,3 +8,9 @@ export { default as ic_chart } from "./ic_chart.svg?react";
 export { default as ic_arrow_left } from "./ic_arrow_left.svg?react";
 
 export { default as basicProfile } from "./basicProfile.svg?react";
+export { default as ic_arrow_back } from "./ic_arrow_back.svg?react";
+export { default as ic_delete } from "./ic_delete.svg?react";
+export { default as ic_handle } from "./ic_handle.svg?react";
+export { default as ic_pencil } from "./ic_pencil.svg?react";
+export { default as ic_chevron_down } from "./ic_chevron_down.svg?react";
+export { default as ic_plus_thin } from "./ic_plus_thin.svg?react";

src/assets/svgs/index.ts

@@ -2,3 +2,4 @@ export * from "./common";
 export * from "./toast";
 export * from "./bottom-sheet";
 export * from "./space";
+export * from "./calendar";

src/component/BottomSheet/BottomSheet.tsx

@@ -9,11 +9,12 @@ import { useBottomSheet, useSetBottomSheet } from "@/hooks/useBottomSheet.ts";
 export type BottomSheetType = {
   title?: string;
   contents: ReactElement;
-  handler: boolean;
+  handler?: boolean;
+  quitButton?: boolean;
   sheetHeight?: number;
 };
 
-export function BottomSheet({ title, contents, handler = false, sheetHeight = 349 }: BottomSheetType) {
+export function BottomSheet({ title, contents, handler = false, quitButton = true, sheetHeight = 349 }: BottomSheetType) {
   const { sheet, content } = useSetBottomSheet({ handler, sheetHeight });
   const { bottomSheetState } = useBottomSheet();
   const [height, _] = useState(sheetHeight);
@@ -34,6 +35,7 @@ export function BottomSheet({ title, contents, handler = false, sheetHeight = 34
           transform: translate3d(-50%, -50%, 0);
           background-color: ${bottomSheetState ? `rgba(24, 24, 24, 60%)` : `transparent`};
           transition: 0.4s all;
+          z-index: 10001;
 
           ${!bottomSheetState &&
           css`
@@ -58,14 +60,14 @@ export function BottomSheet({ title, contents, handler = false, sheetHeight = 34
           box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.25);
           transition: transform 200ms ease-out;
           z-index: 10001;
-          padding: 3rem 3rem 3.3rem 3rem;
+          padding: 2rem;
           box-sizing: border-box;
           background-color: #fff;
           height: ${height}px;
           transform: translate3d(-50%, ${bottomSheetState ? `-${height}px` : `0%`}, 0);
         `}
       >
-        <BottomSheetHeader title={title} handler={handler} />
+        <BottomSheetHeader title={title} handler={handler} quitButton={quitButton} />
         <BottomSheetContent ref={content}>{contents}</BottomSheetContent>
       </div>
     </Portal>

src/component/BottomSheet/component/BottomSheetHeader.tsx

@@ -3,21 +3,21 @@ import { css } from "@emotion/react";
 import { BottomSheetType } from "@/component/BottomSheet/BottomSheet.tsx";
 import { Icon } from "@/component/common/Icon";
 import { useBottomSheet } from "@/hooks/useBottomSheet.ts";
+import { DESIGN_SYSTEM_COLOR } from "@/style/variable";
 
-export function BottomSheetHeader({ title, handler }: Pick<BottomSheetType, "title" | "handler">) {
+export function BottomSheetHeader({ title, handler, quitButton }: Pick<BottomSheetType, "title" | "handler" | "quitButton">) {
   const { closeBottomSheet } = useBottomSheet();
 
-  if (!title && !handler) return;
+  if (!title && !handler && !quitButton) return;
   return (
     <div
       css={css`
         position: relative;
+        display: flex;
         ${title &&
         css`
           border-top-left-radius: 1.2rem;
           border-bottom-right-radius: 1.2rem;
-          padding-top: 1.2rem;
-          padding-bottom: 1.4rem;
         `}
       `}
     >
@@ -33,6 +33,8 @@ export function BottomSheetHeader({ title, handler }: Pick<BottomSheetType, "tit
             border-radius: 5rem;
             background-color: rgba(60, 60, 67, 0.3);
             margin: auto;
+            margin-top: 1.2rem;
+            margin-bottom: 1.4rem;
             cursor: ns-resize;
           `}
         />
@@ -56,10 +58,18 @@ export function BottomSheetHeader({ title, handler }: Pick<BottomSheetType, "tit
           >
             {title}
           </span>
-          {/* FIXME: 아이콘 영역 */}
-          <Icon icon={"ic_quit"} size={2.4} onClick={closeBottomSheet} />
         </div>
       )}
+      {quitButton && (
+        <button
+          onClick={closeBottomSheet}
+          css={css`
+            margin-left: auto;
+          `}
+        >
+          <Icon icon={"ic_quit"} size={2.4} color={DESIGN_SYSTEM_COLOR.dark} />
+        </button>
+      )}
     </div>
   );
 }

src/component/common/Card/Card.tsx

@@ -0,0 +1,34 @@
+import { css, Interpolation, Theme } from "@emotion/react";
+
+type CardProps = {
+  width?: string;
+  rounded?: keyof typeof BORDER_RADIUS;
+  shadow?: boolean;
+  padding?: string;
+  children: React.ReactNode;
+  styles?: Interpolation<Theme>;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const BORDER_RADIUS = {
+  sm: ".8rem",
+  md: "1.2rem",
+} as const;
+
+export function Card({ width = "100%", rounded = "sm", shadow = true, padding = "2rem", styles, children }: CardProps) {
+  return (
+    <div
+      css={[
+        css`
+          width: ${width};
+          border-radius: ${BORDER_RADIUS[rounded]};
+          background-color: #fff; // FIXME - design token
+          box-shadow: ${shadow ? "0 .4rem 1.2rem rgba(0 0 0 / 4%)" : "none"};
+          padding: ${padding};
+        `,
+        styles,
+      ]}
+    >
+      {children}
+    </div>
+  );
+}

src/component/common/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from "./Card";

src/component/common/Icon/Icon.tsx

@@ -24,7 +24,7 @@ export const Icon = memo(function Icon({ icon, color = DEFAULT_ICON_COLOR, size
       onClick={onClick}
       css={css`
         color: ${color};
-        cursor: ${onClick ? "pointer" : "default"};
+        cursor: ${onClick ? "pointer" : "inherit"};
         width: ${widthRem};
         height: auto;
       `}