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

[BB-1396] Login UI 구현 및 기타 설정 변경 #17

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

suhotang
Copy link

주요 변경 사항

  1. window에서 yarn 환경 세팅을 위해 아래와 같은 변경 사항 추가
    • .yarnrc.yml 파일을 생성하여 enableGlobalCache: false, yarnPath 등의 설정 추가
    • .yarn/release/yarn-4.4.1.cjs 파일 추가
  2. 기본 Layout 변경
    • header의 position을 "sticky"로 변경하고 globals.scss에서 body에 margin-top 설정하는 부분 삭제
    • header 높이 변경 (48px => 80px)
    • src/app/layout.tsx에서 Header 및 Footer 렌더링 부분 삭제
      • 필요한 레이아웃을 화면별로 적용하도록 추후 수정이 필요할 듯
  3. react-query client provider 추가
    • src/shared/provider/react-query-provider.tsx 파일을 추가하여 react-query client를 주입하는 Provider 구현
    • src/app/layout.tsx에 적용
  4. env-cmd 패키지 추가, dev script 실행 시 .env.local 파일을 사용하도록 설정
  5. 로그인 UI 구현
    • app/auth/signin/page.tsx 파일 추가하여 Login 화면 구현
    • 다크 모드도 적용 완료
  6. 로그인 로직 구현
    • 로그인 프로세스 수행 시 필요한 API 및 DTO 정의
    • 현재 구글 로그인 구현 완료
  • TBD
    • 카카오 로그인 구현
    • 애플 로그인 구현
    • 프로필 정보 저장 기능 구현
    • 중복 계정 로그인 시 오류 처리

확인 필요 사항

  • 1 ~ 4번 변경 사항은 다른 분들 작업에도 영향을 줄 수 있으니, 확인 후 피드백 부탁드립니다!

suhotang and others added 10 commits October 9, 2024 00:23
1. src/assets => public/assets로 이동
- Next에서 static assets는 public 하위에서 관리해야 한다고 해서 이동시켰습니당
- https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets
2. 페이지 레이아웃 코드 변경
- 기본 Layout 컴포넌트 (src/app/layout.tsx)
    - RootLayout에서 Header와 Footer 제거, 필요한 레이아웃을 Page 컴포넌트에서 적용하여 사용하도록 함
- Home 페이지 컴포넌트 (src/app/page.tsx)
    - HomeLayout 컴포넌트를 별도로 구현하여 적용
- 공통 Header 컴포넌트 (shared/components/layouts/header/header.scss)
    - position: sticky로 변경
3. globals.css에 있는 body - margin-top: 48px => 0px으로 변경
- Header 컴포넌트 position을 sticky로 변경하면서 margin-top style이 필요없어짐
- yarn 설정 파일 추가, 로그인 화면 구현중
- 로그인 화면 UI 구현, 다크모드 적용
- TODO: 로직 구현 중
- Google Login 로직 구현 중
- 로그인 화면 버튼 클릭 시 각 소셜 화면으로 리다이렉트 되도록 링크 설정
- 로그인 화면에서 소셜 화면으로 리다이렉트 시, 로딩 화면을 표출하도록 설정
- 구글 로그인 로직 구현
    - 로그인 API 및 react-query hook 정의
    - 구글 로그인 Flow 구현
- react-query client provider 추가 및 적용
- console.log 제거, TODO 주석 추가
- gitignore에 .env 파일 추가
- page.tsx 병합 잘못된 부분 수정
- variables.css에 root variable 추가
    - gnb-height: 80px 추가
- SignIn 화면에서 사용되는 이미지 사이즈 지정용 변수 추가
    - imageSize = 52
@suhotang suhotang requested review from injulme and yunyeop November 18, 2024 10:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants