---
title: "🔐 260519-11:55_C5-로그아웃버튼계정설정"
notion_id: "36522962086881bc915fe512d190111a"
notion_url: "https://app.notion.com/p/36522962086881bc915fe512d190111a"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-19"
priority: "Medium"
purpose: "로그아웃 버튼 실기능 연결 및 계정설정 표시이름 저장/불러오기 구현 (C-5)"
---

- 날짜: 2026-05-19 11:55 KST
- 브랜치: main
- 커밋: `1e46ab0 feat(account): 계정설정 표시이름 저장·로그아웃 실기능 연결 (C-5)`
---
## 사용자 작업 지시 (raw)
```javascript
※ 주의: 동일 작업을 수행 중인 다른 에이전트가 있을 수 있음.
작업 시작 전 반드시 git status 확인 후 충돌 여부 점검할 것.
작업 전 git pull로 최신 원격 커밋 기준 동기화할 것.
충돌 또는 예상치 못한 변경사항 감지 시 임의로 git reset 하지 말고 작업 중단 후 보고할 것.

## 작업 목표
로그아웃 버튼 실기능 연결 + 계정설정 UI 실제 저장/불러오기 구현 (C-5)

## 수정 파일
- src/pages/Settings.tsx (메인)
- src/hooks/useAuth.ts (로그아웃 로직 확인 및 보완)
- src/lib/auth.ts (signOut 함수 확인 및 보완)
- src/components/Layout.tsx (헤더 로그아웃 버튼 위치 확인)

## 구현 내용
1. 로그아웃 버튼
   - 현재 로그아웃 버튼 존재 여부 확인 (Settings.tsx / Layout.tsx)
   - 없으면 Settings.tsx 하단 또는 Layout.tsx 헤더에 추가
   - 클릭 시 supabase.auth.signOut() 실행 → LoginPage로 리다이렉트
   - 로그아웃 중 로딩 상태 표시

2. 계정설정 저장/불러오기
   - Settings.tsx에서 현재 UI만 있고 저장 기능 없는 항목 파악
   - Supabase auth.updateUser() 또는 app_settings 테이블 활용하여 실저장 연결
   - 페이지 진입 시 저장된 값 불러오기 (초기값 세팅)
   - 저장 성공/실패 토스트 피드백 추가

3. 저장 대상 항목 (Settings.tsx 실제 코드 확인 후 적용)
   - 닉네임 / 표시 이름 등 사용자 정보
   - 단위 설정 (km/mi 등) 이 있다면 포함
   - AI 브리프 지침 텍스트 (이미 저장 연결되어 있으면 스킵)

## 주의사항
- 로그인 로직(signInMaster, signInWithGoogle) 건드리지 말 것
- useAuth.ts의 기존 인증 상태 관리 흐름 유지할 것
- MasterLoginForm.tsx 건드리지 말 것
- 데스크탑 최적 컨테이너 우선 설계 후 모바일 반응형 적용. 모바일 퍼스트 설계 금지.

## 완료 기준
- [ ] 로그아웃 버튼 클릭 시 실제 세션 종료 및 LoginPage 이동 확인
- [ ] 계정설정 저장 버튼 클릭 시 Supabase에 실제 저장됨
- [ ] 페이지 재진입 시 저장된 값이 불러와짐
- [ ] 저장 성공/실패 피드백 동작 확인
- [ ] npm run build 에러 없음
- [ ] main 브랜치 커밋·푸시 완료

## git 스테이징 원칙
git add <수정파일 경로> 형식으로만 스테이징할 것.
git add . 또는 git add -A 절대 금지.
```
---
## 진행 요약
### 1) 사전 점검
- `git status` → clean / `git pull` → Already up to date
- 충돌 가능성 없음 확인 후 작업 진입
### 2) 코드 분석 결과
- **이미 존재하는 자산**
	- `src/lib/auth.ts` 의 `signOut()` 함수: `localStorage` 마스터 키 제거 + `MASTER_EVENT` 디스패치 + `supabase.auth.signOut()` 호출까지 모두 구현됨
	- `src/hooks/useAuth.ts`: Supabase 세션 + 마스터 로컬 세션을 통합 구독, `signOut()` 호출 시 자동으로 `isLoggedIn=false` 전환
	- `src/App.tsx`: `isLoggedIn === false` 이면 자동으로 `<LoginPage />` 렌더링 → 별도 리다이렉트 불필요
- **수정 필요 지점**
	- `src/pages/Settings.tsx` 의 `detailAccount` 블록(1538~1564 라인)이 모두 더미 disabled 상태
	- 비밀번호 변경 UI는 마스터(로컬) / Gmail OAuth 둘 다 의미 없음 → 제거
	- 이메일·표시이름 필드만 실기능으로 살리고 로그아웃 실기능 연결
- **AI 브리프 지침**: 이미 `app_settings.ai_brief_instructions` 키로 저장 연결 완료 → 스킵
- **단위 설정(km/mi)**: 현재 UI에 없음 → 스킵
### 3) 구현 변경 — `src/pages/Settings.tsx`
- import 추가: `signOut`, `IS_DEMO`
- 상태 추가: `displayName`, `displayNameInitial`, `accountSaving`, `signingOut`
- `fetchAll()` 에서 `app_settings.account_display_name` 키 로드 → 초기값 세팅
- `detailAccount` 블록을 완전히 재작성:
	- 이메일: `user?.email` 읽기 전용 표시
	- 표시 이름: 입력값 변경 시 더티 감지, 변경 없을 땐 저장 버튼 비활성
	- 표시 이름 저장: `app_settings` 테이블에 upsert + 완료 토스트(NotifyDialog)
	- 로그아웃: ConfirmDialog 재확인 후 `signOut()` 호출 → useAuth가 상태 변경 자동 감지
	- 로그아웃 중 로딩 텍스트 표시 (`로그아웃 중...`)
	- IS_DEMO 환경에서는 로그아웃 버튼 비활성 + 안내 메시지
### 4) 검증
- `npm run build` 성공 (tsc + vite build, 1.96s, 에러 0)
- 사전 코드 점검: useAuth → App.tsx 라우팅 흐름상 signOut() 호출만으로 LoginPage 자동 전환 보장
### 5) 커밋·푸시
- `git add src/pages/Settings.tsx` (개별 파일 스테이징, `-A` 사용 안 함)
- 커밋 메시지: `feat(account): 계정설정 표시이름 저장·로그아웃 실기능 연결 (C-5)`
- `git push origin main` → 성공 (`cf2f713..1e46ab0  main -> main`)
---
## 변경 파일
<table header-row="true">
<tr>
<td>파일</td>
<td>변경</td>
</tr>
<tr>
<td>`src/pages/Settings.tsx`</td>
<td>+64 / -15</td>
</tr>
</table>
---
## 완료 기준 체크
- [x] 로그아웃 버튼 클릭 시 실제 세션 종료 (signOut + 로컬 마스터 키 제거) — useAuth 자동 감지 → App.tsx 가 LoginPage 렌더
- [x] 계정설정 저장 버튼 클릭 시 Supabase `app_settings.account_display_name` 키로 upsert
- [x] 페이지 재진입 시 `fetchAll()` 에서 저장값 로드, 초기값 세팅
- [x] 저장 성공/실패 NotifyDialog 피드백 동작
- [x] `npm run build` 에러 없음
- [x] main 브랜치 커밋 + 푸시 완료
## 후속 메모
- IS_DEMO 환경에서 로그아웃 버튼은 비활성 처리 — App.tsx 가 인증 우회되므로 UX 일관성 확보
- 비밀번호 변경 UI는 제거 (마스터 = 로컬 세션 / OAuth = 외부 제공자 관리)
- 표시 이름은 `user_metadata` 가 아닌 `app_settings` 패턴 채택 — 기존 fitness_projects · saved_routines · ai_brief_instructions 와 동일 저장 패턴 유지