dnd-side-project · dohui-son · Aug 26, 2024 · Aug 26, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/client/app/(withLayout)/question/[id]/page.tsx b/packages/client/app/(withLayout)/question/[id]/page.tsx
@@ -1,5 +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 function QuestionDetailPage() {
+export default async function QuestionDetailPage(d) {
+   const queryClient = new QueryClient()
+   const config = ssrConfig()
+
+   try {
+      const user = await queryClient.fetchQuery({
+         queryKey: [`/members/information`],
+         queryFn: () => fetchMemberInformation(config),
+      })
+   } catch (e) {
+      console.log(e)
+   }
+   // TODO: give userData by props to ClientQuestionDetailPage
    return <ClientQuestionDetailPage />
 }
diff --git 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/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/package.json b/packages/client/package.json
@@ -21,7 +21,7 @@
       "react": "^18",
       "react-dom": "^18",
       "react-hook-form": "^7.52.1",
-      "react-secure-storage": "^1.3.2",
+      "react-hot-toast": "^2.4.1",
       "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
@@ -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/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx b/packages/client/src/clientPages/questionDetail/ui/ClientQuestionDetailPage.tsx
@@ -9,7 +9,7 @@ import {
 import { useFetchMemberInformation } from '@shared/api'
 import { useParams, useRouter } from 'next/navigation'
 import { MainLoader } from '@shared/ui'
-import { useState } from 'react'
+import { Toast } from '@gds/component'
 import { pageWrapper } from './style.css'
 import {
    useFetchQuestionPost,
@@ -22,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()
@@ -36,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 (
@@ -70,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
@@ -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/clientPages/signup/ui/ClientSignupPage.tsx b/packages/client/src/clientPages/signup/ui/ClientSignupPage.tsx
@@ -8,6 +8,8 @@ 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 { color, Typo } from '@gds/token'
 import * as styles from './style.css'
 
 export function ClientSignupPage() {
@@ -22,6 +24,7 @@ export function ClientSignupPage() {
    } = form.watch()
    const { mutate: createMember, status } = usePostMember()
    const router = useRouter()
+   const [submitError, setSubmitError] = useState<string | null>(null)
 
    return (
       <>
@@ -30,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"
@@ -51,11 +62,13 @@ export function ClientSignupPage() {
                         },
                         {
                            onSuccess: () => {
+                              setSubmitError(null)
                               router.push(PageURL.SIGNUP_SUCCESS)
                            },
-                           onError: () => {
-                              alert(
-                                 '회원가입에 실패했습니다. 다시 시도해주세요.',
+                           onError: (e) => {
+                              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
@@ -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,
 })
diff --git a/packages/client/src/design-system/component/Toast/Toast.tsx 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
@@ -0,0 +1,50 @@
+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 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1)',
+})
+
+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
@@ -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/shared/api/axiosInstance.ts b/packages/client/src/shared/api/axiosInstance.ts