✨ feat: 로그인 및 회원가입 페이지 구현 #47
Open
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
- 모달 기반 임시 로그인 기능 제거 - /signin, /signup 페이지 라우팅 추가 - 사이드바와 네비게이션의 로그인 관련 로직 관리 - 페이지 컴포넌트 네이밍 컨벤션 통일
jungmyunggi
approved these changes
Feb 13, 2025
Comment on lines
+30
to
+52
| <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 0.6 }}> | ||
| Write | ||
| </motion.span>{" "} | ||
| <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 0.8 }}> | ||
| Today, | ||
| </motion.span> | ||
| <br /> | ||
| <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 1 }}> | ||
| Shape | ||
| </motion.span>{" "} | ||
| <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 1.2 }}> | ||
| Tomorrow | ||
| </motion.span> | ||
| </motion.h1> | ||
|
|
||
| <motion.p | ||
| className="mt-4 max-w-md text-xl text-white/90" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 1.4 }} | ||
| > | ||
| 당신의 성장을 기록하는 공간 | ||
| </motion.p> |
There was a problem hiding this comment.
p4) 위에 url이랑 여기 나오는 글들은 머지전에 교체하시는건가요?
There was a problem hiding this comment.
음 어떤 url 말씀하시는걸까요
Comment on lines
+12
to
+18
| const handleSocialLogin = () => { | ||
| toast({ | ||
| title: "서비스 준비 중", | ||
| description: "서비스가 현재 개발 중입니다. 곧 만나요!", | ||
| duration: 3000, | ||
| }); | ||
| }; |
There was a problem hiding this comment.
p3)아래 버튼을 눌러도 해당 토스트가 안나오네요
Comment on lines
+12
to
+36
| return ( | ||
| <> | ||
| <AuthCard title="로그인" description="로그인을 해주세요"> | ||
| <form className="space-y-4"> | ||
| <div className="space-y-2"> | ||
| <Input type="email" placeholder="이메일을 입력하세요" required /> | ||
| <Input type="password" placeholder="비밀번호를 입력하세요" required /> | ||
| </div> | ||
| <Button className="w-full" type="submit"> | ||
| 로그인 | ||
| </Button> | ||
| </form> | ||
| <AuthSocialLoginButtons /> | ||
| <div className="mt-4"> | ||
| <Button | ||
| variant="link" | ||
| className="text-muted-foreground underline underline-offset-4 h-auto p-0" | ||
| onClick={() => navigate("/signup", { state: { from: location.pathname } })} | ||
| > | ||
| 계정이 없으신가요? | ||
| </Button> | ||
| </div> | ||
| </AuthCard> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
p3) 비회원 사용자를 위해서 서비스 홈으로 가는 버튼이 있었으면 좋을것 같습니다.
There was a problem hiding this comment.
아하 비회원 사용자 누르면 guest라고 사용자가 떠야 할까요 ?? 아니면 그냥 따로 처리 안 하고 서비스 홈으로만 돌아가는걸 넣으면 될까요??
팀 내에서 이런 이야기를 안 해봤던 것 같은데(제가 놓쳤다면 죄송합니다), 전체 회의를 해봐서 정하는 방법도 있을 것 같네요
There was a problem hiding this comment.
내일 스프린트리뷰 때 이야기 한번 해봅시다!
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.
🔨 테스크
📋 작업 내용
UX 최적화
페이지 초기 진입 시에는 framer-motion을 활용해 왼쪽 배너(
AuthBanner)가 슬라이드되며 나타나도록 했지만, 이후 로그인/회원가입 폼 전환 시에는 반복적인 애니메이션으로 인한 사용자 피로도를 우려해AuthBanner가 움직이는 애니메이션을 제거했습니다. "Write Today, Shape Tomorrow"라는 슬로건의 페이드인 애니메이션은 유지했으나, 피드백을 통해 제거 여부를 결정할 것입니다.컴포넌트 분리 및 구조화
로그인과 회원가입 기능 각각의 확장성을 고려했습니다. 초기에는 하나의
AuthForm컴포넌트 내에서 prop으로 구분하여 처리하려 했지만 향후 각 기능이 독립적으로 커질 것을 고려해AuthSignInForm과AuthSignUpForm으로 분리했습니다. 아직 백엔드 파트에서 소셜 로그인에 대한 설계 및 구현이 완료되지 않아 우선 로그인 시에만 소셜 로그인에 대응하는 Button을 구현했습니다.레이아웃 구조
레이아웃은 크게 두 부분으로 나누어 구현했습니다. 왼쪽의 브랜딩 배너(
AuthBanner)는 서비스의 슬로건을 나타내었습니다. 오른쪽에는 실제 로그인 혹은 회원가입을 할 수 있는 인증 폼이 위치합니다.소셜 로그인 아이콘 컴포넌트화
소셜 로그인 아이콘들은 TypeScript 컴포넌트로 구현했습니다. SVG를 TypeScript 컴포넌트로 만든 이유는 아래와 같습니다.
참고사항
/components/auth/폴더 밑에 구현되어 있어요AuthSignInForm.tsx,AuthSignUpForm.tsx)AuthForm.tsx)로 두고 삼항 연산자로 하다가 뭔가 나중가면 엄청 복잡해질 수도 있을 것 같아 나눴습니다📷 스크린 샷