Merge branch 'dev' into bug/275-ui-update

Guzzing · Dec 1, 2023 · 0ee002f · 0ee002f
2 parents e53f90b + b7befbe
commit 0ee002f
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 38 deletions.
diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx
@@ -1,38 +1,83 @@
 import type { ProfileImageProps } from './ProfileType'
+import { useRef, useState, RefObject } from 'react'
 import { PROFILE_SIZE, PROFILE_BORDER_COLOR } from './constants'
-
+import request from '@/libs/api'
+import useToastify from '@/libs/hooks/useToastify'
 const Profile = ({
   imageSize,
   imageUrl = 'https://chanwookim.me/agumon-dday/agumon.png',
   imageLabel = '',
   canEdit = false,
+  editId = 0,
   onClick,
   profileSize
 }: ProfileImageProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  const imgRef = useRef<HTMLInputElement>(null) as RefObject<HTMLInputElement>
+  const { setToast } = useToastify()
+  const [image, setImage] = useState(imageUrl)
+
+  const handleImageChange = (editId: number) => {
+    if (imgRef.current && imgRef.current?.files) {
+      const formData = new FormData()
+      formData.append('file', imgRef.current.files[0], 'myfile')
+      try {
+        request
+          .post(`/children/${editId}/profile`, formData, {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          })
+          .then((res) => {
+            setImage(res.data.profileImageUrl)
+          })
+          .catch(() => {
+            setToast({
+              comment: '파일 용량이 너무 커서 업로드를 실패했어요.',
+              type: 'error'
+            })
+          })
+      } catch {
+        setToast({ comment: '파일 업로드를 실패했어요.', type: 'error' })
+      }
+    }
+  }
   return (
     <div
-      className={`${canEdit && 'cursor-pointer'} ${
-        PROFILE_BORDER_COLOR['black500']
-      } relative flex flex-col`}>
-      <img
-        onClick={canEdit ? onClick : undefined}
-        src={imageUrl}
-        alt={'profile photo'}
-        style={
-          profileSize
-            ? { width: `${profileSize}px`, height: `${profileSize}px` }
-            : {}
-        }
-        className={`border rounded-full ${
-          imageSize === 'S'
-            ? PROFILE_SIZE['S']
-            : imageSize === 'M'
-            ? PROFILE_SIZE['M']
-            : imageSize === 'L'
-            ? PROFILE_SIZE['L']
-            : PROFILE_SIZE['XL']
-        } rounded-full`}
-      />
+      className={`${PROFILE_BORDER_COLOR['black500']} relative flex flex-col`}>
+      <label
+        htmlFor={'fileInput'}
+        className={`relative ${canEdit && 'cursor-pointer'}`}>
+        <img
+          onClick={canEdit ? onClick : undefined}
+          src={image}
+          alt={'profile photo'}
+          style={
+            profileSize
+              ? { width: `${profileSize}px`, height: `${profileSize}px` }
+              : {}
+          }
+          className={`border rounded-full ${
+            imageSize === 'S'
+              ? PROFILE_SIZE['S']
+              : imageSize === 'M'
+              ? PROFILE_SIZE['M']
+              : imageSize === 'L'
+              ? PROFILE_SIZE['L']
+              : PROFILE_SIZE['XL']
+          } rounded-full`}
+        />
+      </label>
+      {canEdit && (
+        <input
+          ref={imgRef}
+          type={'file'}
+          id={'fileInput'}
+          className={'hidden'}
+          accept={'image/*'}
+          onChange={() => handleImageChange(editId)}
+        />
+      )}
       {imageLabel && (
         <p
           className={

diff --git a/src/components/common/profile/ProfileType.ts b/src/components/common/profile/ProfileType.ts
@@ -5,6 +5,7 @@ export interface ProfileImageProps {
   imageUrl?: string
   imageLabel?: string
   canEdit?: boolean
+  editId?: number
   onClick?: () => void
   profileSize?: number
 }
diff --git a/src/libs/api/children/ChildrenType.ts b/src/libs/api/children/ChildrenType.ts
@@ -8,6 +8,7 @@ export interface GetChildrenInfoResponse {
 
 export interface EditChildInfoRequest {
   childId: number
+  profileImageUrl: string
   nickname: string
   grade: string
 }
diff --git a/src/pages/EditChildren/EditChildren.tsx b/src/pages/EditChildren/EditChildren.tsx
@@ -38,13 +38,13 @@ const EditChildren = () => {
     }
   }, [data])
 
-  if (isLoading) return <Loading />
+  if (isLoading || childInfo === undefined) return <Loading />
   return (
     <div className={'flex flex-col items-center relative h-full'}>
       <Spacing size={150} />
       <Profile
         imageSize={'XL'}
-        canEdit={true}
+        canEdit={false}
         imageUrl={childInfo?.profileImageUrl}
       />
       <div className={'mt-[30px]'}></div>
@@ -73,6 +73,7 @@ const EditChildren = () => {
             navigate('editing', {
               state: {
                 childId: childInfo?.childId,
+                profileImageUrl: childInfo?.profileImageUrl,
                 nickname: childInfo?.nickname,
                 grade: childInfo?.grade
               }

diff --git a/src/pages/EditChildren/EditingChildren.tsx b/src/pages/EditChildren/EditingChildren.tsx
@@ -10,12 +10,16 @@ import StepQuestion from '@/components/common/stepquestion/StepQuestion'
 import { editChildInfo } from '@/libs/api/children/ChildrenApi'
 import { EditChildInfoRequest } from '@/libs/api/children/ChildrenType'
 import { queryClient } from '@/libs/api/queryClient'
+import useToastify from '@/libs/hooks/useToastify'
+import { CHILD_GRADE } from '@/pages/onboarding/constants'
 
 const EditingChildren = () => {
   const location = useLocation()
   const navigate = useNavigate()
+  const { setToast } = useToastify()
   const [childInfo, setChildInfo] = useState<EditChildInfoRequest>({
     childId: location.state.childId,
+    profileImageUrl: location.state.profileImageUrl,
     nickname: location.state.nickname,
     grade: location.state.grade
   })
@@ -46,27 +50,31 @@ const EditingChildren = () => {
   return (
     <div className={'flex flex-col items-center relative h-full px-[35px]'}>
       <Spacing size={150} />
-      <Profile imageSize={'XL'} canEdit={true} />
+      <Profile
+        imageSize={'XL'}
+        canEdit={true}
+        editId={childInfo.childId}
+        imageUrl={childInfo?.profileImageUrl}
+      />
       <Spacing size={10} />
       <div className={'flex flex-col w-full'}>
         <StepQuestion step={1} text={'이름'} />
         <Spacing size={10} />
         <Input
+          field={'childname'}
           fullWidth={true}
           value={childInfo.nickname}
           onChange={(e) => {
             setChildInfo({
               childId: childInfo.childId,
+              profileImageUrl: childInfo.profileImageUrl,
               nickname: e.target.value,
               grade: childInfo.grade
             })
             handleChildrenName(e.target.value)
           }}
           placeholder={'아이의 이름을 입력해주세요'}
           inputType={'Default'}
-          errorMessage={
-            valid ? undefined : '한글, 영어 10자 이내로 작성해주세요'
-          }
         />
         <Spacing size={25} />
         <StepQuestion step={2} text={'학년'} />
@@ -75,17 +83,13 @@ const EditingChildren = () => {
           onChange={(e) => {
             setChildInfo({
               childId: childInfo.childId,
+              profileImageUrl: childInfo.profileImageUrl,
               nickname: childInfo.nickname,
               grade: e.target.value
             })
           }}
           selecttype={'Single'}
-          options={[
-            '초등학교 1학년',
-            '중학교 1학년',
-            '중학교 2학년',
-            '중학교 3학년'
-          ]}
+          options={CHILD_GRADE.filter((data) => data.length > 0)}
           fullWidth={true}
           value={childInfo.grade}
         />
@@ -95,7 +99,14 @@ const EditingChildren = () => {
         buttonType={'Round-blue-500'}
         fullWidth={true}
         label={'수정 완료'}
-        onClick={() => childInfoMutation.mutate(childInfo)}
+        onClick={() => {
+          if (valid) {
+            childInfoMutation.mutate(childInfo)
+          } else {
+            setToast({ comment: '닉네임 규칙을 지켜주세요!', type: 'warning' })
+            return
+          }
+        }}
       />
     </div>
   )

diff --git a/src/pages/mypage/MyPage.tsx b/src/pages/mypage/MyPage.tsx
@@ -78,7 +78,6 @@ const MyPage = () => {
                         }
                       />
                     </li>
-                  )
               </ul>
             )}
           </div>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -63,7 +63,11 @@ export const router = createBrowserRouter(
           path: 'edit/:childId',
           element: (
             <>
-              <Header headerType={'Close'} backUrl={'/'} />
+              <Header
+                headerType={'CloseWithTitle'}
+                pageTitle={'아이 정보 상세보기'}
+                backUrl={'/'}
+              />
               <EditChildren />
             </>
           ),