From 15f42fe93ebaa00d0973502613052051f2a48529 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Mon, 26 Aug 2024 10:58:04 +0900
Subject: [PATCH 1/9] feat: add err for signup

---
 .../src/clientPages/signup/ui/ClientSignupPage.tsx       | 9 +++++----
 .../src/widgets/SignupInputs/ui/SignupInputSection.tsx   | 9 ++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx b/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
index 3060d2d3..e56309b2 100644
--- a/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
+++ b/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
@@ -8,6 +8,7 @@ import { SignupInputSection } from '@widgets/SignupInputs'
 import { usePostMember } from '@shared/api'
 import { useRouter } from 'next/navigation'
 import { PageURL } from '@shared/model'
+import { useState } from 'react'
 import * as styles from './style.css'
 
 export function ClientSignupPage() {
@@ -22,6 +23,7 @@ export function ClientSignupPage() {
    } = form.watch()
    const { mutate: createMember, status } = usePostMember()
    const router = useRouter()
+   const [submitError, setSubmitError] = useState<string | null>(null)
 
    return (
       <>
@@ -53,10 +55,9 @@ export function ClientSignupPage() {
                            onSuccess: () => {
                               router.push(PageURL.SIGNUP_SUCCESS)
                            },
-                           onError: () => {
-                              alert(
-                                 '회원가입에 실패했습니다. 다시 시도해주세요.',
-                              )
+                           onError: (e) => {
+                              console.log(e.message)
+                              setSubmitError('회원가입에 실패했습니다.')
                            },
                         },
                      )
diff --git a/packages/client/src/widgets/SignupInputs/ui/SignupInputSection.tsx b/packages/client/src/widgets/SignupInputs/ui/SignupInputSection.tsx
index 23ec9ec9..7d21c14b 100644
--- a/packages/client/src/widgets/SignupInputs/ui/SignupInputSection.tsx
+++ b/packages/client/src/widgets/SignupInputs/ui/SignupInputSection.tsx
@@ -79,7 +79,7 @@ export function SignupInputSection({ form }: Props) {
                                  )
                                  form.setValue('officialEmailVerified', false)
                               },
-                              onError: () => {
+                              onError: (e) => {
                                  setLoading(false)
                                  form.setValue(
                                     'officialEmailVerifyCodeSent',
@@ -87,6 +87,7 @@ export function SignupInputSection({ form }: Props) {
                                  )
                                  form.setError('officialEmail', {
                                     message:
+                                       e.response.data.message ||
                                        '이메일 전송을 실패했습니다. 다시 시도해주세요',
                                     type: 'server',
                                  })
@@ -144,9 +145,10 @@ export function SignupInputSection({ form }: Props) {
                                  form.clearErrors('verificationNumber')
                                  form.setValue('officialEmailVerified', true)
                               },
-                              onError: () => {
+                              onError: (e) => {
                                  form.setError('verificationNumber', {
                                     message:
+                                       e.response.data.message ||
                                        '서버 에러가 발생했습니다. 다시 시도해주세요.',
                                     type: 'server',
                                  })
@@ -217,9 +219,10 @@ export function SignupInputSection({ form }: Props) {
                                     form.clearErrors('nickname')
                                     form.setValue('nicknameVerified', true)
                                  },
-                                 onError: () => {
+                                 onError: (e) => {
                                     form.setError('nickname', {
                                        message:
+                                          e.response.data.message ||
                                           '서버 에러가 발생했습니다. 다시 시도해주세요.',
                                        type: 'server',
                                     })

From ae8a42720a7d022339ad63023821180c254b3552 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Mon, 26 Aug 2024 11:11:47 +0900
Subject: [PATCH 2/9] feat: add err

---
 .../ui/ClientQuestionDetailPage.tsx              |  1 -
 .../clientPages/signup/ui/ClientSignupPage.tsx   | 16 ++++++++++++++--
 .../src/clientPages/signup/ui/style.css.ts       |  6 ++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx b/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
index 980ea1e2..c2dc78ad 100644
--- a/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
+++ b/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
@@ -9,7 +9,6 @@ import {
 import { useFetchMemberInformation } from '@shared/api'
 import { useParams, useRouter } from 'next/navigation'
 import { MainLoader } from '@shared/ui'
-import { useState } from 'react'
 import { pageWrapper } from './style.css'
 import {
    useFetchQuestionPost,
diff --git a/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx b/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
index e56309b2..182ce5a0 100644
--- a/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
+++ b/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
@@ -9,6 +9,7 @@ import { usePostMember } from '@shared/api'
 import { useRouter } from 'next/navigation'
 import { PageURL } from '@shared/model'
 import { useState } from 'react'
+import { color, Typo } from '@gds/token'
 import * as styles from './style.css'
 
 export function ClientSignupPage() {
@@ -32,6 +33,14 @@ export function ClientSignupPage() {
          <div className={styles.Wrapper}>
             <SignupInputSection form={form} />
             <div className={styles.FinalBtnBox}>
+               <div
+                  className={Typo.body1.sb}
+                  style={{
+                     color: color.error,
+                  }}
+               >
+                  {submitError}
+               </div>
                <Button
                   type="button"
                   size="medium"
@@ -53,11 +62,14 @@ export function ClientSignupPage() {
                         },
                         {
                            onSuccess: () => {
+                              setSubmitError(null)
                               router.push(PageURL.SIGNUP_SUCCESS)
                            },
                            onError: (e) => {
-                              console.log(e.message)
-                              setSubmitError('회원가입에 실패했습니다.')
+                              setSubmitError(
+                                 e.response?.data?.message ||
+                                    '서버 오류가 발생했습니다. 다시 시도해주세요.',
+                              )
                            },
                         },
                      )
diff --git a/packages/client/src/clientPages/signup/ui/style.css.ts b/packages/client/src/clientPages/signup/ui/style.css.ts
index e31a8fd2..06483991 100644
--- a/packages/client/src/clientPages/signup/ui/style.css.ts
+++ b/packages/client/src/clientPages/signup/ui/style.css.ts
@@ -51,4 +51,10 @@ export const bottomSection = style({
 
 export const FinalBtnBox = style({
    marginTop: 'auto',
+   minHeight: 50,
+   display: 'flex',
+   flexDirection: 'column',
+   justifyContent: 'flex-start',
+   alignItems: 'center',
+   gap: 10,
 })

From ddb4c427efe455c2f8a5a4352db958abac1f6457 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 20:24:42 +0900
Subject: [PATCH 3/9] fix: fix min max credit

---
 .../widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
index 1030e2a7..416843ee 100644
--- a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
+++ b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
@@ -106,13 +106,13 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
                   value={value}
                   onChange={(e) => onChange(e.target.value)}
                   onUpClick={() => {
-                     if (value + 1000 > 100000) {
+                     if (value + 1000 > 10000) {
                         return
                      }
                      onChange(value + 1000)
                   }}
                   onDownClick={() => {
-                     if (value - 1000 < 1000) {
+                     if (value - 1000 < 2000) {
                         return
                      }
                      onChange(value - 1000)

From 4db32ca30ae2e48ce4d39863dca5124ac208fcb1 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 20:26:12 +0900
Subject: [PATCH 4/9] feat: add asterisk

---
 .../widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
index 416843ee..c5d829da 100644
--- a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
+++ b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
@@ -38,6 +38,7 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
             }}
             render={({ field: { onChange, value } }) => (
                <TextInput
+                  required
                   label="제목"
                   placeholder="질문 제목을 작성해주세요"
                   onChange={(e) => onChange(e.target.value)}
@@ -54,6 +55,7 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
             }}
             render={({ field: { onChange, value } }) => (
                <TextArea
+                  required
                   label="질문 내용 작성"
                   placeholder="직무와 관련 분야에 대해서만 질문해 주시면, 더욱 정확하고 유익한 정보를 제공해 드릴 수 있어요. 
 소속이나 개인정보를 특정할 수 있는 내용에 대해서는 주의해 주세요!"
@@ -77,6 +79,7 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
             }}
             render={({ field: { onChange, value } }) => (
                <Select // TODO: add Search Select and remove the default select
+                  required
                   variant="filled"
                   items={JOB_GROUPS.map((job) => ({
                      id: job,
@@ -102,6 +105,7 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
             }}
             render={({ field: { onChange, value } }) => (
                <NumberInput
+                  required
                   label={<>보상 크레딧 설정</>}
                   value={value}
                   onChange={(e) => onChange(e.target.value)}

From 1c015a95ca88ea3043b6d4b49c412b577477bfb5 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 21:09:37 +0900
Subject: [PATCH 5/9] feat: add toast

---
 packages/client/app/layout.tsx                |  2 +
 packages/client/package.json                  |  1 +
 .../ui/ClientQuestionCreatePage.tsx           | 11 +++
 .../design-system/component/Toast/Toast.tsx   | 68 +++++++++++++++++++
 .../component/Toast/toast.css.ts              | 51 ++++++++++++++
 .../src/design-system/component/index.ts      |  3 +
 .../ui/QuestionCreateInputs.tsx               |  6 ++
 7 files changed, 142 insertions(+)
 create mode 100644 packages/client/src/design-system/component/Toast/Toast.tsx
 create mode 100644 packages/client/src/design-system/component/Toast/toast.css.ts

diff --git a/packages/client/app/layout.tsx b/packages/client/app/layout.tsx
index 4a66563b..cd9c9d68 100644
--- a/packages/client/app/layout.tsx
+++ b/packages/client/app/layout.tsx
@@ -4,6 +4,7 @@ import './globals.css'
 import localFont from 'next/font/local'
 import './design-system-globals.css'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ToastPrepare } from '@gds/component'
 import ReactQueryClientProviders from '../src/apps/provider/reactQueryProviders'
 
 export const metadata: Metadata = {
@@ -53,6 +54,7 @@ export default function RootLayout({
          <body>
             <div className="mobile-layout">
                <ReactQueryClientProviders>
+                  <ToastPrepare />
                   {children}
 
                   {process.env.NODE_ENV !== 'production' && (
diff --git a/packages/client/package.json b/packages/client/package.json
index 374da341..ee1b601d 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -21,6 +21,7 @@
       "react": "^18",
       "react-dom": "^18",
       "react-hook-form": "^7.52.1",
+      "react-hot-toast": "^2.4.1",
       "react-secure-storage": "^1.3.2",
       "react-slick": "^0.30.2",
       "slick-carousel": "^1.8.1"
diff --git a/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx b/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
index 7253f894..a61547d3 100644
--- a/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
+++ b/packages/client/src/clientPages/questionCreate/ui/ClientQuestionCreatePage.tsx
@@ -8,6 +8,7 @@ import { QuestionCreateInputs } from '@widgets/QuestionCreateInputs'
 import { MainLoader } from '@shared/ui'
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { Toast } from '@gds/component'
 import { usePostQuestion } from '../api/auth'
 
 export function ClientQuestionCreatePage() {
@@ -37,6 +38,16 @@ export function ClientQuestionCreatePage() {
                         form.reset()
                         setImageUrls([])
                         router.push('/home')
+                        Toast.success({
+                           title: '질문이 등록되었습니다.',
+                        })
+                     },
+                     onError: (e) => {
+                        Toast.error({
+                           title:
+                              e.response?.data?.message ||
+                              '서버 오류가 발생했습니다. 다시 시도해주세요.',
+                        })
                      },
                   },
                )
diff --git a/packages/client/src/design-system/component/Toast/Toast.tsx b/packages/client/src/design-system/component/Toast/Toast.tsx
new file mode 100644
index 00000000..086e81aa
--- /dev/null
+++ b/packages/client/src/design-system/component/Toast/Toast.tsx
@@ -0,0 +1,68 @@
+import { ReactNode } from 'react'
+import toast, { Toaster } from 'react-hot-toast'
+
+import { IconClose, IconCheckFilled } from '@gds/icon'
+import { color, Typo } from '@gds/token'
+import * as style from './toast.css'
+
+export function ToastPrepare() {
+   return <Toaster />
+}
+
+export interface ToastData {
+   title?: ReactNode
+   description?: ReactNode
+   durationMs?: number
+}
+
+function renderToast(icon: ReactNode, message: ToastData) {
+   toast.custom(
+      (t) => (
+         <div className={style.toastBase}>
+            <div className={style.left}>
+               <div className={style.iconContainer}>{icon}</div>
+               <div className={style.titleAndMessageContainer}>
+                  {message.title && (
+                     <div className={style.titleContainer}>
+                        <div className={Typo.body2.sb}>{message.title}</div>
+                     </div>
+                  )}
+                  {message.description && (
+                     <div className={style.messageContainer}>
+                        <div className={Typo.body2.lg}>
+                           {message.description}
+                        </div>
+                     </div>
+                  )}
+               </div>
+            </div>
+            <div
+               className={style.closeContainer}
+               role="button"
+               aria-label="Close"
+               tabIndex={0}
+               onClick={() => {
+                  toast.remove(t.id)
+               }}
+               onKeyDown={(e) => {
+                  if (e.key === 'Escape') {
+                     toast.remove(t.id)
+                  }
+               }}
+            >
+               <IconClose />
+            </div>
+         </div>
+      ),
+      { position: 'top-right', duration: message.durationMs || 3000 },
+   )
+}
+
+export const Toast = {
+   success: (message: ToastData) => {
+      renderToast(<IconCheckFilled color={color['primary-main']} />, message)
+   },
+   error: (message: ToastData) => {
+      renderToast(<IconCheckFilled color={color.error} />, message)
+   },
+}
diff --git a/packages/client/src/design-system/component/Toast/toast.css.ts b/packages/client/src/design-system/component/Toast/toast.css.ts
new file mode 100644
index 00000000..9a84a035
--- /dev/null
+++ b/packages/client/src/design-system/component/Toast/toast.css.ts
@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css'
+import { color } from '@gds/token'
+
+export const toastBase = style({
+   display: 'flex',
+   width: '360px',
+   padding: '12px',
+   justifyContent: 'space-between',
+   backgroundColor: color.white,
+   borderRadius: '9px',
+   boxShadow:
+      '0px 0px 1px 0px rgba(132, 132, 132, 0.31), 0px 2px 5px 0px rgba(70, 70, 70, 0.2)',
+})
+
+export const left = style({
+   display: 'flex',
+   height: '100%',
+   gap: '8px',
+})
+
+export const iconContainer = style({
+   display: 'flex',
+   alignItems: 'center',
+   justifyContent: 'center',
+   height: '18px',
+   lineHeight: '18px',
+})
+
+export const closeContainer = style({
+   cursor: 'pointer',
+   height: '20px',
+   width: '20px',
+})
+
+export const titleAndMessageContainer = style({
+   display: 'flex',
+   flexDirection: 'column',
+   justifyContent: 'center',
+   gap: '8px',
+})
+
+export const titleContainer = style({
+   display: 'flex',
+   height: '17px',
+   lineHeight: '17px',
+})
+
+export const messageContainer = style({
+   display: 'flex',
+   height: '100%',
+})
diff --git a/packages/client/src/design-system/component/index.ts b/packages/client/src/design-system/component/index.ts
index 971e608f..8ad1ff3f 100644
--- a/packages/client/src/design-system/component/index.ts
+++ b/packages/client/src/design-system/component/index.ts
@@ -28,3 +28,6 @@ export type { DividerProps } from './Divider/Divider'
 
 export { Spinner } from './Spinner/Spinner'
 export type { SpinnerProps } from './Spinner/Spinner'
+
+export { Toast, ToastPrepare } from './Toast/Toast'
+export type { ToastData } from './Toast/Toast'
diff --git a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
index c5d829da..b5a9ae47 100644
--- a/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
+++ b/packages/client/src/widgets/QuestionCreateInputs/ui/QuestionCreateInputs.tsx
@@ -9,6 +9,7 @@ import {
    Select,
    TextArea,
    TextInput,
+   Toast,
 } from '@gds/component'
 import { IconAddPhoto, IconSearch } from '@gds/icon'
 import { Controller, UseFormReturn } from 'react-hook-form'
@@ -70,6 +71,11 @@ export function QuestionCreateInputs({ form, onSubmit }: Props) {
             variant="outlined"
             size="large"
             icon={<IconAddPhoto size={32} />}
+            onClick={() =>
+               Toast.error({
+                  description: '이미지 업로드 기능은 준비 중입니다.',
+               })
+            }
          />
          <Controller
             name="targetJobGroup"

From 23ab9ec8297bded683eee17fe7665f00e5b68add Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 21:10:32 +0900
Subject: [PATCH 6/9] fix: fix style

---
 packages/client/src/design-system/component/Toast/toast.css.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/design-system/component/Toast/toast.css.ts b/packages/client/src/design-system/component/Toast/toast.css.ts
index 9a84a035..2fc38b1d 100644
--- a/packages/client/src/design-system/component/Toast/toast.css.ts
+++ b/packages/client/src/design-system/component/Toast/toast.css.ts
@@ -8,8 +8,7 @@ export const toastBase = style({
    justifyContent: 'space-between',
    backgroundColor: color.white,
    borderRadius: '9px',
-   boxShadow:
-      '0px 0px 1px 0px rgba(132, 132, 132, 0.31), 0px 2px 5px 0px rgba(70, 70, 70, 0.2)',
+   boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1)',
 })
 
 export const left = style({

From d5fe6a3aa027aa824f5fc9c7f4ec55ec9ee2984f Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 21:11:51 +0900
Subject: [PATCH 7/9] chore: add package

---
 package-lock.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d4903c29..31b71d05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23207,7 +23207,8 @@
     },
     "node_modules/react-hot-toast": {
       "version": "2.4.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
       "dependencies": {
         "goober": "^2.1.10"
       },
@@ -28384,6 +28385,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
+        "react-hot-toast": "^2.4.1",
         "react-secure-storage": "^1.3.2",
         "react-slick": "^0.30.2",
         "slick-carousel": "^1.8.1"

From d1b8d4eb737e295494aea92109a38d039451950d Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Tue, 27 Aug 2024 23:58:25 +0900
Subject: [PATCH 8/9] feat: add ssr config

---
 .../app/(withLayout)/question/[id]/page.tsx   | 19 +++++++++-
 packages/client/package.json                  |  1 -
 .../ui/ClientQuestionDetailPage.tsx           | 36 +++++++++++++++----
 .../client/src/clientPages/signup/api/mail.ts |  2 +-
 .../client/src/shared/api/axiosInstance.ts    | 12 -------
 packages/client/src/shared/api/config.ts      | 30 ----------------
 packages/client/src/shared/api/index.ts       |  1 +
 packages/client/src/shared/api/member.ts      |  6 +++-
 packages/client/src/shared/api/ssrConfig.ts   | 19 ++++++++++
 .../{ => lib}/utils/formatNumberWithCommas.ts |  0
 packages/client/src/shared/lib/utils/index.ts |  1 +
 .../client/src/shared/utils/LocalStorage.ts   | 12 -------
 .../client/src/shared/utils/tokenHandler.ts   | 22 ------------
 .../widgets/AccountCredit/ui/CreditAmount.tsx |  2 +-
 .../widgets/AccountCredit/ui/CreditList.tsx   |  2 +-
 15 files changed, 77 insertions(+), 88 deletions(-)
 delete mode 100644 packages/client/src/shared/api/axiosInstance.ts
 create mode 100644 packages/client/src/shared/api/ssrConfig.ts
 rename packages/client/src/shared/{ => lib}/utils/formatNumberWithCommas.ts (100%)
 create mode 100644 packages/client/src/shared/lib/utils/index.ts
 delete mode 100644 packages/client/src/shared/utils/LocalStorage.ts
 delete mode 100644 packages/client/src/shared/utils/tokenHandler.ts

diff --git a/packages/client/app/(withLayout)/question/[id]/page.tsx b/packages/client/app/(withLayout)/question/[id]/page.tsx
index 0b264351..4be4aa69 100644
--- a/packages/client/app/(withLayout)/question/[id]/page.tsx
+++ b/packages/client/app/(withLayout)/question/[id]/page.tsx
@@ -1,5 +1,22 @@
+import { fetchMemberInformation, ssrConfig } from '@shared/api'
+import { QueryClient } from '@tanstack/react-query'
 import { ClientQuestionDetailPage } from 'src/clientPages/questionDetail'
 
-export default function QuestionDetailPage() {
+export default async function QuestionDetailPage(d) {
+   console.log(d)
+   // console.log(userData)
+   const queryClient = new QueryClient()
+   const config = ssrConfig()
+
+   try {
+      // SOP 정책 해결 필요
+      const user = await queryClient.fetchQuery({
+         queryKey: [`/members/information`],
+         queryFn: () => fetchMemberInformation(config),
+      })
+      console.log(user)
+   } catch (e) {
+      console.log(e)
+   }
    return <ClientQuestionDetailPage />
 }
diff --git a/packages/client/package.json b/packages/client/package.json
index ee1b601d..73414e9d 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -22,7 +22,6 @@
       "react-dom": "^18",
       "react-hook-form": "^7.52.1",
       "react-hot-toast": "^2.4.1",
-      "react-secure-storage": "^1.3.2",
       "react-slick": "^0.30.2",
       "slick-carousel": "^1.8.1"
    },
diff --git a/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx b/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
index c2dc78ad..28346fae 100644
--- a/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
+++ b/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
@@ -9,6 +9,7 @@ import {
 import { useFetchMemberInformation } from '@shared/api'
 import { useParams, useRouter } from 'next/navigation'
 import { MainLoader } from '@shared/ui'
+import { Toast } from '@gds/component'
 import { pageWrapper } from './style.css'
 import {
    useFetchQuestionPost,
@@ -21,10 +22,21 @@ export function ClientQuestionDetailPage() {
    const params = useParams()
    const router = useRouter()
 
-   const { data: userData } = useFetchMemberInformation()
-   const { data: questionData } = useFetchQuestionPost({
-      questionPostId: Number(params.id),
-   })
+   const {
+      data: userData,
+      isError: userDataIsError,
+      error: userDataError,
+   } = useFetchMemberInformation()
+   const {
+      data: questionData,
+      isError: questionDataIsError,
+      error: questionDataError,
+   } = useFetchQuestionPost(
+      {
+         questionPostId: Number(params.id),
+      },
+      { enabled: !!params.id },
+   )
    const { mutate: createQuestionMeta } = usePostCreateQuestionMeta()
    const { mutate: cancelQuestionMeta } = usePostCancelQuestionMeta()
    const { mutate: createAnswer } = usePostAnswer()
@@ -35,6 +47,17 @@ export function ClientQuestionDetailPage() {
 
    if (params.id === undefined) {
       router.push('/home')
+      Toast.error({ title: '잘못된 접근 입니다.' })
+   } else if (userDataIsError) {
+      router.push('/home')
+      Toast.error({
+         title: userDataError?.message || '서버 오류가 발생했습니다.',
+      })
+   } else if (questionDataIsError) {
+      router.push('/home')
+      Toast.error({
+         title: questionDataError?.message || '서버 오류가 발생했습니다.',
+      })
    }
 
    return (
@@ -69,8 +92,9 @@ export function ClientQuestionDetailPage() {
                         registerAnswerRequest: { content: answer },
                      },
                      {
-                        onSuccess: () => {
-                           refetch()
+                        onSuccess: async () => {
+                           await refetch()
+                           Toast.success({ title: '답변이 등록되었습니다.' })
                         },
                      },
                   )
diff --git a/packages/client/src/clientPages/signup/api/mail.ts b/packages/client/src/clientPages/signup/api/mail.ts
index b9cbfb27..2d810ab2 100644
--- a/packages/client/src/clientPages/signup/api/mail.ts
+++ b/packages/client/src/clientPages/signup/api/mail.ts
@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query'
 
 import { AuthCodeRequest, MailAPIApi, SendMailRequest } from '@server-api/api'
-import { getTmpAuthorizedConfig, config } from '@shared/api/config'
+import { config } from '@shared/api/config'
 
 export const useSendVerificationCodeByEmail = () => {
    return useMutation({
diff --git a/packages/client/src/shared/api/axiosInstance.ts b/packages/client/src/shared/api/axiosInstance.ts
deleted file mode 100644
index 4a622e6b..00000000
--- a/packages/client/src/shared/api/axiosInstance.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import axios from 'axios'
-import { getAccessToken } from '../utils/tokenHandler'
-
-const accessToken = getAccessToken()
-
-export const axiosInstance = axios.create({
-   baseURL: process.env.NEXT_PUBLIC_SWAGGER_API,
-   headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${accessToken}`,
-   },
-})
diff --git a/packages/client/src/shared/api/config.ts b/packages/client/src/shared/api/config.ts
index 2dc20f0e..7408087d 100644
--- a/packages/client/src/shared/api/config.ts
+++ b/packages/client/src/shared/api/config.ts
@@ -15,33 +15,3 @@ export const config = new Configuration({
       },
    },
 })
-
-export const getTmpAuthorizedConfig = (): Configuration => {
-   const queryClient = useQueryClient()
-
-   // 쿼리 키를 사용하여 캐싱된 데이터 가져오기
-   const accessToken =
-      queryClient.getQueryData([PostTmpAccessTokenQueryKey]) || ''
-
-   return new Configuration({
-      basePath: process.env.API_BASE_URL,
-      baseOptions: {
-         withCredentials: false, // TODO: fix after implementing authentication
-         headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${accessToken}`,
-         },
-      },
-   })
-}
-
-export const ssrConfig = (req: IncomingMessage): Configuration => {
-   return new Configuration({
-      basePath: API_BASE_URL,
-      baseOptions: {
-         headers: {
-            Cookie: req.headers.cookie,
-         },
-      },
-   })
-}
diff --git a/packages/client/src/shared/api/index.ts b/packages/client/src/shared/api/index.ts
index 4a33b095..5e0db6fb 100644
--- a/packages/client/src/shared/api/index.ts
+++ b/packages/client/src/shared/api/index.ts
@@ -1,3 +1,4 @@
 export * from './config'
 export * from './auth'
 export * from './member'
+export * from './ssrConfig'
diff --git a/packages/client/src/shared/api/member.ts b/packages/client/src/shared/api/member.ts
index 81c5d159..a78d6b34 100644
--- a/packages/client/src/shared/api/member.ts
+++ b/packages/client/src/shared/api/member.ts
@@ -1,9 +1,10 @@
 import { MemberAPIApi, MemberInformationResponse } from '@server-api/api'
+import { Configuration } from '@server-api/configuration'
 import { config } from '@shared/api'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export const useFetchMemberInformation = (
-   options?: UseQueryOptions<MemberInformationResponse>,
+   options?: Omit<UseQueryOptions<MemberInformationResponse>, 'queryKey'>,
 ) =>
    useQuery({
       ...options,
@@ -11,3 +12,6 @@ export const useFetchMemberInformation = (
       queryFn: async () =>
          (await new MemberAPIApi(config).getMemberInformation()).data,
    })
+
+export const fetchMemberInformation = async (ssrConfig: Configuration) =>
+   (await new MemberAPIApi(ssrConfig).getMemberInformation()).data
diff --git a/packages/client/src/shared/api/ssrConfig.ts b/packages/client/src/shared/api/ssrConfig.ts
new file mode 100644
index 00000000..d0878be8
--- /dev/null
+++ b/packages/client/src/shared/api/ssrConfig.ts
@@ -0,0 +1,19 @@
+'use server'
+
+import { Configuration } from '@server-api/configuration'
+import { cookies } from 'next/headers'
+
+const { API_BASE_URL } = process.env
+
+export const ssrConfig = (): Configuration => {
+   const cookieStore = cookies()
+
+   return new Configuration({
+      basePath: API_BASE_URL,
+      baseOptions: {
+         headers: {
+            Cookie: cookieStore,
+         },
+      },
+   })
+}
diff --git a/packages/client/src/shared/utils/formatNumberWithCommas.ts b/packages/client/src/shared/lib/utils/formatNumberWithCommas.ts
similarity index 100%
rename from packages/client/src/shared/utils/formatNumberWithCommas.ts
rename to packages/client/src/shared/lib/utils/formatNumberWithCommas.ts
diff --git a/packages/client/src/shared/lib/utils/index.ts b/packages/client/src/shared/lib/utils/index.ts
new file mode 100644
index 00000000..03ecb85e
--- /dev/null
+++ b/packages/client/src/shared/lib/utils/index.ts
@@ -0,0 +1 @@
+export { formatNumberWithCommas } from './formatNumberWithCommas'
diff --git a/packages/client/src/shared/utils/LocalStorage.ts b/packages/client/src/shared/utils/LocalStorage.ts
deleted file mode 100644
index be517f31..00000000
--- a/packages/client/src/shared/utils/LocalStorage.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import secureLocalStorage from 'react-secure-storage'
-
-export const setLocalStorage = (key: string, value: string) => {
-   secureLocalStorage.setItem(key, value)
-}
-
-export const removeLocalStorage = (key: string) =>
-   secureLocalStorage.removeItem(key)
-
-export const getLocalStorage = (key: string) => {
-   return secureLocalStorage.getItem(key)
-}
diff --git a/packages/client/src/shared/utils/tokenHandler.ts b/packages/client/src/shared/utils/tokenHandler.ts
deleted file mode 100644
index b7c68ed1..00000000
--- a/packages/client/src/shared/utils/tokenHandler.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import secureLocalStorage from 'react-secure-storage'
-
-/**
- * 액세스 토큰 가져오기
- */
-export const getAccessToken = () => {
-   return secureLocalStorage.getItem('ACCESS_TOKEN') || undefined
-}
-
-/**
- * 액세스 토큰 업데이트
- */
-export const updateAccessToken = (token: string) => {
-   secureLocalStorage.setItem('ACCESS_TOKEN', token)
-}
-
-/**
- * 토큰 삭제 (로그아웃)
- */
-export const removeAccessToken = () => {
-   secureLocalStorage.removeItem('ACCESS_TOKEN')
-}
diff --git a/packages/client/src/widgets/AccountCredit/ui/CreditAmount.tsx b/packages/client/src/widgets/AccountCredit/ui/CreditAmount.tsx
index 273ac6a4..8fbef0be 100644
--- a/packages/client/src/widgets/AccountCredit/ui/CreditAmount.tsx
+++ b/packages/client/src/widgets/AccountCredit/ui/CreditAmount.tsx
@@ -1,7 +1,7 @@
 import { IconCredit } from '@gds/icon'
 import Image from 'next/image'
 import { color } from '@gds/token'
-import { formatNumberWithCommas } from '@shared/utils/formatNumberWithCommas'
+import { formatNumberWithCommas } from '@shared/lib/utils/formatNumberWithCommas'
 import CreditBackgroundImg from 'public/asset/creditBackground.svg'
 import * as styles from './style.css'
 
diff --git a/packages/client/src/widgets/AccountCredit/ui/CreditList.tsx b/packages/client/src/widgets/AccountCredit/ui/CreditList.tsx
index c274ede3..a2071fd3 100644
--- a/packages/client/src/widgets/AccountCredit/ui/CreditList.tsx
+++ b/packages/client/src/widgets/AccountCredit/ui/CreditList.tsx
@@ -1,4 +1,4 @@
-import { formatNumberWithCommas } from '@shared/utils/formatNumberWithCommas'
+import { formatNumberWithCommas } from '@shared/lib/utils/formatNumberWithCommas'
 import * as styles from './style.css'
 
 // TODO: 서버 데이터에 맞게 수정 필요

From f6e726d73730a62aaf5b7630fdcbbbf3e3b46816 Mon Sep 17 00:00:00 2001
From: doheeMac <thsehgml37@korea.ac.kr>
Date: Thu, 29 Aug 2024 21:23:07 +0900
Subject: [PATCH 9/9] feat: add proxy

---
 .../client/app/(withLayout)/question/[id]/page.tsx     |  6 ++----
 packages/client/next.config.mjs                        | 10 ++++++++++
 packages/client/src/shared/api/ssrConfig.ts            |  3 +--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/client/app/(withLayout)/question/[id]/page.tsx b/packages/client/app/(withLayout)/question/[id]/page.tsx
index 4be4aa69..d679068f 100644
--- a/packages/client/app/(withLayout)/question/[id]/page.tsx
+++ b/packages/client/app/(withLayout)/question/[id]/page.tsx
@@ -1,22 +1,20 @@
 import { fetchMemberInformation, ssrConfig } from '@shared/api'
 import { QueryClient } from '@tanstack/react-query'
+import { cookies } from 'next/headers'
 import { ClientQuestionDetailPage } from 'src/clientPages/questionDetail'
 
 export default async function QuestionDetailPage(d) {
-   console.log(d)
-   // console.log(userData)
    const queryClient = new QueryClient()
    const config = ssrConfig()
 
    try {
-      // SOP 정책 해결 필요
       const user = await queryClient.fetchQuery({
          queryKey: [`/members/information`],
          queryFn: () => fetchMemberInformation(config),
       })
-      console.log(user)
    } catch (e) {
       console.log(e)
    }
+   // TODO: give userData by props to ClientQuestionDetailPage
    return <ClientQuestionDetailPage />
 }
diff --git a/packages/client/next.config.mjs b/packages/client/next.config.mjs
index 22efc9ba..37eaec12 100644
--- a/packages/client/next.config.mjs
+++ b/packages/client/next.config.mjs
@@ -7,10 +7,12 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 const withVanillaExtract = createVanillaExtractPlugin()
+const API_BASE_URL = process.env.API_BASE_URL
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
    reactStrictMode: true,
+   trailingSlash: true,
    images: {
       remotePatterns: [
          {
@@ -19,6 +21,14 @@ const nextConfig = {
          },
       ],
    },
+   async rewrites() {
+      return [
+         {
+            source: '/api/:path*/',
+            destination: `${API_BASE_URL}/:path*/`,
+         },
+      ]
+   },
 }
 
 export default withVanillaExtract(nextConfig)
diff --git a/packages/client/src/shared/api/ssrConfig.ts b/packages/client/src/shared/api/ssrConfig.ts
index d0878be8..be966497 100644
--- a/packages/client/src/shared/api/ssrConfig.ts
+++ b/packages/client/src/shared/api/ssrConfig.ts
@@ -7,12 +7,11 @@ const { API_BASE_URL } = process.env
 
 export const ssrConfig = (): Configuration => {
    const cookieStore = cookies()
-
    return new Configuration({
       basePath: API_BASE_URL,
       baseOptions: {
          headers: {
-            Cookie: cookieStore,
+            Cookie: cookieStore.toString(),
          },
       },
    })