[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1019

healim01 · 2024-12-04T11:23:55Z

❗ Issue

[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1017

✨ 구현한 기능

유저 타입에 맞게 어드민만 어드민 페이지 접근 가능하게 로직 추가

기존 백엔드로부터 유저 타입을 전달받지 못해서 비밀 어드민 링크를 걸어놓았던 것과 달리 어드민일 시 마이페이지에서 어드민 페이지로 접근 가능하게 버튼 작업을 해놨습니다.

작업하면서 이전에 꾸준히 이야기 나온 유저 스토어도 함께 제작했습니다.
스토어 사용으로 엠플리튜드나 이후 유저 로직이 사용될 때 UserQuery 를 호출할 필요 없이 유저 타입으로 분기처리를 하면 될거 같습니다.

아마 다음 피알에서 마이페이지를 리팩토링할 거 같습니다.
((기존에는 쿼리 호출 후 에러 바운더리로 게스트 / 유저 모드를 나눠서 작업했습니다. 이젠 그럴필요가 없어짐~~!!))

추가적으로 로그아웃/탈퇴할 때 스토어 초기화도 당연히 작업해놨습니당 ~~ !!

📢 논의하고 싶은 내용

체크리스트 스토어 스토리지를 `localStorage` -> `sessionStorage` 으로 변경

유저 스토어를 만들고 최근 프로젝트를 되돌아 보면서 체크리스트 스토어를 로컬 스토리지로 관리할 필요가 있나 라는 생각이 들고 있습니다.
zustand persist 기능에서 스토리지를 선택 가능하게 해놨는데 기존에는 디폴트 값인 localStorage 를 사용하고 있었지만 이 때문에 탭을 끄고 새로 키더라도 저장되어 발생한 문제들도 여럿 있었던거 같아서 사용자 입력인 체크리스트 폼의 스토리지를 sessionStorage 으로 변경하면 어떨까 싶습니다.

모두 확인하고 정리되면 제가 작업할 수 있을거 같습니다.
아마 작업하면 유저 스토어는 로컬에 나머지 입력들은 세션으로 저장할거 같습니다.

찾아본 스토리지 별 사용 예시

**localStorage:**
- 유저의 설정, 인증 토큰, 장기적으로 필요한 데이터 저장.
- 브라우저를 닫아도 유지되어야 하는 데이터를 저장할 때 사용.

**sessionStorage:**
- 페이지 간 잠시 유지해야 하는 상태 정보나 폼 입력 데이터 등.
- 브라우저 탭을 닫으면 사라져도 괜찮은 임시 데이터를 저장할 때 사용.

🎸 기타

github-actions · 2024-12-04T11:25:33Z

🚀 storybook: https://669cc4025d9f500bb8c34778-lkhzmsbypg.chromatic.com/

ooherin · 2024-12-04T12:18:37Z

frontend/src/hooks/query/useAddOAuthUserQuery.ts

  return useMutation({
    mutationFn: ({ code, redirectUri }: MutationVariables) => postOAuthLogin(code, redirectUri),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+
+      const initAmplitudeUser = async () => {


amplitude 로직(init) 이 있기는 하지만, 유저 정보를 받고 토스트를 띄워준다는 점에서 함수명에 amplitude를 넣지 않아도 될 것 같네요!initUser 로 바꾸시는 건 어떠신가요??

조금 더 포괄적이게 될거 같네요 반영했습니다~!

ooherin · 2024-12-04T12:19:35Z

frontend/src/hooks/query/usePostSignInQuery.ts

  return useMutation({
    mutationFn: postSignIn,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+
+      const initAmplitudeUser = async () => {


여기도 같은 의견입니당~!

ooherin · 2024-12-04T12:23:36Z

frontend/src/types/user.ts

@@ -1,7 +1,10 @@
+export type UserType = 'ADMIN' | 'USER' | 'GUEST';


ooherin · 2024-12-04T12:27:56Z

frontend/src/hooks/query/usePostSignInQuery.ts

+        const result = await getUserInfo();
+        setUser(result);
+
+        init(user.userEmail);


success 로직이 query 훅으로 들어가서 훨씬 간결해졌네요!

ooherin · 2024-12-04T12:39:49Z

frontend/src/pages/AdminPage.tsx

+  const { showToast } = useToast();
+  const navigate = useNavigate();
+
+  useEffect(() => {


여기서는 저장된 store 를 쓰지 않고 다시 query 를 불러온 이유가 있을까요?

어드민 페이지이다 보니 혹시 스토리지를 의도적으로 수정해서 사용할 상황을 대비해서 이렇게 진행했습니다!

제이드의 말대로, 이렇게 보안때문에 쿼리를 불러올 것 같으면, �zustand + storage 를 쓸 이유가 있나? 싶기는 하네요. zustand 의 store 는 새로고침하면 사라진다고 알고 있는데, 차라리 zustand 를 거치지 않고 storage 에 바로 넣는 게 날 수도 있을 것 같아요! 어떻게 생각하시나요?
+query 를 사용함에도 storage 를 꼭 사용하기로 결정한 이유가 궁금합니다!

ooherin · 2024-12-04T12:43:00Z

frontend/src/hooks/query/useLogoutQuery.ts


 const useLogoutQuery = () => {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
+  const { reset } = useUserStore();


이렇게 직접 함수를 꺼내쓸 때는 reset 같은 축약형이 아닌 resetUser 로 쓰기로 했던 걸로 기억하는데요!(roomInfoStore.reset 으로 쓸 때는 축약형) 제 기억이 맞을까요??

github-actions · 2024-12-04T16:02:41Z

🚀 storybook: https://669cc4025d9f500bb8c34778-jvcriszgsg.chromatic.com/

skiende74

수고하셨습니다 !

작업하면서 이전에 꾸준히 이야기 나온 유저 스토어도 함께 제작했습니다.

음 저는 들은적이 없는거 같아요😭

useUserStore에 대해서.
user의 로그인 상태라는 것은 서버에서 받으니까 일종의 서버 상태라고 볼 수 있는 셈인데,
서버상태 관리를 위해 나온 react-query만으로 관리하지 않고
클라이언트상태관리(zustand)에서도 useUserStore로 한번 더 관리하는 것은 피해야한다고 생각해요.
zustand에서는 사용자의 상호작용만을 관리하는 게 좋다고 생각해요.

useQuery를 호출함으로 인해 매번 요청이 가는 것을 개선하고자 한다면,
useUserQuery의 queryOption에 staleTime을 걸어주는 게 라이브러리의 취지에 맞을 것 같아요

사용자 입력인 체크리스트 폼의 스토리지를 sessionStorage 으로 변경하면 어떨까 싶습니다.

좋은 것 같습니다 ! 이유도 좋은 것 같습니다.

skiende74 · 2024-12-04T17:55:49Z

frontend/src/hooks/query/useAddOAuthUserQuery.ts

  return useMutation({
    mutationFn: ({ code, redirectUri }: MutationVariables) => postOAuthLogin(code, redirectUri),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+
+      const initUser = async () => {
+        const result = await getUserInfo();


이 getUserInfo 네트워크 요청이 실패할경우 어떻게 될까요? 재요청되는 것일까요?

useUserQuery 라고 만들어진 쿼리를 안에서 부르면 될 것 같긴 하네요!

훅규칙때문에 query를 사용하기 어렵다면, 넘어가도 좋습니다.!

훅 규칙 때문에 useUserQuery 를 사용하려고 했는데 안되어서 그냥 getUserInfo 로 제작해놨습니다
enabled 규칙 사용해볼까도 생각했는데 보일러 코드도 생기고 배치 처리 때문에 init 이 어려워서 이렇게 진행했습니다.

skiende74 · 2024-12-04T18:00:43Z

frontend/src/store/useUserStore.ts

+      setUser: (newUser: User) => {
+        set(() => ({ user: { ...newUser } }));
+      },


Suggested change

setUser: (newUser: User) => {

set(() => ({ user: { ...newUser } }));

},

setUser: (newUser) => {

set({ user: { ...newUser } });

},

불필요한 화살표들을 제거할 수 있을 것 같아요 !
아래에도 공통입니다

ooherin · 2024-12-05T01:01:58Z

#1014 의 에러가 혹시 고친 코드에서는 안 터지는지 여쭤보고 싶어요!
제가 알기로는 에러가 안잡혀서 터지는 걸로 알고 있습니다. (sentry 에서도 계속 터짐)
자주 일어날 수 있는 상호작용이라 꼭 해결해야 할 것 같아요! 저도 한번 원인을 찾아볼게요

healim01 · 2024-12-05T07:56:51Z

이슈에 코멘트 달아놓은 것처럼 에러 확인해봤는데 에러 바운더리가 잘 생기는거 보면 잘 잡히는거 같은데 아닌가요?

센트리에서 혹시 어떤 에러가 터지는지 알 수 있을까요? 401 에러는 센트리에서 잡지 않도록 해놨는데 이상하네요..?

ooherin · 2024-12-06T03:05:13Z

이 에러가 계속 감지되네요. console.log 에 에러가 뜨는 것 보니까 잘 안잡히는 게 맞는 것 같습니다!

github-actions · 2024-12-07T18:48:49Z

🚀 storybook: https://669cc4025d9f500bb8c34778-sufjiiffui.chromatic.com/

healim01 · 2024-12-08T12:13:52Z

스토어 관련해서 회의에서 구두로 나누어서 변경된 걸로 진행했습니다

github-actions · 2024-12-08T12:21:02Z

🚀 storybook: https://669cc4025d9f500bb8c34778-hdqrjzulbq.chromatic.com/

healim01 added 6 commits December 4, 2024 19:16

chore: tracking 이름 변경

85c2654

feat: 유저 타입 추가

6b2ff40

feat: 유저 스토어 제작

700428e

feat: 로그인 성공 시 유저 스토어에 저장되게 로직 변경

f64d34d

feat: 로그아웃/탈퇴 시 유저 스토어 초기화 로직 추가

2551e8e

feat: 어드민 아닐시 리다렉 로직 추가

0d63af1

healim01 added 🔑 FE 😊 Feature labels Dec 4, 2024

healim01 requested review from skiende74 and ooherin December 4, 2024 11:23

healim01 self-assigned this Dec 4, 2024

healim01 temporarily deployed to frontend-msw December 4, 2024 11:24 — with GitHub Actions Inactive

ooherin reviewed Dec 4, 2024

View reviewed changes

chore: initAmplitudeUser -> initUser 이름 변경

30ab27b

healim01 temporarily deployed to frontend-msw December 4, 2024 16:00 — with GitHub Actions Inactive

skiende74 reviewed Dec 4, 2024

View reviewed changes

healim01 added 3 commits December 8, 2024 03:44

fix: 아티클 다크모드 막기

3a799db

refactor: 유저 정보 상태 관리

5d13927

feat: 썸네일 폼 필드 추가

38c9258

healim01 temporarily deployed to frontend-msw December 7, 2024 18:46 — with GitHub Actions Inactive

chore: INVALID_PARAMETER 메세지 상수 변경

151e3f8

healim01 temporarily deployed to frontend-msw December 8, 2024 12:19 — with GitHub Actions Inactive

healim01 merged commit 50aa516 into dev-fe Dec 8, 2024
3 checks passed

healim01 deleted the feat/1017-user-logic branch December 8, 2024 12:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1019

[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1019

healim01 commented Dec 4, 2024

github-actions bot commented Dec 4, 2024

ooherin Dec 4, 2024 •

edited

Loading

healim01 Dec 4, 2024

ooherin Dec 4, 2024

ooherin Dec 4, 2024

ooherin Dec 4, 2024

ooherin Dec 4, 2024

healim01 Dec 4, 2024

ooherin Dec 5, 2024 •

edited

Loading

ooherin Dec 4, 2024 •

edited

Loading

github-actions bot commented Dec 4, 2024

skiende74 left a comment •

edited

Loading

skiende74 Dec 4, 2024 •

edited

Loading

ooherin Dec 5, 2024

skiende74 Dec 5, 2024 •

edited

Loading

healim01 Dec 5, 2024

skiende74 Dec 4, 2024

ooherin commented Dec 5, 2024

healim01 commented Dec 5, 2024

ooherin commented Dec 6, 2024

github-actions bot commented Dec 7, 2024

healim01 commented Dec 8, 2024

github-actions bot commented Dec 8, 2024

		@@ -1,7 +1,10 @@
		export type UserType = 'ADMIN' \| 'USER' \| 'GUEST';

[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1019

[FE] 어드민/유저/게스트 구별 로직을 추가하여 유저스토어를 제작한다. #1019

Conversation

healim01 commented Dec 4, 2024

❗ Issue

✨ 구현한 기능

유저 타입에 맞게 어드민만 어드민 페이지 접근 가능하게 로직 추가

📢 논의하고 싶은 내용

체크리스트 스토어 스토리지를 localStorage -> sessionStorage 으로 변경

🎸 기타

github-actions bot commented Dec 4, 2024

ooherin Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

ooherin Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Dec 4, 2024

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

skiende74 Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skiende74 Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin commented Dec 5, 2024

healim01 commented Dec 5, 2024

ooherin commented Dec 6, 2024

github-actions bot commented Dec 7, 2024

healim01 commented Dec 8, 2024

스토어 관련해서 회의에서 구두로 나누어서 변경된 걸로 진행했습니다

github-actions bot commented Dec 8, 2024

체크리스트 스토어 스토리지를 `localStorage` -> `sessionStorage` 으로 변경

ooherin Dec 4, 2024 •

edited

Loading

ooherin Dec 5, 2024 •

edited

Loading

ooherin Dec 4, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading

skiende74 Dec 4, 2024 •

edited

Loading

skiende74 Dec 5, 2024 •

edited

Loading