💄 Required 에 따른 로직 구현 (#65)

soma-dalda · Oct 17, 2022 · aebe7ed · aebe7ed
1 parent 6fccf4e
commit aebe7ed
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 17 deletions.
diff --git a/src/pages/Order/components/blocks/Order.tsx b/src/pages/Order/components/blocks/Order.tsx
@@ -26,6 +26,7 @@ const Order = () => {
   }
 
   const content = template?.contentList[current]
+
   return (
     <Layout navigtaion={<NavigationWithArrow>{template?.title}</NavigationWithArrow>}>
       {template?.contentList && (
@@ -41,7 +42,7 @@ const Order = () => {
             img={content.img}
             detailType={content.type}
             answer={order.answers[current]}
-            questionTitle={content.question}
+            questionTitle={`${content?.required && '(*)'} ${content.question}`}
             options={content.options}
             handleChangeOption={
               content.type === 'multiObjective'
@@ -53,18 +54,24 @@ const Order = () => {
         {content?.type === 'subjective' && (
           <QuestionDescription
             img={content.img}
-            questionTitle={content?.question}
+            questionTitle={`${content?.required && '(*)'} ${content.question}`}
             handleChangeDescription={handleChangeTextArea(current)}
             description={order.answers[current]}
           />
         )}
       </form>
       {current + 1 === order.answers.length ? (
-        <OrderBottomLink active={Boolean(order.answers[current])} to="../pickup">
+        <OrderBottomLink
+          active={content?.required === false ? true : Boolean(order.answers[current])}
+          to="../pickup"
+        >
           픽업 날짜 설정하기
         </OrderBottomLink>
       ) : (
-        <OrderBottomLink active={Boolean(order.answers[current])} to={`#${current + 1}`}>
+        <OrderBottomLink
+          active={content?.required === false ? true : Boolean(order.answers[current])}
+          to={`#${current + 1}`}
+        >
           다음
         </OrderBottomLink>
       )}

diff --git a/src/pages/Templates/components/atoms/CheckBox.tsx b/src/pages/Templates/components/atoms/CheckBox.tsx
@@ -1,8 +1,17 @@
+import clsx from 'clsx'
 import React from 'react'
 
-const CheckBox = ({ id, children, ...props }: JSX.IntrinsicElements['input']) => {
+const CheckBox = ({
+  id,
+  children,
+  labelClassName,
+  ...props
+}: JSX.IntrinsicElements['input'] & { labelClassName?: string }) => {
   return (
-    <label htmlFor={id} className="flex items-center justify-end gap-1 p-2 text-xs">
+    <label
+      htmlFor={id}
+      className={clsx('flex items-center justify-end gap-1 p-2 text-xs', labelClassName)}
+    >
       <input id={id} type="checkbox" {...props} />
       <p>{children}</p>
     </label>

diff --git a/src/pages/Templates/components/blocks/TemplateDescriptionQuestion.tsx b/src/pages/Templates/components/blocks/TemplateDescriptionQuestion.tsx
@@ -2,6 +2,7 @@ import { CancleButton } from '@/components/atoms'
 import React from 'react'
 import useTemplateActionContext from '../../hooks/useTemplateActionContext'
 import useTemplateValueContext from '../../hooks/useTemplateValueContext'
+import CheckBox from '../atoms/CheckBox'
 import QuestionImageUpload from './QuestionImageUpload'
 
 type Props = {
@@ -10,8 +11,12 @@ type Props = {
 
 const TemplateDescriptionQuestion = ({ index }: Props) => {
   const { contentList: content } = useTemplateValueContext()
-  const { handleDeleteQuestion, handleUpdateQuestionTitle, handleUpdateImage } =
-    useTemplateActionContext()
+  const {
+    handleDeleteQuestion,
+    handleUpdateRequired,
+    handleUpdateQuestionTitle,
+    handleUpdateImage,
+  } = useTemplateActionContext()
 
   return (
     <section className="mt-8 flex w-full flex-col">
@@ -34,6 +39,13 @@ const TemplateDescriptionQuestion = ({ index }: Props) => {
           onChange={handleUpdateQuestionTitle(index)}
         />
       </div>
+      <CheckBox
+        id={`필수값-${index}`}
+        checked={content[index]?.required}
+        onChange={handleUpdateRequired(index)}
+      >
+        필수 질문
+      </CheckBox>
     </section>
   )
 }

diff --git a/src/pages/Templates/components/blocks/TemplateOptionQuestion.tsx b/src/pages/Templates/components/blocks/TemplateOptionQuestion.tsx
@@ -20,6 +20,7 @@ const TemplateOptionQuestion = ({ index }: Props) => {
     handleAddOption,
     handleUpdateImage,
     handleUpdateDetailType,
+    handleUpdateRequired,
   } = useTemplateActionContext()
 
   const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -82,13 +83,22 @@ const TemplateOptionQuestion = ({ index }: Props) => {
           옵션 추가
         </button>
       </div>
-      <CheckBox
-        id={`옵션타입-${index}`}
-        checked={content[index]?.type === 'singleObjective'}
-        onChange={handleCheckboxChange}
-      >
-        단일선택
-      </CheckBox>
+      <div className="flex w-full justify-end">
+        <CheckBox
+          id={`필수값-${index}`}
+          checked={content[index]?.required}
+          onChange={handleUpdateRequired(index)}
+        >
+          필수 질문
+        </CheckBox>
+        <CheckBox
+          id={`옵션타입-${index}`}
+          checked={content[index]?.type === 'singleObjective'}
+          onChange={handleCheckboxChange}
+        >
+          단일선택
+        </CheckBox>
+      </div>
     </section>
   )
 }

diff --git a/src/pages/Templates/context/TemplateContext.ts b/src/pages/Templates/context/TemplateContext.ts
@@ -6,7 +6,6 @@ export const defaultValue: Template = {
   contentList: [],
   title: '',
   userId: '',
-  required: true,
 }
 
 type TemplateAction = {
@@ -39,6 +38,7 @@ type TemplateAction = {
   handleUpdateTemplate: (template: Template) => void
   handleResetTemplate: () => void
   handleUpdateImage: (index: number) => (imageUrl: string) => void
+  handleUpdateRequired: (index: number) => () => void
 }
 
 const defaultAction: TemplateAction = {
@@ -53,6 +53,7 @@ const defaultAction: TemplateAction = {
   handleUpdateTemplate: () => {},
   handleResetTemplate: () => {},
   handleUpdateImage: () => () => {},
+  handleUpdateRequired: () => () => {},
 }
 
 export const TemplateValueContext = createContext(defaultValue)

diff --git a/src/pages/Templates/context/TemplateContextProvider.tsx b/src/pages/Templates/context/TemplateContextProvider.tsx
@@ -46,6 +46,15 @@ const TemplateContextProvider = ({ children }: PropsWithChildren) => {
     []
   )
 
+  const handleUpdateRequired = useCallback(
+    (index: number) => () => {
+      setTemplate((draft) => {
+        draft.contentList[index].required = !draft.contentList[index].required
+      })
+    },
+    []
+  )
+
   const handleResetTemplate = useCallback(() => {
     setTemplate(defaultValue)
     refetch()
@@ -136,6 +145,7 @@ const TemplateContextProvider = ({ children }: PropsWithChildren) => {
       handleUpdateOption,
       handleDeleteOption,
       handleUpdateDetailType,
+      handleUpdateRequired,
       handleUpdateTemplate,
       handleResetTemplate,
       handleUpdateImage,
@@ -152,6 +162,7 @@ const TemplateContextProvider = ({ children }: PropsWithChildren) => {
       handleUpdateTemplate,
       handleResetTemplate,
       handleUpdateImage,
+      handleUpdateRequired,
     ]
   )
 

diff --git a/src/type/index.ts b/src/type/index.ts
@@ -52,13 +52,15 @@ export type OptionQuestion = {
   question: string
   img?: string
   options: string[]
+  required?: boolean
 }
 
 export type DescriptionQuestion = {
   type: DescriptionQuestionType
   question: string
   img?: string
   options: null
+  required?: boolean
 }
 
 export type Question = OptionQuestion | DescriptionQuestion
@@ -68,7 +70,6 @@ export type Template = {
   userId: string
   title: string
   contentList: Question[]
-  required?: boolean
 }
 
 export type Templates = {