From a941f500aceccff6d12266475b9cd65c52f0a88a Mon Sep 17 00:00:00 2001
From: dohui-son <thsehgml37@korea.ac.kr>
Date: Sat, 17 Aug 2024 23:23:12 +0900
Subject: [PATCH] [#66] feat: add update question page (#67)

* feat: add update page

* fix: fix refactor form

* fix: fix validate question

* fix: fix style for float button err

* fix: fix design system build err
---
 package-lock.json                             | 120 ----------------
 .../question/update/[id]/page.tsx             |   9 ++
 .../clientPages/home/ui/ClientHomePage.tsx    |   3 +-
 .../ui/ClientQuestionCreatePage.tsx           |   7 +-
 .../src/clientPages/questionUpdate/index.ts   |   1 +
 .../ui/ClientQuestionUpdatePage.tsx           |  20 +++
 .../client/src/entities/question/index.ts     |   6 +-
 .../lib/{ => hook}/useQuestionCreateForm.ts   |  11 +-
 .../lib/{ => hook}/useValidateQuestion.ts     |   0
 .../model/questionFormDefaultValue.ts         |   8 ++
 .../ui/QuestionCreateInputs.tsx               |   4 +-
 .../ui/QuestionDetailHeader.tsx               |   6 +-
 .../ui/QuestionInformationContainer.tsx       |   6 +-
 .../src/widgets/QuestionUpdateInputs/index.ts |   1 +
 .../ui/QuestionUpdateInputs.tsx               | 136 ++++++++++++++++++
 .../ui/questionUpdateInputs.css.ts            |  16 +++
 16 files changed, 217 insertions(+), 137 deletions(-)
 create mode 100644 packages/client/app/(withLayout)/question/update/[id]/page.tsx
 create mode 100644 packages/client/src/clientPages/questionUpdate/index.ts
 create mode 100644 packages/client/src/clientPages/questionUpdate/ui/ClientQuestionUpdatePage.tsx
 rename packages/client/src/entities/question/lib/{ => hook}/useQuestionCreateForm.ts (58%)
 rename packages/client/src/entities/question/lib/{ => hook}/useValidateQuestion.ts (100%)
 create mode 100644 packages/client/src/entities/question/model/questionFormDefaultValue.ts
 create mode 100644 packages/client/src/widgets/QuestionUpdateInputs/index.ts
 create mode 100644 packages/client/src/widgets/QuestionUpdateInputs/ui/QuestionUpdateInputs.tsx
 create mode 100644 packages/client/src/widgets/QuestionUpdateInputs/ui/questionUpdateInputs.css.ts

diff --git a/package-lock.json b/package-lock.json
index 3f730e15..e859003b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30142,126 +30142,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
-      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
-      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
-      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
-      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
-      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
-      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
-      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
-      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/packages/client/app/(withLayout)/question/update/[id]/page.tsx b/packages/client/app/(withLayout)/question/update/[id]/page.tsx
new file mode 100644
index 00000000..de57bc5a
--- /dev/null
+++ b/packages/client/app/(withLayout)/question/update/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { ClientQuestionUpdatePage } from 'src/clientPages/questionUpdate'
+
+export default function QuestionUpdatePage() {
+   return (
+      <div>
+         <ClientQuestionUpdatePage />
+      </div>
+   )
+}
diff --git a/packages/client/src/clientPages/home/ui/ClientHomePage.tsx b/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
index b34b3e1b..f6d0b467 100644
--- a/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
+++ b/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
@@ -96,9 +96,10 @@ export function ClientHomePage() {
    const router = useRouter()
 
    return (
-      <div style={{ position: 'fixed', height: '844px' }}>
+      <div style={{ position: 'relative', height: '844px' }}>
          <div
             style={{
+               // TODO: 분리해주세요.
                position: 'absolute',
                top: 0,
                left: 0,
diff --git a/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx b/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
index 70af32f6..b2a774e5 100644
--- a/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
+++ b/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import { useCreateQuestionForm } from '@entities/question'
+import {
+   useQuestionForm,
+   QUSETION_FORM_DEFAULT_VALUES,
+} from '@entities/question'
 import { QuestionCreateInputs } from '@widgets/QuestionCreateInputs'
 
 export function ClientQuestionCreatePage() {
-   const form = useCreateQuestionForm()
+   const form = useQuestionForm(QUSETION_FORM_DEFAULT_VALUES)
    // api 연동시 onSubmit 함수 구현
 
    return (
diff --git a/packages/client/src/clientPages/questionUpdate/index.ts b/packages/client/src/clientPages/questionUpdate/index.ts
new file mode 100644
index 00000000..41a89501
--- /dev/null
+++ b/packages/client/src/clientPages/questionUpdate/index.ts
@@ -0,0 +1 @@
+export { ClientQuestionUpdatePage } from './ui/ClientQuestionUpdatePage'
diff --git a/packages/client/src/clientPages/questionUpdate/ui/ClientQuestionUpdatePage.tsx b/packages/client/src/clientPages/questionUpdate/ui/ClientQuestionUpdatePage.tsx
new file mode 100644
index 00000000..4b84ae28
--- /dev/null
+++ b/packages/client/src/clientPages/questionUpdate/ui/ClientQuestionUpdatePage.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import {
+   useQuestionForm,
+   QUSETION_FORM_DEFAULT_VALUES,
+} from '@entities/question'
+
+import { QuestionUpdateInputs } from '@widgets/QuestionUpdateInputs'
+
+export function ClientQuestionUpdatePage() {
+   const form = useQuestionForm(QUSETION_FORM_DEFAULT_VALUES)
+   // api 연동시 onSubmit 함수 구현
+
+   return (
+      <QuestionUpdateInputs
+         form={form}
+         onSubmit={() => alert('TODO: submit')}
+      />
+   )
+}
diff --git a/packages/client/src/entities/question/index.ts b/packages/client/src/entities/question/index.ts
index a7f29361..92df2f7b 100644
--- a/packages/client/src/entities/question/index.ts
+++ b/packages/client/src/entities/question/index.ts
@@ -1,3 +1,5 @@
-export { useCreateQuestionForm } from './lib/useQuestionCreateForm'
+export { useQuestionForm } from './lib/hook/useQuestionCreateForm'
 
-export type { QuestionFormValues } from './lib/useQuestionCreateForm'
+export type { QuestionFormValues } from './lib/hook/useQuestionCreateForm'
+export { QUSETION_FORM_DEFAULT_VALUES } from './model/questionFormDefaultValue'
+export { useValidateQuestion } from './lib/hook/useValidateQuestion'
diff --git a/packages/client/src/entities/question/lib/useQuestionCreateForm.ts b/packages/client/src/entities/question/lib/hook/useQuestionCreateForm.ts
similarity index 58%
rename from packages/client/src/entities/question/lib/useQuestionCreateForm.ts
rename to packages/client/src/entities/question/lib/hook/useQuestionCreateForm.ts
index 3ef97c96..199817e6 100644
--- a/packages/client/src/entities/question/lib/useQuestionCreateForm.ts
+++ b/packages/client/src/entities/question/lib/hook/useQuestionCreateForm.ts
@@ -7,15 +7,12 @@ export type QuestionFormValues = {
    reward: number
 }
 
-export const useCreateQuestionForm = (): UseFormReturn<QuestionFormValues> => {
+export const useQuestionForm = (
+   defaultValues: QuestionFormValues,
+): UseFormReturn<QuestionFormValues> => {
    const form = useForm({
       mode: 'onTouched',
-      defaultValues: {
-         title: '',
-         content: '',
-         jobCategory: { label: '', id: '' },
-         reward: 1000,
-      },
+      defaultValues,
    })
    return form as UseFormReturn<QuestionFormValues>
 }
diff --git a/packages/client/src/entities/question/lib/useValidateQuestion.ts b/packages/client/src/entities/question/lib/hook/useValidateQuestion.ts
similarity index 100%
rename from packages/client/src/entities/question/lib/useValidateQuestion.ts
rename to packages/client/src/entities/question/lib/hook/useValidateQuestion.ts
diff --git a/packages/client/src/entities/question/model/questionFormDefaultValue.ts b/packages/client/src/entities/question/model/questionFormDefaultValue.ts
new file mode 100644
index 00000000..a8b37608
--- /dev/null
+++ b/packages/client/src/entities/question/model/questionFormDefaultValue.ts
@@ -0,0 +1,8 @@
+import { QuestionFormValues } from '../lib/hook/useQuestionCreateForm'
+
+export const QUSETION_FORM_DEFAULT_VALUES: QuestionFormValues = {
+   title: '',
+   content: '',
+   jobCategory: null,
+   reward: 1000,
+}
diff --git a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
index 1b9c1895..85d7764e 100644
--- a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
+++ b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { QuestionFormValues } from '@entities/question'
-import { useValidateQuestion } from '@entities/question/lib/useValidateQuestion'
+import { QuestionFormValues, useValidateQuestion } from '@entities/question'
+
 import {
    Button,
    IconButton,
diff --git a/packages/client/src/widgets/QuestionDetail/ui/QuestionDetailHeader.tsx b/packages/client/src/widgets/QuestionDetail/ui/QuestionDetailHeader.tsx
index 7f82237c..2c12b5ec 100644
--- a/packages/client/src/widgets/QuestionDetail/ui/QuestionDetailHeader.tsx
+++ b/packages/client/src/widgets/QuestionDetail/ui/QuestionDetailHeader.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation'
 import { IconArrowLeft, IconEdit } from 'src/design-system/icon'
 import { IconButton } from '@gds/component'
+import { PageURL } from '@shared/model'
 import {
    arrowButtonWrappewrStyle,
    headerTitleWrappewrStyle,
@@ -11,10 +12,12 @@ import {
 
 interface Props {
    title?: string
+   id?: string
 }
 
-export function QuestionDetailHeader({ title }: Props) {
+export function QuestionDetailHeader({ title, id }: Props) {
    const router = useRouter()
+
    return (
       <div className={headerWrapperStyle}>
          <div className={arrowButtonWrappewrStyle}>
@@ -32,6 +35,7 @@ export function QuestionDetailHeader({ title }: Props) {
             variant="default"
             aria-label="Edit"
             size="small"
+            onClick={() => router.push(`${PageURL.QUESTION_UPDATE}/${id}`)}
             icon={<IconEdit />}
          />
       </div>
diff --git a/packages/client/src/widgets/QuestionDetail/ui/QuestionInformationContainer.tsx b/packages/client/src/widgets/QuestionDetail/ui/QuestionInformationContainer.tsx
index 880d3dc5..7337b200 100644
--- a/packages/client/src/widgets/QuestionDetail/ui/QuestionInformationContainer.tsx
+++ b/packages/client/src/widgets/QuestionDetail/ui/QuestionInformationContainer.tsx
@@ -16,9 +16,11 @@ export function QuestionInformationContainer() {
    const params = useParams()
    return (
       <>
-         <QuestionDetailHeader title={String(params.id)} />
+         <QuestionDetailHeader
+            title={String(params.id)}
+            id={String(params.id)}
+         />
          {/* TODO: fix title */}
-
          <ProfileContents title="닉네임" description="등록된 직무" />
          <Badge size="small" variant="secondary">
             0000
diff --git a/packages/client/src/widgets/QuestionUpdateInputs/index.ts b/packages/client/src/widgets/QuestionUpdateInputs/index.ts
new file mode 100644
index 00000000..51777fb2
--- /dev/null
+++ b/packages/client/src/widgets/QuestionUpdateInputs/index.ts
@@ -0,0 +1 @@
+export { QuestionUpdateInputs } from './ui/QuestionUpdateInputs'
diff --git a/packages/client/src/widgets/QuestionUpdateInputs/ui/QuestionUpdateInputs.tsx b/packages/client/src/widgets/QuestionUpdateInputs/ui/QuestionUpdateInputs.tsx
new file mode 100644
index 00000000..a7432d58
--- /dev/null
+++ b/packages/client/src/widgets/QuestionUpdateInputs/ui/QuestionUpdateInputs.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { QuestionFormValues, useValidateQuestion } from '@entities/question'
+
+import {
+   Button,
+   IconButton,
+   NumberInput,
+   Select,
+   TextArea,
+   TextInput,
+} from '@gds/component'
+import { IconAddPhoto, IconSearch } from '@gds/icon'
+import { Controller, UseFormReturn } from 'react-hook-form'
+import { pageWrapper } from './questionUpdateInputs.css'
+
+interface Props {
+   form: UseFormReturn<QuestionFormValues>
+   onSubmit: () => void
+}
+
+export function QuestionUpdateInputs({ form, onSubmit }: Props) {
+   const {
+      canSubmit,
+      getTitleErrorMessage,
+      getJobCategoryErrorMessage,
+      getContentErrorMessage,
+      getRewardErrorMessage,
+   } = useValidateQuestion(form)
+   return (
+      <div className={pageWrapper}>
+         <Controller
+            name="title"
+            control={form.control}
+            rules={{
+               required: true,
+            }}
+            render={({ field: { onChange, value } }) => (
+               <TextInput
+                  label="제목"
+                  placeholder="질문 제목을 작성해주세요"
+                  onChange={(e) => onChange(e.target.value)}
+                  value={value}
+                  errorMessage={(!!value && getTitleErrorMessage()) || ''}
+               />
+            )}
+         />
+         <Controller
+            name="content"
+            control={form.control}
+            rules={{
+               required: true,
+            }}
+            render={({ field: { onChange, value } }) => (
+               <TextArea
+                  label="질문 내용 작성"
+                  placeholder="직무와 관련 분야에 대해서만 질문해 주시면, 더욱 정확하고 유익한 정보를 제공해 드릴 수 있어요. 
+소속이나 개인정보를 특정할 수 있는 내용에 대해서는 주의해 주세요!"
+                  height={258}
+                  onChange={(e) => onChange(e.target.value)}
+                  value={value}
+                  errorMessage={(!!value && getContentErrorMessage()) || ''}
+               />
+            )}
+         />
+         <IconButton // TODO: add Image Upload logic
+            variant="outlined"
+            size="large"
+            icon={<IconAddPhoto size={32} />}
+         />
+         <Controller
+            name="jobCategory"
+            control={form.control}
+            rules={{
+               required: true,
+            }}
+            render={({ field: { onChange, value } }) => (
+               <Select // TODO: add Search Select and remove the default select
+                  variant="filled"
+                  items={[{ label: 'TODO', id: 'TODO' }]}
+                  selected={value}
+                  onSelect={onChange}
+                  inputProps={{
+                     icon: <IconSearch size={20} />,
+                     placeholder: '해당 직군을 입력해주세요',
+                     label: '직군 선택',
+                     errorMessage:
+                        (value !== null && getJobCategoryErrorMessage()) || '',
+                  }}
+               />
+            )}
+         />
+         <Controller
+            name="reward"
+            control={form.control}
+            rules={{
+               required: true,
+            }}
+            render={({ field: { onChange, value } }) => (
+               <NumberInput
+                  label={<>보상 크레딧 설정</>}
+                  value={1000}
+                  onChange={(e) => onChange(e.target.value)}
+                  onUpClick={() => {
+                     if (value + 1000 > 100000) {
+                        return
+                     }
+                     onChange(value + 1000)
+                  }}
+                  onDownClick={() => {
+                     if (value - 1000 < 1000) {
+                        return
+                     }
+                     onChange(value - 1000)
+                  }}
+                  variant="gradient"
+                  subTitle="크레딧"
+                  errorMessage={(!!value && getRewardErrorMessage()) || ''}
+                  min={1000}
+                  max={10000}
+               />
+            )}
+         />
+
+         <Button
+            type="submit"
+            variant="filled"
+            size="large"
+            onClick={() => onSubmit()}
+            disabled={!canSubmit}
+         >
+            질문 수정하기
+         </Button>
+      </div>
+   )
+}
diff --git a/packages/client/src/widgets/QuestionUpdateInputs/ui/questionUpdateInputs.css.ts b/packages/client/src/widgets/QuestionUpdateInputs/ui/questionUpdateInputs.css.ts
new file mode 100644
index 00000000..9004b7e4
--- /dev/null
+++ b/packages/client/src/widgets/QuestionUpdateInputs/ui/questionUpdateInputs.css.ts
@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css'
+
+export const pageWrapper = style({
+   display: 'flex',
+   flexDirection: 'column',
+   alignItems: 'flex-start',
+   justifyContent: 'flex-start',
+   gap: 36,
+
+   padding: 16,
+
+   color: '#2A2A2A',
+   fontSize: 18,
+   fontWeight: 600,
+   lineHeight: 'normal',
+})