로그인 페이지 디자인 추가#335
Conversation
WalkthroughLandingPage 구성과 스타일을 재구성하고 정적 배경·로고를 SVG 아이콘(ICLandingBackground, ICLandingIcLogo, ICLandingTextLogo)으로 교체했습니다. 루트 배경을 연한 회색으로 변경하고 콘텐츠를 중앙 정렬한 열 구조로 조정했으며 한국어 로그인 문구·장식 구분선을 도입했습니다. 에러 블록을 전체 너비로 확장하고 메시지를 한국어로 변경했으며 개발 모드 및 Google 로그인 버튼의 패딩과 폰트 크기를 조정하고 Google 버튼 텍스트를 변경했습니다. 하단 약관 문단을 제거했고 IconMap에 세 아이콘을 추가했습니다. Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @src/app/LandingPage.tsx:
- Around line 43-44: TypeScript errors occur because the SVG components
ICLandingIcLogo and ICLandingTextLogo don't accept className/role/aria-label;
fix by either wrapping each SVG component in a semantic wrapper (e.g., a div or
span) and move className/role/aria-label to that wrapper, or add an SVG module
declaration so the imported SVGs are typed as
React.FC<React.SVGProps<SVGSVGElement>> (create src/types/svg.d.ts with the
declaration) and then keep the props on ICLandingIcLogo and ICLandingTextLogo in
LandingPage.tsx.
- Around line 80-82: The ICLandingBackground component is causing a TypeScript
prop/type error and should be made a drop-in SVG that fills its parent: update
the SVG source used by ICLandingBackground to include width="100%" and
height="100%" (and a proper viewBox) so it scales to the parent div, and update
the ICLandingBackground component’s props/type signature to accept standard SVG
props (e.g., extend React.SVGProps<SVGSVGElement> or forward props) so className
and aria-hidden can be passed without TS errors.
- Around line 3-5: There is a typo in src/components/Icons/icons.ts where the
identifier IC_LadningIcLogo is misspelled at occurrences around the IconMap
(previously referenced on lines 20 and 79); rename those identifiers to
IC_LandingIcLogo so they match the actual exported symbol, and then update
LandingPage.tsx to import the icon via the icons.ts IconMap export (use the
corrected IC_LandingIcLogo key) instead of importing SVG files directly.
In @src/components/Icons/icons.ts:
- Around line 19-21: Fix the typo in the icon identifier: rename
IC_LadningIcLogo to IC_LandingIcLogo wherever it appears (the import statement
for './svgs/ic_landing_ic_logo.svg' and the corresponding export entry that
currently uses IC_LadningIcLogo) so the symbol name consistently uses "Landing"
with the missing 'n' included.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
src/components/Icons/svgs/ic_landing_background.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_ic_logo.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_text_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/app/LandingPage.tsxsrc/components/Icons/icons.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-23T14:52:20.769Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 102
File: src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx:23-23
Timestamp: 2025-11-23T14:52:20.769Z
Learning: In src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx, the hardcoded '/file.svg' thumbnail is intentional as a placeholder because the backend API for fetching link metadata/thumbnails is still in preparation. The actual thumbnail fetch logic will be implemented after the backend is ready.
Applied to files:
src/app/LandingPage.tsxsrc/components/Icons/icons.ts
🪛 GitHub Actions: CI
src/app/LandingPage.tsx
[error] 43-43: Type '{ className: string; role: string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes'.
🪛 GitHub Check: ci
src/app/LandingPage.tsx
[failure] 81-81:
Type '{ className: string; "aria-hidden": string; }' is not assignable to type 'IntrinsicAttributes'.
[failure] 44-44:
Type '{ className: string; role: string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes'.
[failure] 43-43:
Type '{ className: string; role: string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes'.
🔇 Additional comments (3)
src/components/Icons/icons.ts (1)
78-80: 새로운 랜딩 페이지 아이콘 추가가 적절합니다.IconMap에 새로운 아이콘들을 추가하는 접근 방식은 기존 패턴과 일관성이 있습니다. 다만 위의 오타 수정이 필요합니다.
src/app/LandingPage.tsx (2)
40-50: 새로운 로그인 페이지 디자인이 깔끔합니다.배경색 변경(blue gradient → gray-50), 중앙 정렬 레이아웃, 그리고 로고 배치가 피그마 디자인과 잘 맞는 것으로 보입니다. 사용자 안내 문구도 명확합니다.
77-77: 버튼 텍스트 변경이 적절합니다."Google로 시작하기"에서 "Google 계정으로 계속하기"로의 변경은 더 명확하고 표준적인 표현입니다.
Seong-Myeong
force-pushed
the
Refactor/#334-edit-login-page-design
branch
from
083e14a to
57319b7
Compare
Seong-Myeong
force-pushed
the
Refactor/#334-edit-login-page-design
branch
from
57319b7 to
e62b775
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @src/app/LandingPage.tsx:
- Line 1: Remove the invisible BOM character that appears before the 'use
client' directive at the top of LandingPage.tsx; open the file in an editor and
re-save it as UTF-8 without BOM or manually delete the leading BOM so the file
begins exactly with 'use client' (no hidden characters) to avoid encoding
issues.
In @src/components/Icons/icons.ts:
- Around line 78-80: 아이콘 내보내기에서 발생한 오타입니다: IconMap의 내보내기 항목 `IC_LadningIcLogo`를
올바른 심볼명 `IC_LandingIcLogo`로 수정하고, 해당 심볼을 임포트하는 파일(임포트에서 잘못된 `IC_LadningIcLogo`
사용)를 모두 `IC_LandingIcLogo`로 일관되게 변경하세요; 즉 IconMap의 export 목록과 관련된 import 구문(원래
오타가 있는 import 이름)을 함께 찾아 동일한 올바른 심볼명으로 교체하면 됩니다.
- Around line 19-21: Rename the misspelled import identifier IC_LadningIcLogo to
IC_LandingIcLogo in the import list so the variable name matches the SVG
filename and other icons; update any usages of IC_LadningIcLogo elsewhere in the
codebase to IC_LandingIcLogo to keep references consistent (check components
that render the logo and the export list in icons.ts).
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
src/components/Icons/svgs/ic_landing_background.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_ic_logo.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_text_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/app/LandingPage.tsxsrc/components/Icons/icons.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-23T14:52:20.769Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 102
File: src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx:23-23
Timestamp: 2025-11-23T14:52:20.769Z
Learning: In src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx, the hardcoded '/file.svg' thumbnail is intentional as a placeholder because the backend API for fetching link metadata/thumbnails is still in preparation. The actual thumbnail fetch logic will be implemented after the backend is ready.
Applied to files:
src/components/Icons/icons.tssrc/app/LandingPage.tsx
📚 Learning: 2025-11-23T12:03:33.890Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
Applied to files:
src/app/LandingPage.tsx
🔇 Additional comments (7)
src/app/LandingPage.tsx (6)
3-5: IconMap을 사용하지 않고 직접 임포트하고 있습니다.새로 추가된 SVG 아이콘들을
icons.ts의 IconMap을 통하지 않고 직접 임포트하고 있습니다. 프로젝트의 다른 아이콘들은 IconMap을 통해 관리되고 있는데, 이 패턴과 일관성이 없습니다.다만, 이 아이콘들이 장식적이고 큰 사이즈의 랜딩 페이지 전용 에셋이라면 직접 임포트가 의도된 것일 수 있습니다. 프로젝트의 아이콘 관리 정책을 확인하시기 바랍니다.
참고: Line 4의 임포트 이름
ICLandingIcLogo는 올바른 철자이지만,icons.ts에서 내보내는 이름은IC_LadningIcLogo로 오타가 있습니다.icons.ts의 오타를 먼저 수정해야 합니다.
40-49: 랜딩 페이지 레이아웃이 Figma 디자인에 맞게 잘 구성되었습니다.새로운 레이아웃 구조가 명확하고 깔끔합니다:
- 상대 위치 지정 컨테이너로 배경과 콘텐츠를 분리
- 로고(아이콘 + 텍스트)를 중앙에 배치
- 적절한 간격과 정렬
SVG 래퍼의 크기 지정 방식(
[&>svg]:h-full [&>svg]:w-full)이 작동하지만, SVG 자체에viewBox와 적절한 비율이 설정되어 있는지 확인하여 다양한 화면에서 왜곡 없이 렌더링되는지 검증하시기 바랍니다.
50-54: 한국어 텍스트 콘텐츠가 명확하고 적절합니다.로그인 페이지의 제목과 설명이 사용자 친화적이고 명확하게 작성되었습니다. 장식적 구분선(divider)도 시각적으로 깔끔합니다.
57-64: 에러 메시지 블록이 개선되었습니다.에러 메시지 블록이 전체 너비(
w-full)로 확장되어 가독성이 향상되었고, "잠시 후 다시 시도해주세요." 메시지가 추가되어 사용자 경험이 개선되었습니다.
67-82: 로그인 버튼 스타일이 적절하게 조정되었습니다.버튼 padding이
py-4에서py-3으로 변경되었고, Google 버튼의 텍스트가 "Google로 시작하기"에서 "Google 계정으로 계속하기"로 변경되어 더 명확한 표현이 되었습니다. 이러한 변경사항들은 Figma 디자인 사양에 맞춘 것으로 보입니다.
84-86: 배경 장식 요소가 적절하게 배치되었습니다.배경 SVG가 절대 위치로 하단에 배치되고
z-0으로 콘텐츠 뒤에 위치하며,pointer-events-none으로 상호작용을 차단하고,aria-hidden으로 스크린 리더에서 숨겨지는 등 모든 접근성 고려사항이 잘 적용되었습니다.다만, 고정된 높이(
h-[320px])가 다양한 화면 크기에서 의도한 대로 작동하는지 확인이 필요합니다.src/components/Icons/icons.ts (1)
19-21: SVG 파일 존재 여부 확인 완료세 개의 SVG 파일이 모두 지정된 경로에 정상적으로 존재합니다.
- ✓ ic_landing_background.svg
- ✓ ic_landing_ic_logo.svg
- ✓ ic_landing_text_logo.svg
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/app/LandingPage.tsx (2)
40-49: 레이아웃 구조가 잘 개선되었습니다.새로운 로고 섹션의 접근성 처리(아이콘은
aria-hidden, 텍스트 로고는aria-label)가 적절하며, 중앙 정렬 레이아웃도 깔끔합니다.선택 사항: 하드코딩된 크기 값들(
h-[53px],w-[60px]등)을 향후 Tailwind 테마나 디자인 토큰으로 관리하면 일관성을 높일 수 있습니다.
50-54: 로그인 안내 문구가 명확합니다.한국어 텍스트가 사용자 친화적으로 작성되었습니다.
향후 다국어 지원이 필요할 경우, 하드코딩된 문자열을 i18n 시스템으로 관리하는 것을 고려해보세요.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
src/components/Icons/svgs/ic_landing_background.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_ic_logo.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_text_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/app/LandingPage.tsxsrc/components/Icons/icons.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Icons/icons.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-23T14:52:20.769Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 102
File: src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx:23-23
Timestamp: 2025-11-23T14:52:20.769Z
Learning: In src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx, the hardcoded '/file.svg' thumbnail is intentional as a placeholder because the backend API for fetching link metadata/thumbnails is still in preparation. The actual thumbnail fetch logic will be implemented after the backend is ready.
Applied to files:
src/app/LandingPage.tsx
📚 Learning: 2025-11-23T12:03:33.890Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
Applied to files:
src/app/LandingPage.tsx
🔇 Additional comments (5)
src/app/LandingPage.tsx (5)
56-64: 에러 메시지 개선이 사용자 친화적입니다.에러 블록을 전체 너비로 변경하고 "잠시 후 다시 시도해주세요." 문구를 추가한 것이 사용자 경험을 개선합니다.
68-74: 개발 모드 버튼 스타일 조정이 적절합니다.패딩을 Google 로그인 버튼과 일치시켜 시각적 일관성을 유지했습니다.
76-82: Google 로그인 버튼 문구가 개선되었습니다."Google 계정으로 계속하기"는 표준적이고 명확한 표현으로, 사용자에게 더 친숙합니다.
84-86: 배경 장식 구현이 적절합니다.절대 위치, z-index, pointer-events-none 처리로 배경이 콘텐츠와 상호작용을 방해하지 않으며, 접근성도 올바르게 처리되었습니다.
3-5: SVG 파일들이 모두 올바르게 존재합니다. 세 개의 SVG 파일(ic_landing_background.svg,ic_landing_ic_logo.svg,ic_landing_text_logo.svg)이src/components/Icons/svgs/경로에 존재하고 있으며, icons.ts에도 제대로 등록되어 있습니다. 임포트 경로가 정확합니다.
Seong-Myeong
force-pushed
the
Refactor/#334-edit-login-page-design
branch
from
e62b775 to
1a29ebc
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/app/LandingPage.tsx:
- Around line 68-74: The Tailwind class on the development login button uses
incorrect color syntax; in the LandingPage component update the button's
className where the onClick={devLogin} button currently contains "bg-gray800"
and change it to the correct Tailwind v4 token "bg-gray-800" (ensure any other
occurrences of "bg-gray800" in the same file/component are updated as well).
- Around line 57-63: The Tailwind class names in the alert div are using old
(missing hyphen) syntax; update the className string in the LandingPage
component's alert <div> so `bg-red100` becomes `bg-red-100` and `text-red700`
becomes `text-red-700` (and similarly fix any other color classes in that same
className if present) to match Tailwind v4 color naming.
🧹 Nitpick comments (1)
src/app/LandingPage.tsx (1)
42-49: 모바일 화면에서 로고 크기를 고려하세요.고정된 크기(w-[240px] 등)가 작은 모바일 화면에서는 너무 클 수 있습니다. 반응형 크기 조정을 고려해보세요.
📱 모바일 대응 개선 제안
- <div className="flex items-center gap-5"> - <div className="h-[53px] w-[60px] [&>svg]:h-full [&>svg]:w-full" aria-hidden="true"> + <div className="flex items-center gap-3 sm:gap-5"> + <div className="h-10 w-12 sm:h-[53px] sm:w-[60px] [&>svg]:h-full [&>svg]:w-full" aria-hidden="true"> <ICLandingIcLogo /> </div> - <div className="h-[50px] w-[240px] [&>svg]:h-full [&>svg]:w-full" aria-label="Linkiving"> + <div className="h-10 w-48 sm:h-[50px] sm:w-[240px] [&>svg]:h-full [&>svg]:w-full" aria-label="Linkiving"> <ICLandingTextLogo /> </div> </div>
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
src/components/Icons/svgs/ic_landing_background.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_ic_logo.svgis excluded by!**/*.svgsrc/components/Icons/svgs/ic_landing_text_logo.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/app/LandingPage.tsxsrc/components/Icons/icons.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Icons/icons.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-23T14:52:20.769Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 102
File: src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx:23-23
Timestamp: 2025-11-23T14:52:20.769Z
Learning: In src/components/layout/SideNavigation/components/AddLinkModal/AddLinkModal.tsx, the hardcoded '/file.svg' thumbnail is intentional as a placeholder because the backend API for fetching link metadata/thumbnails is still in preparation. The actual thumbnail fetch logic will be implemented after the backend is ready.
Applied to files:
src/app/LandingPage.tsx
📚 Learning: 2025-11-23T12:03:33.890Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
Applied to files:
src/app/LandingPage.tsx
🔇 Additional comments (6)
src/app/LandingPage.tsx (6)
40-41: LGTM! 깔끔한 레이아웃 구조입니다.배경을 단순화하고 콘텐츠를 중앙 정렬하는 구조가 명확하며, z-index를 활용한 레이어 분리도 적절합니다.
54-54: 장식 구분선 구현이 깔끔합니다.시각적 구분을 위한 간단하고 명확한 구현입니다.
76-82: LGTM! 버튼 스타일과 텍스트 개선이 적절합니다.버튼 텍스트가 더 명확해졌고, 스타일링도 깔끔합니다.
84-86: LGTM! 배경 SVG 배치가 적절합니다.장식용 배경의 레이어링, 인터랙션 방지, 접근성 처리가 모두 올바르게 구현되어 있습니다.
50-53: No action needed. The custom font classesfont-label-xlandfont-body-mdare properly defined insrc/styles/custom/typoTokens.cssand correctly imported inglobals.css. Both classes are used appropriately in the code.
3-5: SVG 파일들이 모두 존재하고 올바르게 export되어 있습니다.다음 사항이 검증되었습니다:
- ✅
ic_landing_background.svg존재 (5.2 MB)- ✅
ic_landing_ic_logo.svg존재 (177 KB)- ✅
ic_landing_text_logo.svg존재 (14 KB)- ✅ 세 파일 모두
src/components/Icons/icons.ts에서 import 및 IconMap에 등록됨다만, 한 가지 개선 사항으로 icons.ts의 명명 규칙(
IC_LandingBackground)과 LandingPage.tsx의 직접 import 명명(ICLandingBackground)이 일치하도록 정렬하면 코드 일관성이 더 향상될 것입니다.
2 participants
관련 이슈
PR 설명