feat: 헤더 User정보 가져오기 / fix: run build 에러 수정

api/user.ts

@@ -9,11 +9,15 @@ interface SignUserData {
   password: string;
 }
 
-export const getSignInProfile = async () => {
+export const getSignInProfile = async (userToken: string) => {
   let result = null;
 
   try {
-    const response = await fetch(`${BASE_URL}/api/sample/user`);
+    const response = await fetch(`${BASE_URL}/api/users`, {
+      headers: {
+        Authorization: `Bearer ${userToken}`,
+      },
+    });
     if (!response.ok) {
       throw new Error(`${response.status}`);
     }

components/common/modal/modalContent/FolderAddModalContent.tsx

@@ -5,7 +5,9 @@ const FolderAddModalContent = () => {
   return (
     <S.FolderAddContent>
       <input type="text" placeholder="내용 입력" />
-      <Button type="folderAdd_modal">추가하기</Button>
+      <Button btnType="button" type="folderAdd_modal">
+        추가하기
+      </Button>
     </S.FolderAddContent>
   );
 };

components/common/modal/modalContent/FolderDeleteContent.tsx

@@ -1,7 +1,11 @@
 import Button from "@/components/common/Button";
 
 const FolderDeleteContent = () => {
-  return <Button type="folderDelete_modal">삭제하기</Button>;
+  return (
+    <Button btnType="button" type="folderDelete_modal">
+      삭제하기
+    </Button>
+  );
 };
 
 export default FolderDeleteContent;

components/layout/header/Header.tsx

@@ -14,17 +14,20 @@ const Header = () => {
 
   const location = useRouter();
 
-  const handleLoadUserProfile = async () => {
-    const userProfile = await getSignInProfile();
+  const handleLoadUserProfile = async (userToken: string) => {
+    const userProfile = await getSignInProfile(userToken);
 
     if (userProfile !== null) {
-      setUser(userProfile);
+      setUser(userProfile.data[0]);
     }
   };
 
   useEffect(() => {
-    handleLoadUserProfile();
+    const token = localStorage.getItem("userToken");
+    if (token) handleLoadUserProfile(token);
+  }, []);
 
+  useEffect(() => {
     const handleHeaderScroll = () => {
       setIsScrolled(window.scrollY !== 0);
     };

components/layout/header/UserProfile.tsx

@@ -9,21 +9,16 @@ interface IUser {
 const userProfile = ({ user }: IUser) => {
   if (!user) {
     return (
-      <S.LoginBtn href="/pages/auth/signin.html" className="btn">
+      <S.LoginBtn href="/signin" className="btn">
         로그인
       </S.LoginBtn>
     );
   }
-  const { email, profileImageSource } = user;
+  const { email, image_source } = user;
 
   return (
     <S.UserProfileWrap>
-      <Image
-        src={profileImageSource}
-        width={50}
-        height={50}
-        alt="유저 프로필"
-      />
+      <Image src={image_source} width={50} height={50} alt="유저 프로필" />
       <span>{email}</span>
     </S.UserProfileWrap>
   );

next.config.js

@@ -19,6 +19,7 @@ const nextConfig = {
       "testing-library.com",
       "static.cdninstagram.com",
       "codeit-front.s3.ap-northeast-2.amazonaws.com",
+      "avatars.githubusercontent.com",
     ],
   },
 };