fix: 아이 사진 수정 바로 반영 안되는 현상해결

Guzzing · Dec 2, 2023 · eee10e6 · eee10e6
1 parent 1743fcc
commit eee10e6
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 33 deletions.
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
@@ -66,7 +66,12 @@ const Header = ({
           </span>
         ) : headerType === 'CloseWithTitle' ? (
           <div className={'flex cursor-pointer items-center'}>
-            <span onClick={onClick ? onClick : () => navigate(-1)}>
+            <span
+              onClick={
+                backUrl.length > 0
+                  ? () => navigate(backUrl)
+                  : () => navigate(-1)
+              }>
               <Icon icon={'Close'} classStyle={'cursor-pointer'} />
             </span>
             <span className={'mx-[20px] font-nsk subHead-18'}>{pageTitle}</span>

diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx
@@ -19,27 +19,27 @@ const Profile = ({
 
   const handleImageChange = (editId: number) => {
     if (imgRef.current && imgRef.current?.files) {
+      setImage(URL.createObjectURL(imgRef.current.files[0]))
       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)
+      request
+        .post(`/children/${editId}/profile`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(() => {
+          setToast({
+            comment: '프로필 사진을 수정했어요.',
+            type: 'success'
           })
-          .catch(() => {
-            setToast({
-              comment: '파일 용량이 너무 커서 업로드를 실패했어요.',
-              type: 'error'
-            })
+        })
+        .catch(() => {
+          setToast({
+            comment: '파일 용량이 너무 커서 업로드를 실패했어요.',
+            type: 'error'
           })
-      } catch {
-        setToast({ comment: '파일 업로드를 실패했어요.', type: 'error' })
-      }
+        })
     }
   }
   return (
@@ -81,7 +81,7 @@ const Profile = ({
       {imageLabel && (
         <p
           className={
-            'relative text-center text-ellipsis overflow-hidden whitespace-nowrap w-[70px] text-center'
+            'relative text-center text-ellipsis overflow-hidden whitespace-nowrap w-[70px]'
           }>
           {imageLabel}
         </p>

diff --git a/src/components/common/toast/index.tsx b/src/components/common/toast/index.tsx
@@ -3,10 +3,11 @@ const Toast = () => {
   return (
     <ToastContainer
       position={'top-center'}
-      autoClose={3500}
+      autoClose={1500}
       closeButton={false}
       newestOnTop
-      limit={5}
+      hideProgressBar={true}
+      limit={1}
       toastStyle={{
         borderRadius: '12px',
         backgroundColor: 'white',

diff --git a/src/pages/EditChildren/EditChildren.tsx b/src/pages/EditChildren/EditChildren.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 import { useLocation } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
-import { useAtom } from 'jotai'
 import Loading from '@/components/Loading/Loading'
 import Button from '@/components/common/button/Button'
 import ListRow from '@/components/common/listRow/ListRow'
@@ -13,12 +12,15 @@ import Spacing from '@/components/common/spacing/Spacing'
 import { deleteChild, getChildrenInfo } from '@/libs/api/children/ChildrenApi'
 import { GetChildrenInfoResponse } from '@/libs/api/children/ChildrenType'
 import { queryClient } from '@/libs/api/queryClient'
-import { childAtom } from '@/libs/store/childInfoAtom'
+import useModal from '@/libs/hooks/useModal'
+import useToastify from '@/libs/hooks/useToastify'
+
 const EditChildren = () => {
   const navigate = useNavigate()
+  const { setToast } = useToastify()
   const location = useLocation()
-  const [childInfo, setChildInfo] = useAtom(childAtom)
-  //const [childInfo, setChildInfo] = useState<GetChildrenInfoResponse>()
+  const { open, close, Modal } = useModal()
+  const [childInfo, setChildInfo] = useState<GetChildrenInfoResponse>()
   const id = location.state.childId
   const { data, isLoading } = useQuery({
     queryKey: ['children'],
@@ -36,7 +38,6 @@ const EditChildren = () => {
   useEffect(() => {
     const mychild = data?.filter((data) => data.childId === id)
     if (mychild) {
-      console.log(mychild[0])
       setChildInfo(mychild[0])
     }
   }, [data])
@@ -87,10 +88,37 @@ const EditChildren = () => {
           buttonType={'Plain-red'}
           width={'LW'}
           height={'SH'}
-          label={'아이 삭제하기'}
-          onClick={() => childInfoMutation.mutate(id)}
+          label={'아이 정보 삭제하기'}
+          onClick={() => open()}
         />
       </div>
+      <Modal
+        children={
+          <div
+            className={
+              'h-[200px] w-[370px] bg-white-0 p-[24px] px-[50px] flex flex-col items-center justify-between rounded-[15px]'
+            }>
+            <h2 className={'subHead-18 pb-3'}>{'아이 정보를 삭제할까요?'}</h2>
+            <Button
+              buttonType={'Plain-red'}
+              label={'삭제할래요'}
+              onClick={() => {
+                childInfoMutation.mutate(id)
+                close()
+                setToast({
+                  comment: '삭제가 완료되었어요.',
+                  type: 'success'
+                })
+              }}
+            />
+            <Button
+              buttonType={'Plain-blue'}
+              label={'취소하기'}
+              onClick={close}
+            />
+          </div>
+        }
+      />
     </div>
   )
 }

diff --git a/src/pages/EditChildren/EditingChildren.tsx b/src/pages/EditChildren/EditingChildren.tsx
@@ -36,15 +36,16 @@ const EditingChildren = () => {
           childId: data
         }
       })
+      window.location.reload()
+      setToast({ comment: '아이 정보를 수정했어요', type: 'success' })
     }
   })
 
-  const regex = /^[\sA-Za-z가-힣]{1,10}$/
   const handleChildrenName = (name: string) => {
-    if (regex.test(name)) {
-      setValid(true)
-    } else {
+    if (name.length > 10) {
       setValid(false)
+    } else {
+      setValid(true)
     }
   }
   return (

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -21,6 +21,7 @@ const HomePage = () => {
   if (isLoading) {
     return <Loading />
   }
+  console.log(data)
 
   return (
     <div

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -77,7 +77,10 @@ export const router = createBrowserRouter(
           path: 'edit/:childId/editing',
           element: (
             <>
-              <Header headerType={'Close'} />
+              <Header
+                headerType={'CloseWithTitle'}
+                pageTitle={'아이 정보 수정하기'}
+              />
               <EditingChildren />
             </>
           )