feat: 마이페이지 개발

src/app/(root)/mypage/hooks/index.ts

@@ -0,0 +1 @@
+export { useUser } from './useUser';

src/app/(root)/mypage/hooks/useUser.ts

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { getUser, updateUser, deleteUser, changePassword, uploadImage } from '@/shared/apis/user';
+import type { UserResponse } from '@/shared/apis/user';
+
+export function useUser() {
+  const router = useRouter();
+
+  const [user, setUser] = useState<UserResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 폼 상태
+  const [name, setName] = useState('');
+  const [originalName, setOriginalName] = useState('');
+  const [profileImage, setProfileImage] = useState<string | null>(null);
+
+  const hasChanges = name !== originalName || profileImage !== user?.image;
+
+  // 유저 정보 조회
+  useEffect(() => {
+    async function fetchUser() {
+      try {
+        setError(null);
+        const data = await getUser();
+        setUser(data);
+        // 폼 초기화
+        setName(data.nickname);
+        setOriginalName(data.nickname);
+        setProfileImage(data.image);
+      } catch (err) {
+        console.error('유저 정보 조회 실패:', err);
+        setError('유저 정보를 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchUser();
+  }, []);
+
+  // 프로필 수정
+  const updateProfile = useCallback(async () => {
+    try {
+      setError(null);
+      await updateUser({
+        nickname: name,
+        image: profileImage ?? undefined,
+      });
+      // 수정 성공 후 유저 정보 다시 조회
+      const refreshedUser = await getUser();
+      setUser(refreshedUser);
+      setOriginalName(refreshedUser.nickname);
+      return { success: true };
+    } catch (err) {
+      console.error('프로필 수정 실패:', err);
+      setError('프로필 수정에 실패했습니다.');
+      return { success: false };
+    }
+  }, [name, profileImage]);
+
+  // 회원 탈퇴
+  const deleteAccount = useCallback(async () => {
+    try {
+      setError(null);
+      await deleteUser();
+      router.push('/');
+      return { success: true };
+    } catch (err) {
+      console.error('회원 탈퇴 실패:', err);
+      setError('회원 탈퇴에 실패했습니다.');
+      return { success: false };
+    }
+  }, [router]);
+
+  // 비밀번호 변경
+  const updatePassword = useCallback(
+    async (data: { password: string; passwordConfirmation: string }) => {
+      try {
+        setError(null);
+        await changePassword(data);
+        return { success: true };
+      } catch (err) {
+        console.error('비밀번호 변경 실패:', err);
+        setError('비밀번호 변경에 실패했습니다.');
+        return { success: false };
+      }
+    },
+    [],
+  );
+
+  // 프로필 이미지 업로드
+  const uploadProfileImage = useCallback(async (file: File) => {
+    try {
+      setError(null);
+      const { url } = await uploadImage(file);
+      return { success: true, url };
+    } catch (err) {
+      console.error('이미지 업로드 실패:', err);
+      setError('이미지 업로드에 실패했습니다.');
+      return { success: false, url: null };
+    }
+  }, []);
+
+  // 팀 목록
+  const teams = user?.memberships.map((m) => m.group.name) ?? [];
+
+  return {
+    user,
+    teams,
+    isLoading,
+    error,
+    // 폼 상태
+    name,
+    setName,
+    profileImage,
+    setProfileImage,
+    hasChanges,
+    // 액션
+    updateProfile,
+    deleteAccount,
+    updatePassword,
+    uploadProfileImage,
+  };
+}

src/app/(root)/mypage/page.module.css

@@ -0,0 +1,226 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: var(--color-background-secondary);
+}
+
+/* 모바일 헤더 - 모바일에서만 표시 */
+.mobileHeader {
+  display: none;
+}
+
+/* 사이드바 - 태블릿/데스크탑에서 표시 */
+.sidebar {
+  display: block;
+}
+
+/* 모바일 타이틀 - 모바일에서만 표시 */
+.mobileTitle {
+  display: none;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 24px;
+}
+
+.cardWrapper {
+  position: relative;
+  width: 100%;
+  max-width: 792px;
+}
+
+.card {
+  width: 100%;
+  background-color: var(--color-background-inverse);
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0 0 32px;
+}
+
+.profileImageWrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.passwordField {
+  position: relative;
+}
+
+.passwordInput {
+  padding-right: 100px;
+}
+
+.changeButton {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.withdrawButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-status-danger);
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.withdrawButton:hover {
+  text-decoration: underline;
+}
+
+.toastWrapper {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  margin-top: 24px;
+}
+
+.toast {
+  position: static;
+  width: 100%;
+}
+
+/* 태블릿/데스크탑 레이아웃 */
+@media (min-width: 768px) {
+  .layout {
+    flex-direction: row;
+  }
+}
+
+/* 태블릿 (767px 이하) */
+@media (max-width: 767px) {
+  .layout {
+    flex-direction: row;
+  }
+
+  .main {
+    padding: 32px 24px;
+  }
+
+  .card {
+    max-width: 100%;
+  }
+}
+
+/* 모바일 (375px 이하) */
+@media (max-width: 375px) {
+  .layout {
+    flex-direction: column;
+  }
+
+  .mobileHeader {
+    display: block;
+  }
+
+  .sidebar {
+    display: none;
+  }
+
+  .mobileTitle {
+    display: block;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin: 0 0 16px;
+    align-self: flex-start;
+  }
+
+  .main {
+    flex: 1;
+    justify-content: flex-start;
+    padding: 24px 16px;
+  }
+
+  .card {
+    padding: 24px 16px;
+    border-radius: 12px;
+  }
+
+  .title {
+    display: none;
+  }
+
+  .profileImageWrapper {
+    margin-bottom: 24px;
+  }
+
+  .form {
+    gap: 16px;
+  }
+
+  .label {
+    font-size: 12px;
+  }
+
+  /* 모바일 모달 - 하단 고정 */
+  :global(section[class*='overlay']) {
+    align-items: flex-end !important;
+  }
+
+  :global(section[class*='overlay'] > div[class*='contentsBox']) {
+    width: 100% !important;
+    max-width: 100% !important;
+    border-radius: 12px 12px 0 0 !important;
+  }
+
+  :global([class*='modalContent']) {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+  }
+
+  :global([class*='field']) {
+    width: 100% !important;
+  }
+
+  :global([class*='actions']) {
+    width: 100% !important;
+  }
+
+  :global([class*='closeButton']),
+  :global([class*='submitButton']),
+  :global([class*='confirmButton']) {
+    flex: 1 !important;
+    width: auto !important;
+  }
+}