merge :: 헤더 초기화 버그 픽스

package.json

@@ -12,7 +12,7 @@
     "@next/font": "^13.5.2",
     "@tanstack/react-query": "4.33.0",
     "@team-return/design-system": "^1.1.15",
-    "axios": "^1.4.0",
+    "axios": "^1.6.2",
     "debug": "^4.3.4",
     "next": "13.4.7",
     "react": "^18.2.0",

src/apis/students/index.ts

@@ -1,7 +1,9 @@
+import { UserProfileContext } from "@/context/UserContext";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useToastStore } from "@team-return/design-system";
 import axios, { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
+import { Dispatch, SetStateAction, useContext } from "react";
 import { useCookies } from "react-cookie";
 import { instance } from "../axios";
 import { ResponseBody } from "../user/type";
@@ -72,15 +74,14 @@ export const useSignup = () => {
   );
 };
 
-export const useMyProfile = () => {
-  return useQuery(
-    ["myProfile"],
-    async () => {
-      const { data } = await instance.get<MyProfileProps>(`${router}/my`);
-      return data;
-    },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+export const useMyProfile = async (
+  setUserProfile: Dispatch<SetStateAction<MyProfileProps>>
+) => {
+  const data = await instance
+    .get<MyProfileProps>(`${router}/my`)
+    .then(({ data: profile }) => {
+      setUserProfile(profile);
+      return profile;
+    });
+  return data;
 };

src/app/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import BandBanner from "@/components/BandBanner";
 import Banner from "@/components/Carousel";
 import Suggestion from "@/components/Suggestion";
-import BandBanner from "@/components/BandBanner";
 
 export default function Home() {
   return (

src/components/Provider.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import UserProfileProvider from "@/context/provider/UserContextProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastContainer } from "@team-return/design-system";
 import { CookiesProvider } from "react-cookie";
-import SignupContextProvider from "./account/singup/ContextProvider";
-import ModalContextProvider from "./modal/ModalContextProvider";
+import ModalContextProvider from "../context/provider/ModalContextProvider";
+import SignupContextProvider from "../context/provider/SignupContextProvider";
 
 interface PropsType {
   children: React.ReactNode;
@@ -17,8 +18,10 @@ export default function Provider({ children }: PropsType) {
       <CookiesProvider>
         <ModalContextProvider>
           <SignupContextProvider>
-            <ToastContainer />
-            {children}
+            <UserProfileProvider>
+              <ToastContainer />
+              {children}
+            </UserProfileProvider>
           </SignupContextProvider>
         </ModalContextProvider>
       </CookiesProvider>

src/components/SuggestionHeader.tsx

@@ -1,23 +1,24 @@
 "use client";
 
+import { UserProfileContext } from "@/context/UserContext";
 import { Icon } from "@team-return/design-system";
-import { useMyProfile } from "@/apis/students";
 import Link from "next/link";
+import { useContext } from "react";
 
 interface PropsType {
   listType: "Company" | "Recruitments" | "Bookmark";
 }
 
 export default function SuggestionHeader({ listType }: PropsType) {
-  const { data: profile } = useMyProfile();
+  const { userProfile } = useContext(UserProfileContext);
 
   const suggestionHeaderDummy = {
     Company: {
       title: "🏢 이런 기업은 어떠세요?",
       router: "/companies",
     },
     Recruitments: {
-      title: `👩‍💻 ${profile?.student_name || "사용자"}님의 관심 분야에요`,
+      title: `👩‍💻 ${userProfile.student_name || "사용자"}님의 관심 분야에요`,
 
       router: "/recruitments",
     },

src/components/account/singup/type.ts

@@ -13,20 +13,6 @@ export interface IsHiddenProps {
   passwordCheck: Boolean;
 }
 
-interface PropsType {
-  inputStates: SignupType;
-  setInputsStates?: React.Dispatch<React.SetStateAction<SignupType>>;
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isHidden: IsHiddenProps;
-  setIsHidden: React.Dispatch<React.SetStateAction<IsHiddenProps>>;
-  SandAuthCodeAPI?: UseMutateFunction<
-    any,
-    AxiosError<unknown, any>,
-    SendAuthCodeType,
-    unknown
-  >;
-}
-
 export interface FirstInputsPropsType {
   inputStates: SignupType;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

src/components/common/Header.tsx

@@ -1,32 +1,42 @@
 "use client";
 
-import React, { useEffect } from "react";
-import Image from "next/image";
+import { useMyProfile } from "@/apis/students";
+import { UserProfileContext } from "@/context/UserContext";
 import Logo from "@public/Logo.png";
-import { Icon } from "@team-return/design-system";
+import { access } from "fs";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMyProfile } from "@/apis/students";
+import React, { useContext, useEffect } from "react";
+import { Cookies, useCookies } from "react-cookie";
 
 function Header() {
   const pathname = usePathname();
+  const { userProfile, setUserProfile } = useContext(UserProfileContext);
+  const [cookies] = useCookies();
+  console.log(pathname);
+
   useEffect(() => {
     if (
-      pathname.toString().indexOf("/apply") !== -1 ||
-      pathname.toString().indexOf("/account") !== -1
+      pathname.toString().startsWith("/apply", 13) ||
+      pathname.toString().startsWith("/account")
     ) {
       document.querySelector("body")!.style.backgroundColor = "#fafafa";
     } else {
       document.querySelector("body")!.style.backgroundColor = "#ffffff";
     }
   }, [pathname]);
 
-  if (pathname.toString().indexOf("/account") !== -1) {
+  useEffect(() => {
+    if (cookies.access_token) {
+      useMyProfile(setUserProfile);
+    }
+  }, [cookies.access_token]);
+
+  if (pathname.toString().startsWith("/account")) {
     return null;
   }
 
-  const { data: profile } = useMyProfile();
-
   return (
     <div
       className={`w-screen h-[68px] bg-white flex justify-between shadow-[0_2px_4px_0_rgba(229,229,229,0.2)] items-center fixed top-0 left-0 py-[12px] md:px-[17.5vw] sm:px-[7.5vw] z-[4]`}
@@ -73,15 +83,15 @@ function Header() {
             width={28}
             height={28}
             src={`${
-              profile?.profile_image_url &&
+              userProfile.profile_image_url &&
               process.env.NEXT_PUBLIC_IMAGE_URL +
                 "/" +
-                profile?.profile_image_url
+                userProfile.profile_image_url
             }`}
             alt="프로필사진"
           />
           <p className="text-[#333333] text-b2 font-r">
-            {profile?.student_name}
+            {userProfile.student_name}
           </p>
         </div>
         <div>{/* <Icon icon={"Chevron"} size={16} color="gray90" /> */}</div>

src/components/mypage/DetailProfile.tsx

@@ -1,36 +1,36 @@
 "use client";
 
-import { useMyProfile } from "@/apis/students";
+import { UserProfileContext } from "@/context/UserContext";
 import { departmentEnum } from "@/util/object/enum";
 import { getMypageKebabItems } from "@/util/object/kebabMenuItems";
 import Image from "next/image";
+import { useContext } from "react";
 import KebabMenu from "../common/Dropdown/KebabMenu";
 import GhostTag from "./GhostTag";
 
 export default function DetailProfile() {
-  const { data: profile } = useMyProfile();
-
+  const { userProfile } = useContext(UserProfileContext);
   return (
     <div className="flex items-center gap-6">
       <div className="w-[100px] h-[100px] rounded-[50%] shadow-elevaiton overflow-hidden flex items-center justify-center">
         <Image
           width={100}
           height={100}
           src={
-            profile
-              ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${profile.profile_image_url}`
+            userProfile.profile_image_url
+              ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${userProfile.profile_image_url}`
               : ""
           }
           alt="프로필 사진"
         />
       </div>
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <p className="text-h5 leading-h5 font-m">{profile?.student_name}</p>
-          <GhostTag>{profile?.student_gcn}</GhostTag>
+          <p className="text-h5 leading-h5 font-m">{userProfile.student_name}</p>
+          <GhostTag>{userProfile.student_gcn}</GhostTag>
         </div>
         <p className="text-b3 leading-b3 font-r text-[#7F7F7F]">
-          {profile && departmentEnum[profile.department]}
+          {departmentEnum[userProfile.department]}
         </p>
       </div>
       <KebabMenu items={getMypageKebabItems()} />

src/context/ModalContext.ts

@@ -1,7 +1,6 @@
 "use client";
 
-import { SignupType } from "@/components/account/singup/type";
-import { ChangeEvent, createContext, Dispatch, SetStateAction } from "react";
+import { createContext, Dispatch, SetStateAction } from "react";
 
 interface ModalContextType {
   isOpen: boolean;

src/context/UserContext.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { MyProfileProps } from "@/apis/students/type";
+import { createContext } from "react";
+
+interface UserProfileContextType {
+  userProfile: MyProfileProps;
+  setUserProfile: React.Dispatch<React.SetStateAction<MyProfileProps>>;
+}
+
+export const UserProfileContext = createContext<UserProfileContextType>({
+  userProfile: {
+    student_name: "",
+    student_gcn: "",
+    department: "SOFTWARE_DEVELOP",
+    profile_image_url: "",
+  },
+  setUserProfile: () => {},
+});

src/components/account/singup/ContextProvider.tsx → src/context/provider/SignupContextProvider.tsx

@@ -1,7 +1,7 @@
 import { SignupContext } from "@/context/SignupContext";
 import useForm from "@/hook/useForm";
 import { ReactNode } from "react";
-import { SignupType } from "./type";
+import { SignupType } from "../../components/account/singup/type";
 
 export default function SignupContextProvider({
   children,

src/context/provider/UserContextProvider.tsx

@@ -0,0 +1,22 @@
+import { MyProfileProps } from "@/apis/students/type";
+import { ModalContext } from "@/context/ModalContext";
+import { ReactNode, useState } from "react";
+import { UserProfileContext } from "../UserContext";
+
+export default function UserProfileProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [userProfile, setUserProfile] = useState<MyProfileProps>({
+    student_name: "",
+    student_gcn: "",
+    department: "SOFTWARE_DEVELOP",
+    profile_image_url: "",
+  });
+  return (
+    <UserProfileContext.Provider value={{ userProfile, setUserProfile }}>
+      {children}
+    </UserProfileContext.Provider>
+  );
+}

src/util/object/kebabMenuItems.ts

@@ -41,7 +41,6 @@ export const getMypageKebabItems = (): KebabItemType[] => {
     {
       label: "로그아웃",
       onClick: () => {
-        console.log("로그아웃");
         cookies.remove("access_token", { path: "/" });
         cookies.remove("refresh_token", { path: "/" });
         navigator.push("/account/login");

yarn.lock

@@ -2678,14 +2678,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.4.0":
-  version: 1.5.0
-  resolution: "axios@npm:1.5.0"
+"axios@npm:^1.6.2":
+  version: 1.6.2
+  resolution: "axios@npm:1.6.2"
   dependencies:
     follow-redirects: ^1.15.0
     form-data: ^4.0.0
     proxy-from-env: ^1.1.0
-  checksum: e7405a5dbbea97760d0e6cd58fecba311b0401ddb4a8efbc4108f5537da9b3f278bde566deb777935a960beec4fa18e7b8353881f2f465e4f2c0e949fead35be
+  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
   languageName: node
   linkType: hard
 
@@ -5318,7 +5318,7 @@ __metadata:
     "@types/react-dom": 18.2.7
     "@yarnpkg/sdks": ^3.0.0-rc.49
     autoprefixer: ^10.4.15
-    axios: ^1.4.0
+    axios: ^1.6.2
     debug: ^4.3.4
     eslint: ^8.50.0
     eslint-config-next: ^13.5.3