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.

Sign up for GitHub

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

Jump to bottom

[FEAT] 로그인 기능을 구현한다. #279

Closed
4 of 15 tasks
ukkodeveloper opened this issue Aug 16, 2023 · 0 comments · Fixed by #315
Closed
4 of 15 tasks

[FEAT] 로그인 기능을 구현한다. #279

ukkodeveloper opened this issue Aug 16, 2023 · 0 comments · Fixed by #315
Assignees
@cruelladevil @ukkodeveloper
Labels
[ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠
Milestone
[3차] S-HOOK 사용자 플...

Comments

@ukkodeveloper
Copy link
Collaborator

ukkodeveloper commented Aug 16, 2023 •
edited
Loading

🤷 구현할 기능

로그인 기능을 구현한다.

🔨 상세 작업 내용

  • 로그인 정보 컨텍스트 생성
  • 로그인이 필요한 요청에 대해 분기를 나눈다.
    • 댓글: 댓글 입력 컴포넌트에 로그인 링크를 감싼다.
    • 좋아요: 로그인 링크로!
    • 킬링파트 수집: 로그인 링크로!
    • 아바타: 로그인 링크로!
  • 마이페이지의 경우 라우터 권한을 추가한다. 비로그인 시 로그인 링크로!
  • fetch 요청에 access token을 담는다. 요청 header authorization 에 bearer {access token} 를 추가한다.
    • 401 대응

자동 로그인 부분 추후 따로 작업

  • s-hook 홈페이지에 들어왔을 때 서버에 요청을 보내어 유저의 토큰을 확인한다.
    • 토큰을 확인하여 전역으로 로그인 상태를 저장한다.
      • 토큰이 없다면 비로그인 상태
      • 토큰이 있다면, 유효한 토큰인지 확인
      • 기간 만료로 인해 토큰을 재발급 받았다면 localstorage에 토큰을 저장한다.
      • 토큰이 유효하지 않을 경우 비로그인 상태로 두고 localstorage에 있는 토큰 정보를 지운다.

⏰ 예상 작업 시간

12시간

⏰ 마감일

  1. 17 출근 전까지 😢
@ukkodeveloper ukkodeveloper added [ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠 labels Aug 16, 2023
ukkodeveloper added a commit that referenced this issue Aug 17, 2023
@ukkodeveloper
Merge branch 'feat/#291' into feat/#279
a8b4eb1
ukkodeveloper added a commit that referenced this issue Aug 17, 2023
@ukkodeveloper
Merge branch 'main' into feat/#279
b3db7af
@ukkodeveloper ukkodeveloper mentioned this issue Aug 17, 2023
Merged
ukkodeveloper added a commit that referenced this issue Aug 17, 2023
@ukkodeveloper @cruelladevil
Feat/#279 로그인 구현 및 메인 페이지와 수집 페이지에 적용 (#315)
68b26f1 
* feat: AuthPage 구현

Co-authored-by: 윤정민 <dev.timetravel@gmail.com>

* refactor: login redirect path 상수화

* feat: auth 전역 상태 provider 구현

* refactor: CommentForm 컴포넌트 분리

* feat: avatar 컴포넌트 생성

* feat: 기본 아바타 svg 추가

* style: todo 주석 추가

* feat: AuthProvider 수정

* feat: 로그인 여부에 따라 CommentForm 조건부 렌더

* feat: 임시 로그인

* feat: authProvider accessToken을 상태로 갖도록 변경

* feat: LoginLink 컴포넌트 추가

* feat: accessToken 요청 시에 header에 credentials 추가

* feat: Header 프로필 이미지 로그인에 따라 조건부 렌더링

* feat: 로그인 상태에서 header의 icon을 누르면 My-Page로 이동

* refactor: parseJWT 분리

* feat: AuthLayout 구현 및 마이페이지에 적용

* refactor: LoginLink 삭제 후 googleAuthUrl 문자열 변수로 적용

* feat: 로그인 테스트 버튼 추가

* fix: google auth 수정

* fix: googleAuth url 문자열에서 api 제거

* fix: googleAuthUrl api 문자열 제거 정규표현식 수정

* fix: googleAuthUrl 수정

* style: 사용하지 않은 코드 제거 및 googleAuth 아이디 변경

* feat: 임시 refresh token 받는 버튼 추가

* feat: MSW votingSongs 목 데이터 추가

* fix: voting 노래들 캐러셀 스타일 수정

* feat: msw json 모킹 파일 api 따른 수정 및 voting 추가

* refactor: popularSong, votingSong 타입 분리

* feat: 캐러셀 투표중인 아이템 메인 페이지에 렌더

* feat: Header 내 테스트용 버튼 제거

* refactor: 킬링파트 등록 페이지 최신 api 적용

* chore: 에러 발생하는 storybook 제거 및 타입 수정

* fix: killing part 타입 변경으로 인한 수정

* fix: voting-parts post api 변경

* refactor: videoId를 provider로 제공하도록 변경

* feat: loginModal 컴포넌트 구현

* feat: 노래 수집 페이지에서 로그인 상황에 따라 분기 적용

* fix: google search params에 code 없는 경우 재요청

* feat: logout 기능 추가

* feat: accessToken없을 시에 oauth 페이지로 이동

* fix: 로그인 실패시 등록 모달이 생기지 않도록 수정

* fix: 로그인 하지 않을 경우 google auth 페이지로 가도록 변경

* refactor: 킬링파트 등록 버튼 "수집"에서 "등록"으로 변경

---------

Co-authored-by: 윤정민 <dev.timetravel@gmail.com>
@github-project-automation github-project-automation bot moved this from Todo to Done in 2023-shook Aug 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cruelladevil cruelladevil

@ukkodeveloper ukkodeveloper

Labels
[ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠
Projects
2023-shook
Status: Done
Milestone
[3차] S-HOOK 사용자 플로우 및 편의성 개선
2 participants
@cruelladevil @ukkodeveloper