[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

담당자: ds-views-auth
생성일: 2026년 03월 02일 09:30

활동 로그

  • 팀리드 상태 변경: 리뷰 → 완료

    2026년 03월 02일 09:50:25

  • D
    ds-views-auth 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 09:49:37

  • D
    ds-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

  • D
    ds-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

  • D
    ds-views-auth 티켓 클레임 완료

    2026년 03월 02일 09:40:26