diff --git a/docs/conventions/wds-component-usage.md b/docs/conventions/wds-component-usage.md index 4beaefb..e36e639 100644 --- a/docs/conventions/wds-component-usage.md +++ b/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"로 나오면 먼저 섹션이 다시 만들어졌는지 확인한다. diff --git a/src/app/router.tsx b/src/app/router.tsx index 1604574..d5ccdf4 100644 --- a/src/app/router.tsx +++ b/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: , + // 흰 카드가 회색 배경 위에 쌓이는 화면이라 background는 기본값(alternative)을 쓴다. + // 설정은 뒤로가기로만 빠져나가는 흐름이라 Bottom Nav를 안 보여준다(Figma 3524:152322). + // 설정의 "알림 설정" 행은 알림 화면이 이미 가진 /notifications/settings로 보낸다 — + // Figma는 설정·알림 두 섹션에 같은 화면을 복제해 뒀지만 코드에서는 한 벌만 둔다. + handle: { hasBottomNav: false } satisfies ScreenRouteHandle, + path: "/settings", + }, + { + element: , + // 입력칸 하나 + 하단 고정 버튼(Action Area)이 있는 흰 배경 화면(Figma 3524:152450) + handle: { + background: "normal", + hasBottomNav: false, + } satisfies ScreenRouteHandle, + path: "/settings/phone", + }, + { + element: , + // 안내 카드가 회색이라 화면은 흰 면이어야 한다(Figma 3524:152473). + // 하단 고정 버튼(Action Area)이 있어 Bottom Nav는 없다. + handle: { + background: "normal", + hasBottomNav: false, + } satisfies ScreenRouteHandle, + path: "/settings/withdraw", + }, + { + element: , + // 완료 화면 — 하단 탭 없이 흰 배경 전체 화면이다(Figma 3524:152505) + handle: { + background: "normal", + hasBottomNav: false, + } satisfies ScreenRouteHandle, + path: "/settings/withdraw/complete", + }, { element: , // 시트만 있는 화면이라 뒤에 Bottom Nav가 비쳐도 Figma(홈 위에 뜨는 시트)와 같다 diff --git a/src/assets/icons/settings/arrow-right.svg b/src/assets/icons/settings/arrow-right.svg new file mode 100644 index 0000000..be36674 --- /dev/null +++ b/src/assets/icons/settings/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ui/ConfirmModal.tsx b/src/components/ui/ConfirmModal.tsx index 2f9ae8a..baeb144 100644 --- a/src/components/ui/ConfirmModal.tsx +++ b/src/components/ui/ConfirmModal.tsx @@ -165,8 +165,11 @@ function ConfirmModal({ {title} {description && ( + // Figma 모달 설명은 줄바꿈 위치까지 디자인에 포함돼 있어서(예: 탈퇴 확인 모달 + // 3524:152535) `\n`을 그대로 살린다. 기존 사용처는 모두 한 줄 문구라 영향이 없다. - + + navigate(SETTINGS_PATHS.root, { viewTransition: true }) + } + variant="icon" + > navigate(-1)} + variant="icon" + > + + + } + title="전화번호 변경" + variant="normal" + />, + ); + + const handleSave = () => { + setToastOpen(true); + setToastToken((token) => token + 1); + }; + + return ( +
+
+ + 새 전화번호 + + setPhone(formatPhone(event.target.value))} + placeholder="010-1234-5678" + type="tel" + value={phone} + /> + + 행사 신청 시 사용돼요. + +
+ +
+ + {/* Figma Main Action은 56px인데 ActionAreaButton(size="large")은 48px이라 세로 padding만 보정 */} + + 변경하기 + + + {/* Figma Action Area(110px)의 버튼 아래 34px 중 WDS가 주는 padding 20px을 뺀 14px을 더한다 + (EventsApplicationScreen과 같은 보정) */} +
+
+ + +
+ ); +} + +export default PhoneChangeScreen; diff --git a/src/features/settings/SettingsScreen.tsx b/src/features/settings/SettingsScreen.tsx new file mode 100644 index 0000000..ee04b7e --- /dev/null +++ b/src/features/settings/SettingsScreen.tsx @@ -0,0 +1,149 @@ +import { TopNavigationButton, Typography } from "@wanteddev/wds"; +import { IconChevronLeft } from "@wanteddev/wds-icon"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import ConfirmModal from "@/components/ui/ConfirmModal"; +import ScreenHeader from "@/components/ui/ScreenHeader"; +import { useScreenHeader } from "@/components/ui/useScreenHeader"; +import { NOTIFICATIONS_SETTINGS_PATH } from "@/features/notifications/constants/notifications"; +import SettingsRow from "@/features/settings/components/SettingsRow"; +import SettingsSection from "@/features/settings/components/SettingsSection"; +import { + ACCOUNT_EXIT_PATH, + APP_VERSION_LABEL, + SETTINGS_ACCOUNT, + SETTINGS_EXTERNAL_LINKS, + SETTINGS_PATHS, +} from "@/features/settings/constants/settings"; + +// Figma: 설정 (nodeId 3524:152322) — 계정 정보 / 알림 설정 / 서비스 정보 / 로그아웃 네 장의 흰 +// 카드가 회색 배경 위에 8px 간격으로 쌓이고, 맨 아래에 Copyright가 깔린다. +// +// 의견 보내기·개인정보 처리방침은 화면을 따로 만들지 않고 구글폼으로 연결한다(폼 주소가 아직 +// 없어서 SETTINGS_EXTERNAL_LINKS가 빈 문자열이면 아무 동작도 하지 않는다). +// 로그아웃은 확인 모달(3524:152426)을 공용 ConfirmModal(tone="negative")로 붙였고, +// 회원 탈퇴는 별도 화면(3524:152473)으로 이동한다. +// +// "알림 설정"은 알림 화면이 이미 가진 화면으로 보낸다 — Figma가 설정 섹션(3524:152367)과 알림 +// 섹션(3628:110837)에 같은 화면을 복제해 뒀을 뿐, 진입점만 둘이고 화면은 하나다. +function SettingsScreen() { + const navigate = useNavigate(); + const [logoutOpen, setLogoutOpen] = useState(false); + + // 설정 아래로 화면을 쌓는 이동이라 슬라이드를 켠다(coding-style.md의 화면 전환 규칙). + const pushScreen = (to: string) => navigate(to, { viewTransition: true }); + + useScreenHeader( + navigate(-1)} + variant="icon" + > + + + } + title="설정" + variant="normal" + />, + ); + + const openExternalLink = (url: string) => { + if (!url) { + return; + } + window.open(url, "_blank", "noopener,noreferrer"); + }; + + return ( +
+
+ + + + pushScreen(SETTINGS_PATHS.phoneChange)} + value={SETTINGS_ACCOUNT.phone} + variant="account" + /> + + + + pushScreen(NOTIFICATIONS_SETTINGS_PATH)} + /> + + + + + openExternalLink(SETTINGS_EXTERNAL_LINKS.feedbackForm) + } + /> + + openExternalLink(SETTINGS_EXTERNAL_LINKS.privacyPolicy) + } + /> + + + + + setLogoutOpen(true)} + tone="alternative" + /> + pushScreen(SETTINGS_PATHS.withdrawal)} + tone="negative" + /> + +
+ + {/* Copyright는 카드 묶음 아래 남는 공간 맨 끝에 붙는다(Figma 3524:152366) */} + + © 2026 stream + + + setLogoutOpen(false)} + // 로그아웃하면 돌아올 화면이 아니라 설정을 히스토리에서 치우고 나간다. + // 실제 세션 정리는 인증이 붙을 때 여기에 함께 붙인다(ACCOUNT_EXIT_PATH 주석 참고). + onConfirm={() => { + setLogoutOpen(false); + navigate(ACCOUNT_EXIT_PATH, { replace: true }); + }} + open={logoutOpen} + title="정말 로그아웃할까요?" + tone="negative" + /> +
+ ); +} + +export default SettingsScreen; diff --git a/src/features/settings/WithdrawalCompleteScreen.tsx b/src/features/settings/WithdrawalCompleteScreen.tsx new file mode 100644 index 0000000..f447963 --- /dev/null +++ b/src/features/settings/WithdrawalCompleteScreen.tsx @@ -0,0 +1,27 @@ +import { useNavigate } from "react-router-dom"; + +import CompleteCheck from "@/components/ui/CompleteCheck"; +import ResultScreen from "@/components/ui/ResultScreen"; +import { ACCOUNT_EXIT_PATH } from "@/features/settings/constants/settings"; + +// Figma: 탈퇴 완료 페이지 (nodeId 3524:152505) +// 신청 결과 화면과 같은 뼈대라 ResultScreen을 쓴다. 버튼이 "확인" 하나뿐이라 +// secondaryAction을 주지 않고, 체크 모션이 붙는 완료 화면이라 간격은 8px이다. +// 나갈 곳은 로그아웃과 같은 자리라 ACCOUNT_EXIT_PATH를 함께 쓴다. +function WithdrawalCompleteScreen() { + const navigate = useNavigate(); + const exit = () => navigate(ACCOUNT_EXIT_PATH, { replace: true }); + + return ( + } + illustrationGap={8} + onClose={exit} + primaryAction={{ label: "확인", onClick: exit }} + title="회원 탈퇴가 완료되었어요" + /> + ); +} + +export default WithdrawalCompleteScreen; diff --git a/src/features/settings/WithdrawalScreen.tsx b/src/features/settings/WithdrawalScreen.tsx new file mode 100644 index 0000000..59216bd --- /dev/null +++ b/src/features/settings/WithdrawalScreen.tsx @@ -0,0 +1,141 @@ +import { + ActionArea, + ActionAreaButton, + Checkbox, + TopNavigationButton, + Typography, +} from "@wanteddev/wds"; +import { IconChevronLeft } from "@wanteddev/wds-icon"; +import { useId, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import ConfirmModal from "@/components/ui/ConfirmModal"; +import ScreenHeader from "@/components/ui/ScreenHeader"; +import { useScreenHeader } from "@/components/ui/useScreenHeader"; +import WithdrawalNoticeCard from "@/features/settings/components/WithdrawalNoticeCard"; +import { + SETTINGS_PATHS, + WITHDRAWAL_NOTICES, +} from "@/features/settings/constants/settings"; + +// Figma: 탈퇴 확인 페이지 (nodeId 3524:152473), 체크 상태 (3524:152489), 확인 모달 (3524:152517). +// 안내 문구 4장은 같은 컴포넌트의 인스턴스라 WithdrawalNoticeCard + WITHDRAWAL_NOTICES로 분리했다. +// +// 동의 체크박스를 켜야 "탈퇴하기"가 활성화되고(Figma 비활성 Interaction/Disable #F4F4F5 → +// 활성 Status/Negative #FF4242), 누르면 확인 모달이 뜬다. WDS Button은 color가 +// primary/assistive뿐이라 빨간 버튼은 ConfirmModal과 같은 방식으로 sx로 배경을 덮는다. +// +// 모달에서 탈퇴를 확정하면 탈퇴 완료 페이지(3524:152505)로 넘어간다. 실제 탈퇴 API 호출은 +// 연동할 때 onConfirm에 붙인다. +function WithdrawalScreen() { + const navigate = useNavigate(); + const consentId = useId(); + const [agreed, setAgreed] = useState(false); + const [confirmOpen, setConfirmOpen] = useState(false); + + useScreenHeader( + navigate(-1)} + variant="icon" + > + + + } + variant="normal" + />, + ); + + return ( +
+ {/* Figma Withdrawal Content(3524:152476): 헤더 아래 12px, 제목과 목록 사이 16px */} +
+ + 탈퇴하기 전에 꼭 +
+ 확인해 주세요 + + +
    + {WITHDRAWAL_NOTICES.map((notice) => ( + + ))} +
