Skip to content
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.

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

feat: 회원가입 로직 개발 및 Button 컴포넌트를 수정합니다. #134

Merged
merged 8 commits into from
Aug 13, 2024

Conversation

summermong
Copy link
Collaborator

@summermong summermong commented Aug 9, 2024

🤔 어떤 문제가 발생했나요?

  • 소셜 로그인 성공 시 닉네임 수정/성별 기입 등 회원가입 절차가 추가되었습니다.
  • 성별 페이지 개발 시 버튼 컴포넌트에 className으로 준 스타일링이 적용되지 않는 이슈가 있었습니다.
    • 기존 Button 컴포넌트는 typeStylesMap.get(props)와 같은 형태로 스타일링 작업하여 props의 default 값이 필요했습니다. 따라서 buttonType, variant가 primary, solid로 작성되어 있다 보니 삼항연산자와 같이 조건에 따라 스타일링을 줄 때 모두 추출하여 스타일링이 적용되지 않았습니다. (참고)

🎉 어떻게 해결했나요?

  • 소셜 로그인
    • 닉네임 수정은 /join/nickname, 성별 기입은 /join/gender로 경로를 팠습니다.
    • 카카오/구글 소셜 로그인 성공 시 /join/nickname으로 이동하도록 했습니다.
  • Button 컴포넌트
    • buttonType, variant가 있는 경우에만 해당 스타일을 적용하도록 && 연산자를 사용했습니다.
    • Storybook에서 className으로 스타일링을 테스트할 수 있도록 수정했습니다.

📷 이미지 첨부 (Option)

  • 소셜 로그인
    • 닉네임 수정 (공백만 입력시 제출 안됨 && 앞뒤 공백 입력은 되지만 서버로 전달 시 공백 제외 && 1자 ~ 14자 이내)
2024-08-10.1.08.12.mov
  • 성별 수정 (입력 전 모두 회색 버튼 && 한 쪽만 클릭되어야 함)
2024-08-10.1.14.47.mov
  • Button 컴포넌트 스토리북 수정
image

이런 식으로 className을 string으로 입력하면 variant, buttonType를 지정해도 추가로 스타일링이 적용됩니다.

⚠️ 유의할 점! (Option)

@summermong summermong added chore # Chores feat # Add feature refactor # Refactor code labels Aug 9, 2024
@king2dwellsang king2dwellsang added the Review Plz🙏 # Review is not yet complete label Aug 9, 2024
Copy link
Member

@wokbjso wokbjso left a comment

Choose a reason for hiding this comment

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

👍🔥

Comment on lines +30 to +31
console.log(code);
console.log(res);
Copy link
Member

Choose a reason for hiding this comment

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

console.log가 들어가있어요~~
구글로그인 테스트때문에 넣어뒀던건가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

맞습니다 ㅠㅠ 확인하고 지울 예정이에요!

Comment on lines 70 to 74
className={flex({
direction: 'column',
justifyContent: 'center',
textAlign: 'center',
padding: '20px',
Copy link
Member

Choose a reason for hiding this comment

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

외부 스타일 주입이 아닌 스타일 적용은 buttonStyles 처럼 따로 빼는거도 괜찮을 것 같아요!

import { flex } from '@/styled-system/patterns';

export interface GenderData {
gender: string;
Copy link
Member

Choose a reason for hiding this comment

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

gender는 남자 or 여자 둘 중 하나이기 떄문에 모든 string 타입을 열어두는거 보다는 'W' | 'M' 으로 선언해 주는게 좋을 것 같아요!

@king2dwellsang king2dwellsang added Approved 🆗 # Review is completed and removed Review Plz🙏 # Review is not yet complete labels Aug 12, 2024
Copy link
Collaborator

@hjy0951 hjy0951 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

현민님께서 말씀해주셨듯이 스타일 코드를 따로 빼서 적어주면 뷰 로직을 보기 더 편할 것 같다는 생각이 드네요!

Comment on lines +35 to +36
console.log('전달한 코드:', JSON.stringify({ code: GOOGLE_CODE }));
console.log('응답:', response);
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 console 들도 빠져야할 것 같습니다!

@summermong summermong merged commit 4b8688f into main Aug 13, 2024
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved 🆗 # Review is completed chore # Chores feat # Add feature refactor # Refactor code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants