Merge pull request #75 from soma-dalda/feat/#73

[#73] 피드백 고려한 PR
soma-dalda · Oct 30, 2022 · 9caee80 · 9caee80
2 parents 45566dc + 7fa6c0c
commit 9caee80
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 32 deletions.
diff --git a/src/components/hoc/withPassword.tsx b/src/components/hoc/withPassword.tsx
@@ -2,18 +2,20 @@ import React, { ComponentType, useEffect, useState } from 'react'
 import useGetUser from '@/hooks/useGetUser'
 import { useNavigate } from 'react-router-dom'
 import { ModalProvider, useModal } from '@jaewoong2/modal'
-import withAuth from './withAuth'
 
 type MessageProps = {
   setStatusCancled: () => void
   setStatusLoading: () => void
+  flag: boolean
 }
 
-const Message = ({ setStatusCancled, setStatusLoading }: MessageProps) => {
+const Message = ({ setStatusCancled, setStatusLoading, flag }: MessageProps) => {
   useEffect(() => {
     setStatusLoading()
     return () => {
-      setStatusCancled()
+      if (flag) {
+        setStatusCancled()
+      }
     }
   }, [])
 
@@ -33,6 +35,7 @@ const withPassword = (Component: ComponentType) => {
         <Message
           setStatusCancled={() => setStatus('cancled')}
           setStatusLoading={() => setStatus('loading')}
+          flag={Boolean(user?.userPhone)}
         />
       ),
       modalWidth: '350px',
@@ -47,8 +50,10 @@ const withPassword = (Component: ComponentType) => {
 
     /* 권한 분기 */
     useEffect(() => {
-      if (!user?.userPhone) {
+      if (Boolean(user?.userPhone) === false) {
         show()
+      } else {
+        hide()
       }
     }, [user])
 
@@ -69,7 +74,7 @@ const withPassword = (Component: ComponentType) => {
     )
   }
 
-  return withAuth(HOC)
+  return HOC
 }
 
 export default withPassword
diff --git a/src/pages/Order/components/blocks/Order.tsx b/src/pages/Order/components/blocks/Order.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { NavigationWithArrow } from '@/components/blocks'
 import { Layout } from '@/components'
 import useGetTemplate from '@/hooks/useGetTemplate'
 import { useParams } from 'react-router-dom'
-import LoadingPage from '@/components/molecules/LoadingPage'
 import QuestionDescription from '../molecules/QuestionDescription'
 import QuestionOption from '../molecules/QuestionOption'
 import Stepper from '../molecules/Stepper'
@@ -17,15 +16,11 @@ const Order = () => {
   const { handleChangeCheckbox, handleChangeRadio, handleChangeTextArea, handleClickStep } =
     useOrderActionContext()
 
-  const { data: template, isLoading } = useGetTemplate(id ?? '', {
+  const { data: template } = useGetTemplate(id ?? '', {
     enabled: false,
   })
 
-  if (isLoading) {
-    return <LoadingPage />
-  }
-
-  const content = template?.contentList[current]
+  const content = useMemo(() => template?.contentList[current], [current, template])
 
   return (
     <Layout navigtaion={<NavigationWithArrow>{template?.title}</NavigationWithArrow>}>
@@ -39,6 +34,7 @@ const Order = () => {
       <form className="w-full">
         {content && content.type !== 'subjective' && (
           <QuestionOption
+            name={content.question}
             img={content.img}
             detailType={content.type}
             answer={order.answers[current]}
@@ -53,6 +49,7 @@ const Order = () => {
         )}
         {content?.type === 'subjective' && (
           <QuestionDescription
+            name={content.question}
             img={content.img}
             questionTitle={`${content?.required ? '(*)' : ''} ${content.question}`}
             handleChangeDescription={handleChangeTextArea(current)}

diff --git a/src/pages/Order/components/molecules/QuestionDescription.tsx b/src/pages/Order/components/molecules/QuestionDescription.tsx
@@ -6,13 +6,15 @@ type Props = {
   handleChangeDescription: React.ChangeEventHandler
   description: string[]
   img?: string
+  name: string
 }
 
 const QuestionDescription = ({
   questionTitle,
   handleChangeDescription,
   description,
   img,
+  name,
 }: Props) => {
   return (
     <QuestionLayout title={questionTitle}>
@@ -23,7 +25,7 @@ const QuestionDescription = ({
       <div className="flex w-full flex-col gap-3">
         <textarea
           className="w-full resize-none rounded-xl border border-grayScale-500 bg-gray-100 p-3 text-gray-800"
-          name={questionTitle}
+          name={name}
           rows={10}
           id="description"
           value={description[0]}

diff --git a/src/pages/Order/components/molecules/QuestionOption.tsx b/src/pages/Order/components/molecules/QuestionOption.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import QuestionLayout from './QuestionLayout'
 
 type Props = {
+  name: string
   questionTitle?: string
   answer: string[]
   options?: string[] | null
@@ -12,6 +13,7 @@ type Props = {
 }
 
 const QuestionOption = ({
+  name,
   questionTitle,
   options,
   answer,
@@ -30,7 +32,7 @@ const QuestionOption = ({
         >
           <div className="flex gap-3">
             <input
-              name={questionTitle}
+              name={name}
               type={detailType === 'singleObjective' ? 'radio' : 'checkbox'}
               id={`option-${+index}`}
               data-id={index}

diff --git a/src/pages/Order/context/OrderContext.ts b/src/pages/Order/context/OrderContext.ts
@@ -36,7 +36,7 @@ const defaultAction: OrderAction = {
   handleSubmit: () => {},
 }
 
-const OrderValueContext = createContext({ order: defaultOrder, current: 0 })
+const OrderValueContext = createContext({ order: { ...defaultOrder }, current: 0 })
 const OrderActionContext = createContext({ ...defaultAction })
 
 export { OrderValueContext, OrderActionContext }
diff --git a/src/pages/Order/context/OrderContextProvider.tsx b/src/pages/Order/context/OrderContextProvider.tsx
@@ -23,12 +23,15 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
 
   useGetTemplate(id ?? '', {
     onSuccess: (data) => {
-      setOrder((prev) => ({
-        ...prev,
-        companyId: data.userId,
-        templateId: id,
-        answers: Array(data?.contentList.length).fill(''),
-      }))
+      setOrder((draft) => {
+        draft.companyId = data.userId
+        draft.templateId = id
+        draft.answers = Array(data?.contentList.length).fill([''])
+        draft.templateResponses = Array(data?.contentList.length).fill({
+          question: '',
+          answer: [''],
+        })
+      })
     },
     onError: (err) => {
       if (err.status === AxiosError.ECONNABORTED) {
@@ -85,13 +88,7 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
     index: number
   }) => {
     setOrder((draft) => {
-      if (draft.templateResponses) {
-        if (draft.templateResponses[index]) {
-          draft.templateResponses[index] = { question, answer }
-        } else {
-          draft.templateResponses.push({ question, answer })
-        }
-      }
+      draft.templateResponses[index] = { question, answer }
     })
   }
 
@@ -110,9 +107,9 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
   const handleClickStep = useCallback(
     (step: number) => () => {
       setCurrent(step)
-      navigate(`#${step}`)
+      navigate({ hash: `${step}` })
     },
-    []
+    [location]
   )
 
   const handleAddImage = useCallback((url: string) => {

diff --git a/src/type/index.ts b/src/type/index.ts
@@ -85,7 +85,7 @@ export type Order = {
   companyId?: string
 
   image?: string
-  templateResponses?: { question: string; answer: string[] }[]
+  templateResponses: { question: string; answer: string[] }[]
 
   orderDate?: Date | string
   pickupDate?: string