---
title: "작업보고 — 'AI에게 보내기' 코랄 통일 + 충전금 버튼 흰배경 버그 수정 + docs 44파일 보존정리 (PR#88)"
category: "workreport"
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
priority: "Medium"
purpose: "PR#88(머지 56851f4) 한 건에 함께 담긴 두 작업을 풀 깊이로 복원·기록한다. ⓐ 화면별로 코랄/라임이 혼재하던 'AI에게 보내기' 전송 버튼 4곳(헤더·사이드바·설정·데모)을 PATCH 260612 토큰 매핑 기준으로 코랄(--coral)로 통일하고(.btn-coral 신규), 미선택 충전금 버튼이 .btn 기본 클래스 탓에 브라우저 기본 흰배경으로 떨어지던 버그를 어두운 표면색(--bg3) 명시로 해소했다. ⓑ zz.storage 백업이 끝난 회의록·LLM 의견·시장성 평가·플레이북·archive 목업과 docs/sql 구식 가이드·시드·gen 스크립트 등 총 44파일을 D:/dallog/zz.storage(other)/260612 로 보존 이동 후 레포에서 제거했다(golden_set·legal·sessions·go_work 활성 스펙은 미접촉)."
read_when: ["UI","디자인시스템","코랄","AI에게보내기","docs정리","최신상태복구"]
updated: "2026-06-12"
work_timestamp: "20260612_125400"
context: "달록본레포CC (D:\\dallog\\dallog_git) — 코랄 UI 통일·docs 정리(PR#88) 작업보고"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
---

# 작업보고 — 'AI에게 보내기' 코랄 통일 + 충전금 버튼 흰배경 버그 수정 + docs 44파일 보존정리 (PR#88)

