🐞 Fix: 모바일 앱 소셜 로그인 콜백 처리 추가

package.json

@@ -23,6 +23,7 @@
     ]
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.3.0",
     "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.6",

src/app/layouts/AppLayout.tsx

@@ -1,11 +1,15 @@
 import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { redirectToLogin, refreshAccessToken } from '@/shared/lib/auth/refreshSession';
 import { getAccessToken, getRefreshToken, isAccessTokenExpired } from '@/shared/lib/auth/token';
 import { Header } from '@/widgets/header';
 
 export function AppLayout() {
+  const location = useLocation();
+  // 산책 페이지는 헤더 없는 전체화면(지도) 레이아웃
+  const isFullBleed = location.pathname.startsWith('/walk');
+
   useEffect(() => {
     if (!getAccessToken() || !getRefreshToken() || !isAccessTokenExpired()) {
       return;
@@ -21,6 +25,16 @@ export function AppLayout() {
     void refreshSession();
   }, []);
 
+  if (isFullBleed) {
+    return (
+      <div className="flex min-h-screen flex-col bg-neutral-50">
+        <main className="flex-1">
+          <Outlet />
+        </main>
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen flex-col bg-neutral-50">
       <Header />

src/app/router.tsx

@@ -20,6 +20,7 @@ import { NotificationSettingsPage } from '@/pages/my/NotificationSettingsPage';
 import { PetRegistrationPage } from '@/pages/my/PetRegistrationPage';
 import { PetSpecialNotesPage } from '@/pages/my/PetSpecialNotesPage';
 import { PetWeightPage } from '@/pages/my/PetWeightPage';
+import { WithdrawalPage } from '@/pages/my/WithdrawalPage';
 import { NotFoundPage } from '@/pages/not-found/NotFoundPage';
 import { WalkPage } from '@/pages/walk/WalkPage';
 
@@ -78,6 +79,14 @@ export const router = createBrowserRouter([
           </RequireAuth>
         ),
       },
+      {
+        path: '/my/withdrawal',
+        element: (
+          <RequireAuth>
+            <WithdrawalPage />
+          </RequireAuth>
+        ),
+      },
       {
         path: '/my/pets/new',
         element: (

src/features/auth/api/auth.ts

@@ -2,6 +2,7 @@
 import { apiClient } from '@/shared/api/axios';
 
 import type {
+  LogoutResponse,
   NicknameCheckResponse,
   NotificationUpdateResponse,
   RegisterProfileRequest,
@@ -35,6 +36,16 @@ export async function socialLogin(provider: SocialProvider, code: string): Promi
   return { kind: 'LOGIN', data: response.data as SocialLoginSuccess };
 }
 
+/**
+ * 로그아웃 (POST /auth/logout)
+ * - refreshToken 삭제 + accessToken 블랙리스트 처리
+ * - accessToken은 apiClient 인터셉터가 Authorization 헤더로 자동 첨부
+ */
+export async function logout(refreshToken: string): Promise<LogoutResponse> {
+  const response = await apiClient.post<LogoutResponse>('/auth/logout', { refreshToken });
+  return response.data;
+}
+
 /**
  * 추가 정보 입력 → 가입 완료 (PUT /users/me/profile)
  * - 202 응답으로 받은 registrationToken을 Authorization 헤더로 전달

src/features/auth/api/users.ts

@@ -1,6 +1,12 @@
 import { apiClient } from '@/shared/api/axios';
 
-import type { UpdateMyProfileRequest, UpdateMyProfileResponse, UserProfile } from '../model/types';
+import type {
+  UpdateMyProfileRequest,
+  UpdateMyProfileResponse,
+  UserProfile,
+  WithdrawUserResponse,
+  WithdrawalEmailResponse,
+} from '../model/types';
 
 /**
  * 내 정보 조회 (GET /users/me)
@@ -19,3 +25,24 @@ export async function updateMyProfile(body: UpdateMyProfileRequest): Promise<Upd
   const response = await apiClient.patch<UpdateMyProfileResponse>('/users/me', body);
   return response.data;
 }
+
+/**
+ * 탈퇴 인증 메일 발송 (POST /users/me/withdrawal/email)
+ * - 현재 로그인한 유저 이메일로 인증번호 발송
+ * - 1분 이내 재요청 시 429 응답
+ */
+export async function sendWithdrawalEmail(): Promise<WithdrawalEmailResponse> {
+  const response = await apiClient.post<WithdrawalEmailResponse>('/users/me/withdrawal/email');
+  return response.data;
+}
+
+/**
+ * 최종 회원 탈퇴 (DELETE /users/me)
+ * - 메일로 받은 6자리 인증번호(authCode)로 계정 삭제
+ */
+export async function withdrawUser(authCode: string): Promise<WithdrawUserResponse> {
+  const response = await apiClient.delete<WithdrawUserResponse>('/users/me', {
+    data: { authCode },
+  });
+  return response.data;
+}

src/features/auth/index.ts

@@ -19,8 +19,8 @@ export {
 export type { AuthErrorPresentation, AuthClientErrorCode, AuthErrorContext } from './lib/authErrorPresentation';
 export { AuthLoadingScreen } from './ui/status/AuthLoadingScreen';
 export { AuthErrorScreen } from './ui/status/AuthErrorScreen';
-export { socialLogin, registerProfile, checkNicknameAvailability, updateNotificationSetting } from './api/auth';
-export { getMyProfile, updateMyProfile } from './api/users';
+export { socialLogin, logout, registerProfile, checkNicknameAvailability, updateNotificationSetting } from './api/auth';
+export { getMyProfile, updateMyProfile, sendWithdrawalEmail, withdrawUser } from './api/users';
 export { useCreatePet } from './model/useCreatePet';
 export { useCreatePetInvitationCode } from './model/useCreatePetInvitationCode';
 export { useCreatePetSpecialNote } from './model/useCreatePetSpecialNote';
@@ -29,6 +29,9 @@ export { useFamilyApplications } from './model/useFamilyApplications';
 export { useFamilyBlockedUsers } from './model/useFamilyBlockedUsers';
 export { useFamilyPendingUsers } from './model/useFamilyPendingUsers';
 export { useCurrentUser } from './model/useCurrentUser';
+export { useLogout } from './model/useLogout';
+export { useSendWithdrawalEmail } from './model/useSendWithdrawalEmail';
+export { useWithdrawUser } from './model/useWithdrawUser';
 export { useApprovePetFamilyRequest } from './model/useApprovePetFamilyRequest';
 export { useDeletePetWeight } from './model/useDeletePetWeight';
 export { useDeletePetSpecialNote } from './model/useDeletePetSpecialNote';
@@ -50,6 +53,8 @@ export type {
   SocialLoginSuccess,
   SocialSignupRequired,
   SocialLoginResult,
+  LogoutRequest,
+  LogoutResponse,
   CreatePetRequest,
   CreatePetResponse,
   CreatePetSpecialNoteRequest,
@@ -78,6 +83,9 @@ export type {
   NotificationUpdateResponse,
   UpdateMyProfileRequest,
   UpdateMyProfileResponse,
+  WithdrawalEmailResponse,
+  WithdrawUserRequest,
+  WithdrawUserResponse,
   PetDetailResponse,
   PetFamilyApprovalAction,
   PetFamilyApprovalRequest,
@@ -102,8 +110,11 @@ export type {
 export { getApiErrorMessage, getErrorBodyMessage } from '@/shared/lib/api/errorMessage';
 export {
   SOCIAL_LOGIN_STATUS_MESSAGES,
+  LOGOUT_STATUS_MESSAGES,
   REGISTER_PROFILE_STATUS_MESSAGES,
   NOTIFICATION_SETTING_STATUS_MESSAGES,
   PROFILE_UPDATE_STATUS_MESSAGES,
   NICKNAME_CHECK_STATUS_MESSAGES,
+  WITHDRAWAL_EMAIL_STATUS_MESSAGES,
+  WITHDRAW_USER_STATUS_MESSAGES,
 } from './lib/apiErrorMessages';

src/features/auth/lib/apiErrorMessages.ts

@@ -8,6 +8,14 @@ export const SOCIAL_LOGIN_STATUS_MESSAGES: Partial<Record<number, string>> = {
   500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
 };
 
+/** 로그아웃 POST /auth/logout */
+export const LOGOUT_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '잘못된 요청이에요. 잠시 후 다시 시도해주세요.',
+  401: '인증 정보가 유효하지 않아요. 다시 로그인해주세요.',
+  404: '로그인 정보를 찾을 수 없어요.',
+  500: '로그아웃에 실패했어요. 잠시 후 다시 시도해주세요.',
+};
+
 /** 회원가입 완료 PUT /users/me/profile */
 export const REGISTER_PROFILE_STATUS_MESSAGES: Partial<Record<number, string>> = {
   400: '입력 정보를 다시 확인해주세요.',
@@ -31,6 +39,22 @@ export const PROFILE_UPDATE_STATUS_MESSAGES: Partial<Record<number, string>> = {
   500: '회원정보 수정에 실패했어요. 잠시 후 다시 시도해주세요.',
 };
 
+/** 탈퇴 인증 메일 발송 POST /users/me/withdrawal/email */
+export const WITHDRAWAL_EMAIL_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  401: '로그인이 필요한 기능이에요. 다시 로그인해주세요.',
+  404: '사용자를 찾을 수 없어요.',
+  429: '잠시 후 다시 시도해주세요. (1분 이내 재요청은 불가해요)',
+  500: '인증 메일 발송에 실패했어요. 잠시 후 다시 시도해주세요.',
+};
+
+/** 최종 회원 탈퇴 DELETE /users/me */
+export const WITHDRAW_USER_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '인증번호를 다시 확인해주세요.',
+  401: '인증번호가 올바르지 않거나 만료되었어요. 다시 시도해주세요.',
+  404: '사용자를 찾을 수 없어요.',
+  500: '회원 탈퇴에 실패했어요. 잠시 후 다시 시도해주세요.',
+};
+
 /** 닉네임 중복 확인 GET /users/nickname/check */
 export const NICKNAME_CHECK_STATUS_MESSAGES: Partial<Record<number, string>> = {
   500: '중복 확인에 실패했어요. 잠시 후 다시 시도해주세요.',

src/features/auth/model/types.ts

@@ -22,6 +22,17 @@ export interface TokenReissueResponse {
   accessTokenExpiresIn: number;
 }
 
+// ---- 로그아웃 (POST /auth/logout) ----
+
+export interface LogoutRequest {
+  /** 삭제할 리프레시 토큰 */
+  refreshToken: string;
+}
+
+export interface LogoutResponse {
+  message: string;
+}
+
 // ---- 소셜 로그인 (POST /auth/social-login) ----
 
 export interface SocialLoginRequest {
@@ -408,6 +419,23 @@ export interface UpdateMyProfileResponse {
   userCreatedAt: string;
 }
 
+// ---- 회원 탈퇴 ----
+
+/** 탈퇴 인증 메일 발송 (POST /users/me/withdrawal/email) */
+export interface WithdrawalEmailResponse {
+  message: string;
+}
+
+/** 최종 회원 탈퇴 (DELETE /users/me) */
+export interface WithdrawUserRequest {
+  /** 메일로 받은 6자리 인증번호 */
+  authCode: string;
+}
+
+export interface WithdrawUserResponse {
+  message: string;
+}
+
 export interface UserProfile {
   message: string;
   userId?: string;

src/features/auth/model/useLogout.ts

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { logout } from '@/features/auth/api/auth';
+import type { LogoutResponse } from '@/features/auth/model/types';
+import { getRefreshToken } from '@/shared/lib/auth/token';
+
+/**
+ * 로그아웃 (POST /auth/logout)
+ * - refreshToken이 없으면 서버 호출 없이 로컬 세션만 정리하도록 null 반환
+ * - 토큰/캐시 정리·이동은 호출 측에서 처리
+ */
+export function useLogout() {
+  return useMutation<LogoutResponse | null, unknown, void>({
+    mutationFn: async () => {
+      const refreshToken = getRefreshToken();
+      if (!refreshToken) return null;
+
+      return logout(refreshToken);
+    },
+  });
+}

src/features/auth/model/useSendWithdrawalEmail.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { sendWithdrawalEmail } from '@/features/auth/api/users';
+import type { WithdrawalEmailResponse } from '@/features/auth/model/types';
+
+/** 탈퇴 인증 메일 발송 (POST /users/me/withdrawal/email) */
+export function useSendWithdrawalEmail() {
+  return useMutation<WithdrawalEmailResponse, unknown, void>({
+    mutationFn: () => sendWithdrawalEmail(),
+  });
+}

src/features/auth/model/useWithdrawUser.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { withdrawUser } from '@/features/auth/api/users';
+import type { WithdrawUserResponse } from '@/features/auth/model/types';
+
+/** 최종 회원 탈퇴 (DELETE /users/me) — 메일로 받은 6자리 인증번호로 계정 삭제 */
+export function useWithdrawUser() {
+  return useMutation<WithdrawUserResponse, unknown, string>({
+    mutationFn: (authCode) => withdrawUser(authCode),
+  });
+}

src/features/walk-fence/api/fence.ts

@@ -0,0 +1,50 @@
+import { apiClient } from '@/shared/api/axios';
+
+import type {
+  CreateFenceRequest,
+  FenceBoundariesResponse,
+  FenceBoundaryResponse,
+  FenceMessageResponse,
+  FenceStatusResponse,
+  ToggleFenceRequest,
+  UpdateFenceRangeRequest,
+} from '../model/types';
+
+/** 1. 울타리 생성 */
+export async function createFence(payload: CreateFenceRequest): Promise<FenceMessageResponse> {
+  const response = await apiClient.post<FenceMessageResponse>('/fence/range', payload);
+  return response.data;
+}
+
+/** 2. 특정 반려동물의 울타리 활성화 상태 조회 */
+export async function getFenceStatus(petId: number): Promise<FenceStatusResponse> {
+  const response = await apiClient.get<FenceStatusResponse>(`/fence/${petId}/status`);
+  return response.data;
+}
+
+/** 3. 울타리 ON/OFF 변경 */
+export async function toggleFence(fenceId: number, payload: ToggleFenceRequest): Promise<FenceMessageResponse> {
+  const response = await apiClient.patch<FenceMessageResponse>(`/fence/${fenceId}/toggle`, payload);
+  return response.data;
+}
+
+/** 4. 울타리 이름/중심/반경 수정 */
+export async function updateFenceRange(
+  fenceId: number,
+  payload: UpdateFenceRangeRequest,
+): Promise<FenceMessageResponse> {
+  const response = await apiClient.patch<FenceMessageResponse>(`/fence/${fenceId}/range`, payload);
+  return response.data;
+}
+
+/** 5. 지도에 표시할 단일 울타리 경계 조회 */
+export async function getFenceBoundary(fenceId: number): Promise<FenceBoundaryResponse> {
+  const response = await apiClient.get<FenceBoundaryResponse>(`/fence/${fenceId}/boundary`);
+  return response.data;
+}
+
+/** 6. 접근 가능한 모든 울타리 경계 목록 조회 */
+export async function getFenceBoundaries(): Promise<FenceBoundariesResponse> {
+  const response = await apiClient.get<FenceBoundariesResponse>('/fence/boundaries');
+  return response.data;
+}

src/features/walk-fence/index.ts

@@ -0,0 +1,29 @@
+export {
+  createFence,
+  getFenceBoundaries,
+  getFenceBoundary,
+  getFenceStatus,
+  toggleFence,
+  updateFenceRange,
+} from './api/fence';
+export { useCreateFence } from './model/useCreateFence';
+export { useFenceBoundaries } from './model/useFenceBoundaries';
+export { useFenceStatus } from './model/useFenceStatus';
+export { useLiveLocation } from './model/useLiveLocation';
+export { useToggleFence } from './model/useToggleFence';
+export { useUpdateFenceRange } from './model/useUpdateFenceRange';
+export { FenceControlPanel } from './ui/FenceControlPanel';
+export { WalkMap } from './ui/WalkMap';
+export type {
+  CreateFenceRequest,
+  FenceBoundariesResponse,
+  FenceBoundary,
+  FenceBoundaryResponse,
+  FenceCenter,
+  FenceMessageResponse,
+  FenceStatusResponse,
+  LiveLocationMessage, // 실시간 위치 업데이트 서버 메세지 전체 받기
+  LiveLocationPayload, // 실시간 위치 업데이트 서버 메세지 중 payload 부분
+  ToggleFenceRequest,
+  UpdateFenceRangeRequest,
+} from './model/types';