+
+ +
+
+ + +
+ + + {/* Figma Main Action은 56px인데 ActionAreaButton(size="large")은 48px이라 세로 padding을 + 보정하고, WDS Button엔 negative 색이 없어 배경만 status/negative로 덮는다. */} + setConfirmOpen(true)} + sx={ + agreed + ? { + backgroundColor: "var(--color-status-negative)", + paddingBlock: "16px", + } + : { paddingBlock: "16px" } + } + > + 탈퇴하기 + + + {/* Figma Action Area(110px)의 버튼 아래 34px 중 WDS가 주는 padding 20px을 뺀 14px */} +
+
+ + setConfirmOpen(false)} + // 탈퇴를 확정하면 되돌아올 화면이 아니라 완료 화면으로 치환한다 + onConfirm={() => + navigate(SETTINGS_PATHS.withdrawalComplete, { + replace: true, + viewTransition: true, + }) + } + open={confirmOpen} + title="정말 탈퇴하시겠어요?" + tone="negative" + /> +
+ ); +} + +export default WithdrawalScreen; diff --git a/src/features/settings/components/SettingsRow.tsx b/src/features/settings/components/SettingsRow.tsx new file mode 100644 index 0000000..dc71f99 --- /dev/null +++ b/src/features/settings/components/SettingsRow.tsx @@ -0,0 +1,93 @@ +import { Typography } from "@wanteddev/wds"; + +import arrowRight from "@/assets/icons/settings/arrow-right.svg"; + +interface SettingsRowProps { + label: string; + /** 오른쪽에 붙는 값 — 계정 정보(이름·이메일·전화번호)와 앱 버전에만 있다 */ + value?: string; + /** 넘기면 행 전체가 버튼이 되고 오른쪽에 화살표가 붙는다 */ + onClick?: () => void; + /** + * account: 계정 정보 행 — 라벨 Regular, 값 Medium·Label/Neutral + * menu: 그 외 메뉴·액션 행 — 라벨 Medium, 값 Regular·Label/Alternative(앱 버전) + */ + variant?: "account" | "menu"; + /** menu 행 라벨 색 — 로그아웃은 alternative, 회원 탈퇴는 negative */ + tone?: "normal" | "alternative" | "negative"; +} + +const TONE_COLOR = { + alternative: "semantic.label.alternative", + negative: "semantic.status.negative", + normal: "semantic.label.neutral", +} as const; + +// Figma: 설정 화면(nodeId 3524:152322)의 행들 — Account Row(3524:152332), Navigation Row +// (3524:152344), Info Row(3524:152356), Action Row(3524:152360)가 같은 높이(20px)·같은 +// justify-between 구조라 한 컴포넌트의 variant/tone으로 합쳤다. 넷의 차이는 라벨 굵기(계정 +// 정보만 Regular)와 라벨 색(로그아웃 alternative·회원 탈퇴 negative)뿐이다. +// 화살표는 Figma에서 앱 버전 행에만 없는데, 그 행만 누를 수 없어서 onClick 유무로 갈린다. +// +// 화살표는 Figma `Arrow`(445:12456) — WDS에 같은 이름이 없고(검색 결과 `Icon/Normal/Arrow *`· +// `Chevron *`뿐) wds-component-usage.md에도 Stream 전용 아이콘으로 분류돼 있어 SVG로 받아 쓴다. +// 색(#C2C4C8 = Atomic/Cool Neutral/90)이 에셋에 구워져 있어 토큰을 따로 추가하지 않았다. +// +// 라벨·값은 Typography 기본 태그(span)로 둔다 — onClick이 있으면 행 전체가 + ); +} + +export default SettingsRow; diff --git a/src/features/settings/components/SettingsSection.tsx b/src/features/settings/components/SettingsSection.tsx new file mode 100644 index 0000000..b74dafa --- /dev/null +++ b/src/features/settings/components/SettingsSection.tsx @@ -0,0 +1,42 @@ +import { Typography } from "@wanteddev/wds"; +import type { ReactNode } from "react"; + +interface SettingsSectionProps { + /** 섹션 라벨("계정 정보"·"서비스 정보") — 알림 설정·로그아웃 카드처럼 없는 섹션도 있다 */ + title?: string; + /** Figma 기준 행 사이 간격: 계정 정보·서비스 정보는 20px, 로그아웃은 16px */ + rowGap?: "default" | "compact"; + children: ReactNode; +} + +// Figma: 설정 화면(nodeId 3524:152322)의 흰 카드 — Account Section(3524:152329), +// Notification Settings Section(3524:152343), Service Info Section(3524:152347), +// Logout Section(3524:152359) 넷이 같은 배경·radius·padding이라 하나로 합쳤다. +// 섹션 라벨 유무와 행 간격만 다르다. +function SettingsSection({ + title, + rowGap = "default", + children, +}: SettingsSectionProps) { + return ( +
+ {title && ( + + {title} + + )} +
+ {children} +
+
+ ); +} + +export default SettingsSection; diff --git a/src/features/settings/components/WithdrawalNoticeCard.tsx b/src/features/settings/components/WithdrawalNoticeCard.tsx new file mode 100644 index 0000000..f877f14 --- /dev/null +++ b/src/features/settings/components/WithdrawalNoticeCard.tsx @@ -0,0 +1,38 @@ +import { Typography } from "@wanteddev/wds"; + +interface WithdrawalNoticeCardProps { + title: string; + description: string; +} + +// Figma: 탈퇴 확인 페이지의 Withdrawal Notice Card (메인 컴포넌트 nodeId 3491:151566 +// "Delete Accoount Card"). 네 장이 모두 같은 컴포넌트의 인스턴스고 문구만 다르다. +// 회색 카드(Background/Normal/Alternative)라 설정 화면의 흰 카드(SettingsSection)와는 +// 배경이 반대다 — 같은 카드로 묶지 않고 따로 둔다. +function WithdrawalNoticeCard({ + title, + description, +}: WithdrawalNoticeCardProps) { + return ( +
  • + + {title} + + + {description} + +
    • + ); +} + +export default WithdrawalNoticeCard; diff --git a/src/features/settings/constants/settings.ts b/src/features/settings/constants/settings.ts new file mode 100644 index 0000000..879c483 --- /dev/null +++ b/src/features/settings/constants/settings.ts @@ -0,0 +1,68 @@ +// 설정 화면들의 경로 — 홈 헤더·설정 화면이 같이 쓰므로 문자열을 흩지 않고 한곳에 둔다 +// (알림의 `NOTIFICATIONS_PATH`와 같은 방식). +export const SETTINGS_PATHS = { + phoneChange: "/settings/phone", + root: "/settings", + withdrawal: "/settings/withdraw", + withdrawalComplete: "/settings/withdraw/complete", +}; + +// Figma: 설정 화면 계정 정보(nodeId 3524:152331)·앱 버전(3524:152356) 목데이터 — 실 API 연동 +// 전까지 사용. 전화번호 변경 화면은 아직 이 상수를 고치지 않아서, 번호를 바꿔도 설정 화면 +// 값은 그대로다(연동할 때 함께 처리한다). +export const SETTINGS_ACCOUNT = { + email: "pog454@kookmin.ac.kr", + name: "이예담", + phone: "010-1234-5678", +}; + +// 로그아웃·회원 탈퇴로 계정을 떠난 뒤 나갈 곳. 둘 다 로그아웃된 상태라 로그인/온보딩으로 가야 +// 하는데 그 화면이 아직 없어서(#110에서 들어온다) 지금은 홈으로 보낸다. 인증이 붙으면 이 값을 +// "/auth"로 바꾸고, 로그인 표시를 지우는 처리를 두 호출부(SettingsScreen 로그아웃 확인 모달, +// WithdrawalCompleteScreen)에 같이 붙이면 된다 — 지금은 지울 표시 자체가 없다. +export const ACCOUNT_EXIT_PATH = "/"; + +// Figma 표기 그대로("26.0.1 · 최신버전") — 최신 여부 판정은 서버 응답을 그대로 보여주는 자리다. +export const APP_VERSION_LABEL = "26.0.1 · 최신버전"; + +// 의견 보내기·개인정보 처리방침은 화면을 따로 만들지 않고 구글폼으로 연결한다. 폼 주소가 아직 +// 없어서 빈 문자열로 두고, 값이 채워졌을 때만 새 탭으로 열도록 호출부에서 분기한다. +export const SETTINGS_EXTERNAL_LINKS = { + feedbackForm: "", + privacyPolicy: "", +}; + +interface WithdrawalNotice { + id: string; + title: string; + description: string; +} + +// Figma: 탈퇴 확인 페이지 Withdrawal Notice List(nodeId 3524:152481) 순서·문구 그대로. +// 렌더마다 배열을 다시 만들지 않도록 모듈 스코프 상수로 둔다. +export const WITHDRAWAL_NOTICES: WithdrawalNotice[] = [ + { + description: + "탈퇴 시 계정 및 회원 정보가 삭제되며, 삭제된 정보는 다시 복구할 수 없어요.", + id: "account-deletion", + title: "회원 정보가 삭제돼요", + }, + { + description: + "신청 중인 행사나 이용 중인 복지 서비스가 있다면 탈퇴 후 이용이 어려울 수 있어요.", + id: "active-services", + title: "이용 내역을 확인해 주세요", + }, + { + description: + "탈퇴 전에 작성한 열린피드백은 탈퇴 후에도 삭제되지 않고 유지돼요.", + id: "feedback-retained", + title: "작성한 열린피드백은 남아 있어요", + }, + { + description: + "탈퇴 후 재가입하더라도 기존 계정의 활동 및 이용 내역은 다시 불러올 수 없어요.", + id: "records-not-restored", + title: "다시 가입해도 이전 기록은 복구되지 않아요", + }, +];