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

[xeoxxn]

#️⃣연관된 이슈

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

구현 화면

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

Figma 설정 섹션(nodeId 1799:85920)의 화면들이 코드에 전혀 없었다. 홈 헤더에도 Figma(3147:146294)엔 설정·검색·알림 아이콘 3개가 있는데 코드엔 검색·알림 2개만 있어서 설정으로 들어갈 길 자체가 없었다.

❓ 왜 해결해야 하나요?

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

⭐ 어떻게 해결했나요?

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

• 설정 화면(3013:116135) — 계정 정보 / 알림 설정 / 서비스 정보 / 로그아웃 네 장의 흰 카드 + Copyright. 카드는 SettingsSection, 행은 SettingsRow 하나로 합쳤다(Figma의 Account Row·Navigation Row·Info Row·Action Row 넷이 높이·정렬이 같고 라벨 굵기와 색만 달라서 variant/tone으로 구분).
• 알림 설정 화면(3013:116182) — 전체 알림 + 카테고리 4종. 전체 알림은 별도 state를 두지 않고 "카테고리가 전부 켜져 있는가"로 계산해서, 켜면 전부 켜지고 끄면 전부 꺼지며 카테고리를 하나라도 끄면 자동으로 꺼진다. Figma 기본 상태(빌릴게만 on → 전체 알림 off)도 이 계산과 그대로 맞는다.
• 전화번호 변경 화면(1799:87220) — 입력하는 대로 하이픈을 넣고(Figma 입력 중 상태 1799:87230이 010-1234-5 형태), 010 + 8자리를 다 채웠을 때만 "변경하기" 버튼이 활성화된다. 누르면 Figma처럼 완료 토스트(1917:93917)를 띄운다.
• 회원 탈퇴 확인 화면(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로 옮겨 한 벌만 두도록 했다.
• 로그아웃 확인 모달(1799:87183) — 공용 ConfirmModal의 tone="negative"가 Figma와 그대로 맞아 재사용했다.
• 홈 헤더 설정 버튼 — Figma 순서대로 설정·검색·알림 3개로 맞췄다.
• 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이 막히거나 앱 안에 갇힐 수 있어 외부 링크 처리 방식은 앱 쪽과 맞춰야 한다.
• 탈퇴 완료 후 홈으로 내보낸다 — 탈퇴하면 로그아웃 상태라 로그인/온보딩으로 가야 하는데 그 화면이 아직 없다. WithdrawalCompleteScreen의 EXIT_PATH 상수 하나만 바꾸면 되도록 빼뒀다.
• 실제 탈퇴 API 호출이 없다 — 모달에서 확정하면 바로 완료 화면으로 넘어간다. 연동 때 onConfirm에 붙인다.
• 전화번호를 바꿔도 설정 화면 값은 그대로다 — 목데이터 상수라서 그렇고, 실 API 연동 때 함께 처리한다.
• 긴 값의 말줄임 처리가 없다 — 지금 목데이터보다 긴 이메일이 오면 행이 밀릴 수 있다(Figma는 whitespace-nowrap). 실 데이터 들어올 때 보기로 했다.
• 유효 전화번호 기준을 010 + 8자리로 뒀다. 011/016 같은 구 번호도 받아야 하면 조정이 필요하다.

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

• HomeScreen 헤더에 설정 버튼이 하나 늘었다.
• 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라, 뒤로가기로 탈퇴 폼이나 완료 화면에 되돌아오지 않는다.

📋 검토한 대안과 선택 이유

• 전체 알림을 독립 state + 카테고리 비활성화로 두는 방식도 만들어봤지만, Figma 기본 상태가 전체 알림 off인데 빌릴게만 on이라 그 모습을 재현할 수 없어서 "전부 켜졌는가"로 계산하는 방식으로 바꿨다.
• 설정 행 화살표는 WDS IconChevronRight로 대체하는 것도 검토했지만, search_design_system에 같은 이름(Arrow)이 없고 글리프 여백도 WDS와 달라서 Stream 전용 아이콘으로 보고 SVG를 받아 커밋했다.
• 완료 화면 껍데기까지 공용 컴포넌트로 묶는 것도 검토했지만, 행사(버튼 2개 + 신청 정보 카드)와 탈퇴(버튼 1개, 카드 없음)의 Action Area 구성이 달라 표본이 둘뿐인 지금은 체크 모션만 공유하기로 했다. 사물함 신청 완료(1737:218058)까지 만들 때 셋을 보고 묶는 편이 낫다.

💬 리뷰 포인트

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

🤖 Generated with Claude Code

[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: d9129197-3d75-437f-afe8-8ffdef31f981

• Autopilot · 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.}