✨ feat: 카카오 로그인 페이지 작성 #59
Merged
Conversation
This file contains 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
|
🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-xijbzwibhb.chromatic.com/ |
easyhyun00
approved these changes
Feb 2, 2024
src/pages/SigninKakaoPage/index.tsx
Outdated
Comment on lines
15
to
17
| if (!code) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
ask;
혹시 여기서 아래 코드처럼 하면 안되나요? 무슨 차이가 있는지 궁금합니다!
if (!code) {
navigate(ROUTER_PATHS.SIGNIN);
return;
}There was a problem hiding this comment.
useEffect 는 컴포넌트가 전부 그려진 다음에 실행되기 때문에 code가 없는 경우에 순간적으로 <div>Loading...</div> 이 화면에 보여지는 현상을 우려했었어요.. 생각해보니 큰 문제는 안될 것 같네요 😊 navigate 훅으로 변경하겠습니당
src/pages/SigninPage/index.tsx
Outdated
Comment on lines
9
to
11
| const CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID; | ||
| const REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI; | ||
| const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}`; |
There was a problem hiding this comment.
p5;
.env 에 KAKAO_URL 도 추가하는 건 어떤가요..??
VITE_KAKAO_URL="https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${VITE_KAKAO_CLIENT_ID}&redirect_uri=${VITE_KAKAO_REDIRECT_URI}"const KAKAO_URL = import.meta.env.VITE_KAKAO_URL;
src/pages/SigninPage/index.tsx
Outdated
| /> | ||
|
|
||
| <section css={styles.main}> | ||
| <h1 css={textStyles.b3R}>아무도에게도 말 못한 마음 속 편지</h1> |
There was a problem hiding this comment.
p5;
<h1 css={textStyles.b3R}>아무도에게도 말 못한 마음 속 편지</h1>h1 말고 h2나 h3가 좋을 것 같습니다
There was a problem hiding this comment.
앗 h1으로 되어있었군요 😅 body 텍스트인 것 같아서 p로 변경하겠습니다!!
Merged
bbearcookie
added a commit
that referenced
this pull request
Feb 6, 2024
* ✨ feat: 카카오 로그인 페이지 작성 (#59) * 📦 chore: Jalnan OTF 폰트 추가 및 logo 텍스트 스타일 추가 * ➖ remove: App.tsx 테스트 요소 제거 * 💄 design: 로그인 페이지 퍼블리싱 작업 * 💄 design: a 태그 reset css 적용 * ✨ feat: 카카오 로그인 링크 연결 * ✨ feat: POST /oauth2/authorization/kakao 모킹 및 API 함수 작성 * ✨ feat: 카카오 로그인 리다이렉션 로직 작성 * 💄 design: 카카오 로그인 버튼 주위에 패딩 추가 * 📝 style: VITE_KAKAO_URL 추가 및 p 태그 변경 * 🔨 refactor: useNavigate 훅으로 변경 * ✨ feat: 온보딩 페이지 스텝 기능 및 UI 퍼블리싱 작업 (#61) * ✨ feat: Funnel 컴포넌트 작성 * 📝 style: SigninPage에서 시맨틱 태그 변경 * 💄 design: StepTemplate 컴포넌트 작성 * ✨ feat: 온보딩 페이지 스텝 이동 관계 정리 * 🔨 refactor: useFunnelContext로 예측 가능한 퍼널 이동 함수 공유 * ✨ feat: @radix-ui/react-progress로 Progress 컴포넌트 및 스토리북 작성 * ✨ feat: NavHeader 컴포넌트 및 스토리북 작성 * 🔨 refactor: StepTemplate에서 NavHeaderProps 받는 형식으로 수정 * 💄 design: 생년월일 스텝까지 퍼블리싱 작업 * 🔨 refactor: NavHeader, Header를 끌어올리고 Step의 onEnter 사용 * ✨ feat: 성별 선택 스텝 작성 및 아이콘 2종 추가 * 💄 design: Chip의 primary 테마 background 변경 * 💄 design: 고민 선택 스텝 퍼블리싱 작업 * 🔨 refactor: useFunnelContext에 toFirst 추가 * ✨ feat: 스텝 이동 간 트랜지션 효과 추가 * ✨ feat: MusicButton 컴포넌트 및 스토리북 작성 * 📝 style: Funnel, Step 컴포넌트를 한 파일에 colocation * 💄 design: Funnel 스토리북 및 설명 추가 * 🚑 fix: 빌드 오류 수정 * ✨ feat: 온보딩 페이지 사용자 인터랙션 로직 및 모킹 API 연동 (#63) * ✨ feat: LoadingSpinner 컴포넌트 및 스토리북 작성 * 📦 chore: 상수 및 타입 정리 * ✨ feat: 닉네임 수정 모킹 및 API 관련 함수 작성 * ✨ feat: 랜덤 닉네임 뽑고 Patch 요청하는 기능 작성 * ✨ feat: 생년월일 선택 기능 * ✨ feat: GenderCard 컴포넌트 및 스토리북 작성 * ✨ feat: 성별 선택 API 모킹 및 로딩 처리 * 📝 style: 유저 관련 상수와 타입을 같은 파일에 작성 * ✨ feat: 고민 등록 로직 작성, API 모킹 로딩 처리 * ✨ feat: 생년월일 현재 년도를 최대치로 수정 * ➖ remove: 수달 중복 제거
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.
🧩 이슈 번호
✅ 작업 사항
카카오 로그인 페이지의 전반적인 UI 및 모킹 기능을 구현했어요.
(추후 실제 백엔드 API로 변경 필요)
logo텍스트 스타일 추가 및 Jalnan OTF 웹폰트 추가👩💻 공유 포인트 및 논의 사항
플로우
/signin페이지에서 카카오 로그인 버튼 클릭/signin/redirect/kakao에서 인가 코드를 백엔드 서버에 전달/onboarding)로 리다이렉션실행 화면