🚨 Fix(#347): 스테디 등록 과정 데이터 유실 오류 수정

Team-Blitz-Steady · Feb 26, 2024 · 73c808b · 73c808b
2 parents 9b17a91 + 26b2c7c
commit 73c808b
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 6 deletions.
diff --git a/src/app/(steady)/steady/create/page.tsx b/src/app/(steady)/steady/create/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import {
@@ -14,12 +15,16 @@ import type { SteadyStateType } from "@/schemas/steadySchema";
 import { SteadySchema } from "@/schemas/steadySchema";
 import useCreateSteadyStore from "@/stores/createSteadyData";
 import { zodResolver } from "@hookform/resolvers/zod";
+import type { MDXEditorMethods } from "@mdxeditor/editor";
 import { Separator } from "@radix-ui/themes";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { format } from "date-fns";
+import { format, parse } from "date-fns";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
 import rehypeStringify from "rehype-stringify";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
+import remarkStringify from "remark-stringify";
 import { unified } from "unified";
 import getPositions from "@/services/steady/getPositions";
 import getStacks from "@/services/steady/getStacks";
@@ -45,7 +50,10 @@ import {
 
 const CreateSteadyPage = () => {
   const router = useRouter();
-  const { steadyState, setSteadyState } = useCreateSteadyStore();
+  const { steadyState, setSteadyState, resetSteadyState } =
+    useCreateSteadyStore();
+  const editorRef = useRef<MDXEditorMethods>(null);
+  const [editorLoaded, setEditorLoaded] = useState(false);
   const steadyForm = useForm<SteadyStateType>({
     resolver: zodResolver(SteadySchema),
   });
@@ -76,10 +84,26 @@ const CreateSteadyPage = () => {
   const handleCancelProcess = () => {
     if (steadyState) {
       useCreateSteadyStore.persist.clearStorage();
+      steadyForm.reset();
+      resetSteadyState();
     }
     router.replace("/");
   };
 
+  useEffect(() => {
+    if (editorRef.current) {
+      unified()
+        .use(rehypeParse)
+        .use(rehypeRemark)
+        .use(remarkStringify)
+        .process(steadyState.content)
+        .then((file) => editorRef.current?.setMarkdown(String(file.value)))
+        .catch((error) => {
+          throw error;
+        });
+    }
+  }, [editorLoaded]);
+
   return (
     <div
       className={cn("mt-10 max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000")}
@@ -97,12 +121,14 @@ const CreateSteadyPage = () => {
           <div className="flex flex-col gap-10">
             <FormField
               control={steadyForm.control}
+              defaultValue={steadyState?.name}
               name={"name"}
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
                     <Input
                       inputName={"steady-title-input"}
+                      initialValue={steadyState?.name}
                       onValueChange={(value) => {
                         field.onChange(value);
                       }}
@@ -114,12 +140,14 @@ const CreateSteadyPage = () => {
             />
             <FormField
               control={steadyForm.control}
+              defaultValue={steadyState?.bio}
               name={"bio"}
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
                     <Input
                       inputName={"steady-bio-input"}
+                      initialValue={steadyState?.bio}
                       onValueChange={(value) => {
                         field.onChange(value);
                       }}
@@ -143,13 +171,15 @@ const CreateSteadyPage = () => {
             >
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.type}
                 name={"type"}
                 render={({ field }) => (
                   <FormItem>
                     <SingleSelector
                       initialLabel={"프로젝트 / 스터디"}
                       items={steadyCategories}
                       className={cn("w-full")}
+                      initialData={steadyState?.type}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -161,11 +191,13 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.steadyMode}
                 name={"steadyMode"}
                 render={({ field }) => (
                   <FormItem>
                     <SingleSelector
                       initialLabel={"진행 방식"}
+                      initialData={steadyState?.steadyMode}
                       items={steadyRunningMethods}
                       className={cn("w-full")}
                       onSelectedChange={(selected) => {
@@ -179,11 +211,13 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.participantLimit}
                 name={"participantLimit"}
                 render={({ field }) => (
                   <FormItem>
                     <SingleSelector
                       initialLabel={"스테디 정원"}
+                      initialData={steadyState?.participantLimit}
                       items={steadyParticipantsLimit}
                       className={cn("w-full")}
                       onSelectedChange={(selected) => {
@@ -197,11 +231,21 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.deadline}
                 name={"deadline"}
                 render={({ field }) => (
                   <FormItem>
                     <DateSelector
                       initialLabel={"마감일"}
+                      initialDate={
+                        (steadyState?.deadline &&
+                          parse(
+                            steadyState.deadline,
+                            "yyyy-MM-dd",
+                            new Date(),
+                          )) ||
+                        undefined
+                      }
                       className={cn("w-full")}
                       onDateChange={(date) => {
                         field.onChange(format(date, "yyyy-MM-dd"));
@@ -215,12 +259,26 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.positions}
                 name={"positions"}
                 render={({ field }) => (
                   <FormItem className="h-40">
                     <MultiSelector
                       initialLabel={"모집 분야"}
-                      // TODO: steadyState?.positions에 있는 id값을 가진 position을 뽑아서 initialData로 넣어줘야 함
+                      initialData={
+                        (steadyState?.positions &&
+                          positions.positions
+                            .filter((position) =>
+                              steadyState.positions.includes(
+                                Number(position.id),
+                              ),
+                            )
+                            .map(({ id, name }) => ({
+                              value: id.toString(),
+                              label: name,
+                            }))) ||
+                        []
+                      }
                       items={positions.positions.map((position) => ({
                         value: position.id.toString(),
                         label: position.name,
@@ -237,11 +295,13 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.scheduledPeriod}
                 name={"scheduledPeriod"}
                 render={({ field }) => (
                   <FormItem>
                     <SingleSelector
                       initialLabel={"예상 기간"}
+                      initialData={steadyState?.scheduledPeriod}
                       items={steadyExpectedPeriods}
                       className={cn("w-full")}
                       onSelectedChange={(selected) => {
@@ -255,11 +315,23 @@ const CreateSteadyPage = () => {
 
               <FormField
                 control={steadyForm.control}
+                defaultValue={steadyState?.stacks}
                 name={"stacks"}
                 render={({ field }) => (
                   <FormItem className="h-40 w-450 max-sm:w-360 sm:w-410">
                     <MultiSelector
                       initialLabel={"기술 스택"}
+                      initialData={
+                        steadyState?.stacks &&
+                        stacks.stacks
+                          .filter((stack) =>
+                            steadyState.stacks.includes(Number(stack.id)),
+                          )
+                          .map(({ id, name }) => ({
+                            value: id.toString(),
+                            label: name,
+                          }))
+                      }
                       items={stacks.stacks.map((stack) => ({
                         value: stack.id.toString(),
                         label: stack.name,
@@ -277,6 +349,7 @@ const CreateSteadyPage = () => {
 
             <FormField
               control={steadyForm.control}
+              defaultValue={steadyState?.contact}
               name={"contact"}
               render={({ field }) => (
                 <FormItem>
@@ -301,11 +374,13 @@ const CreateSteadyPage = () => {
             />
             <FormField
               control={steadyForm.control}
+              defaultValue={steadyState?.title}
               name={"title"}
               render={({ field }) => (
                 <FormItem>
                   <Input
                     inputName={"title-input"}
+                    initialValue={steadyState?.title}
                     onValueChange={(value) => {
                       field.onChange(value);
                     }}
@@ -316,15 +391,18 @@ const CreateSteadyPage = () => {
             />
             <FormField
               control={steadyForm.control}
+              defaultValue={steadyState?.content}
               name={"content"}
               render={({ field }) => (
                 <FormItem
                   className={
-                    "my-10 h-720 w-full rounded-10 border-2 border-st-gray-75"
+                    "my-10 w-full rounded-10 border-2 border-st-gray-75"
                   }
                 >
                   <RichEditor
-                    contentEditableClassName={"prose"}
+                    contentEditableClassName={"prose h-640 w-full"}
+                    className={"h-700"}
+                    ref={editorRef}
                     onChange={(markdown) => {
                       unified()
                         .use(remarkParse)
@@ -336,6 +414,7 @@ const CreateSteadyPage = () => {
                         });
                     }}
                     markdown={""}
+                    setIsLoaded={setEditorLoaded}
                   />
                   <FormMessage />
                 </FormItem>

diff --git a/src/app/(steady)/steady/create/questions/page.tsx b/src/app/(steady)/steady/create/questions/page.tsx
@@ -25,7 +25,7 @@ const CreateQuestionsPage = () => {
   const [isTemplateTitleSetting, setIsTemplateTitleSetting] = useState(false);
   const { toast } = useToast();
   const router = useRouter();
-  const { steadyState } = useCreateSteadyStore();
+  const { steadyState, resetSteadyState } = useCreateSteadyStore();
 
   useEffect(() => {
     if (!steadyState || Object.keys(steadyState).length === 0) {
@@ -103,6 +103,7 @@ const CreateQuestionsPage = () => {
           variant: "green",
         });
         useCreateSteadyStore.persist.clearStorage();
+        resetSteadyState();
         router.push("/");
       })
       .catch(() => {

diff --git a/src/stores/createSteadyData.ts b/src/stores/createSteadyData.ts
@@ -8,13 +8,15 @@ interface CreateSteadyState {
   steadyState: SteadyStateType;
   // eslint-disable-next-line no-unused-vars
   setSteadyState: (steadyState: SteadyStateType) => void;
+  resetSteadyState: () => void;
 }
 
 const useCreateSteadyStore = create(
   persist<CreateSteadyState>(
     (set) => ({
       steadyState: {} as SteadyStateType,
       setSteadyState: (steadyState: SteadyStateType) => set({ steadyState }),
+      resetSteadyState: () => set({ steadyState: {} as SteadyStateType }),
     }),
     {
       name: CreateSteadyStorageKey,