[REFACTOR] 로그인 페이지 소셜 버튼·최근 로그인 말풍선 디자인 수정 (#369) - #370
Conversation
- 애플 버튼 배경을 흰색으로, 문구를 semibold 검정으로 변경 - 애플 아이콘 SVG를 신규 시안(검정)으로 교체 - 최근 로그인 말풍선 배경을 neutral-100으로 변경 - 카카오 최근 로그인 말풍선을 카카오 버튼 쪽으로 더 내림 - 소셜 버튼 간격 gap-3 → gap-4 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- 카카오 아이콘 5.5 → 4 (rem 기준 축소), 아이콘-문구 간격 gap-2 → gap-1 - 문구를 semibold로 변경하고 커스텀 line-height/letter-spacing 제거 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Claude 자동 리뷰
검사 범위: 로직 오류 · 엣지 케이스/런타임 · 컨벤션 준수(CLAUDE.md, .claude/skills/tdd-clean-arch/references/) · typecheck/lint
pnpm lint와 tsc -b 모두 통과했습니다. 이 PR의 변경 라인에서 비롯된 정적 검사 실패는 없습니다.
Generated by Claude Code
| return ( | ||
| <div className={`flex flex-col items-center self-center ${className}`}> | ||
| <div className="bg-neutral-0 rounded-lg px-2 py-1.25 text-xs font-semibold text-orange-500"> | ||
| <div className="rounded-lg bg-neutral-100 px-2 py-1.25 text-xs font-semibold text-orange-500"> |
There was a problem hiding this comment.
[Major] 말풍선 몸통 배경만 neutral-100으로 바뀌고 꼬리(PolygonIcon)는 이전 색 그대로라 두 톤으로 갈라집니다.
src/assets/icon/polygon.svg의 path fill이 #FBFBFB로 하드코딩되어 있는데, 이 값은 변경 전 배경이던 neutral-0(--color-neutral-0: #fbfbfb)과 정확히 일치하는 값입니다. 새 배경 neutral-100은 #f0f0f0이라 몸통보다 꼬리가 밝게 남습니다. 꼬리는 -mt-0.5(2px)만 겹치므로 10×8.3px 삼각형 중 6~7px가 몸통 아래로 노출되고, 어두운 페이지 배경 위라 경계가 드러납니다.
한 가지 함정이 있습니다. CLAUDE.md에는 "SVGO가 fill/stroke를 currentColor로 변환 → text-*로 색상 제어"라고 적혀 있지만, 실제 설정은 그렇게 동작하지 않습니다. vite.config.ts의 svgoConfig는 preset-default(removeViewBox: false) + removeDimensions + prefixIds뿐이고, convertColors의 currentColor 옵션도 svgr의 icon/replaceAttrValues도 설정되어 있지 않습니다. 프로젝트 설정 그대로 SVGO를 돌리면 fill="#FBFBFB"가 그대로 남는 것을 확인했습니다. 따라서 PolygonIcon에 text-neutral-100만 붙여서는 색이 바뀌지 않습니다.
수정 방향은 두 가지입니다.
polygon.svg의 fill을currentColor로 바꾼 뒤PolygonIcon에text-neutral-100을 주기 (문서에 적힌 컨벤션에 맞추는 방향)- 또는
polygon.svg의 fill 값을#F0F0F0으로 직접 맞추기
Generated by Claude Code
| type="button" | ||
| disabled={disabled} | ||
| className="inline-flex h-[3.125rem] w-full items-center justify-center gap-2 rounded-2xl bg-[#040505] font-semibold text-white shadow-sm disabled:opacity-60" | ||
| className="inline-flex h-[3.125rem] w-full items-center justify-center gap-1 rounded-2xl bg-[#FFF] font-semibold text-white shadow-sm disabled:opacity-60" |
There was a problem hiding this comment.
[Minor] 배경이 흰색으로 바뀌었는데 text-white가 그대로 남아 있습니다.
지금 당장 보이는 증상은 없습니다. 유일한 텍스트 노드인 아래 span이 text-[#000]으로 덮고, AppleIcon은 apple.svg의 path fill이 black으로 하드코딩되어 있어 상속을 받지 않습니다(Press는 children 외에 텍스트 노드를 렌더하지 않고, transitions.css의 .t-press에도 color 선언은 없습니다). 즉 text-white는 bg-[#040505] 시절의 잔재로 현재 아무 효과가 없습니다.
다만 bg-[#FFF] + text-white 조합이 남아 있어서, 이후 span의 text-[#000]을 지우거나 색 지정 없는 텍스트 자식을 하나 더 추가하면 그 즉시 흰 배경에 흰 글씨가 됩니다. 아래처럼 text-white를 빼거나, KakaoButton처럼 부모에 텍스트 색을 두고 span에서는 색을 빼는 편이 안전합니다.
| className="inline-flex h-[3.125rem] w-full items-center justify-center gap-1 rounded-2xl bg-[#FFF] font-semibold text-white shadow-sm disabled:opacity-60" | |
| className="inline-flex h-[3.125rem] w-full items-center justify-center gap-1 rounded-2xl bg-[#FFF] font-semibold shadow-sm disabled:opacity-60" |
Generated by Claude Code
- polygon.svg fill을 currentColor로 변경하고 PolygonIcon에 text-neutral-100 지정 - AppleButton의 미사용 text-white 제거 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This branch was successfully deployed
2 participants
📑 Description
로그인 페이지 Figma 시안 반영.
Figma
📌 변경 사항
애플 버튼
#040505→#FFF, 문구 semibold 검정카카오 버튼
5.5→4, 아이콘-문구 간격gap-2→gap-1최근 로그인 말풍선(RecentLoginDialog)
neutral-0→neutral-100translate-y-1/4→translate-y-1/2로 카카오 버튼에 더 붙임레이아웃
gap-3→gap-4💬 Comment
pnpm lint/pnpm build통과Closes #369