[#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

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>
+   )
+}

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,

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 (

packages/client/src/clientPages/questionUpdate/index.ts

@@ -0,0 +1 @@
+export { ClientQuestionUpdatePage } from './ui/ClientQuestionUpdatePage'

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')}
+      />
+   )
+}

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'

packages/client/src/entities/question/lib/useQuestionCreateForm.ts → 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>
 }

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,
+}

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,

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>

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

packages/client/src/widgets/QuestionUpdateInputs/index.ts

@@ -0,0 +1 @@
+export { QuestionUpdateInputs } from './ui/QuestionUpdateInputs'