[Feat/#96] 설정 화면과 전화번호 변경·회원 탈퇴 화면 구현

docs/conventions/wds-component-usage.md

@@ -649,3 +649,31 @@ Figma는 헤더 배경이 없어서 배너 그림자(`Shadow/Spread/Small`, 60px
 ### 설정 화면의 "전체 알림"은 상태를 따로 두지 않는다
 
 Figma 초기 상태가 전체 꺼짐 + 빌릴게만 켜짐이라 "전체"는 독립된 값이 아니라 카테고리가 모두 켜졌는지로 파생한다. 누르면 네 카테고리를 같은 값으로 맞추고, 하나라도 끄면 전체가 꺼진다. 값은 화면 state뿐이라 새로고침하면 초기값으로 돌아간다(서버 API 연동 때 교체).
+
+## 설정 화면 (설정 `3524:152322` / 전화번호 변경 `3524:152450` / 회원 탈퇴 `3524:152473`)
+
+코드는 `src/features/settings/` 참고.
+
+### 알림 설정 화면은 설정이 아니라 알림 기능이 갖는다
+
+Figma는 같은 알림 설정 화면을 **설정 섹션(`3524:152367`)과 알림 섹션(`3628:110837`) 두 군데에 복제**해 뒀다(노드 구조·좌표·문구가 완전히 같다). 디자인이 둘이라고 화면을 둘 만들면 안 된다 — 코드는 `features/notifications/NotificationsSettingsScreen`(`/notifications/settings`) 한 벌만 두고, 설정 화면의 "알림 설정" 행과 알림 목록 헤더의 설정 버튼이 **같은 경로로** 들어간다. 카테고리 문구·초기값도 `features/notifications/constants/notifications.ts`가 단일 출처다.
+
+### 새로 확정된 WDS 매핑
+
+| Figma 인스턴스 | 코드 | 확정 근거 |
+|---|---|---|
+| `Textinput/Textfield` | `TextField`(`@wanteddev/wds`) | 메인 컴포넌트 Node ID `445:8591` + [공식 문서](https://montage.wanted.co.kr/docs/components/selection-and-input/text-field/design). radius 12px·padding 12px 실측 일치 |
+
+`Switch/Switch`·`Icon/Normal/Setting`·`Divider(new)` 8px은 위 "알림" 절에서 이미 확정한 매핑을 그대로 쓴다.
+
+**`TextField`는 입력 박스만 그린다** — Figma `Textinput/Textfield`는 라벨(Heading) + 입력칸 + 안내 문구를 한 컴포넌트로 묶고 있지만, 코드 쪽 `TextField`에는 label·helper 슬롯이 없다. 그래서 "새 전화번호" 라벨과 "행사 신청 시 사용돼요." 안내는 Figma 구조대로 형제 요소로 따로 그린다. WDS `Label`은 required `*`만 더해주는 `Typography` 래퍼라 쓸 이유가 없다(행사 신청 폼 절의 선례와 같은 판단). 값이 있을 때 뜨는 지움(X) 버튼은 `TextField`가 기본으로 그려서 Figma 입력 중 상태(`3524:152465`)와 그대로 맞는다.
+
+### 설정 행의 `Arrow`는 WDS가 아니다
+
+설정 화면 모든 행 끝의 화살표(`445:12456` "Arrow")는 `search_design_system`으로 WDS를 뒤져도 같은 이름이 없다(WDS는 `Icon/Normal/Arrow *`·`Icon/Normal/Chevron *` 네이밍). 133번째 줄 "제외됨" 목록의 `Icon/Arrow`와 같은 Stream 전용 아이콘이라 SVG를 받아 `src/assets/icons/settings/arrow-right.svg`로 커밋했다. 색(`#C2C4C8` = `Atomic/Cool Neutral/90`)이 에셋에 구워져 있어 토큰은 새로 추가하지 않았다.
+
+**에셋은 12×12인데 슬롯은 8×12다.** Figma도 12×12 뷰박스를 `width: 8px; height: 12px` 자리에 `preserveAspectRatio="none"`으로 넣어 가로를 눌러 쓴다. 내려받은 SVG를 그대로 `className="h-3 w-2"`로 쓰는 게 Figma와 같은 결과다 — 8×12로 다시 내보내거나 종횡비를 맞추려 들면 오히려 어긋난다.
+
+### Figma 노드 ID가 통째로 갈린 적이 있다
+
+설정 섹션은 한 번 통째로 다시 만들어졌다. 옛 ID(`1799:85920` 섹션, 설정 `3013:116135`, 알림 설정 `3013:116182`, 전화번호 변경 `1799:87220`, 로그아웃 모달 `1799:87183`)는 **파일에서 삭제되어 조회되지 않는다.** 탈퇴 계열(`3524:152473`·`3524:152505`·`3524:152517`)만 그대로다. 주석의 nodeId가 `get_design_context`에서 "not found"로 나오면 먼저 섹션이 다시 만들어졌는지 확인한다.

src/app/router.tsx

@@ -30,6 +30,10 @@ import NoticesListScreen from "@/features/notices/NoticesListScreen";
 import NotificationsScreen from "@/features/notifications/NotificationsScreen";
 import NotificationsSettingsScreen from "@/features/notifications/NotificationsSettingsScreen";
 import SearchScreen from "@/features/search/SearchScreen";
+import PhoneChangeScreen from "@/features/settings/PhoneChangeScreen";
+import SettingsScreen from "@/features/settings/SettingsScreen";
+import WithdrawalCompleteScreen from "@/features/settings/WithdrawalCompleteScreen";
+import WithdrawalScreen from "@/features/settings/WithdrawalScreen";
 
 // 앱의 모든 라우트는 이 객체 배열 한곳에서 정의한다 — 새 화면은 여기에 라우트를 추가한다.
 // satisfies로 선언 시점에 RouteObject 형태를 검사한다.
@@ -123,6 +127,43 @@ const routes = [
             } satisfies ScreenRouteHandle,
             path: "/notices/:noticeId",
           },
+          {
+            element: <SettingsScreen />,
+            // 흰 카드가 회색 배경 위에 쌓이는 화면이라 background는 기본값(alternative)을 쓴다.
+            // 설정은 뒤로가기로만 빠져나가는 흐름이라 Bottom Nav를 안 보여준다(Figma 3524:152322).
+            // 설정의 "알림 설정" 행은 알림 화면이 이미 가진 /notifications/settings로 보낸다 —
+            // Figma는 설정·알림 두 섹션에 같은 화면을 복제해 뒀지만 코드에서는 한 벌만 둔다.
+            handle: { hasBottomNav: false } satisfies ScreenRouteHandle,
+            path: "/settings",
+          },
+          {
+            element: <PhoneChangeScreen />,
+            // 입력칸 하나 + 하단 고정 버튼(Action Area)이 있는 흰 배경 화면(Figma 3524:152450)
+            handle: {
+              background: "normal",
+              hasBottomNav: false,
+            } satisfies ScreenRouteHandle,
+            path: "/settings/phone",
+          },
+          {
+            element: <WithdrawalScreen />,
+            // 안내 카드가 회색이라 화면은 흰 면이어야 한다(Figma 3524:152473).
+            // 하단 고정 버튼(Action Area)이 있어 Bottom Nav는 없다.
+            handle: {
+              background: "normal",
+              hasBottomNav: false,
+            } satisfies ScreenRouteHandle,
+            path: "/settings/withdrawal",
+          },
+          {
+            element: <WithdrawalCompleteScreen />,
+            // 완료 화면 — 하단 탭 없이 흰 배경 전체 화면이다(Figma 3524:152505)
+            handle: {
+              background: "normal",
+              hasBottomNav: false,
+            } satisfies ScreenRouteHandle,
+            path: "/settings/withdrawal/complete",
+          },
           {
             element: <LockersApplyScreen />,
             // 시트만 있는 화면이라 뒤에 Bottom Nav가 비쳐도 Figma(홈 위에 뜨는 시트)와 같다

src/components/ui/ConfirmModal.tsx

@@ -165,8 +165,11 @@ function ConfirmModal({
               {title}
             </Typography>
             {description && (
+              // Figma 모달 설명은 줄바꿈 위치까지 디자인에 포함돼 있어서(예: 탈퇴 확인 모달
+              // 3524:152535) `\n`을 그대로 살린다. 기존 사용처는 모두 한 줄 문구라 영향이 없다.
               <Typography
                 as="p"
+                className="whitespace-pre-line"
                 color="semantic.label.alternative"
                 variant="label1-reading"
                 weight="regular"

src/entities/users/types.ts

@@ -0,0 +1,15 @@
+// 설정 화면 계정 정보 카드(Figma 3524:152329)가 보여 주는 내 계정 정보.
+// 용어 사전(terminology.md)의 `사용자 → users` 도메인이다.
+export interface MyAccount {
+  name: string;
+  email: string;
+  /** `010-1234-5678` 형태. 전화번호 변경 화면이 바꾸는 값이다. */
+  phone: string;
+}
+
+// Figma는 "26.0.1 · 최신버전"처럼 한 줄로 보여 주지만, 버전과 최신 여부는 서버가 내려 주는
+// 별개 값이라 나눠서 받는다 — 문구 조합은 화면이 한다.
+export interface AppVersion {
+  version: string;
+  isLatest: boolean;
+}

src/entities/users/usersApi.ts

@@ -0,0 +1,17 @@
+import type { AppVersion, MyAccount } from "@/entities/users/types";
+import { APP_VERSION, MY_ACCOUNT } from "@/entities/users/usersMock";
+import { mockupApi } from "@/lib/mockupApi";
+
+// 실 API가 붙으면 함수 안쪽만 요청 코드로 바꾼다 — 화면은 이 함수로만 데이터를 받는다.
+//
+// 백엔드 연동 시 확인할 것: 설정 화면은 묶음 이름이고 데이터는 `users` 도메인이라고 보고
+// 여기에 뒀다(terminology.md에 `settings`는 없다). 엔드포인트가 `/api/users/me`가 아니라
+// 설정 전용으로 따로 나오면 도메인 폴더와 라우트(`/settings`)를 그때 맞춘다.
+export function fetchMyAccount(): Promise<MyAccount> {
+  return mockupApi("users/me", () => MY_ACCOUNT);
+}
+
+// 앱 버전은 계정과 다른 요청이라 key를 나눈다 — 설정 화면이 둘을 한 카드에 섞어 쓰지 않는다.
+export function fetchAppVersion(): Promise<AppVersion> {
+  return mockupApi("users/app-version", () => APP_VERSION);
+}

src/entities/users/usersMock.ts

@@ -0,0 +1,13 @@
+import type { AppVersion, MyAccount } from "@/entities/users/types";
+
+// Figma 설정 화면(3524:152322)에 적힌 값 그대로. 실 API가 붙으면 이 파일은 사라진다.
+export const MY_ACCOUNT: MyAccount = {
+  email: "pog454@kookmin.ac.kr",
+  name: "이예담",
+  phone: "010-1234-5678",
+};
+
+export const APP_VERSION: AppVersion = {
+  isLatest: true,
+  version: "26.0.1",
+};

src/features/home/HomeScreen.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/features/home/constants/homeMock";
 import { NOTIFICATIONS_PATH } from "@/features/notifications/constants/notifications";
 import { getSearchPath } from "@/features/search/constants/search";
+import { SETTINGS_PATHS } from "@/features/settings/constants/settings";
 
 // Figma: 홈 2건 이하 (nodeId 3147:146240), 3건 이상 (3147:146297), empty (3147:146366)
 // 챗봇 FAB(Figma nodeId 2443:178457 등, 홈 화면 variant마다 우하단에 고정) —
@@ -49,7 +50,13 @@ function HomeScreen() {
             }
             trailing={
               <>
-                <TopNavigationButton aria-label="설정" variant="icon">
+                <TopNavigationButton
+                  aria-label="설정"
+                  onClick={() =>
+                    navigate(SETTINGS_PATHS.root, { viewTransition: true })
+                  }
+                  variant="icon"
+                >
                   <IconSetting />
                 </TopNavigationButton>
                 <TopNavigationButton

src/features/settings/PhoneChangeScreen.tsx

@@ -0,0 +1,120 @@
+import {
+  ActionArea,
+  ActionAreaButton,
+  TextField,
+  TopNavigationButton,
+  Typography,
+} from "@wanteddev/wds";
+import { IconChevronLeft } from "@wanteddev/wds-icon";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import ScreenHeader from "@/components/ui/ScreenHeader";
+import ScreenToast from "@/components/ui/ScreenToast";
+import { useScreenHeader } from "@/components/ui/useScreenHeader";
+import {
+  formatPhoneNumber,
+  isValidPhoneNumber,
+  PHONE_NUMBER_MAX_LENGTH,
+} from "@/lib/phone";
+
+// Figma: 전화번호 변경 (nodeId 3524:152450), 입력 중 (3524:152465), 완료 토스트 (3524:152457).
+// 입력칸은 Figma `Textinput/Textfield`(445:8591, WDS 공식 문서 링크 확인)라 WDS `TextField`를
+// 그대로 쓴다. 다만 WDS `TextField`는 입력 박스만 그려서, 위 라벨("새 전화번호")과 아래 안내
+// 문구는 Figma 구조대로 형제 요소로 따로 그린다 — WDS `Label`은 required `*` 처리만 더해주는
+// Typography 래퍼라 여기선 쓸 이유가 없다(wds-component-usage.md의 행사 신청 폼 선례와 같다).
+//
+// "변경하기" 버튼은 번호를 형식에 맞게 다 입력했을 때만 활성화된다(Figma 비활성 #F4F4F5 /
+// 활성 #0066FF). 높이 56px은 ActionAreaButton 기본(48px)과 달라 sx로 세로 padding만 보정한다.
+// 실제 변경 API가 없어서 누르면 Figma처럼 완료 토스트만 띄운다.
+//
+// 하이픈 포맷과 유효성 판정은 온보딩 연락처 입력(#110)과 같은 로직이라 `lib/phone.ts`에 있다.
+//
+function PhoneChangeScreen() {
+  const navigate = useNavigate();
+  const [phone, setPhone] = useState("");
+  const [toastOpen, setToastOpen] = useState(false);
+  // 토스트가 떠 있는 중에 다시 저장해도 스크린리더가 재안내하도록 매번 새로 마운트한다
+  // (EventsApplicationScreen·BililgeReturnSection과 같은 패턴).
+  const [toastToken, setToastToken] = useState(0);
+
+  useScreenHeader(
+    <ScreenHeader
+      leading={
+        <TopNavigationButton
+          aria-label="뒤로가기"
+          onClick={() => navigate(-1)}
+          variant="icon"
+        >
+          <IconChevronLeft />
+        </TopNavigationButton>
+      }
+      title="전화번호 변경"
+      variant="normal"
+    />,
+  );
+
+  const handleSave = () => {
+    setToastOpen(true);
+    setToastToken((token) => token + 1);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex flex-1 flex-col gap-2 px-5 pt-2">
+        <Typography
+          as="label"
+          color="semantic.label.neutral"
+          htmlFor="phone"
+          variant="label1"
+          weight="bold"
+        >
+          새 전화번호
+        </Typography>
+        <TextField
+          id="phone"
+          inputMode="tel"
+          maxLength={PHONE_NUMBER_MAX_LENGTH}
+          onChange={(event) => setPhone(formatPhoneNumber(event.target.value))}
+          placeholder="010-1234-5678"
+          type="tel"
+          value={phone}
+        />
+        <Typography
+          as="p"
+          color="semantic.label.alternative"
+          variant="caption1"
+          weight="regular"
+        >
+          행사 신청 시 사용돼요.
+        </Typography>
+      </div>
+
+      <div className="shrink-0">
+        <ActionArea>
+          {/* Figma Main Action은 56px인데 ActionAreaButton(size="large")은 48px이라 세로 padding만 보정 */}
+          <ActionAreaButton
+            disabled={!isValidPhoneNumber(phone)}
+            onClick={handleSave}
+            sx={{ paddingBlock: "16px" }}
+          >
+            변경하기
+          </ActionAreaButton>
+        </ActionArea>
+        {/* Figma Action Area(110px)의 버튼 아래 34px 중 WDS가 주는 padding 20px을 뺀 14px을 더한다
+            (EventsApplicationScreen과 같은 보정) */}
+        <div className="h-safe-bottom-extra bg-background-elevated-normal sm:h-[14px]" />
+      </div>
+
+      <ScreenToast
+        key={toastToken}
+        message="전화번호를 변경했어요."
+        onOpenChange={setToastOpen}
+        open={toastOpen}
+        variant="positive"
+      />
+    </div>
+  );
+}
+
+export default PhoneChangeScreen;