Skip to content

feat(mobile): 오늘 탭·캘린더 시트·목록 탭 디자인을 웹과 맞춤 - #149

Merged
SwimmingRiver merged 5 commits into
developfrom
feat/mobile-web-design-parity
Oct 23, 2026
Merged

SwimmingRiver merged 5 commits into
developfrom
feat/mobile-web-design-parity

Conversation

@SwimmingRiver

Copy link
Copy Markdown
Owner

Summary

앱이 08-25 이식 이후 바뀐 웹 디자인을 따라가지 못하던 세 화면을 맞춤 (화면별 커밋 3개)

  • 오늘 탭 항목: 카드 → 구분선 있는 플랫 행. 18px 원형 체크박스(마감 당일·초과=빨간 링, 3일 이내=주황 링), 연한 배경 마감 배지(D-day/D-N), 설명 최대 2줄, 아이콘형 반복 배지(RecurrenceBadge compact). 섹션 제목 작은 회색, 화면 흰 배경. 안 쓰게 된 Card 컴포넌트 삭제
    • 웹의 설명 링크 표시 아이콘은 앱에 링크 감지·열기 기능이 없어 제외
  • 캘린더 날짜 시트: 체크박스 행 → 정보형 행(상태색 좌측 보더, 진행 중 · 시작: 6월 18일 · 마감: 6월 22일 메타 줄, 반복 요약 매주 월・수・금 반복). 마감 초과는 danger 배경. 시트에서 완료 토글 제거, 행을 누르면 상세 화면으로 이동. 웹 formatRecurrenceSummary 포팅
  • 목록 탭: 웹 좁은 화면처럼 프로젝트·하위 카드의 휴지통 제거(삭제는 상세 화면에서), 카드 테두리 1px
    • ChildTodoCard를 상세 화면 하위 영역도 같이 쓰므로 onDelete를 옵셔널로 바꿔 상세 화면에서는 휴지통 유지
    • 바텀시트로 하위 보기·헤더 추가 아이콘·스와이프 삭제는 담당자 의견에 따라 하지 않음. 반복 할 일 시리즈 삭제·하위 추가 비활성은 별도 브랜치

참고: 이 브랜치는 develop 기준이라 상태색·날짜 띠 수정(https://github.com/SwimmingRiver/ToDoDo/pull/148)이 병합돼야 색이 웹과 같아짐

Test plan

  • npx jest 192/192 통과 (오늘 항목 링/배지/설명/구분선, 시트 메타·반복 요약·초과 배경, 목록 휴지통 없음 테스트 추가)
  • npx tsc --noEmit 통과
  • iOS 시뮬레이터: 오늘 탭 새 행 디자인 확인
  • 시뮬레이터에서 캘린더 시트 → 상세 이동, 상세 화면 하위 항목 삭제 동작 확인

🤖 Generated with Claude Code

SwimmingRiver and others added 4 commits October 21, 2026 16:37
웹 좁은 화면처럼 목록 카드에서는 삭제 버튼을 숨기고(삭제는 상세 화면에서),
카드 테두리를 웹 09-16 변경과 같은 1px로 맞춘다. 상세 화면 하위 영역은
onDelete를 넘겨 휴지통을 계속 노출한다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
체크박스 행 대신 상태 색 좌측 보더 + 상태·시작·마감 메타 줄 + 반복 요약을
보여주는 정보형 행으로 바꾼다. 마감 지난 항목은 danger 배경. 완료 토글은
시트에서 빼고 행을 누르면 상세 화면으로 이동한다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
카드 대신 구분선 있는 플랫 행, 마감 임박도별 링 색의 원형 체크박스,
연한 배경 마감 배지, 설명 2줄, 아이콘형 반복 배지를 적용한다.
더 이상 쓰지 않는 Card 컴포넌트는 삭제한다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
주(week) 행을 남은 화면 높이에 맞춰 늘린다. Calendar 바깥 래퍼가 style을
받지 않아 onLayout으로 잰 높이를 안쪽 컨테이너에 넘긴다. 칸이 커지면 기본
BasicDay는 32px 원만 눌리므로 CalendarDayCell(dayComponent)로 칸 전체를
눌림 영역으로 쓰고 숫자·점은 위쪽에 둔다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
feat(mobile): 캘린더를 화면에 꽉 차게, 날짜 칸 전체를 눌림 영역으로
@SwimmingRiver
SwimmingRiver merged commit c44962d into develop Oct 23, 2026
11 checks passed
@SwimmingRiver
SwimmingRiver deleted the feat/mobile-web-design-parity branch October 23, 2026 05:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant