[Feature] OAuth 로그인 UI 구성 및 Storybook viewport 설정 추가 #39
Conversation
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
- Icons.stories.tsx 생성 - 카테고리별 아이콘 갤러리 제공 - 모든 아이콘을 한눈에 확인 가능한 카탈로그로 스토리 통합 - 기존 스토리 제거
- GoogleIcon, NaverIcon, KakaoIcon 소셜 로그인 아이콘 추가 - Logo 브랜드 로고 컴포넌트 추가 - IconProps 타입을 사용한 일관된 인터페이스 - index.ts에 export 추가
- Google, Naver, Kakao 소셜 로그인 버튼 컴포넌트 구현 - provider별 스타일링 및 아이콘 적용 - Storybook 스토리 추가
- actions 설정으로 클릭 이벤트 중복 기록 방지 - alert를 Storybook Actions로 변경하여 개발자 경험 개선
- 개발 확인을 위한 임시 연결 - 추후 라우팅 설정 시 제거 예정
- 커스텀 viewport 설정 추가 (Mobile, Tablet, Desktop)
- OAuthLoginPage 컴포넌트 구현 - OAuth 로그인 처리 함수 구조 추가 (data 레이어) - Storybook 스토리 추가 (반응형 뷰포트 지원)
- font-extralight 적용
mindaaaa
added
UI
qjatjr29
approved these changes
Dec 30, 2025
Collaborator
qjatjr29
left a comment
qjatjr29
left a comment
There was a problem hiding this comment.
벌써 UI 작업이 끝나셨군요..?!?
추후에 기본 이메일 + 패스워드 방식도 추가할 수도 있을거 같아요~!!
- 또, oauth2 로그인 성공시 어느 path로 리다이렉트 해야할지도 나중에 이야기해보면 좋을것 같아요!!
qjatjr29
approved these changes
Dec 30, 2025
| @@ -0,0 +1,36 @@ | |||
| import type { IconProps } from '../types'; | |||
|
|
|||
| export default function NaverIcon({ className, ...props }: IconProps) { | |||
Collaborator
There was a problem hiding this comment.
요고 민다가 보여주신 화면에서 조금 이상하게 보이는데 원래 이건가요?
Collaborator
Author
There was a problem hiding this comment.
앗 !
피그마에서 만들어준대로 가져왔는데 수상함을 인식하지 못했습니다
네이버 로고 예쁘네 하고 넘겼는데...😲
로고 파일 수정할게요~!
| className?: string; | ||
| } | ||
|
|
||
| const providerConfig = { |
Collaborator
Author
좋아요~! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
📌 관련 이슈
Closed #40
✅ PR 체크리스트(최소요구조건)
✨ 작업 개요
🧹 작업 상세 내용
OAuth 로그인 페이지 UI 구현
Storybook 스토리 추가
📸 스크린샷 (선택)
모바일
데스크톱
🔍 고민 지점
[ 첫 번째 고민 ]
문제점
Storybook에서 viewport별 UI를 확인하려 했으나,
기본 설정만으로는 원하는 viewport 옵션이 노출되지 않아 설정이 막힌 것처럼 느껴졌습니다.
해결 과정
Storybook
preview.ts에서viewport.options를 직접 정의하여Mobile / Tablet / Desktop 환경을 명시적으로 설정했고,
각 스토리에서 globals를 통해 viewport를 선택할 수 있도록 구성했습니다.
[ 두 번째 고민 ]
문제점
OAuth 로그인 UI는 초기 단계라 실제 인증 로직과 분리된 상태로 작업해야 했습니다.
해결 과정
UI 컴포넌트와 OAuth 처리 함수를 분리하여
현재는 UI 검증과 구조 확인에 집중하고,
추후 실제 인증 로직을 연결할 수 있도록 여지를 남겼습니다.
💬 기타 참고 사항