Skip to content

[REFACTOR] 로그인 페이지 소셜 버튼·최근 로그인 말풍선 디자인 수정 (#369) #370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeonbinggu merged 3 commits into from
Aug 27, 2026
Merged

[REFACTOR] 로그인 페이지 소셜 버튼·최근 로그인 말풍선 디자인 수정 (#369) #370

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f4d4e5
refactor: 로그인 페이지 애플 버튼·최근 로그인 말풍선 디자인 수정
jeonbinggu Aug 26, 2026
8db9fa6
refactor: 로그인 페이지 카카오 버튼 아이콘 크기·문구 스타일 수정
jeonbinggu Aug 26, 2026
0c1bea4
fix: 최근 로그인 말풍선 꼬리 색상 통일 및 애플 버튼 잔여 텍스트 색 제거
jeonbinggu Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/assets/icon/apple.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/components/auth/AppleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export const AppleButton = ({ onClick, disabled }: AppleButtonProps) => {
<Press
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"

@MlNTYS MlNTYS Aug 26, 2026 •
edited by claude Bot
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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에서는 색을 빼는 편이 안전합니다.

Suggested change
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

onClick={onClick}
>
<AppleIcon className="h-5.5 w-5.5" aria-hidden="true" />
<span className="font-normal">Apple로 계속하기</span>
<AppleIcon className="h-4.5 w-4.5" aria-hidden="true" />
<span className="font-semibold text-[#000]">Apple로 계속하기</span>
</Press>
);
};
8 changes: 3 additions & 5 deletions src/components/auth/KakaoButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ export const KakaoButton = ({ onClick }: KakaoButtonProps) => {
return (
<Press
type="button"
className="inline-flex h-[3.125rem] w-full items-center justify-center gap-2 rounded-2xl bg-[#FEE500] font-semibold text-neutral-900 shadow-sm"
className="inline-flex h-[3.125rem] w-full items-center justify-center gap-1 rounded-2xl bg-[#FEE500] font-semibold text-neutral-900 shadow-sm"
onClick={onClick}
>
<KakaoIcon className="h-5.5 w-5.5" />
<span className="leading-[126%] tracking-[-0.01875rem]">
카카오로 계속하기
</span>
<KakaoIcon className="h-4 w-4" />
<span className="font-semibold">카카오로 계속하기</span>
</Press>
);
};
2 changes: 1 addition & 1 deletion src/components/auth/RecentLoginDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface RecentLoginDialogProps {
export function RecentLoginDialog({ className = "" }: RecentLoginDialogProps) {
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">

@MlNTYS MlNTYS Aug 26, 2026 •
edited by claude Bot
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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

최근에 로그인 했어요
</div>
<PolygonIcon className="-mt-0.5 h-2.5 w-2.5" />
Expand Down
4 changes: 2 additions & 2 deletions src/pages/auth/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export function LoginPage() {
key={ui.footerKey}
className={`mx-auto max-w-sm ${ui.footerAnim}`}
>
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-4">
{recentLoginProvider === "APPLE" && !isAndroidApp() && (
<RecentLoginDialog />
)}
Expand All @@ -288,7 +288,7 @@ export function LoginPage() {
/>
)}
{recentLoginProvider === "KAKAO" && !isAndroidApp() && (
<RecentLoginDialog className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/4" />
<RecentLoginDialog className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2" />
)}
</div>
{recentLoginProvider === "KAKAO" && isAndroidApp() && (
Expand Down
Loading