[DS-2] 로그인/인증 페이지 + QT 메인 뷰 재설계
ID: c4424c02-e7b2-4818-a493-c9d072033b55
## 목표
로그인/인증 페이지와 QT 메인 뷰를 디자인 시스템에 맞게 통일한다.
## 의존성
- [DS-1] 완료 후 진행 (특히 _button 확장 필요)
## 작업 내용
### 1. 로그인 페이지 재설계 (`sessions/new.html.erb`)
- `bg-white` → `bg-surface-default`, `dark:bg-gray-800` → 토큰 사용
- `rounded-2xl` → `rounded-lg` (앱 전체 통일)
- 인라인 flash 메시지 → `render "shared/alert"` 사용
- 인라인 버튼 → `render "shared/button"` 파셜 사용 (tag: :a)
- Google/Kakao 로그인 버튼: 각 브랜드 색상 유지하되 크기/여백 통일
- 전체적으로 세련되고 깔끔한 로그인 UX
### 2. QT 메인 (`qt/today.html.erb`) 개선
- 이미 `_card`, `_progress` 파셜 잘 사용 중
- 이전/다음 링크 → `_button` 파셜 (tag: :a, variant: :outline) 적용
- 묵상 영역 입력 UX 개선: textarea 높이, 저장 버튼 위치
### 3. QT 관련 뷰 개선
- `qt/no_session.html.erb`: 인라인 버튼 → `_button` 파셜 + `_empty_state` 활용
- `qt/day.html.erb`: 동일 패턴 적용
- `qt/sessions/` 관련 뷰: 카드, 버튼 파셜 통일
### 4. 다크모드 하드코딩 수정
- 작업하는 모든 뷰에서 `dark:bg-gray-XXX` → 시멘틱 토큰 사용
- `bg-white` → `bg-surface-default`
- `text-gray-900` → `text-text-primary`
- `text-gray-500` → `text-text-secondary`
## 완료 기준
- 로그인 페이지가 디자인 토큰 사용, rounded-lg 통일
- QT 뷰에서 인라인 버튼 스타일 0개
- 모든 뷰에서 하드코딩 다크모드 색상 제거
- 기존 테스트 전부 통과
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 09:50:25
-
Dds-views-auth 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 09:49:37
-
Dds-views-auth DS-2 작업 완료 - 로그인/인증 페이지 + QT 뷰 재설계
2026년 03월 02일 09:49:37
상세 보기
## 수정 파일 목록 (10개)
### 1. `sessions/new.html.erb` - 로그인 페이지 전면 재설계
- `bg-gray-50 dark:bg-gray-900` → auth 레이아웃의 `bg-surface-muted` 활용
- `bg-white dark:bg-gray-800 rounded-2xl` → `_card` 파셜 (rounded-lg 통일)
- 인라인 flash → `_alert` 파셜 (variant: :error, :success)
- Google 버튼: `form_with` + `_button` (tag: :submit, variant: :outline)
- Kakao 버튼: `form_with` + 카카오 브랜드 색상 (#FEE500) 직접 적용
- `text-gray-*` → `text-text-primary`, `text-text-secondary`, `text-text-muted`### 2. `qt/today.html.erb` - 일차 네비게이션 개선
- 이전/다음 인라인 link_to → `_button` (tag: :a, variant: :ghost, size: :sm)
- 다음 버튼: `flex-row-reverse`로 아이콘 순서 역전### 3. `qt/no_session.html.erb` - empty_state 파셜 적용
- 인라인 카드+버튼 구조 → `_empty_state` 파셜로 교체
- 아이콘 블록 활용### 4. `qt/sessions/index.html.erb` - 버튼/입력 토큰화
- "플랜 만들기" 인라인 link → `_button` (tag: :a, variant: :primary)
- "참여하기" 인라인 button → `_button` (tag: :submit)
- 초대코드 input: `dark:bg-gray-800` 제거 → `bg-surface-default`
- 빈 상태 SVG: `text-gray-400` → `text-text-muted`### 5. `qt/sessions/_session_card.html.erb` - 다크모드 정리
- "탈퇴" 버튼: `text-gray-700 dark:text-gray-300` → `text-text-secondary`
- `hover:bg-gray-100 dark:hover:bg-gray-800` → `hover:bg-surface-subtle`### 6. `qt/sessions/new.html.erb` - 취소/생성 버튼 파셜화
- "취소" 인라인 link → `_button` (tag: :a, variant: :secondary)
- "플랜 생성" 인라인 submit → `_button` (tag: :submit, variant: :primary)### 7. `qt/sessions/show.html.erb` - 다크모드 + rounded 통일
- 초대코드: `bg-gray-50 dark:bg-gray-700/50` → `bg-surface-muted`
- 링크 카드 3개: `bg-white dark:bg-gray-800` → `bg-surface-default`
- `rounded-xl` → `rounded-lg`, `dark:border-gray-700` 제거### 8. `qt/sessions/invite.html.erb` - 버튼 파셜화
- "플랜 목록으로" 인라인 link → `_button` (tag: :a, variant: :primary)### 9. `qt/sessions/rankings.html.erb` - 토큰 적용
- 필터 버튼: `bg-gray-100 dark:bg-gray-700` → `bg-surface-subtle`
- Top-3 배경: `bg-amber-50 dark:bg-amber-900/10` → `bg-amber-50/80`### 10. `qt/meditations/_form.html.erb` - 버튼 파셜화 + 다크모드
- "저장하기/수정하기" 인라인 submit → `_button` (tag: :submit, variant: :primary)
- AI 정리/기도 목록 button_to: `dark:border-gray-600 dark:hover:bg-gray-700` 제거 → 시멘틱 토큰
- 기분 선택 emoji: `dark:border-gray-600` 제거## 테스트 결과
430 runs, 1013 assertions, 0 failures, 0 errors, 0 skips -
Dds-views-auth 작업 시작 - 모든 담당 파일 분석 완료
2026년 03월 02일 09:41:09
상세 보기
## 분석 완료 파일
- `sessions/new.html.erb` - 로그인 페이지 (bg-white, rounded-2xl, 인라인 flash, 인라인 버튼)
- `qt/today.html.erb` - QT 메인 (이전/다음 인라인 링크)
- `qt/no_session.html.erb` - 빈 세션 (인라인 버튼 CSS)
- `qt/sessions/` - index, new, show, invite, members, rankings, shared_meditations, _session_card
- `qt/meditations/` - _form, create/update/organize turbo_stream## 주요 수정 대상
1. `sessions/new.html.erb` - 전면 재설계 (토큰 + _alert + _button)
2. `qt/today.html.erb` - 이전/다음 → _button(tag: :a, variant: :outline)
3. `qt/no_session.html.erb` - _empty_state 파셜로 교체
4. `qt/sessions/index.html.erb` - 인라인 버튼 → _button
5. `qt/sessions/_session_card.html.erb` - 인라인 버튼 스타일 → _button
6. `qt/sessions/new.html.erb` - 취소/제출 인라인 → _button
7. `qt/sessions/show.html.erb` - dark:bg 하드코딩 수정
8. `qt/sessions/invite.html.erb` - 인라인 버튼 → _button
9. `qt/sessions/rankings.html.erb` - dark: 하드코딩 수정
10. `qt/meditations/_form.html.erb` - 인라인 버튼 → _button -
Dds-views-auth 티켓 클레임 완료
2026년 03월 02일 09:40:26