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

ImxYJL · 2024-12-24T02:46:30Z

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 · 2025-01-04T07:00:20Z

frontend/src/components/common/LoginButton/index.tsx

+          {calculateParticle({
+            target: platform,
+            particles: { withFinalConsonant: '으로', withoutFinalConsonant: '로' },
+          })}{' '}


텍스트 자체를 바꾸는 방향으로 1차 리팩토링했습니다!

BadaHertz52

올리 로그인 연동 버튼,모달 만드느라 고생했어요

확장성, 재사용성 측면에서 올리가 고민하게 느껴졌어요 👍
코멘트 남겨놨으니 확인부탁해요

새해 복 많이 받아요!! 올리!!!

로그인 관련된 컴포넌트들을 components 하위에 login 폴더로 모아서 관리해주실 수 있나요?

BadaHertz52 · 2025-01-01T11:03:56Z

frontend/src/components/common/LoginButton/index.tsx

+          {engPlatform || platform}
+          {calculateParticle({
+            target: platform,
+            particles: { withFinalConsonant: '으로', withoutFinalConsonant: '로' },


platform은 플랫폼의 한국어 명인가요?

engPlatform이 있다면 platform보다 우선 적용되는데, 조사유틸함수인 calculateParticle에서는 target이 platform인 이유가 있나요?

플랫폼 조사 계산에 대한 추가 의견

소셜 이름을 props로 받아서 조사를 계산하는 것보다는
버튼 text를 props으로 받는 거는 어떨까요?

영어의 경우 '으로(로)' 식으로 메세지가 표시되는 한계가 있어요.
리뷰이,리뷰어의 이름은 클라이언트측에서 예측할 수 없어서 조사 선택이 어려웠지만 소셜의 경우 클라이언트에서 코드단으로 조사를 설정할 수 있으니 이 편이 더 좋을 것 같아요

✋ 조사 계산 추가 의견

지금 문제가 Github으로 로그인 하기에서 조사가 영문과 결합되어 있어서 계산하기 어려운 것 같아요.
버튼 문구는 추후에 바뀔 가능성도 있으니까, 바다 의견처럼 text를 props로 받거나 혹은 버튼 문구를 ~~ 계정으로 로그인으로 바꾸는건 어떤가요??

1번 - 맞습니당
2번 - 유저에게 보여줘야 하는 이름이 영문일 때, 영문을 우선으로 보여주되 (|| 사용한 부분) 조사 계산 유틸 함수를 사용하기 위해서는 한글 이름을 써야 하기 때문에(target 부분) 이런 모습이 되었습니다.

다만 이 방식이 덜 직관적이고 유지보수도 어려울 것 같아서 바다의 제안대로 props로 받아버리거나(대신 텍스트를 완성하는 부담이 컴포넌트를 사용하는 개발자에게 가겠지만, 간단한 문구라 사실상 부담이 없을 것 같네요. 오히려 지금이 더 부담스러워 보이는군요...) 쑤쑤 말대로 아예 문구를 바꿔버리는 것도 좋아 보입니다!
저는 이왕 컴포넌트 따로 만들었겠다, 그냥 문구를 바꿔버려서 텍스트 렌더 책임을 버튼 컴포넌트에 완전히 주는 게 조금 더 낫다는 생각이 드네요.

BadaHertz52 · 2025-01-01T11:05:11Z

frontend/src/components/common/LoginButton/index.tsx

+  $logoStyle?: React.CSSProperties;
+  $style?: React.CSSProperties;


스타일 관련 props가 두 개라 버튼 style의 Props명에 버튼에 대한 스타일이라는 게 보였으면 좋겠어요

둘을 더 명확히 구분하면 좋겠다는 것일까요? 일단 $style은 기본 Button 스타일과 이름을 맞춰줬고 특이케이스인 $logoStyle에만 설명을 덧붙이기는 했습니다.

LoginButton을 사용하는 입장에서는 기본 Button 스타일이어도 $buttonStyle, $logoStyle로 구분해서 각각이 어떤 스타일인지를 명확하게 보여주면 좋을 것 같아요

Button을 곧장 사용하지 않고 다른 컴포넌트로 한번 더 감싸서 사용하는 구조라, props 이름을 통일하는 것보다 각자의 역할을 명확하게 드러내는 게 사용자 입장에서 더 좋을 것 같네요. 수정해서 올릴게요!

BadaHertz52 · 2025-01-01T11:06:13Z

frontend/src/components/common/LoginButton/styles.ts

+  align-items: center;
+`;
+
+export const LogoImg = styled.img<Omit<LoginButtonStyleProps, '$style' >>`


타입 유틸리티를 사용한다면, Omit 보다는 Pick이 여기서는 이미지 관련 스타일을 특정하는데 좋을 것 같아요

확실히 Pick이 더 맥락에 맞는 사용이네요!

BadaHertz52 · 2025-01-01T11:09:22Z

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/index.tsx

+
+import * as S from './styles';
+
+type LoginRequestTitleType = 'loginIntent' | 'membershipCheck';


타입명 뒤에 Type을 사용한 이유가 있나요?

아마 만들다가 무의식중에 붙였을 확률이 높습니다...ㅋㅋㅋㅋ 많은 타입들이 -Type을 붙이고 있지 않았던 것 같아 수정할 예정인데, 컨벤션에 명시되어 있지는 않아서 이것도 한번 논의해보고 컨벤션 문서에 추가할지 정해보면 좋을 것 같아요~

BadaHertz52 · 2025-01-01T11:14:39Z

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/index.tsx

+        <GithubLoginButton
+          handleClick={() => {}}
+          $logoStyle={{ height: '3rem' }}
+          $style={{ fontSize: '1.3rem', height: '4rem', width: '100%' }}


theme에서 정한 fontsize가 아닌 1.3rem을 사용한 이유가 있을까요?

Figma를 참고하되 무작위로 값을 넣어보면서 가장 자연스러운 사이즈를 넣어서 1.3이 들어갔습니다.
되도록이면 theme에서 정한 사이즈를 사용하는 게 좋을까요?

theme의 fontsize로 가능한 경우는 이를 활용하는게 좋을 것 같아요 theme을 만든 이유는 유지보수의 편의성도 있고 스타일의 일관된 규칙이라서요

디자인이 일정 배율을 고려하고 만든 게 아니라 크게 신경쓰지 않았는데 그래도 이왕 있는 값을 쓰는 게 낫겠네요. 피그마와 조금 다른 느낌이지만 1.4를 적용했을 때도 자연스러워서 1.4로 설정하면 좋을 것 같아요.

수정하는 김에 버튼의 폰트 크기 기본값을 theme의 small 사이즈로 주려고 했는데, 그러면 그 기본값이 사용자 설정값을 무조건 덮어쓰게 돼서 기본값 적용은 하지 않고 사용처에서 1.4rem을 명시하는 방법으로 고쳤습니다!

BadaHertz52 · 2025-01-01T11:15:50Z

frontend/src/components/common/GithubLoginButton/index.tsx

+      logoSrc={GithubWhiteLogoIcon}
+      $logoStyle={$logoStyle}
+      $style={$style}
+    ></LoginButton>


LoginButton 컴포넌트 self closing 될 것 같은데 안되나요?

soosoo22

올리~ 로그인 버튼과 모달 만드느라 수고했어요!
이젠... 리뷰미에서 공통 컴포넌트 담당....이 된 것 같아요😂 그만큼 올리의 손을 거쳐간 공통 컴포넌트가 많기도 하고, 올리의 고뇌가 느껴지는 코드기도 해요. 참고로 저도 공통 컴포넌트 만들 때, 올리의 코드를 참고한답니다~

몇 가지 코멘트 남겼으니 확인해주세요!

soosoo22 · 2025-01-03T08:57:06Z

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/index.tsx

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


혹시 LoginRequestModal 이 작성페이지 폴더 안에 있는 이유가 있나요??
로그인 관련 컴포넌트를 한군데서 관리하는 게 찾기 편할 것 같아요. components/common/ 안에 로그인 폴더를 하나 파서 거기 안에 다가 LoginRequestModal, GithubLoginButton, LoginButton 모두 넣는 것도 좋을 것 같아요!

최근 작성 페이지에 상주했더니 이런 불상사가...😂 새로 파서 옮겼어요!
폴더 위치는 바다가 제안해준대로 components/login으로 했어요. 저도 그전에는 common이나 그 이하에 넣을까 했는데 common에는 더 범용적인 컴포넌트만 들어가면 좋을 것 같아서(Button은 common 소속이지만 LoginButton은 login으로~ 같은 느낌) 그렇게 결정했습니다!

soosoo22 · 2025-01-03T09:11:39Z

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/index.tsx

+  return (
+    <ContentModal title={getTitleLabel(titleType)} handleClose={closeModal} isClosableOnBackground={true} $style={{}}>
+      <S.LoginRequestModal>
+        <S.LoginRequestLabel>로그인 후 간편하게 받은 리뷰를 확인하세요!</S.LoginRequestLabel>
+        <GithubLoginButton
+          handleClick={() => {}}
+          $logoStyle={{ height: '3rem' }}
+          $style={{ fontSize: '1.3rem', height: '4rem', width: '100%' }}
+        />
+      </S.LoginRequestModal>
+    </ContentModal>
+  );
+};
+


로그인에 실패했을 경우 버튼 밑에 로그인에 실패했어요 문구를 띄워주기로 했어요. PasswordModal 처럼 버튼 밑에 에러 메시지를 표시할 영역을 만들어야 할 것 같아요!

헉;;; 큰일날뻔했네요 추가하겠습니다!!!!

soosoo22 · 2025-01-03T09:28:20Z

frontend/src/components/common/LoginButton/index.tsx

+          {engPlatform || platform}
+          {calculateParticle({
+            target: platform,
+            particles: { withFinalConsonant: '으로', withoutFinalConsonant: '로' },


✋ 조사 계산 추가 의견

지금 문제가 Github으로 로그인 하기에서 조사가 영문과 결합되어 있어서 계산하기 어려운 것 같아요.
버튼 문구는 추후에 바뀔 가능성도 있으니까, 바다 의견처럼 text를 props로 받거나 혹은 버튼 문구를 ~~ 계정으로 로그인으로 바꾸는건 어떤가요??

ImxYJL · 2025-01-04T07:07:03Z

1월 4일 추가 리팩토링 1

쑤쑤와 바다의 리뷰를 반영했습니다.
제일 중요한 변경사항 위주로 정리해 올립니다!

누락됐던 에러 메세지 구역 추가

버튼 텍스트 변경

조사를 사용하는 과거 로직이 이해하기 힘들다는 의견이 있었습니다.
영문/한글 중 무엇을 사용해도 조사를 사용할 수 있도록 하기 위한 로직이었는데 필요 이상으로 복잡한 것 같아 제거했습니다.

리팩토링 방향으로는

버튼에서 보여줄 텍스트 전체를 props로 받기
아예 버튼 텍스트 문구를 바꿔서 조사를 사용하지 않아도 무방하도록 변경

이 있었는데, 컴포넌트를 사용할 때 전체 텍스트 말고 플랫폼 이름만 전달하면 더 편리할 것 같아 문구를 바꿨습니다.

chysis

리팩토링 이전, 이후 코드 모두 확인해보았어요 :)
텍스트를 수정하면서 조사 분기 처리가 필요 없어진 부분 좋네요! (물론 이전 코드는 올리의 디테일함이 보였습니다)

두 가지 style props를 받는 코드에서 제안할 것이 있어 코멘트 남겼습니다. 작업하느라 고생했어요!!

chysis · 2025-01-04T11:10:33Z

frontend/src/components/login/GithubLoginButton/index.tsx

+      $logoStyle={$logoStyle}
+      $style={$style}


$style 대신 $buttonStyle을 사용해서 각각이 어떤 요소의 스타일을 의미하는지 명확하게 하는 것은 어떨까요?

chysis · 2025-01-04T11:10:54Z

frontend/src/components/login/LoginButton/index.tsx

+  $logoStyle?: React.CSSProperties;
+  $style?: React.CSSProperties;


이 부분도 같은 맥락입니다!

chysis · 2025-01-04T11:11:31Z

frontend/src/components/login/LoginButton/index.tsx

+    <Button onClick={handleClick} styleType="primary" style={$style}>
+      <S.ButtonLabelContainer>
+        <S.LogoImg src={logoSrc} alt={`${platform} 로고`} $logoStyle={$logoStyle} />
+        <span>{platform} 계정으로 로그인하기</span>


조사 걱정 없이 모든 소셜 서비스에 대해 사용 가능하겠네요👍🏻

chysis · 2025-01-04T11:26:26Z

frontend/src/components/login/LoginRequestModal/index.tsx

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


현재 플로우에서는 모달이 뜨는 경우가 두 가지 뿐이어서 if문도 괜찮지만, 만약 나중에 경우가 늘어난다면 Record 타입의 객체로 문구를 보관하거나 switch문으로 리팩토링하는 것도 좋을 것 같네요!

일단 titleType이 크게 늘어날 것 같진 않아서 if문으로 작성하긴 했는데, 그래도 아예 닫힌 영역은 아니다보니 확장하는 게 좋을 것 같아요~
본격적인 상수화는 오히려 가독성이 떨어질 것 같고, Switch문과 Record를 고민한 결과 문자열 리터럴을 사용하지 말고 객체로 묶어두는 게 가독성, 유지보수성 면에서 좋을 것 같아 Record를 도입했습니다!

BadaHertz52 · 2025-01-05T03:56:34Z

frontend/src/components/index.tsx

@@ -2,3 +2,4 @@ export * from './layouts';
 export * from './common';
 export * from './error';
 export * from './highlight/components';
+export * from './login';


ImxYJL · 2025-01-05T06:07:52Z

1월 5일 추가 리팩토링 2

로그인 모달의 타이틀 관리 방법을 Record로 변경

type LoginRequestTitle = 'loginIntent' | 'membershipCheck';

const LoginRequestTitleMap: Readonly<Record<LoginRequestTitle, string>> = {
  loginIntent: '로그인하시겠어요?',
  membershipCheck: '회원이신가요?',
};

괜히 get함수 쓰지 말고 Record 쓸걸 싶었네요 😅

if문, switch문: 제일 단순하지만 사용자에게 보여줄 문자열 리터럴을 titleType과 엮을 수 없음
Record 객체 사용: titleType을 key로 이용하기 편함
단순 객체 상수화: 객체 리터럴이라 단순하지만 key를 가져오는 코드 필요

여러 스타일 객체를 사용할 때 헷갈리지 않도록 스타일 이름을 명확하게 했습니다.

버튼 전용 스타일: buttonStyle
로고 이미지 전용 스타일: logoImgStyle

chysis · 2025-01-06T07:14:26Z

피드백 반영한 것 확인했습니다!! 고생했어요 올리👍🏻

BadaHertz52 · 2025-01-07T02:52:38Z

frontend/src/components/login/LoginRequestModal/index.tsx

+
+type LoginRequestTitle = 'loginIntent' | 'membershipCheck';
+
+const LoginRequestTitleMap: Readonly<Record<LoginRequestTitle, string>> = {


불변하는 상수라면 변수명을 '대문자 + 스네일 케이스'로 변경해주실 수 있나요?

key값을 따로 타입으로 빼는 것보다는 key of typeof 를 사용해 변수가 바뀌면 key 타입도 자동으로 바뀌는 방법도 있어요.

Map이 네이밍에 들어가 있지만, Map객체가 아니라서 사용 시 혼동이 올 수 있을 것 같아요.

타입 값으로 리터럴을 사용하고 있지만, 순수한 상수가 아니라 타입에 속한 값이라고 생각해서 상수 컨벤션 처리는 하지 않았습니다.

리팩토링하면서 생각했던 건 값 접근이 정적이고, 변화가 빈번하지 않으니 코드를 간단하게 가져가자 였어요. 생각났던 방법 중에서 상수화는 코드가 좀 더 늘어나서(key와 value를 따로 관리) 제외했는데, 다시 생각해보니까 아래처럼 간단하게 사용할 수 있겠네요.

이런 방식을 염두에 두셨던 걸까요?

const LOGIN_REQUEST_TITLE = { loginIntent: '로그인하시겠어요?', membershipCheck: '회원이신가요?', } as const; type LoginRequestTitle = keyof typeof LOGIN_REQUEST_TITLE; interface LoginRequestModalProps { titleType: LoginRequestTitle; closeModal: () => void; }

map 네이밍은 당장 다른 것들과 안 겹치게 할 만한 걸 찾다가 일단 붙였던 건데, 상수로 고친다면 고려할 필요가 없긴 합니다!

일단 위 방식이 가독성도 괜찮고 네이밍 문제도 없어서 반영해 올려두도록 하겠습니다~!

올리의 구현의도를 이해해보자면, '순수한 상수가 아니라 타입에 속한 값' 이라는게 'loginIntent', 'membership'라는 키를 말하는 것 같네요.

제가 코드를 봤을 때는 키로 객체에 접근해서, title을 동적으로 사용하는 로직으로 이해했어요. 그래서 객체(변경 전 기준 'LoginRequestTitleMap') 속성의 값을 사용하는 것이기 때문에, 객체 자체는 불변하는 상수로 취급하고 키를 타입으로 따로 빼는 게 제가 이해한 올리의 구현 의도를 잘 들어낸다고 생각했어요.

BadaHertz52 · 2025-01-08T11:24:38Z

frontend/src/components/login/LoginRequestModal/index.tsx

+  loginIntent: 'loginIntent',
+  membershipCheck: 'membershipCheck',
+} as const;


const LOGIN_REQUEST_TITLE = { loginIntent: '로그인하시겠어요?', membershipCheck: '회원이신가요?', } as const;

이게 아니네요?

변경했습니다 😂 냅다 key값 보여줄 뻔...

BadaHertz52

올리 변경 사항 확인했어요. 고생했어요~~

ImxYJL added 7 commits December 23, 2024 20:15

feat: LoginButton 컴포넌트트

67027db

feat: GithubLoginButton 컴포넌트트

15b5954

chore: component 파일의 index에 GithubLoginButton, LoginButton 추가가

4771c82

refactor: style 전용 인터페이스 분리 및 공통 컴포넌트 import 경로 수정정

955d672

chore: modals의 index에 ContentModal 추가가

5ab71db

feat: LoginRequestModal 컴포넌트트

ce28545

refactor: 클릭 핸들러 네이밍 간소화

d86064f

ImxYJL added 🍀 FE 우선순위: 상 🚀 기능 🎨 디자인 labels Dec 24, 2024

ImxYJL self-assigned this Dec 24, 2024

ImxYJL requested review from chysis, BadaHertz52 and soosoo22 as code owners December 24, 2024 02:46

ImxYJL linked an issue Dec 24, 2024 that may be closed by this pull request

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

Closed

ImxYJL commented Dec 24, 2024

View reviewed changes

BadaHertz52 reviewed Jan 1, 2025

View reviewed changes

soosoo22 approved these changes Jan 3, 2025

View reviewed changes

ImxYJL added 6 commits January 4, 2025 14:45

chore: components 하위에 login 폴더 생성 및 관련 컴포넌트 이동

70be410

chore: login 폴더 추가 이동

212532e

chore: 주석 삭제

4c27aa1

chore: self-closing 적용

9a4af27

chore: LoginRequestTitle 타입에서 -type 접미사 삭제

a83b8da

refactor: useTheme 사용 및 스타일 인터페이스에 Omit 대신 Pick 적용

d6b2dce

ImxYJL added 2 commits January 4, 2025 16:08

feat: 로그인 요청 모달에 에러 메세지 구역 추가

b644c49

refactor: LoginButton 문구 수정 및 그에 따른 컴포넌트 구조 수정

69837c0

chysis reviewed Jan 4, 2025

View reviewed changes

BadaHertz52 reviewed Jan 5, 2025

View reviewed changes

ImxYJL added 3 commits January 5, 2025 15:01

refactor: 스타일 객체의 이름을 명확하게 수정

17b1625

refactor: LoginRequestTitleMap 생성

c4bf793

fix: LoginRequestTitleMap에 readonly 추가

ac3d277

chysis approved these changes Jan 6, 2025

View reviewed changes

BadaHertz52 reviewed Jan 7, 2025

View reviewed changes

refactor: LoginRequestTitle 관리 방식을 객체로 변경

5e1fdac

BadaHertz52 reviewed Jan 8, 2025

View reviewed changes

fix: LOGIN_REQUEST_TITLE value를 한국어 안내로 변경

b16a273

BadaHertz52 approved these changes Jan 9, 2025

View reviewed changes

BadaHertz52 merged commit eaad162 into develop Jan 9, 2025
3 checks passed

		$logoStyle?: React.CSSProperties;
		$style?: React.CSSProperties;


		import * as S from './styles';

		type LoginRequestTitleType = 'loginIntent' \| 'membershipCheck';


		type LoginRequestTitle = 'loginIntent' \| 'membershipCheck';

		const LoginRequestTitleMap: Readonly<Record<LoginRequestTitle, string>> = {

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

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

Conversation

ImxYJL commented Dec 24, 2024 • edited Loading

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

🔥 어떻게 해결했나요 ?

LoginButton의 props

LoginRequestModal 구현 방법 관련

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

📚 참고 자료, 할 말

This comment was marked as outdated.

Choose a reason for hiding this comment

BadaHertz52 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL commented Jan 4, 2025

1월 4일 추가 리팩토링 1

누락됐던 에러 메세지 구역 추가

버튼 텍스트 변경

chysis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL commented Jan 5, 2025

1월 5일 추가 리팩토링 2

로그인 모달의 타이틀 관리 방법을 Record로 변경

여러 스타일 객체를 사용할 때 헷갈리지 않도록 스타일 이름을 명확하게 했습니다.

chysis commented Jan 6, 2025

BadaHertz52 Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 left a comment

Choose a reason for hiding this comment

ImxYJL commented Dec 24, 2024 •

edited

Loading

BadaHertz52 left a comment •

edited

Loading

ImxYJL Jan 3, 2025 •

edited

Loading

ImxYJL Jan 4, 2025 •

edited

Loading

BadaHertz52 Jan 7, 2025 •

edited

Loading

BadaHertz52 Jan 8, 2025 •

edited

Loading