Skip to content

Conversation

@wayandway
Copy link
Contributor

@wayandway wayandway commented Jun 22, 2024

연관된 이슈

작업 내용

  • 테스트용 로그인폼을 추가했습니다.
  • React Query의 useMutation을 사용했습니다. mutation 상태(성공, 실패, 로딩 등)를 관리할 수 있습니다.
  • 서버로부터 응답받은 유저 데이터를 Redux Toolkit 전역상태(+Persist)로 관리합니다.
  • 서버로부터 응답받은 accessToken을 로컬 스토리지에 저장합니다.

스크린샷

image

코멘트 및 논의 사항

  • (중요⭐️) 다른 페이지 및 컴포넌트에서 유저 데이터를 사용하고 싶을 때, useSelector를 사용해 Redux store의 상태를 가져올 수 있습니다. 예시
  • useSignIn 커스텀 훅의 mutation 상태를 조정해 로그인 상태에 따른 로직을 구성할 수 있어요. (로그인 후 리다이렉트 처리 등등..)
  • 로그아웃 기능 등 유저 데이터를 리셋하기 위해서는 1. clearUser 리듀서 사용 2. 로컬스토리지의 accessToken 삭제 방법 중에 선택하시면 됩니다.
  • 로그인 폼은 테스트용으로 input만 있는 상태입니다. 자유롭게 변경하셔도 돼요.
  • Redux DevTools를 설치하시는 걸 권장드립니다.

@wayandway wayandway added ✨ feat 새로운 기능 추가 🔐 auth 사용자 인증 관련 labels Jun 22, 2024
@wayandway wayandway added this to the 🔐 Auth milestone Jun 22, 2024
@wayandway wayandway self-assigned this Jun 22, 2024
Comment on lines +12 to +13
// useSelector를 사용하여 Redux store의 상태를 조회
const { user, error } = useSelector((state: RootState) => state.user);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Redux store의 상태값 조회 예시

Copy link
Contributor

@un0211 un0211 left a comment

Choose a reason for hiding this comment

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

설명 친절하게 적어주셔서 감사합니다!!
인증 관련된 작업 할때마다 이 PR 참고할게요~~

전 아직 Redux는 잘 몰라서 그 부분은 리뷰하기 어렵네요ㅠ

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import userReducer from './reducers/userSlice';
Copy link
Contributor

Choose a reason for hiding this comment

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

다른곳에서 리덕스 사용할 때 이거처럼 slice 만들고 밑에 reducer에 추가해서 상태 관리하면 되는 건가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

네 맞습니다! 개별 slice를 만들고 store.ts에 있는 reducer에 등록하시면 됩니다 :)

export const store = configureStore({
reducer: {
user: userReducer,
persistedReducer,
Copy link
Contributor

@wjsdncl wjsdncl Jun 22, 2024

Choose a reason for hiding this comment

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

궁금한게 있습니다
위에
const persistedReducer = persistReducer(persistConfig, userReducer);
에서 userReducer를 넣었는데 여기서 다시 안 넣어도 되지 않을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

아 넵 중복되네요!! 수정해서 다시 커밋 올려놓을게요 감사합니다 ㅎㅎ

Copy link
Contributor

Choose a reason for hiding this comment

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

하루만에 만드시느라 고생하셨습니다!

Copy link
Contributor

@oceanlee-seoul oceanlee-seoul left a comment

Choose a reason for hiding this comment

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

고생하셨습니다...! :) :)

@wayandway wayandway merged commit e99d484 into develop Jun 22, 2024
@wayandway wayandway deleted the feature/auth branch June 22, 2024 08:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🔐 auth 사용자 인증 관련 ✨ feat 새로운 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ Feat: 유저 기능

5 participants