[#216] ✨ 인증 API 관련 (#222)

* [#216] 🔧 use images fetched from server (Plan to replace Image component with img tag in future)

* [#216] 💄 adjust spacing

* [#216] ✨ manage error message state

* [#216] ✨ Add My Page API test section (update after resolving authentication token issues)

* [#216] ✨ Manage message state based on validation

* [#216] ♻️ Include all fields in res value

* [#216] ✨ Display name in modal on successful registration

* [#216] 🐛 fix typos

* [#216] ✨ Integrate API headers for login, logout, and registration endpoints

* [#216] ✨ implement API endpoints for user registration, login, and email duplication check

* [#216] ✨ work in progress on My Page related API implementation

* [#219] ✨ implement authorized request handling

* [#219] ✨ implement getProfile, updateProfile api

* [#212] ✨ integrate mypage api

* [#212] ✨ web accessibility improvement

Author: yongb2n

next.config.ts

@@ -40,3 +40,4 @@ const nextConfig: NextConfig = {
 }
 
 export default nextConfig
+

src/app/(pages)/forgot-password/page.tsx

@@ -27,7 +27,7 @@ export default function FindPassword(): JSX.Element {
           다음
         </Button>
         <div className='flex flex-col items-center'>
-          <Text.Body variant='body3' color='gray600'>
+          <Text.Body variant='body3' color='gray600' className='flex gap-x-2'>
             이메일이 기억나지 않는다면?
             <Highlight>고객센터</Highlight>
           </Text.Body>

src/app/(pages)/login/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -34,6 +34,8 @@ const signInSchema = z.object({
 type SignInForm = z.infer<typeof signInSchema>
 
 export default function Login(): JSX.Element {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
   const methods = useForm<SignInForm>({
     mode: 'onBlur',
     resolver: zodResolver(signInSchema),
@@ -49,9 +51,10 @@ export default function Login(): JSX.Element {
     setValue,
   } = methods
 
-  const { mutate: signIn } = useSignInMutation()
+  const { mutate: signIn } = useSignInMutation(setErrorMessage)
 
   const onSubmit = (data: SignInForm) => {
+    setErrorMessage(null)
     if (data.rememberEmail) {
       localStorage.setItem('rememberedEmail', data.email)
     } else {
@@ -101,6 +104,11 @@ export default function Login(): JSX.Element {
             비밀번호 찾기
           </Link>
         </div>
+        <div className='pt-10'>
+          <Text.Caption variant='caption1' color='negative'>
+            {errorMessage}
+          </Text.Caption>
+        </div>
         <Button disabled={!isValid} type='submit' fullWidth className='my-20'>
           로그인
         </Button>
@@ -111,7 +119,7 @@ export default function Login(): JSX.Element {
           </Text.Body>
           <Divider isVertical={false} className='w-188' />
         </div>
-        <Link variant='outlined' href='/sign-up' fullWidth className='mt-20'>
+        <Link variant='outlined' href='/signup' fullWidth className='mt-20'>
           회원가입
         </Link>
       </Form>

src/app/(pages)/mypage/page.tsx

@@ -1,9 +1,13 @@
 'use client'
 
+import Image from 'next/image'
+
+import { useRef, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
 import { IcProfile, IcProfileCard } from '@/assets/IconList'
 import { positionOptions, techStackOptions } from '@/constants/selectOptions'
+import { AffiliationType, UpdateProfileRequest } from '@/types/api/MyPage.types'
 
 import { Button } from '@/components/common/button'
 import { DeletableChip } from '@/components/common/chip'
@@ -13,42 +17,74 @@ import { Text } from '@/components/common/text'
 import { Form } from '@/components/shared/form'
 import { Select } from '@/components/shared/select'
 
-interface FormValues {
-  name: string
-  nickname: string
-  introduction: string
-  gitHub: string
-  position: string[]
-  techStacks: string[]
-  affiliation: string
-}
+import { useAuthStore } from '@/stores/useAuthStore'
+
+import { getProfile, updateProfile } from '@/services/mypage'
 
 export default function MyPage(): JSX.Element {
-  const methods = useForm<FormValues>({
+  const { user } = useAuthStore()
+
+  const methods = useForm<UpdateProfileRequest>({
     mode: 'onChange',
     defaultValues: {
-      name: '',
-      nickname: '',
-      introduction: '',
-      gitHub: '',
-      position: [],
-      techStacks: [],
-      affiliation: '',
+      request: {
+        imageUrl: '',
+        nickname: user?.nickname,
+        introduction: '',
+        gitHub: '',
+        affiliation: 'COMPANY_SCHOOL',
+      },
     },
   })
 
-  const { control } = methods
-
-  const onSubmit = (data: FormValues) => {
-    console.log('Form Submitted:', data)
-  }
+  const { control, watch } = methods
+  const values = watch()
 
   const affiliationOptions = [
     { label: '회사 ‧ 학교', value: 'COMPANY_SCHOOL' },
     { label: '프리랜서', value: 'FREELANCER' },
     { label: '기타', value: 'OTHER' },
   ]
 
+  const testApiCall = async () => {
+    try {
+      const response = await getProfile()
+      console.log('getProfile API 결과:', response.result)
+    } catch (error) {
+      console.error('API 호출 에러:', error)
+    }
+  }
+
+  const [preview, setPreview] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onloadend = () => setPreview(reader.result as string)
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const onSubmit = async (data: UpdateProfileRequest) => {
+    if (!fileInputRef.current?.files?.[0]) {
+      return
+    }
+
+    try {
+      const profileImage = fileInputRef.current.files[0] || null
+      const response = await updateProfile(data, profileImage)
+      console.log('프로필 업데이트 성공:', response)
+    } catch (error) {
+      console.error('프로필 업데이트 실패:', error)
+    }
+  }
+
   return (
     <div className='h-auto max-w-954'>
       <Text.Heading as='h2' variant='heading2' className='pb-8 pt-33'>
@@ -58,6 +94,12 @@ export default function MyPage(): JSX.Element {
         기본 정보 및 프로필을 설정할 수 있습니다.
       </Text.Body>
 
+      <div className='mb-20'>
+        <Button variant='contained' onClick={testApiCall}>
+          API 테스트
+        </Button>
+      </div>
+
       <div className='w-954 rounded-12 bg-common-white p-40'>
         <div className='flex flex-row gap-x-20 pb-20'>
           <IcProfileCard width='40' height='40' />
@@ -87,17 +129,54 @@ export default function MyPage(): JSX.Element {
         <Form methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
           <div className='mb-20 flex flex-row gap-x-60'>
             <Label labelText='프로필 사진' className='w-146' />
-            <div className='flex gap-x-20'>
-              <button>
-                <IcProfile width='60' height='60' />
+            <div className='flex items-center gap-x-20'>
+              <button onClick={handleButtonClick}>
+                {preview ? (
+                  <div className='h-60 w-60 overflow-hidden rounded-full'>
+                    <Image
+                      src={preview}
+                      alt='프로필 이미지'
+                      width={60}
+                      height={60}
+                      className='h-full w-full object-cover'
+                    />
+                  </div>
+                ) : (
+                  <IcProfile width='60' height='60' />
+                )}
               </button>
-              <Button variant='outlined'>프로필 변경</Button>
+              <Button variant='outlined' onClick={handleButtonClick}>
+                프로필 변경
+              </Button>
+              <input
+                type='file'
+                accept='image/*'
+                ref={fileInputRef}
+                className='hidden'
+                onChange={handleFileChange}
+              />
             </div>
           </div>
+
           <div className='mb-20 flex flex-row gap-x-60'>
             <Label labelText='이름' className='w-146' />
             <div className='w-500'>
-              <Form.Text name='name' className='h-48' />
+              <Form.Text
+                name='request.name'
+                className='h-48 text-gray-500'
+                disabled
+              />
+            </div>
+          </div>
+
+          <div className='mb-20 flex flex-row gap-x-60'>
+            <Label labelText='이메일' className='w-146' />
+            <div className='w-500'>
+              <Form.Text
+                name='request.email'
+                className='h-48 text-gray-500'
+                disabled
+              />
             </div>
           </div>
 
@@ -109,14 +188,14 @@ export default function MyPage(): JSX.Element {
           <div className='mb-20 flex flex-row gap-x-60'>
             <Label labelText='닉네임' className='w-146' />
             <div className='w-500'>
-              <Form.Text name='nickname' className='h-48' />
+              <Form.Text name='request.nickname' className='h-48' />
             </div>
           </div>
 
           <div className='mb-20 flex flex-row gap-x-60'>
             <Label labelText='소개' className='w-146' />
             <div className='w-500'>
-              <Form.TextArea size='sm' name='introduction' fullWidth />
+              <Form.TextArea size='sm' name='request.introduction' fullWidth />
             </div>
           </div>
 
@@ -126,7 +205,7 @@ export default function MyPage(): JSX.Element {
               <Text.Body variant='body2' color='gray500'>
                 https://github.com/
               </Text.Body>
-              <Form.Text name='gitHub' placeholder='입력' />
+              <Form.Text name='request.gitHub' placeholder='입력' />
             </div>
           </div>
 
@@ -141,12 +220,11 @@ export default function MyPage(): JSX.Element {
             커리어
           </Text.Heading>
 
-          <div className='mb-20 flex flex-row items-center gap-x-60'>
+          {/* <div className='mb-20 flex flex-row items-center gap-x-60'>
             <Label labelText='포지션' className='h-48 w-146' />
             <Controller
               name='position'
               control={control}
-              rules={{ required: '기술 스택을 선택해주세요.' }}
               render={({ field, fieldState: { error } }) => (
                 <div>
                   <Select
@@ -193,7 +271,6 @@ export default function MyPage(): JSX.Element {
             <Controller
               name='techStacks'
               control={control}
-              rules={{ required: '기술 스택을 선택해주세요.' }}
               render={({ field, fieldState: { error } }) => (
                 <div>
                   <Select
@@ -233,12 +310,13 @@ export default function MyPage(): JSX.Element {
                 </div>
               )}
             />
-          </div>
+          </div> */}
+
           <div className='mb-40 flex gap-x-60'>
             <Label labelText='소속' className='w-146' />
             <div className='flex w-500 gap-x-40'>
               <Form.Radio
-                name='affiliation'
+                name='request.affiliation'
                 options={affiliationOptions}
                 rules={{ required: '소속을 선택해주세요.' }}
               />
@@ -248,9 +326,12 @@ export default function MyPage(): JSX.Element {
             <Button size='lg' className='bg-semantic-negative'>
               회원 탈퇴
             </Button>
-            <Button size='lg' disabled>
+            <Button size='lg' type='submit'>
               프로필 저장
             </Button>
+            <Button size='lg' onClick={() => console.log(values)}>
+              테스트
+            </Button>
           </div>
         </Form>
       </div>