Feat/125/my page profile

src/_apis/auth/user-apis.ts

@@ -1,11 +1,40 @@
 import { fetchApi } from '@/src/utils/api';
 import { User } from '@/src/types/auth';
 
-export function getUser(): Promise<{ data: User }> {
+export function getUser(): Promise<User> {
   return fetchApi<{ data: User }>('/auths/user', {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
+  }).then((response) => response.data);
+}
+
+// 회원정보 수정
+export async function updateUserProfile(file: File): Promise<void> {
+  const url = `/auths/user`;
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  await fetchApi(url, {
+    method: 'PUT',
+    body: formData,
   });
 }
+
+export async function fetchUpdatedUser() {
+  return fetchApi<{ data: User }>('/auths/user', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+    },
+  })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      throw error;
+    });
+}

src/app/(crew)/my-page/_components/profile-card/container.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
+import { fetchUpdatedUser, updateUserProfile } from '@/src/_apis/auth/user-apis';
+import { useAuthStore } from '@/src/store/use-auth-store';
+import { User } from '@/src/types/auth';
+import ProfileCardPresenter from './presenter';
+
+export default function ProfileCard() {
+  const router = useRouter();
+  const { isAuth, setUser } = useAuthStore();
+  const [user, setLocalUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [profileImageUrl, setProfileImageUrl] = useState<string>('');
+
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      if (!isAuth) {
+        router.push('/login');
+      } else {
+        try {
+          const updatedUser = await fetchUpdatedUser();
+          setLocalUser(updatedUser);
+          setUser(updatedUser);
+          setProfileImageUrl(updatedUser.profileImageUrl);
+          setIsLoading(false);
+        } catch (error) {
+          toast.error('유저 정보를 가져오는 데 실패했습니다.');
+        }
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [isAuth, router, setUser]);
+
+  if (isLoading) return <div>로딩 중...</div>;
+
+  if (!user) return <div>유저 정보를 불러오지 못했습니다.</div>;
+
+  // 파일 선택 핸들러
+  const handleEdit = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.png,.jpg,.jpeg';
+    input.onchange = async (event) => {
+      const file = (event.target as HTMLInputElement)?.files?.[0];
+      if (file) {
+        if (file.size > 5 * 1024 * 1024) {
+          alert('5MB 이하의 파일만 업로드 가능합니다.');
+          return;
+        }
+
+        try {
+          await updateUserProfile(file);
+
+          const tempUrl = URL.createObjectURL(file);
+          setProfileImageUrl(tempUrl);
+
+          const updatedUser = await fetchUpdatedUser();
+
+          const newProfileImageUrl = `${updatedUser.profileImageUrl}?timestamp=${new Date().getTime()}`;
+          setProfileImageUrl(newProfileImageUrl);
+          setUser({ ...updatedUser, profileImageUrl: newProfileImageUrl });
+        } catch (error) {
+          toast.error('파일 업로드에 실패했습니다.');
+        }
+      }
+    };
+    input.click();
+  };
+
+  return <ProfileCardPresenter data={{ ...user, profileImageUrl }} onEdit={handleEdit} />;
+}

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Menu } from '@mantine/core';
+import { Profile } from '@/src/components/common/profile';
+import { UserType } from '@/src/types/user';
+
+export interface ProfileCardProps {
+  data: UserType;
+  onEdit: () => void;
+}
+
+export default function ProfileCardPresenter({ data, onEdit }: ProfileCardProps) {
+  return (
+    <div className="flex items-end justify-between">
+      <div className="flex items-center gap-6.5">
+        <figure className="h-20 w-20 md:h-30 md:w-30 lg:h-30 lg:w-30">
+          <Menu
+            shadow="sm"
+            width={170}
+            offset={-5}
+            withArrow
+            arrowPosition="side"
+            position="bottom-start"
+          >
+            <Menu.Target>
+              <div className="h-full w-full">
+                <Profile editable imageUrl={data?.profileImageUrl ?? ''} />
+              </div>
+            </Menu.Target>
+            <Menu.Dropdown className="translate-x-16 translate-y-2 transform md:translate-x-24 md:translate-y-0 lg:translate-x-24 lg:translate-y-0">
+              <Menu.Item onClick={onEdit}>프로필 이미지 수정하기</Menu.Item>
+              <Menu.Item color="red" onClick={() => alert('Delete Profile')}>
+                기본 프로필로 돌아가기
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </figure>
+        <div className="flex flex-col gap-2">
+          <p className="text-xl font-semibold text-gray-900 md:text-2xl lg:text-2xl">
+            {data?.nickname} 님, 안녕하세요🙌
+          </p>
+          <dl className="flex text-base font-medium text-gray-700">
+            <dt className="flex-shrink-0 flex-grow-0 basis-20">Email</dt>
+            <dd className="flex-1">{data?.email}</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(crew)/mypage/page.tsx → src/app/(crew)/my-page/_components/review-section.tsx

@@ -3,23 +3,15 @@
 import { useState } from 'react';
 import { Divider } from '@mantine/core';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import ProfileCardContainer from '@/src/app/(crew)/mypage/_components/profile-card/container';
+import { fetchWritableGatheringData } from '@/src/app/(crew)/api/mock-api/writable-gathering';
+import { fetchMyReviewData } from '@/src/app/api/mock-api/review';
 import ReviewCardList from '@/src/components/common/review-list/review-card-list';
 import Tabs from '@/src/components/common/tab';
 import WritableGatheringCardList from '@/src/components/common/writable-gathering-card/writable-gathering-card-list';
 import { ReviewInformResponse } from '@/src/types/review';
 import { WritableGatheringCardInformResponse } from '@/src/types/writable-gathering-card';
-import { fetchMyReviewData } from '../../api/mock-api/review';
-import { fetchWritableGatheringData } from '../api/mock-api/writable-gathering';
 
-const mockData = {
-  id: 1,
-  profileImageUrl: '',
-  nickname: '율율',
-  email: 'youlyoul@email.com',
-};
-
-export default function MyPage() {
+export default function ReviewSection() {
   const myPageTabs = [
     { label: '작성 가능한 리뷰', id: 'available-review' },
     { label: '작성한 리뷰', id: 'my-review' },
@@ -43,15 +35,12 @@ export default function MyPage() {
     isFetchingNextPage: isFetchingGatheringNextPage,
   } = useInfiniteScroll<WritableGatheringCardInformResponse>({
     queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }) => {
-      return fetchWritableGatheringData(pageParam, 3);
-    },
+    queryFn: ({ pageParam = 0 }) => fetchWritableGatheringData(pageParam, 3),
     getNextPageParam: (lastPage, allPages) =>
       lastPage.hasNextPage ? allPages.length + 1 : undefined,
   });
 
   const renderTabContent = () => {
-    // TODO : 리턴 값 컴포넌트로 교체
     switch (currentTab) {
       case 'my-review':
         return (
@@ -73,27 +62,20 @@ export default function MyPage() {
         );
     }
   };
+
   return (
-    <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
-      <div className="lg:gap-4.5 flex flex-col gap-3 md:gap-4">
-        <ProfileCardContainer data={mockData} />
-      </div>
-      <div className="mt-12 flex flex-col">
-        <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3>
-        <Divider mt={16} mb={24} size={2} />
-        <div className="flex justify-start">
-          <Tabs
-            variant="review"
-            tabs={myPageTabs}
-            activeTab={currentTab}
-            onTabClick={(id) => {
-              setCurrentTab(id);
-            }}
-          />
-        </div>
-        <div className="pt-12">{renderTabContent()}</div>
+    <div className="mt-12 flex flex-col">
+      <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3>
+      <Divider mt={16} mb={24} size={2} />
+      <div className="flex justify-start">
+        <Tabs
+          variant="review"
+          tabs={myPageTabs}
+          activeTab={currentTab}
+          onTabClick={(id) => setCurrentTab(id)}
+        />
       </div>
-      <div />
+      <div className="pt-12">{renderTabContent()}</div>
     </div>
   );
 }

src/app/(crew)/my-page/page.tsx

@@ -0,0 +1,14 @@
+import ProfileCardContainer from '@/src/app/(crew)/my-page/_components/profile-card/container';
+import ReviewSection from '@/src/app/(crew)/my-page/_components/review-section';
+
+export default function MyPage() {
+  return (
+    <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
+      <div className="lg:gap-4.5 flex flex-col gap-3 md:gap-4">
+        <ProfileCardContainer />
+      </div>
+      <ReviewSection />
+      <div />
+    </div>
+  );
+}

src/components/common/header/container.tsx

@@ -9,11 +9,10 @@ import HeaderPresenter from '@/src/components/common/header/presenter';
  *
  * @param {boolean} isAuth - 로그인 여부를 나타내는 상태 (true: 로그인됨, false: 비로그인)
  * @param {function} handleLogout - 로그아웃을 처리하는 함수
- * @param {function} toggleCookie - 테스트용으로 쿠키 상태를 토글하는 함수 (컴포넌트 실험용)
  */
 
 export default function Header() {
-  const { isAuth, logout } = useAuthStore();
+  const { isAuth, user, logout } = useAuthStore(); // user 정보 가져오기
 
   const router = useRouter();
 
@@ -24,7 +23,11 @@ export default function Header() {
 
   return (
     <div>
-      <HeaderPresenter isAuth={isAuth} handleLogout={handleLogout} />
+      <HeaderPresenter
+        isAuth={isAuth}
+        handleLogout={handleLogout}
+        profileImageUrl={user?.profileImageUrl}
+      />
     </div>
   );
 }