fix: 7/8 디자인 QA 일괄 반영 (회고 상세·태그·검색·홈 미션·팝업·edge-to-edge)#51
Merged
Conversation
네이티브 앱은 dev 모드에서도 절대 URL을 사용해 CapacitorHttp가 CORS를 네이티브로 우회하도록 분기. 기존에는 상대 URL → Vite 프록시 경유 시 폰의 Origin이 백엔드에 그대로 전달돼 CORS 403(Invalid CORS request)으로 카카오·구글 로그인이 모두 실패했음. 웹 개발 환경은 기존 프록시 방식 유지. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
기존 none + JS 화면 축소 방식은 레이아웃 높이와 가시 영역의 차이만큼 팬(스크롤)이 가능해 키보드 위로 당기면 빈 공간이 드러나고, 네이티브가 알려주는 키보드 높이에 시스템 내비바가 포함돼 간격도 부정확했음. - capacitor.config: resize 'body' + resizeOnFullScreen(투명 상태바 우회) - keyboard.client.ts 신설: iOS는 런타임에 none으로 되돌려 기존 방식 유지 - start.vue: JS 키보드 축소 로직을 iOS 전용으로 한정 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 헤더~입력창 10px, 입력창 패딩 16px, 목록 간격 10px, 안내~버튼 20px로 간격 수정 - 목록 행 고정 높이(52px) 제거 → 시안대로 py-12 자동 높이 - 삭제 아이콘 휴지통 → X(famicons close-sharp, #C6C6C6) 교체 - 오버레이에 safe-top 적용 (네이티브 상태바 겹침 방지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 상세 전용 variant 추가: 제목 위 작성 날짜 노출, 제목 하단 라인 미노출 - 상단 더보기 아이콘을 가로 미트볼(tabler dots-filled)로 교체 — 인라인 SVG 렌더 - 프로젝트명 언더라인 + 클릭 시 해당 프로젝트 회고 목록으로 이동 (projectId 쿼리 필터 지원) - 리스트/캘린더 탭 간격 7px로 수정 - 카드 요약 라인하이트: text-label1이 leading-[1.6]을 덮어쓰던 문제 → text-label1-reading 토큰으로 교체 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 빈 공간 터치로 키보드를 내린 직후 이름 영역 클릭이 재포커스하던 문제 수정 (키보드 내려간 상태 유지) - 삭제 확인 다이얼로그를 공용 UiPopup으로 교체 (문구 상단 28px·하단 26px 여백, 취소 버튼 화이트+테두리 시안 준수) - 기존 프로젝트명 수정 시에도 저장 버튼 활성화 — blur 즉시 저장 대신 저장 버튼으로 이름 변경·신규 생성 일괄 반영 - 프로젝트 선택 오버레이에 safe-top 적용 (네이티브 상태바 겹침 방지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 앱 컨테이너 overflow-hidden → overflow-clip: 입력 포커스 시 scrollIntoView가 컨테이너 scrollTop을 밀어올려 헤더가 잘린 채 고정되던 문제 원천 차단 - 챗봇 키보드가 다 올라온 뒤(keyboardDidShow) 채팅을 맨 아래로 스크롤 — 마지막 질문이 키보드에 가려지지 않음 - 답변 전체보기 오버레이에 safe-top 적용 (네이티브 상태바 겹침 방지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 온보딩 닉네임 2자 미만 시 엔터·디바운스 모두 '한글 또는 영문 2자 이상 입력해 주세요' 안내 노출 - 하단 탭 명칭 '회고기록' → '회고 기록' 띄어쓰기 - 알림 본문·약관 4페이지: text-label1이 leading-[1.6]을 덮어쓰던 문제 → text-label1-reading 토큰으로 교체 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- input에 min-w-0 누락 → 기본 최소 폭 때문에 flex 행이 넘쳐 돋보기 아이콘이 우측 패딩(16px)을 침범, 뷰포트 폭에 따라 웹/앱 간격이 달라 보였음 - X로 검색어 삭제 시 input scrollLeft 원점 복구 (placeholder 밀림 방지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 홈 탭이 활성/비활성 모두 filled 아이콘을 쓰던 것을 분리 - 비활성: Material Symbols home outline(신규 tab-home.svg), 활성: 기존 filled(tab-home-active.svg) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- targetSdk 35 강제 edge-to-edge로 WebView가 투명 내비바 밑까지 확장되어 bottom:30px 시트·픽커와 중앙 팝업이 내비바에 겹치던 문제 - 바텀시트·배지 상세·프로젝트 픽커·시간 픽커·음성 레코더: bottom에 env(safe-area-inset-bottom) 가산 - 공용 팝업·뱃지 획득·홈 미션 팝업: 중앙 정렬 기준에 하단 inset 반영 - 온보딩 약관 시트: 본문 스크롤 하단 여백에 inset 가산 - 회고 목록 헤더 검색·더보기 메뉴 정리 포함 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 입력바 위 32px 투명→흰색 그라데이션: 채팅이 입력바 뒤로 자연스럽게 사라지게 - 마이크 권한 팝업 중앙 정렬에 하단 내비바 inset 반영 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Icon 컴포넌트가 아이콘을 외부 API(iconify)에서 런타임 로드 → 첫 진입 시 전송 화살표 등이 늦게 뜨거나 안 보이던 문제 - famicons·material-symbols 컬렉션 설치 + clientBundle scan으로 번들에 포함 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 첫 미션(레벨 0 placeholder)에서만 뜨던 '레벨업' 말풍선을 진행 중인 모든 횟수형 미션의 마지막 스탬프 옆에 표시 - 쓰이지 않게 된 firstMission prop 제거 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 백엔드 currentLevel은 '달성한 레벨'인데 카드가 그대로 표시해 Lv.2 미션(일주일 내 3회) 진행 중에도 Lv.1로 보이던 문제 → +1 표시 - 레벨 뱃지 색상(levelTheme)도 미션 레벨 기준으로 통일 - 신규 유저 placeholder도 Lv.0이 아닌 Lv.1로 노출 (레벨 0 없음) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 보조 문구와 확인 버튼 사이 간격 14px → 26px (문구 블록 하단 12px 추가) - 미션 완료·실패 팝업 딤을 다른 팝업보다 진하게(black 60%) + 배경 블러 5px 적용 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 알림: 시간이 본문 옆에 붙어 본문 폭을 줄이던 구조를 시안대로 재배치 (시간은 제목 줄에만, 본문은 전체 폭 — 긴 문구가 불필요하게 줄바꿈되던 문제) - 채팅 입력바: 흰 배경 블록 제거 → 반투명(85%) 그라데이션으로 채팅이 비쳐 보이게 - 입력바 우측 버튼(음성/전송) 한 줄일 때 세로 중앙 정렬 (여러 줄이면 하단 유지) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- /dev/popup-preview — 실제 컴포넌트(딤·블러·간격)를 미션 진행 없이 확인 - 개발 환경 전용 (프로덕션 접근 시 홈으로 이동) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 진한 딤(60%)+블러는 획득(완료) 팝업 전용 — 실패 팝업은 다른 팝업과 동일 처리 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 미션 실패 팝업: 간격(제목/아이콘/문구 12px, 문구~버튼 26px)·문구 굵기 시안 정합 - /dev/popup-preview에 배지 10종 획득 팝업 프리뷰 버튼 추가 - @capacitor/text-zoom으로 WebView 텍스트 배율 100% 고정 (시스템 글꼴 크기에 따라 문구 줄바꿈이 시안과 어긋나던 문제 — 새 앱 빌드부터 적용) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 배지별 전용 타이틀(이모지 포함) congratsTitle 추가 — 팝업 제목이 공통 포맷 대신 배지별 카피 사용 - 본문(congratsText) 10종 전부 확정 문구로 갱신 - 배지명 정리: 프로젝트 디기너→프로젝트 디깅, 루틴의 첫 걸음→루틴 첫 걸음 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 상단 슬라이드 인 배너: 썸네일·타이틀·본문, 3.5초 후 자동 닫힘 - 배너 클릭 시 배지 화면 이동, 스와이프(상·하)로 수동 닫기 - 여러 배지 동시 획득 시 큐로 순차 노출 - 미션 완료/실패 팝업이 떠 있는 동안 배너 보류 → 확인 클릭 후 노출 - 주간 미션 카드: 요일 스탬프 항상 노출, 진행 바가 주차 흰 점을 완전히 덮도록 수정 - /dev/popup-preview에 주간 미션 카드 프리뷰(진행도·요일 데이터 토글) 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 토스트 배너 → 기존 모달 팝업 형태로 복원 (figma 6001-31296 기준이 팝업) - 스펙 동작은 유지: 다중 획득 순차 노출(큐), 미션 완료 팝업 확인 후 노출(보류) - 팝업 타이틀은 배지별 확정 카피(congratsTitle) 사용 - 주간 미션 진행 바 채움 폭을 피그마 실측값으로 보정 (+14px → +20px) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 레벨 칩 선택 → 해당 레벨 미션 카드(횟수형/연속주형) 렌더, 진행도·요일 데이터 토글 - 완료 팝업 왕관도 선택 레벨과 연동 - 미션 구성은 컨플루언스 표 기준 (피그마 매핑 불일치는 예진님 컨펌 대기) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 완료된 마지막 스탬프까지 연결선 색칠 (미완료 구간은 회색 유지) - 10회(2줄) 미션도 줄별로 완료 구간 계산 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- QA 확인 완료로 임시 프리뷰(/dev/popup-preview) 삭제 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 백엔드 currentLevel은 '달성한 레벨'이라 신규 유저는 0으로 수신 → 표시 레벨은 최소 1 적용 - 레벨 배지 텍스트·levelTheme 색상 모두 displayLevel 기준으로 통일 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 회고 0개 빈 상태 화면 제거 → 인사말 + Lv.1 미션 카드 + FAB로 레이아웃 통일 - 미션 카드의 '회고 남기기' CTA가 첫 회고 유도를 대체 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- FAB와 동일하게 3회 완료 시 회색 처리 + 클릭 차단 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
요약
7/8 디자인 QA 세션에서 확인된 UI 이슈 일괄 수정.
🤖 Generated with Claude Code