[FE] feat: 소셜 연동 로그인 버튼 및 로그인 요청 모달

[ImxYJL]

• resolves [FE] Github 연동 로그인 버튼 및 로그인 제안 모달을 생성한다. #1019

---

🚀 어떤 기능을 구현했나요 ?

• 소셜 연동 로그인 버튼을 만들 수 있는 공통 컴포넌트 제작
• 위 컴포넌트를 이용해서 깃허브 로그인 컴포넌트 제작 (또한 공통 컴포넌트)
• 비로그인 상태에서 연결 페이지의 로그인 동작을 선택한 경우에 띄우는 로그인 요청 모달

🔥 어떻게 해결했나요 ?

LoginButton의 props

나중에 깃허브 외의 다른 소셜이 추가될 수 있다고 생각해서 공통 컴포넌트로 만들었습니다.

• platform과 engPlatform: 소셜 이름 뒤에 조사를 붙이기 위해 2개로 나눴습니다. 조사를 구해주는 유틸 함수가 한글 기준이라 영문이 오면 조사를 제대로 표현할 수 없었습니다. 그래서 유저에게 표시할 영문(optional)과 조사 유틸 호출을 위한 한글 표현을 모두 받습니다.

  • Google, Github처럼 영문이 자연스러운 소셜도 있고 네이버, 카카오톡 등 한글이 자연스러운 소셜이 있어서 Github에만 예외를 주는 대신 props를 분리해버렸습니다.

• $logoStyle의 정체: 로고의 크기를 조절하고 싶을 때 사용합니다.

  • LoginButton이 공통 Button 컴포넌트를 사용하는데, 버튼의 스타일은 Button의 $style로 줄 수 있습니다.
  • 하지만 모달의 children으로 들어가는 요소인 로고 이미지 스타일을 외부에서 따로 조정하는 것은 불가능해서, LoginButton 단에서 스타일 속성을 따로 만들어줬습니다.

LoginRequestModal 구현 방법 관련

상황에 따라 모달 타이틀이 다릅니다. ('로그인하시겠어요?' 와 '회원이신가요?')
그래서 타이틀을 children으로 받을까 했지만, '로그인 요청 모달'이라는 로그인 특화 모달이라서 타이틀 문구를 상수나 타입으로 모달 안에서 관리하는 게 더 낫다고 생각했습니다.
지금은 간단하게 모달 안에서 type으로 사용하고 있습니다.

type LoginRequestTitleType = 'loginIntent' | 'membershipCheck';

...

const getTitleLabel = (titleType: LoginRequestTitleType) => {
    if (titleType === 'loginIntent') return '로그인하시겠어요?';
    if (titleType === 'membershipCheck') return '회원이신가요?';
  };

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 피그마 원본에는 모달에 x 버튼이 없는데 UX상 있어야 할 것 같아 ContentModal을 사용해서 만들었습니다.
  
  ㄴ 참고) 사진은 왠지 오른쪽이 좁아 보이는데 실제로 보면 중앙정렬은 맞습니다.

📚 참고 자료, 할 말

메리크리~

[ImxYJL]

로그인하기 앞에 띄어쓰기를 하는 방법으로 구현할 수 있지만 공백이 명시적으로 있다는 것을 표현하기 위해 {' '} 를 사용했습니다.