---
title: "📋 작업보고 — 계정 설정 UI 정리 (계정삭제 최하단·헤더/버튼 통일·구분선)"
category: "report"
parent: "Claude Code 작업보고"
updated: "2026-07-02"
priority: "Medium"
purpose: "설정 > 계정설정 화면의 배치·구분선·버튼 스타일을 사장님 육안 피드백에 따라 정리한 보고. 여러 차례 반복 수정을 거친 최종 배치 기록. 약관 테두리 제거·계정삭제 위치·데이터관리 헤더/버튼 통일·이중 구분선 정리를 포함."
read_when: ["계정 설정 배치","계정삭제 위치","약관 동의 이력 테두리","데이터관리 헤더 통일","구분선 정리","acc-danger-card","acc-card-head"]
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260702_204704"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 대상 `phase1-release` → `main`·`demo`. 사장님이 스크린샷 마킹으로 위치를 직접 지정한 반복 보정. 최종 배치 기준 기록.

## 1. 약관 동의 이력 테두리 제거
- `ConsentHistory`(약관 동의 이력) 카드만 기본 `.card`(테두리 有)를 쓰고 다른 설정 카드는 `.card--settings-detail`(테두리 無)이라 혼자 튐 → `card--settings-detail` 추가로 일관화.

## 2. 계정삭제 버튼 위치 (최종)
- 초기: 계정 카드 안 로그아웃과 같은 행 → 여러 수정.
- **최종(사장님 확정)**: "패널 하단"=화면 전체 최하단 의미. 계정삭제를 계정 카드에서 빼서 **약관 동의 이력(ConsentHistory) 아래 별도 섹션**(`.acc-danger-card`)으로 분리. 데스크탑 우측·모바일 full-width·danger. 게스트 제외.
- ※ CC가 "패널 하단"을 "계정 섹션 하단"으로 착각했던 것을 사장님 지적으로 교정.

## 3. 데이터 관리 헤더·버튼 통일
- **헤더**: `.set-section-title` → `.acc-card-head`(계정·약관 헤더와 동일 아이콘+크기+볼드, database 아이콘) 통일.
- **버튼**: 우측 정렬(`.set-display-head` flex space-between) + `btn--sm`(주변 버튼과 크기/폰트 통일) + accent 아웃라인(다크 라임/라이트 티일).

## 4. 구분선 정리
- 실측: 로그인수단(마지막 acc-row)의 border-bottom + acc-logout-row의 border-top이 인접해 **이중선**(사장님 빨강 표시).
- 조치: `acc-logout-row` border-top 제거 + `.acc-card .acc-row:last-of-type` border-bottom 제거 → 로그아웃을 계정 정보에 자연 연결(margin 간격만). 데이터관리 앞 `set-group-divider`(섹션 구분·사장님 노랑 표시)는 **유지**(사장님 ①유지 확정).

## 5. 배포·검증
- `main` fd45ced(dallog.kr) · `demo` dea15c6 · `phase1-release` f8765c7. 빌드·가드 GREEN.
- Playwright 실측(계정삭제 카드가 약관 아래 렌더·데이터관리 버튼 우측·이중선 해소).
- ※ 라이브 반영 지연은 브라우저/CF 엣지 캐시로 실측 규명(번들 해시 교체 확인). 강력 새로고침으로 반영.

## 6. 교훈
- 스크린샷을 CC 단독으로 보고 판단하지 말 것 → 파일 경로 + 로컬 dev 주소(`http://localhost:5175`)로 사장님 직접 확인 우선.
- "추정 금지, 실측": 라이브 미반영을 추정하지 말고 JS 번들 grep으로 배포 실체 확인.

## 7. 파일
`src/pages/Settings.tsx`(detailAccount·deleteAccountSection·detailFor), `src/index.css`(.acc-danger-card·.dbk-*·.acc-logout-row·구분선), `src/components/settings/ConsentHistory.tsx`.