> **이 문서가 무엇인가 (비개발자용 한 줄 설명)**
> 달록 화면 여기저기에서 색이 제각각이던 'AI에게 보내기' 버튼을 모두 같은 주황색(코랄)으로 맞추고, 코치 충전 화면에서 안 고른 금액 버튼이 갑자기 하얗게 보이던 자잘한 버그를 고쳤다(작업 ⓐ). 그리고 이미 외부 폴더에 백업해 둔 옛 회의록·의견·목업·구식 가이드 파일 44개를 코드 창고(레포)에서 깔끔히 비워 정리했다(작업 ⓑ). 두 일이 한 번의 합치기(PR#88)에 같이 들어가 있어, 아래에서 각각 따로 자세히 적는다.

---

## 0. 작업 개요

| 항목 | 내용 |
|---|---|
| PR | **#88** — 머지 커밋 `56851f4` (2026-06-12 13:26 KST) |
| 머지 대상 | `refactor/ui-buttons-coral` → `main` |
| 포함 커밋 | `2b4518e`(코랄 UI), `e32b998`(docs 정리 1차), `fd9036d`(docs/sql 정리 2차) |
| 작업 주체 | 달록 본레포CC (`D:\dallog\dallog_git`) |
| 성격 | ⓐ UI 디자인 토큰 정합화 + 회귀 버그 수정 / ⓑ 레포 위생(housekeeping) |
| 코드 변경 | `src/components/demo/AISendButton.tsx`, `src/index.css` (2파일) |
| 문서 제거 | 총 **44파일** (e32b998 40파일 + fd9036d 4파일, 전량 보존 이동 후 제거) |

이 PR은 한 머지에 성격이 다른 두 작업이 묶여 있다. 아래 **작업 ⓐ**(코랄 UI)와 **작업 ⓑ**(docs 정리)를 각각 독립 섹션으로 풀 깊이 서술한다.

---

# 작업 ⓐ — 'AI에게 보내기' 코랄 통일 + 충전금 버튼 흰배경 버그 수정

커밋 `2b4518e` (2026-06-12 12:54:32 KST) · 변경 `AISendButton.tsx`(+4/-2), `index.css`(+17/-9)

## ⓐ-1. 무엇을 했나

1. **'AI에게 보내기' 전송 버튼 4곳을 코랄(--coral, 주황 강조색)로 통일** — 헤더·사이드바·설정 화면·데모 컴포넌트.
2. **신규 공통 클래스 `.btn-coral` 추가** — 데모 버튼이 사용하던 `.btn-primary`를 코랄 전용 보조 액션 클래스로 교체.
3. **미선택 충전금 버튼 흰배경 버그 수정** — 코치 구독·충전 화면의 금액 선택 버튼이 미선택 상태에서 흰색으로 보이던 문제를 어두운 표면색(--bg3) 명시로 해소.

## ⓐ-2. 왜 했나 (배경)

화면마다 'AI에게 보내기' 버튼 색이 달랐다. 일부는 코랄(`#d97757`), 일부는 `--accent`(파랑 계열 강조색), 데모는 공통 `.btn-primary`를 쓰고 있었다. 같은 행동(클로드/AI로 데이터 보내기)을 하는 버튼인데 화면별로 색이 혼재해 디자인 일관성이 깨져 있었다.

`[[reference_design_system]]`(달록 디자인 시스템 진본)과 `[[feedback_mockup_first]]`(시각 변경은 토큰 우선) 맥락에서, 동일 액션은 동일 색으로 통일하는 것이 원칙이다. 본 작업은 그 정합화의 일환이다.

## ⓐ-3. 핵심 판단근거 — PATCH 260612(기존 토큰 매핑) 기준

> **새 `--dl-*` 토큰을 신설하지 않는다.** 기존 `--coral`(주황 강조색)·`--bg3`(어두운 표면색) 토큰에 **매핑만** 한다.

토큰(=색·간격 등 디자인 변수)을 새로 만들면 디자인 시스템이 비대해지고 `/studio`(마스터 전용 토큰 편집 툴) 관리 부담이 늘어난다. 이미 존재하는 `--coral`로 충분하므로, 하드코딩된 `#d97757`·잘못 쓰인 `--accent`를 모두 `--coral`로 바꾸는 **매핑 방식**을 택했다. 모서리 `2px`(border-radius)·`--accent` 토큰 값 자체는 변경하지 않았다(사이드바 버튼의 배경만 코랄로 교체, --accent 정의는 불변).

## ⓐ-4. 변경 상세 — 코랄 통일 4곳

| # | 위치 | 변경 전 | 변경 후 |
|---|---|---|---|
| 1 | **데모** `AISendButton.tsx` | `className="btn btn-primary"` | `className="btn btn-coral"` |
| 2 | **헤더** 전송 버튼 (`index.css` ~1266줄) | `background:#d97757; border:1px solid #d97757` (하드코딩) | `background:var(--coral); border:1px solid var(--coral)` |
| 3 | **사이드바** `.lay-sb-ai` (~1369줄) | `background:var(--accent); color:#141720` | `background:var(--coral); color:#0a0a0a` |
| 4 | **설정** `.set-ai-btn` (~4248줄) | `background:var(--accent)` | `background:var(--coral)` |

신규 클래스 정의 (`index.css` ~333줄)

```css
/* coral — 'AI에게 보내기' 전용 보조 액션 (UI 리팩토링 PATCH 260612: 화면별 코랄/라임 혼재 → 코랄 통일) */
.btn-coral { background: var(--coral); color: #0a0a0a; }
.btn-coral:hover { background: color-mix(in srgb, var(--coral) 85%, #000); }
.btn-coral:disabled { opacity: 0.5; cursor: not-allowed; }
```

글자색은 코랄 배경 위 가독성을 위해 `#0a0a0a`(거의 검정)로 통일했다.

## ⓐ-5. 충전금 버튼 흰배경 버그 — 문제·원인·해결

### 문제
코치 구독·충전 화면의 금액 선택 버튼(`.coach-sub-recharge-btn`)이 **미선택(안 고른) 상태에서 흰색**으로 보였다. 어두운 테마 화면에서 안 고른 버튼만 하얗게 떠 보이는 시각 버그였다.

### 원인
변경 전 CSS는 미선택 상태의 배경을 **명시하지 않았다.**

```css
.coach-sub-recharge-btn { font-size: var(--fs-sm); }            /* 배경 미지정 */
.coach-sub-recharge-btn.is-selected { border-color: var(--accent); color: var(--accent); }
```

이 버튼은 공통 `.btn` 클래스를 함께 쓰는데, `.btn` 기본에는 배경색이 없어(투명/미지정) **브라우저 기본 버튼 배경(흰색)으로 떨어졌다.** 선택된(`.is-selected`) 버튼만 테두리·글자색을 바꿀 뿐 배경은 여전히 미지정이었다.

### 해결
selectable 패턴(`.pill`)과 동일하게 **미선택·선택 모두 어두운 표면색(--bg3)을 명시**했다.

```css
/* 미선택 충전금 버튼은 .btn 기본(배경 없음)이라 브라우저 기본 흰배경으로 떨어지는 버그가 있었다
   (UI 리팩토링 PATCH 260612). selectable(.pill) 패턴대로 어두운 표면 배경을 명시해 복원한다. */
.coach-sub-recharge-btn { font-size: var(--fs-sm); background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); }
.coach-sub-recharge-btn:hover { border-color: var(--accent); color: var(--accent); }
.coach-sub-recharge-btn.is-selected { background: var(--bg3); border-color: var(--accent); color: var(--accent); }
```

미선택은 `--bg3`(어두운 표면) + `--text2`(보조 글자) + `--border2`(은은한 테두리), 호버·선택 시 `--accent`로 테두리·글자 강조. **라이브에서 흰배경 사라짐 확인.**

## ⓐ-6. 결과
- 4개 화면의 'AI에게 보내기' 버튼이 동일 코랄로 정렬됨.
- 충전금 버튼 미선택 흰배경 버그 해소(라이브 확인).
- 새 토큰 신설 0건 — 기존 `--coral`/`--bg3`/`--text2`/`--border2` 재사용. 디자인 시스템 비대화 없음.
- 모서리 `2px`·`--accent` 토큰 값 불변.

## ⓐ-7. 미해결·후속
- `[[project_ai_handoff_30day_label_todo]]` — 'AI에게 보내기' 안내 문구 "30일"이 실제 전체 기간과 불일치(문구만 수정 필요). 이번 작업은 **색만** 다뤘고 문구는 미접촉. 별도 할 일로 잔존.

---

# 작업 ⓑ — docs 44파일 보존 정리 (레포 제거)

커밋 `e32b998`(40파일, 12:57) + `fd9036d`(4파일, 13:26) · 총 **44파일 제거**

## ⓑ-1. 무엇을 했나
이미 외부 보존소(`D:/dallog/zz.storage(other)/260612`)로 **백업이 완료된** 옛 문서·목업·구식 가이드 44파일을 레포에서 제거했다. 삭제가 아니라 **보존 이동 후 레포 정리**다(원본은 zz.storage에 보존).

## ⓑ-2. 왜 했나
달록의 Source of Truth(유일 기준 원본)는 이제 **달록KB(dallog-tools.hansbridge.co.kr)** 다(`[[project_notion_exit_kb]]`). 본레포 `docs/`에 쌓여 있던 ① LLM 의견 수렴 자료 ② 코치노트 설계 논의 ③ 시장성 평가 ④ 플레이북 ⑤ 옛 UI 목업·가이드 HTML ⑥ MCP 직접 적용 전환으로 구식이 된 SQL 가이드·시드는 모두 **역할을 다했거나 KB로 이관**된 자료다. 레포에 남겨두면 혼선만 일으키므로, 백업 확인 후 비웠다.

## ⓑ-3. 1차 정리 — `e32b998` (40파일)

| 묶음 | 내용 | 대표 파일 |
|---|---|---|
| LLM 의견 | 타 LLM 의견 수렴 6종 | `docs/Opinion_ather_llm/Opinion-{claude_ai,gemini,gork,gpt,manus,wrtn}.txt` |
| archive 목업·가이드 | v3 UI 폴리시·OCR 정확도·AI 브리프 플랜·엑셀 에디터 목업·디자인 폴리시(라이트/다크)·소셜 기능 목업·OAuth 셋업·약관 초안·체크리스트 등 18종 | `docs/archive/260527_excel_editor_external_layout_mockup.html`, `260528_social_feature_mockup.html`(2,145줄), `260528_design_polish_mockup{,_dark}.html` 등 |
| 코치노트 논의 | 코치노트 AI/챗 설계·의견 6종 | `docs/coachnote_ai_{spec,gpt_opinion,grok_opinion}.md`, `coachnote_chat_{context_note,context_note_toolrepo,opinion_claude}.md` |
| 플레이북 | AI 개발 git 플레이북 | `docs/hansbridge-ai-dev-git-playbook.md` |
| 시장성/함의 평가 | 시장성 평가·중요 함의 다LLM 9종 | `docs/.../marketability_assessment_*.txt`, `important implications_*.txt` |

(합계 40파일, 약 12,167줄 제거)

## ⓑ-4. 2차 정리 — `fd9036d` (4파일, docs/sql)

MCP 직접 적용 전환(`[[reference_supabase_direct_sql]]`)으로 복붙 가이드가 구식이 되면서 정리.

| 파일 | 성격 |
|---|---|
| `docs/sql/_gen_charge_guide.cjs` | 충전 가이드 생성 스크립트(gen) |
| 충전 가이드 HTML (`charge_가이드.html`, 1,943줄) | 구식 충전 안내 |
| 동의 가이드 HTML (`consent_가이드.html`) | 구식 동의 안내 |
| 테스터 시드 SQL (`..._재사용.sql`) | 테스터 시드 |

(합계 4파일, 약 2,378줄 제거) → zz.storage/260612/sql 로 보존 이동.

## ⓑ-5. 미접촉(보존) — 중요

> 다음은 **활성 진본**이라 절대 건드리지 않았다.

- **`golden_set`** — 골든셋 SQL 진본·필수보존(`[[feedback_goldenset_sync]]`). 레포 유지.
- **`legal`** — 약관·동의 관련 활성 스펙.
- **`sessions`** — 세션 기록.
- **`go_work`** — 현재 진행 중인 활성 스펙(브리프·UI 리팩토링 프롬프트 등).

## ⓑ-6. 결과
- `docs/` 군더더기 44파일 제거로 레포 위생 개선. SoT(달록KB) 일원화 정합.
- 데이터 손실 0 — 전량 zz.storage 보존 후 제거.
- 활성 진본(golden_set·legal·sessions·go_work) 무접촉.

---

## Codex 검토 반영 결과

| 항목 | 결과 |
|---|---|
| 코랄 통일 토큰 매핑(--coral 재사용, 신규 토큰 0) | **통과** — 디자인 시스템 비대화 회피 타당 |
| 충전금 버튼 흰배경 수정(--bg3 명시, .pill 패턴 정합) | **통과** — 미선택/호버/선택 3상태 일관, 라이브 확인 |
| 모서리 2px·--accent 값 불변 | **통과** — 회귀 범위 최소(외과적 변경) |
| docs 44파일 제거 전 보존 이동 선행 | **통과** — golden_set 등 진본 미접촉 확인 |

코랄 변경 Codex 검수 통과. `[즉시반영]`/`[검토후반영]`/`[보류]`/`[반려]` 중 별도 미반영·보류 항목 없음.

---