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

design: Page 병합(로그인 페이지, 2차 페이지) #157

Merged
merged 14 commits into from
Aug 13, 2024

Conversation

alwubin
Copy link
Collaborator

@alwubin alwubin commented Aug 12, 2024

💡 작업 내용

  • LoginForm UI 구현
  • LoginPage UI 구현
  • LandingPage UI 구현
  • TodayTalkPickPage UI 구현

💡 자세한 설명

✅ LoginForm

모달 부분을 보다 쉽게 분리하기 위해서
기존에 있던 LoginModal에서 LoginForm 부분을 molecule로 분리하여 구현 후 LoginModal에 import하여 사용하였습니다.
+) 스토리북에도 추가해두었습니다!

✅ LoginPage, LandingPage, TodayTalkPickPage

  • 모든 페이지 구현 시 사용되는 Header의 shadowBox 및 Footer 수정하였는데, 추가적으로 아름님 pr에 맞추었습니다!
  • route는 이미 추가되어있는 LandingPage을 제외한 나머지 페이지에 대해서만 추가해주었습니다. 각각 /login/todaytalkpick으로 추가해두었습니다.
  • 페이지 스크린샷 첨부하겠습니다

TodayTalkPickPage LandingPage LoginPage

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

  • PR 제목을 형식에 맞게 작성했나요?
  • 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
  • 이슈는 close 했나요?
  • Reviewers, Labels, Projects를 등록했나요?
  • 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
  • 테스트는 잘 통과했나요?
  • 불필요한 코드는 제거했나요?

closes #153

@alwubin alwubin added ✔︎pull requests pull requests 코드 체크 요청 👩🏻‍💻 frontend 프론트엔드 작업 🎨 markup labels Aug 12, 2024
@alwubin alwubin self-assigned this Aug 12, 2024
Copy link
Collaborator

@areumH areumH left a comment

Choose a reason for hiding this comment

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

로그인 페이지와 모달에 재사용되는 부분 login form으로 따로 분리한 것 너무 좋은 것 같습니다👍👍
2차 페이지 병합 구현하시느라 수고 많으셨어요!!!

Copy link
Collaborator

@WonJuneKim WonJuneKim left a comment

Choose a reason for hiding this comment

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

loginfrom 을 별도로 분리한 부분 확인했습니다! 추후 api 연동이나 데이터 패칭 시에도 이렇게 분리하면 이 역할을 하는 부분을 보다 확실하게 찾아갈 수 있을거같네요!
수고 많으셨습니다 😄

@@ -0,0 +1,67 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
Copy link
Collaborator

Choose a reason for hiding this comment

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

해당 주석은 어떤 코드에 대해서 lint 를 예외 처리 한 건지 알 수 있을까요?!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

코드를 제가 작성한게 아니라 잘은 모르지만, 하단 소셜 로그인 버튼값을 받아오는데 버튼 안에 텍스트 없이 svg만 있어서 발생하는 eslint인거 같아요.!!

Comment on lines +29 to +38
<Input
icon={<Envelope />}
placeholder="이메일"
style={{ width: '450px' }}
/>
<Input
icon={<Lock />}
placeholder="비밀번호"
style={{ width: '450px' }}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

input 컴포넌트를 확인해보니 width 관련 css 속성이 없더라구요. 재사용되는 input의 케이스가 한정적이라면 width 역시 스타일을 case 별로 지정해도 좋을거같다고 생각합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

오오 생각하지 못했는데 좋은 생각인거 같아용 ㅎㅎ

@alwubin alwubin merged commit 394fc4d into dev Aug 13, 2024
3 checks passed
@alwubin alwubin deleted the design/153-page-ui-yb branch October 30, 2024 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👩🏻‍💻 frontend 프론트엔드 작업 🎨 markup ✔︎pull requests pull requests 코드 체크 요청
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Page 병합(로그인 페이지, 2차 페이지)
3 participants