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

[xeoxxn]

#️⃣연관된 이슈

• Closes 설정 화면과 알림 설정·전화번호 변경 화면 구현 #96

구현 화면

🎯 해결하려는 문제가 무엇인가요?

Figma 설정 섹션(nodeId 3524:152321)의 화면들이 코드에 전혀 없었다. 홈 헤더의 설정 아이콘(#98이 Figma 3147:146294대로 그려 둔 것)도 onClick이 비어 있어서, 눌러도 아무 일이 없었다.

❓ 왜 해결해야 하나요?

계정 정보 확인, 알림 on/off, 전화번호 변경, 회원 탈퇴는 모두 설정 화면에서만 할 수 있는 동작이라 화면이 없으면 접근할 방법이 없다.

⭐ 어떻게 해결했나요?

커밋을 화면 단위로 나눴고, 각 커밋이 독립적으로 타입체크를 통과한다.

• 설정 화면(3524:152322) — 계정 정보 / 알림 설정 / 서비스 정보 / 로그아웃 네 장의 흰 카드 + Copyright. 카드는 SettingsSection, 행은 SettingsRow 하나로 합쳤다(Figma의 Account Row·Navigation Row·Info Row·Action Row 넷이 높이·정렬이 같고 라벨 굵기와 색만 달라서 variant/tone으로 구분).
• 알림 설정 화면은 새로 만들지 않았다 — 처음엔 Figma 설정 섹션의 알림 설정 프레임(3524:152367)을 보고 /settings/notifications에 따로 만들었는데, 그 사이 머지된 #108이 알림 섹션의 같은 프레임(3628:110837)을 보고 이미 만들어 둔 화면이었다. Figma가 설정·알림 두 섹션에 같은 화면을 복제해 둔 것(노드 구조·좌표·문구가 완전히 같다)이라 복제본을 지우고, 설정의 "알림 설정" 행이 #108의 /notifications/settings로 들어가게 했다. 카테고리 문구·초기값도 features/notifications/constants/notifications.ts가 단일 출처다.
• 전화번호 변경 화면(3524:152450) — 입력하는 대로 하이픈을 넣고(Figma 입력 중 상태 3524:152465가 010-1234-5 형태), 010 + 8자리를 다 채웠을 때만 "변경하기" 버튼이 활성화된다. 누르면 Figma처럼 완료 토스트(3524:152457)를 띄운다.
• 회원 탈퇴 확인 화면(3524:152473) — 안내 카드 네 장이 모두 같은 Figma 컴포넌트(Delete Accoount Card 3491:151566)의 인스턴스라 WithdrawalNoticeCard 하나로 묶고 문구는 상수로 분리했다. 동의 체크박스를 켜야 "탈퇴하기"가 활성화되고(#F4F4F5 → Status/Negative #FF4242), 누르면 확인 모달(3524:152517)이 뜬다.
• 회원 탈퇴 완료 화면(3524:152505) — 체크 모션 + 제목/부제 + "확인" 버튼.
• 완료 체크 모션 공용화 — 행사 신청 완료·회원 탈퇴 완료·사물함 신청 완료가 모두 같은 Figma 메인 컴포넌트(Circle Check Motion 1712:192849)의 인스턴스다. get_motion_context로 떠보니 타임라인 길이·반복 설정만 화면마다 다르고 키프레임 값(원 450ms back-out, 체크 550ms path trim)은 동일해서, Lottie json과 재생 컴포넌트를 각각 assets/lottie/common/·components/ui/CompleteCheck.tsx로 옮겨 한 벌만 두도록 했다.
• 로그아웃 확인 모달(3524:152426) — 공용 ConfirmModal의 tone="negative"가 Figma와 그대로 맞아 재사용했다. 확정하면 ACCOUNT_EXIT_PATH로 내보낸다(아래 한계 참고).
• 홈 헤더 설정 버튼 — main에 이미 있던 버튼의 빈 onClick을 채웠다. 알림 버튼과 같이 viewTransition으로 화면을 쌓는다.
• WDS 매핑 문서화 — 새로 확정한 Switch/TextField/IconSetting 매핑과, 설정 행 화살표가 WDS가 아니라는 근거를 wds-component-usage.md에 추가했다.

/figma-check로 교차검증해서 카드 padding·radius·행 간격·타이포·스위치 크기(39×24)·버튼 높이(56px)·비활성 색(#F4F4F5)까지 실측 대조했다. 탈퇴 화면도 안내 카드(94×335)·카드 간격 8px·헤더↔제목 12px·제목↔목록 16px, 완료 화면도 헤더↔체크 104px·체크 72×72·체크↔제목 8px·제목↔부제 4px까지 맞췄다.

🧩 이 PR의 한계 & 트레이드오프

• 의견 보내기·개인정보 처리방침은 화면을 만들지 않고 구글폼으로 연결할 예정이라, SETTINGS_EXTERNAL_LINKS 상수에 빈 URL만 두고 값이 있을 때만 새 탭으로 열도록 했다. 주소를 받으면 상수만 채우면 된다. 다만 앱 WebView에서는 window.open이 막히거나 앱 안에 갇힐 수 있어 외부 링크 처리 방식은 앱 쪽과 맞춰야 한다.
• 로그아웃·탈퇴 후 홈으로 내보낸다 — 둘 다 로그아웃 상태라 로그인/온보딩으로 가야 하는데 그 화면이 스플래시·로그인·온보딩 화면 구현 #110(PR [Feat/#110] 스플래시·로그인·온보딩 화면 구현 #112)에 있고 아직 안 들어왔다. 나갈 곳을 ACCOUNT_EXIT_PATH 상수 하나로 모아뒀다. #112가 머지되면 이 값을 /auth로 바꾸고 세션 표시(stream:auth:logged-in)를 지우는 처리를 호출부 두 곳에 붙여야 한다 — 안 그러면 AuthEntryGate를 그냥 통과해서 탈퇴·로그아웃 뒤에도 홈이 그대로 보인다. #112에 코멘트로 공유했다(지금 entities/auth/session.ts에 표시를 지우는 함수 자체가 없다).
• 실제 탈퇴 API 호출이 없다 — 모달에서 확정하면 바로 완료 화면으로 넘어간다. 연동 때 onConfirm에 붙인다.
• 전화번호를 바꿔도 설정 화면 값은 그대로다 — 목데이터 상수라서 그렇고, 실 API 연동 때 함께 처리한다.
• 긴 값의 말줄임 처리가 없다 — 지금 목데이터보다 긴 이메일이 오면 행이 밀릴 수 있다(Figma는 whitespace-nowrap). 실 데이터 들어올 때 보기로 했다.
• 유효 전화번호 기준을 010 + 8자리로 뒀다. 011/016 같은 구 번호도 받아야 하면 조정이 필요하다. #112의 온보딩 연락처 입력(formatPhoneNumber)과 하이픈 로직이 같고 통과 기준만 다르다(저쪽은 숫자 11자리면 통과). 나중에 머지되는 쪽이 공통 모듈로 빼기로 #112에서 이야기 중이다.

⛓️ 기존 기능에 미치는 영향

• HomeScreen 헤더의 설정 버튼이 이제 동작한다(마크업은 그대로, onClick만 추가).
• EventsApplicationCompleteScreen이 EventsCompleteCheck 대신 공용 CompleteCheck를 쓴다. import 경로만 바뀌었고 재생 설정(loop={false}, 모션 줄이기 처리)은 그대로다 — 72×72 SVG 렌더링과 콘솔 에러 0을 실제로 확인했다.
• ConfirmModal 설명에 whitespace-pre-line을 붙여 \n을 살렸다. 기존 사용처 3곳(BililgeReturnSection·EventsApplicationScreen·FeedbacksNewScreen)은 모두 한 줄 문구라 렌더링 변화가 없다.

🔀 Edge Case & 실패 시나리오

• 전화번호 입력에 문자를 섞어 쳐도 숫자만 걸러서 포맷한다(실측: abc010가1234나5678 → 010-1234-5678).
• 11자리를 다 안 채우면 버튼이 비활성이라 미완성 번호로 저장되지 않는다.
• 구글폼 URL이 비어 있으면 행을 눌러도 아무 일도 일어나지 않는다(빈 창이 열리지 않는다).
• 동의 체크를 풀면 "탈퇴하기"가 다시 비활성으로 돌아간다.
• 탈퇴 확정과 완료 화면 닫기는 모두 replace라, 뒤로가기로 탈퇴 폼이나 완료 화면에 되돌아오지 않는다.

📋 검토한 대안과 선택 이유

• 알림 설정을 설정 아래(/settings/notifications)에 그대로 두는 것도 검토했지만, 그러면 같은 화면이 두 경로로 존재하고 카테고리 문구·초기값도 두 벌이 된다. Figma가 두 섹션에 복제해 뒀을 뿐 화면은 하나이므로 [Feat/#106] 알림 화면 구현 #108 쪽 한 벌로 합치고 진입점만 둘로 뒀다.
• 설정 행 화살표는 WDS IconChevronRight로 대체하는 것도 검토했지만, search_design_system에 같은 이름(Arrow)이 없고 글리프 여백도 WDS와 달라서 Stream 전용 아이콘으로 보고 SVG를 받아 커밋했다.
• 완료 화면 껍데기까지 공용 컴포넌트로 묶는 것도 검토했지만, 행사(버튼 2개 + 신청 정보 카드)와 탈퇴(버튼 1개, 카드 없음)의 Action Area 구성이 달라 표본이 둘뿐인 지금은 체크 모션만 공유하기로 했다. 사물함 신청 완료(1737:218058)까지 만들 때 셋을 보고 묶는 편이 낫다.

🔄 리뷰 반영 (머지 충돌 해결 + 중복 정리)

올린 뒤 main이 많이 나가서 다시 맞췄다. 커밋 3개로 나뉘어 있다.

• Merge branch 'main' — 충돌 2건(HomeScreen.tsx, wds-component-usage.md) 해결
• refactor: 알림 설정 화면을 알림 기능 쪽 한 벌로 통합 — #108과 중복된 복제본 제거
• refactor: 설정 화면 경로·이탈 경로를 상수로 빼고 갱신된 Figma 노드 ID 반영 — SETTINGS_PATHS·ACCOUNT_EXIT_PATH 분리, 아무 동작도 없던 로그아웃 확정 처리, 화면 쌓는 이동의 viewTransition, 쓰이지 않던 SettingsRow의 arrow prop 제거

Figma 노드 ID가 통째로 갈렸다. 설정 섹션이 재작업되면서 처음 참조했던 노드(1799:85920 섹션, 설정 3013:116135, 알림 설정 3013:116182, 전화번호 변경 1799:87220, 로그아웃 모달 1799:87183)가 파일에서 삭제돼 조회되지 않는다. 탈퇴 계열(3524:152473·3524:152505·3524:152517)만 그대로다. 현행 ID로 전부 바꿨고 이 사실을 wds-component-usage.md에 남겼다. 디자인 내용 자체는 거의 그대로여서 /figma-check 실측은 일치했다 — 카드 높이 164/52/164/88·padding 16·radius 12·카드 간격 8·행 간격 20/16·입력 박스 48px·탈퇴 카드 335×94·간격 8까지 Figma와 같다.

💬 리뷰 포인트

• [c] Figma에서 **탈퇴 완료 화면의 체크 모션만 loop**로 걸려 있습니다(행사·사물함은 once). 완료 체크가 무한 반복되는 건 다른 화면과 어긋나 프로토타입용 설정이 남은 것으로 보고 1회 재생으로 맞췄습니다 — 의도된 것이면 알려주세요.
• [a] 뒤로가기 헤더 10줄이 이 PR의 화면들 포함 10개 파일에 중복되어 있습니다. useBackScreenHeader(title) 같은 공용 훅으로 뺄 만한데, 기존 화면까지 건드리는 리팩터라 이번 PR엔 넣지 않았습니다 — 별도 이슈로 뺄까요?

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ef722f3a-d417-4cc4-beb9-8b1d82fd6ae9

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[tnals0924]

리뷰 반영해주세요!

[tnals0924]

[c] 계정 정보(이름·이메일·전화번호)는 서버에서 받아올 데이터라 coding-style.md의 데이터 로딩 규칙대로 entities/로 옮기면 좋을 것 같습니다. 다른 기능들(archives·events·notices·notifications 등)은 모두 entities/<도메인>/ + mockupApi + use() 구조여서 설정만 방식이 달라지는 것 같아요.

용어 사전 기준으로는 users 도메인이라 아래처럼 두면 어떨까요? (파일·함수 이름은 예시입니다)

entities/users/
  usersApi.ts    // fetchMyAccount()
  usersMock.ts
  types.ts

설정 화면에서는 계정 정보 카드만 <Suspense>로 감싸고, components/의 데이터 컴포넌트에서 use()로 읽으면 될 것 같습니다. 이렇게 해두면 "전화번호를 바꿔도 설정 화면 값은 그대로" 문제도 나중에 API 함수 한 곳에서 해결할 수 있을 것 같아요.

APP_VERSION_LABEL(26번째 줄)은 "26.0.1 · 최신버전"처럼 데이터(버전, 최신 여부)와 화면 문구가 한 문자열에 들어 있습니다. { version, isLatest }로 받고 문구 조합은 화면에서 하는 편이 나을 것 같습니다.

혹시 홈(homeMock.ts)처럼 일부러 feature 상수로 두신 거라면 이유 알려주시면 감사하겠습니다!

[tnals0924]

[c] formatPhone과 PHONE_PATTERN은 React와 무관한 순수 로직이라 화면 파일 밖으로 빼면 좋을 것 같습니다. 적어주신 대로 #112의 formatPhoneNumber와 하이픈 로직이 같아서, 지금 공용 위치(lib/phone.ts 등)에 먼저 빼두면 #112 쪽은 import만 하면 될 것 같아요. "나중에 머지되는 쪽이 정리"하는 방식보다 중복이 생길 틈이 없을 것 같습니다.

// lib/phone.ts
export const PHONE_NUMBER_MAX_LENGTH = 13; // 010-1234-5678
export function formatPhoneNumber(value: string): string { ... }
export function isValidPhoneNumber(value: string): boolean { ... }

maxLength={13}(85번째 줄)도 포맷 길이에 묶인 값이라 같이 옮기면 의미가 잘 드러날 것 같습니다. 통과 기준(010+8자리 vs 숫자 11자리)은 이번에 #112와 맞춰서 하나로 정하면 좋을 것 같아요.

[xeoxxn]

여기서 구현 후에 #112에 리뷰 코멘트 작성했습니다!

[tnals0924]

[c] 로그아웃 확정과 탈퇴 완료(WithdrawalCompleteScreen.tsx:13)는 같은 "계정에서 나가기" 동작인데 각 화면에 따로 들어가 있습니다. 훅 하나로 묶어두면 어떨까요? ACCOUNT_EXIT_PATH 주석에 "#112 머지 후 두 호출부에 세션 정리를 같이 붙여야 한다"고 적혀 있는데, 지금 묶어두면 나중엔 훅 안쪽만 고치면 돼서 한쪽을 빠뜨릴 걱정이 없을 것 같습니다.

// features/settings/hooks/useAccountExit.ts
export function useAccountExit() {
  const navigate = useNavigate();
  // #112가 들어오면 세션 표시 정리를 여기에만 붙인다
  return () => navigate(ACCOUNT_EXIT_PATH, { replace: true });
}

두 화면이 같이 쓰는 동작을 훅으로 묶은 useLockersApplySubmit과 비슷한 방식입니다!

[tnals0924]

[c] URL이 빈 문자열이어도 onClick이 항상 넘어가서, 지금은 "의견 보내기"와 "개인정보 처리방침"이 화살표 달린 버튼으로 보이는데 눌러도 반응이 없는 것 같습니다. 스크린리더도 버튼으로 읽어줘서 사용자 입장에서는 고장 난 것처럼 느껴질 수 있을 것 같아요.

링크가 있는지에 따른 분기를 호출부로 올리면, SettingsRow가 화살표 없는 행으로 그려줄 것 같습니다. 링크가 정해질 때까지 행을 숨기는 것도 방법일 것 같고요.

const { feedbackForm } = SETTINGS_EXTERNAL_LINKS;

<SettingsRow
  label="의견 보내기"
  onClick={feedbackForm ? () => openExternalLink(feedbackForm) : undefined}
/>

PR 한계에 적어주신 WebView의 window.open 문제를 생각하면 openExternalLink 자체도 화면 밖(lib/bridge/ 근처 등)에 두는 게 좋을 것 같습니다. 이미 isInAppShell()과 postBridgeMessage가 있어서, 앱과 방식이 정해지면 화면은 그대로 두고 그 함수만 바꾸면 될 것 같아요.

[xeoxxn]

뭔가 화살표를 지우는 방향보다, 화살표를 유지하되 색을 다른 부분과 다르게 연하게 바꾸는 게 더 직관적이고 한눈에 보일 것 같아서, 만약 링크가 연결되지 않았을 때에는 위와 같이 보이도록 구현했습니다.

externalLink를 화면 밖에 두자는 부분에는 저도 동의해서, 이 부분은 src/lib/openExternalLink.ts로 분리했습니다!

[tnals0924]

[a] PR 리뷰 포인트 [a](뒤로가기 헤더 중복)에 대한 답변입니다.

뒤로가기 헤더 공용 훅은 별도 이슈로 빼는 데 동의합니다! 다만 이슈 범위에 딥링크 대비 처리도 같이 넣으면 좋을 것 같아요. 지금 history.state.idx로 뒤로 갈 곳이 없는지 보고 다른 경로로 보내는 코드가 5개 화면(Search·FeedbacksNew·EventsApplication·Notifications·NotificationsSettings)에 복사돼 있어서, 헤더 마크업보다 이쪽 중복이 더 큰 것 같습니다.

useBackNavigation(fallbackPath) // idx > 0이면 navigate(-1), 아니면 fallbackPath로 replace

그리고 이번 설정 화면 3개(SettingsScreen·PhoneChangeScreen·WithdrawalScreen)는 navigate(-1)만 있어서, 주소로 바로 들어오면 뒤로가기가 동작하지 않을 것 같습니다. 설정이 앱에서 바로 열릴 일이 없다면 지금은 그대로 둬도 될 것 같은데, 어떻게 보시는지 궁금합니다!

[tnals0924]

[c] settings가 terminology.md 용어 사전에 없는 것 같아서 확인 부탁드립니다! coding-style.md에 "사전에 없는 새 도메인이면 먼저 그 문서에 추가한 뒤 코드에 반영한다"는 규칙이 있어서요. 계정 정보, 전화번호 변경, 탈퇴는 백엔드에서 users 쪽 엔드포인트일 가능성이 커 보이는데, 라우트와 폴더를 settings로 둘지 백엔드와 한번 맞춰보면 좋을 것 같습니다.

사소하지만 경로는 /withdraw(동사), 컴포넌트는 Withdrawal*(명사)로 형태가 달라서 하나로 맞추면 찾기 편할 것 같아요.

[tnals0924]

[a] variant="account"일 때는 tone이 무시되는데, 타입상으로는 <SettingsRow variant="account" tone="negative" />도 통과됩니다. variant별로 props를 나누면 잘못된 조합을 컴파일 단계에서 막을 수 있을 것 같아요.

interface SettingsRowBaseProps {
  label: string;
  value?: string;
  onClick?: () => void;
}

interface SettingsAccountRowProps extends SettingsRowBaseProps {
  variant: "account";
}

interface SettingsMenuRowProps extends SettingsRowBaseProps {
  variant?: "menu";
  tone?: "normal" | "alternative" | "negative";
}

type SettingsRowProps = SettingsAccountRowProps | SettingsMenuRowProps;

[tnals0924]

[a] 로그아웃 모달은 setLogoutOpen(false)로 닫은 뒤 이동하는데(SettingsScreen.tsx:138), 탈퇴 모달은 닫지 않고 바로 이동합니다. 동작 차이는 거의 없겠지만 두 곳 처리를 맞춰두면 읽기 편할 것 같습니다.

[xeoxxn]

확인 완료 후 수정했습니다!