remove: cotexts 코드 삭제

FastCampus-Mini5 · Oct 9, 2023 · 6d56ae7 · 6d56ae7
1 parent 3388b1c
commit 6d56ae7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 66 deletions.
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -2,11 +2,12 @@ import { styled } from 'styled-components'
 import { NavLink, useNavigate } from 'react-router-dom'
 import Title from 'assets/service-title.png'
 import { links, headerText } from 'constants/index'
-import { useCallback, useEffect, useState, useContext } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { getUserInfo } from 'api/index'
 import { AxiosResponse } from 'axios'
-import { ProfileContext } from 'contexts/index'
 import DefaultImage from 'assets/dafault.png'
+import { useRecoilState } from 'recoil'
+import { remainState, imageState } from '@/store/atoms'
 
 export interface InfoResponse extends AxiosResponse {
   response: {
@@ -21,7 +22,8 @@ export interface InfoResponse extends AxiosResponse {
 
 export const Header = () => {
   const [username, setUsername] = useState<string>('')
-  const { profileImage, setProfileImage } = useContext(ProfileContext)
+  const [profileImage, setProfileImage] = useRecoilState<string>(imageState)
+  const [remain, setRemain] = useRecoilState(remainState)
 
   const navigate = useNavigate()
 
@@ -44,49 +46,48 @@ export const Header = () => {
     navigate('/')
   }
 
-  //진입시 유저정보 렌더링
   useEffect(() => {
-    const fetchData = async () => {
-      const res: InfoResponse = await getUserInfo()
-      setUsername(res?.response?.username)
-      if (res?.response?.profileImage === '/image/default.png') {
-        setProfileImage(DefaultImage)
-        return
+    ;async () => {
+      try {
+        const res: InfoResponse = await getUserInfo()
+        setUsername(res?.response?.username)
+
+        if (res?.response?.profileImage === '/image/default.png') {
+          setProfileImage(DefaultImage)
+        } else {
+          setProfileImage(res?.response?.profileImage)
+        }
+
+        setRemain(res?.response?.remainVacation)
+      } catch (error) {
+        // 오류 처리
+        console.error('데이터 가져오기 실패:', error)
       }
-      setProfileImage(res?.response?.profileImage)
-      console.log(res)
     }
-    fetchData()
   }, [username])
 
   return (
     <>
       <Outermost>
         <WidthSettler>
-          {/* 컴포넌트 분리?? */}
           <LeftBox>
             <img
               src={Title}
               onClick={() => navigate('/home')}
             />
             {searchLinks}
           </LeftBox>
-          {/* 컴포넌트 분리? */}
-          <ProfileContext.Provider value={{ profileImage, setProfileImage }}>
-            <RightBox imageurl={profileImage || ''}>
-              {/* USERINFO */}
-              <div
-                className="image"
-                onClick={() => {
-                  navigate('/profile')
-                }}></div>
-              <div className="info">
-                <div>{username}</div>
-                {/* 뒤로가기 예외처리 */}
-                <button onClick={signOut}>{headerText.signout}</button>
-              </div>
-            </RightBox>
-          </ProfileContext.Provider>
+          <RightBox imageurl={profileImage || ''}>
+            <div
+              className="image"
+              onClick={() => {
+                navigate('/profile')
+              }}></div>
+            <div className="info">
+              <div>{username}</div>
+              <button onClick={signOut}>{headerText.signout}</button>
+            </div>
+          </RightBox>
         </WidthSettler>
       </Outermost>
     </>

diff --git a/src/components/common/Layout.tsx b/src/components/common/Layout.tsx
@@ -3,8 +3,6 @@ import styled from 'styled-components'
 import { GlobalStyles } from 'styles/index'
 import { Header } from 'components/index'
 import bg from 'assets/bgblue.png'
-import { ProfileContext } from 'contexts/index'
-import { useState } from 'react'
 
 export const Layout = () => {
   return (
@@ -19,14 +17,11 @@ export const Layout = () => {
 }
 
 export const HeaderLayout = () => {
-  const [profileImage, setProfileImage] = useState<string>('')
 
   return (
     <>
       <GlobalStyles />
-      <ProfileContext.Provider value={{ profileImage, setProfileImage }}>
         <Header />
-      </ProfileContext.Provider>
       <Wrapper>
         <Container>
           <Outlet />

diff --git a/src/components/form/UpdateForm.tsx b/src/components/form/UpdateForm.tsx
@@ -5,22 +5,26 @@ import { useState, useEffect, useContext } from 'react'
 import { InfoResponse } from 'components/index'
 import { getUserInfo, updateUserInfo } from 'api/index'
 import { useNavigate } from 'react-router-dom'
-import { ProfileContext } from 'contexts/index'
-import DefaultImage from 'assets/dafault.png'
 import { AxiosError } from 'axios'
+import { useRecoilValue } from 'recoil'
+import { imageState } from '@/store/atoms'
+import { useUserInfoFetch } from '@/hooks/useUserInfoFetch'
 
 export const UpdateForm = () => {
   const navigate = useNavigate()
   const [email, setEmail] = useState<string>('')
   const [username, setUsername] = useState<string>('')
   const [password, setPassword] = useState<string>('')
   const [verification, setVerification] = useState<string>('')
-  const { profileImage, setProfileImage } = useContext(ProfileContext)
+  const profileImage = useRecoilValue(imageState)
 
   const nameStates = [email, username]
   const passwordStates = [password, verification]
   const passwordFunctions = [setPassword, setVerification]
 
+  //진입시 유저정보 렌더링 hook함수 생성
+  useUserInfoFetch(setUsername, profileImage, '', setEmail)
+
   const handleCancel = () => {
     navigate('/home')
   }
@@ -51,30 +55,12 @@ export const UpdateForm = () => {
     }
   }
 
-  //진입시 유저정보 렌더링
-  useEffect(() => {
-    const fetchData = async () => {
-      const res: InfoResponse = await getUserInfo()
-      setUsername(res?.response?.username)
-      setEmail(res?.response?.email)
-      if (res?.response?.profileImage === '/image/default.png') {
-        setProfileImage(DefaultImage)
-        return
-      }
-      setProfileImage(res?.response?.profileImage)
-    }
-    fetchData()
-  }, [])
-
   return (
     <>
       {/* SEPERATION => Update.tsx*/}
       <UpdateTitle>{UpdateTexts.update}</UpdateTitle>
       <ProfileContainer>
-        <ProfileContext.Provider value={{ profileImage, setProfileImage }}>
-          <UpdateImageForm />
-        </ProfileContext.Provider>
-
+        <UpdateImageForm />
         <UpdateInputForm
           texts={nameTexts}
           value={nameStates}

diff --git a/src/components/form/UpdateImageForm.tsx b/src/components/form/UpdateImageForm.tsx
@@ -1,13 +1,14 @@
 import { styled } from 'styled-components'
 import { UpdateTexts } from 'constants/index'
-import { useRef, useContext } from 'react'
+import { useRef } from 'react'
 import { BaseRow, BaseCol } from 'components/index'
-import { ProfileContext } from 'contexts/index'
 import DefaultImage from 'assets/dafault.png'
+import { useRecoilState } from 'recoil'
+import { imageState } from '@/store/atoms'
 
 export const UpdateImageForm = () => {
   const fileInputRef = useRef<HTMLInputElement | null>(null)
-  const { profileImage, setProfileImage } = useContext(ProfileContext)
+  const [profileImage, setProfileImage] = useRecoilState(imageState)
 
   const handleLoadImage = e => {
     if (!e.target.files?.length) {

diff --git a/src/pages/Update.tsx b/src/pages/Update.tsx
@@ -1,15 +1,9 @@
 import { UpdateForm } from 'components/form/index'
-import { ProfileContext } from 'contexts/index'
-import { useState } from 'react'
 
 export const UpdatePage = () => {
-  const [profileImage, setProfileImage] = useState<string>('')
-
   return (
     <>
-      <ProfileContext.Provider value={{ profileImage, setProfileImage }}>
         <UpdateForm />
-      </ProfileContext.Provider>
     </>
   )
 }