From 6d56ae7706b70ac5cbf17a488d861bd6b7437558 Mon Sep 17 00:00:00 2001
From: hahahaday12 <hahahaday12@naver.com>
Date: Mon, 9 Oct 2023 18:56:48 +0900
Subject: [PATCH] =?UTF-8?q?remove:=20cotexts=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx        | 61 +++++++++++++------------
 src/components/common/Layout.tsx        |  5 --
 src/components/form/UpdateForm.tsx      | 30 ++++--------
 src/components/form/UpdateImageForm.tsx |  7 +--
 src/pages/Update.tsx                    |  6 ---
 5 files changed, 43 insertions(+), 66 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index c8a35d5..eef03dd 100644
--- 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,26 +46,30 @@ 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}
@@ -71,22 +77,17 @@ export const Header = () => {
             />
             {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
index 34b8e90..3b88efc 100644
--- 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
index aff927d..daceca9 100644
--- a/src/components/form/UpdateForm.tsx
+++ b/src/components/form/UpdateForm.tsx
@@ -5,9 +5,10 @@ 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()
@@ -15,12 +16,15 @@ export const UpdateForm = () => {
   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
index 19ff2aa..e3a6fdb 100644
--- 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
index 696d094..14727a1 100644
--- 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>
     </>
   )
 }