관리자 페이지 구현 - 관리자멤버, 카테고리, 환율 관리 페이지 구현 #790

LJW25 · 2024-02-03T16:08:59Z

📄 Summary

관리자� 멤버 관리 페이지, �카테고리 관리 페이지, 환율 관리 페이지와 각 페이지별 추가 & 수정 모달 구현

🙋🏻 More

다음은 인증/인가 🙃

- 관리자 멤버 관리 페이지 (/admin/member)

- 관리자 추가 모달

- 관리자 비밀번호 수정 모달

- 카테고리 관리 페이지 (/admin/category)

- 카테고리 추가 및 수정 모달

- 환율 관리 페이지 (/admin/category)

환율 추가 및 수정 모달

ashleysyheo · 2024-02-03T16:17:53Z

😮🙌👍

dladncks1217

"프론트엔드" 가 되어버린 리더 이오의 코드 잘 봤습니다

사실 file changes가 86개라서 빠르게 훑는 느낌으로 보긴 했는데, 전체적으로 import관련한 부분을 수정해야 할 게 많이 보이더라구요!
alias 적용했으니 이왕이면 쓰는게 좋겠죠!?
'@/constants/api'같은 경로들은 tsconfig 확인해보고 @constants/api처럼 수정하는게 좋을 것 같아요.
근데 생각해보면 vite.config.js파일에서도 추가해줘야하려나??
제대로 적용되어있는것들 잘 돌아가는거보면 문제 없어보이기도 하고...
제가 프로젝트 세팅한게 아니다보니 좀 더 봐야 알겠네요 ㅋㅋㅋ

그나저나 이제와서 co-location으로 구조 변경하기에는 좀 늦었겠죠?
리뷰하려는데 파일이 여기저기 막 돌아다니다보니 읽기가 쉽지 않군요😅

일단 request changes 보내둘테니 코멘트 남긴것들이랑 경로 관련한 것들만 확인해주시죠 크크

멋집니다멋집니다👍👍

dladncks1217 · 2024-02-04T05:59:04Z

frontend-monorepo/packages/hanglog-admin/src/api/adminMember/patchAdminMember.ts

+import { axiosInstance } from '../axiosInstance';
+
+import type { PassowrdPatchData } from '@/types/adminMember';
+
+import { END_POINTS } from '@/constants/api';


컨벤션 있는데 그거 확인해보고 맞춰주면 좋을거같아용
노션에있습니다
이거 말고도 전체적으로 확인해주시면 좋을듯??

@trivago/prettier-plugin-sort-imports 라이브러리로 자동정렬 적용했습니다. 이게 그냥 알아서 적용되는게 아니더군요?

**Note: There may be an issue with some package managers, such as pnpm. You can solve it by providing additional configuration option in prettier config file.

공식문서에서 이렇다는데 하라는대로 따라하니까 자동정렬 따라란 성공! 순서는 노션 참고했슴다

dladncks1217 · 2024-02-04T06:06:34Z

...ackages/hanglog-admin/src/components/adminMember/PasswordUpdateModal/PasswordUpdateModal.tsx

+    disableConfirmPasswordError,
+    updateInputValue,
+    handleSubmit,
+  } = UseUpdatePasswordForm({ adminMemberId: adminMemberId, onSuccess: onClose });


useUpdatePasswordForm으로 바꾸는거 어떤가여 훅인데 앞자리 대문자 좀 이상하네요
마치 UseState 같은느낌

일반적으로 js에서 함수명은 camelCase를 사용해요
타입, 클래스, 컴포넌트는 PascalCase

dladncks1217 · 2024-02-04T06:08:37Z

frontend-monorepo/packages/hanglog-admin/src/hooks/adminMember/useUpdatePasswordForm.ts

+  onSuccess,
+  onError,
+}: UseUpdatePasswordFormParams) => {
+  const UpdatePasswordMutaion = useUpdateAdminMemberPasswordMutation();


밑에서는 updateInputValue같이 썼는데 여긴 대문자인 이유가 있나요!?

이것또한 저의 실수..수정했습니다!

dladncks1217 · 2024-02-04T06:14:29Z

frontend-monorepo/packages/hanglog-admin/src/hooks/category/useAddCategoryForm.ts

+  const [isEngNameError, setIsEngNameError] = useState(false);
+  const [isKorNameError, setIsKorNameError] = useState(false);
+
+  const updateInputValue = useCallback(


updateInputValue가 여기저기 퍼져있군요?
뭔가 하고 보니, 기존에 있던 데이터중 일부만 수정하는 코드 같더라구요. 도메인에따라 네이밍을 조금 수정하는게 어떨까요?
디렉토리 구조가 co-location이 아닌데 PR 하나에 updateInputValue가 86번 등장해서, 파일 여기저기 돌면서 코드 확인하는데 흐름쫒기가 쉽지 않더라구요🥲

co-location으로 구조 변경하는 것도 나쁘지 않을 것 같아요!
공통적으로 사용되는 hook은 최상위로 빼고 관련된 것들은 ex. city 폴더 내부에 둔다.

확실히 저도 개발하면서 co-location 구조를 썼으면 더 편했겠다는 생각이 많이 들었던것 같아요! 처음이라 기존 행록 구조를 따라하면서 익숙해지려 했는데, 이제 구조를 좀 익혔으니 더 늦기전에 구조를 바꿔볼까 합니다.
이번 PR에서 바꾸면 여차했을 때 롤백이 어려울것같아 기능상 문제가 없는 상태에서 머지하고 바로 새 PR파서 co-location 구조로 변경해보려는데 어떨까요?!

너무좋은데요!?

dladncks1217 · 2024-02-04T06:15:05Z

frontend-monorepo/packages/hanglog-admin/src/hooks/currency/useAddCurrencyForm.ts

+  //   const checkCurrencyValidity = (currencyInformation: CurrencyFormData) => {
+  //     return currencyKeys.some((key) => isInvalidCurrency(Number(currencyInformation[key])));
+  //   };


주석이 남아있어용

으어억 이스터에그 발견! 당첨되셨습니다!

오 좋은데요??

dladncks1217 · 2024-02-04T06:15:15Z

frontend-monorepo/packages/hanglog-admin/src/hooks/currency/useAddCurrencyForm.ts

+    // if (checkCurrencyValidity(currencyInformation)) {
+    //   setIsCurrencyError(true);
+    //   return;
+    // }


여기도여

dladncks1217 · 2024-02-04T06:17:28Z

frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPage.style.ts

+export const containerStyling = () => {
+  return css({
+    width: '80vw',
+    padding: `${Theme.spacer.spacing6} ${Theme.spacer.spacing6} ${Theme.spacer.spacing0} ${Theme.spacer.spacing6}`,
+  });
+};


꼭 함수여야 할 이유도 없는 것 같기도 하고...
함수로 다 통일하려고 쓰는거라면 return문이 필요할까 싶기도 하구요??
()=>css({ ~~~ 와 같이 사용할 수 있어요!

ed14a01

파라미터 필요없는 것들은 일반 변수로 수정했습니다!

ashleysyheo · 2024-02-04T10:20:56Z

frontend-monorepo/packages/hanglog-admin/src/hooks/adminMember/useAddAdminMemberForm.ts

+  const [isUsernameError, setIsUsernameError] = useState(false);
+  const [isPasswordError, setIsPasswordError] = useState(false);
+  const [isConfirmPasswordError, setIsConfirmPasswordError] = useState(false);


각 에러에 대해 개별적으로 상태를 정의하는 대신, 위에 adminMemberInformation처럼 객체로 선언해도 괜찮을 것 같아요!

15a47cf

전체적으로 반영 완! 좋은 의견 감사합니당

ashleysyheo · 2024-02-04T10:21:48Z

frontend-monorepo/packages/hanglog-admin/src/hooks/adminMember/useAddAdminMemberForm.ts

+  const disableUsernameError = useCallback(() => {
+    setIsUsernameError(false);
+  }, []);
+
+  const disablePasswordError = useCallback(() => {
+    setIsPasswordError(false);
+  }, []);
+
+  const disableConfirmPasswordError = useCallback(() => {
+    setIsConfirmPasswordError(false);
+  }, []);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (isEmptyString(adminMemberInformation.username.trim())) {
+      setIsUsernameError(true);
+      return;
+    }
+
+    if (!isValidPassword(adminMemberInformation.password.trim())) {
+      setIsPasswordError(true);
+      return;
+    }
+
+    if (adminMemberInformation.password != adminMemberInformation.confirmPassword) {
+      setIsConfirmPasswordError(true);
+      return;
+    }
+


위 코멘트처럼 에러를 객체로 관리한다면 에러 관련 처리 함수도 추상화 할 수 있을 것 같아여
updateInputValue 함수처럼요!

ashleysyheo · 2024-02-04T10:22:10Z

frontend-monorepo/packages/hanglog-admin/src/hooks/adminMember/useAddAdminMemberForm.ts

+      {
+        username: adminMemberInformation.username,
+        adminType: adminMemberInformation.adminType,
+        password: adminMemberInformation.password,
+      },


Suggested change

{

username: adminMemberInformation.username,

adminType: adminMemberInformation.adminType,

password: adminMemberInformation.password,

},

{

...adminMemberInformation

},

ashleysyheo · 2024-02-04T10:23:16Z

frontend-monorepo/packages/hanglog-admin/src/hooks/api/useAdminMemberQuery.ts

+  const { data: adminMemberData } = useSuspenseQuery<AdminMemberData[], AxiosError>({
+    queryKey: ['adminMember'],
+    queryFn: getAdminMember,
+    gcTime: 24 * 60 * 60 * 60 * 1000,


gcTime을 추가한 이유는 뭔가요??

gcTime이 캐시가 삭제되지 않게 유지하는 시간으로 알고있는데 맞을까요?!
관리자 데이터의 경우 수정이 빈번하게 일어나는 데이터는 아니라고 생각해서 넣었습니다!

ashleysyheo · 2024-02-04T10:25:22Z

frontend-monorepo/packages/hanglog-admin/src/hooks/category/useAddCategoryForm.ts

+  const [isEngNameError, setIsEngNameError] = useState(false);
+  const [isKorNameError, setIsKorNameError] = useState(false);
+
+  const updateInputValue = useCallback(


co-location으로 구조 변경하는 것도 나쁘지 않을 것 같아요!
공통적으로 사용되는 hook은 최상위로 빼고 관련된 것들은 ex. city 폴더 내부에 둔다.

ashleysyheo · 2024-02-04T10:30:32Z

frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPageSkeleton.tsx

+const AdminMemberPageSkeleton = () => {
+  return (
+    <>
+      <Flex>
+        <SidebarNavigation />
+        <Flex styles={{ direction: 'column', align: 'center' }} css={containerStyling}>
+          <Heading size="large" css={titleStyling}>
+            관리자 멤버 관리
+          </Heading>
+          <Button variant="primary" css={addButtonStyling}>
+            추가하기
+          </Button>
+          <section css={tableStyling}>
+            <AdminMemberTableSkeleton length={10} />
+          </section>
+          <div css={pagenationSkeletonStyling}>
+            <Skeleton />
+          </div>
+        </Flex>
+      </Flex>
+    </>
+  );
+};


여기서 관리자 멤버 관리, 추가하기 코드 같은 경우에는 AdminMemberPage에 있는 코드를 그대로 가져오고 있는데, 이렇게 반복 하는 대신 Suspense를 감싸는 범위를 좁혀봐도 좋을 것 같아요!

<Suspense fallback={<FallbackComponent />}> <section css={tableStyling}> <AdminMemberTable adminMembers={currentPageData} /> </section> <PageNavigation pages={pageIndexDatas} selected={page} maxPage={lastPageIndex} onChangeNavigate={handleSetPage} /> </Suspense>

ebb0bb3
애슐리 말대로 고치니까 *pageSkeleton 자체가 필요없더라구요! 싹 수정했습니다 👍

ashleysyheo · 2024-02-04T10:31:32Z

frontend-monorepo/packages/hanglog-admin/src/utils/validator.ts

  return input > 180 || input < -180;
 };
+
+export const isInvalidCategoryId = (input: number) => {
+  return input > 999 || input < 100;
+};


여기 숫자들이 뭐를 의미하는지 잘 모르겠어요 상수화 해두면 좋을 것 같아여!

0c5be44

상수화 완! 사실 대부분 이미 상수로 선언은 해놓고 validator에만 적용을 안해놨더라구요..? 수정했습니다..ㅎㅎ

jjongwa · 2024-02-04T15:04:39Z

풀스택 개발자 이오의 도전을 응원합니다

* feat: mock 데이터 추가 * feat: msw api 구현 * feat: category api 구현 * feat: currency api 구현 * feat: adminMember api 구현 * feat: CityPageSkeleton 구현 * feat: 카테고리 조회 페이지 구현 * feat: 카테고리 추가 모달 구현 * feat: 카테고리 수정 기능 구현 * feat: 카테고리 스켈레톤 페이지 구현 * feat: 환율 api hook 구현 * feat: 관리자 멤버 api hook 구현 * feat: 환율 조회 페이지 구현 * feat: 환율 정보 추가 모달 구현 * reafator: 컴포넌트 이름 변경 * feat: 환율 정보 수정 버튼 구현 * feat: 환율 skeleton 페이지 구현 * feat: 관리자 멤버 조회 페이지 구현 * feat: 관리자 추가 모달 구현 * feat: 비밀번호 수정 모달 구현 * refactor: style 수정 * feat: 관리자멤버 스켈레톤 페이지 구현 * refactor: import path 변경 * refactor: import 순서 리팩토링 * refactor: camelCase 적용 * refactor: pageSkeleton 제거 * refactor: style 선언 수정 * refactor: import 수정 * refactor: 매직넘버 상수화 * refactor: error 객체로 관리

LJW25 added 22 commits February 2, 2024 15:40

feat: mock 데이터 추가

35a5af2

feat: msw api 구현

68f39b4

feat: category api 구현

9922a47

feat: currency api 구현

f6d70c8

feat: adminMember api 구현

a7329de

feat: CityPageSkeleton 구현

25a4cc5

feat: 카테고리 조회 페이지 구현

9947233

feat: 카테고리 추가 모달 구현

5843bfe

feat: 카테고리 수정 기능 구현

a81dbc9

feat: 카테고리 스켈레톤 페이지 구현

da417c3

feat: 환율 api hook 구현

7bdb2da

feat: 관리자 멤버 api hook 구현

8ba1d4f

feat: 환율 조회 페이지 구현

c612f69

feat: 환율 정보 추가 모달 구현

848bceb

reafator: 컴포넌트 이름 변경

4152e11

feat: 환율 정보 수정 버튼 구현

e7c5b06

feat: 환율 skeleton 페이지 구현

483237c

feat: 관리자 멤버 조회 페이지 구현

bef31c0

feat: 관리자 추가 모달 구현

20d61f9

feat: 비밀번호 수정 모달 구현

123cc76

refactor: style 수정

f9c3cb7

feat: 관리자멤버 스켈레톤 페이지 구현

14377d9

LJW25 requested review from dladncks1217 and ashleysyheo February 3, 2024 16:09

LJW25 self-assigned this Feb 3, 2024

LJW25 added ✨ Feature FE-Admin 행록 어드민 프론트엔드 labels Feb 3, 2024

LJW25 linked an issue Feb 3, 2024 that may be closed by this pull request

관리자 페이지 구현 #787

Closed

5 tasks

dladncks1217 requested changes Feb 4, 2024

View reviewed changes

ashleysyheo reviewed Feb 4, 2024

View reviewed changes

LJW25 added 7 commits February 10, 2024 20:45

refactor: import path 변경

9a9585c

refactor: import 순서 리팩토링

558cc18

refactor: camelCase 적용

294ba78

refactor: pageSkeleton 제거

ebb0bb3

refactor: style 선언 수정

ed14a01

refactor: import 수정

20eaf08

refactor: 매직넘버 상수화

0c5be44

dladncks1217 approved these changes Feb 15, 2024

View reviewed changes

refactor: error 객체로 관리

15a47cf

LJW25 merged commit 0619d0f into develop Feb 23, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

관리자 페이지 구현 - 관리자멤버, 카테고리, 환율 관리 페이지 구현 #790

관리자 페이지 구현 - 관리자멤버, 카테고리, 환율 관리 페이지 구현 #790

LJW25 commented Feb 3, 2024

ashleysyheo commented Feb 3, 2024

dladncks1217 left a comment •

edited

Loading

dladncks1217 Feb 4, 2024

LJW25 Feb 10, 2024

dladncks1217 Feb 4, 2024

ashleysyheo Feb 4, 2024

dladncks1217 Feb 4, 2024

LJW25 Feb 10, 2024

dladncks1217 Feb 4, 2024

ashleysyheo Feb 4, 2024

LJW25 Feb 10, 2024

dladncks1217 Feb 14, 2024

dladncks1217 Feb 4, 2024

LJW25 Feb 5, 2024

dladncks1217 Feb 14, 2024

dladncks1217 Feb 4, 2024

dladncks1217 Feb 4, 2024

LJW25 Feb 10, 2024

ashleysyheo Feb 4, 2024

LJW25 Feb 23, 2024

ashleysyheo Feb 4, 2024

ashleysyheo Feb 4, 2024

ashleysyheo Feb 4, 2024

LJW25 Feb 23, 2024

ashleysyheo Feb 4, 2024

ashleysyheo Feb 4, 2024

LJW25 Feb 10, 2024

ashleysyheo Feb 4, 2024

LJW25 Feb 10, 2024

jjongwa commented Feb 4, 2024

관리자 페이지 구현 - 관리자멤버, 카테고리, 환율 관리 페이지 구현 #790

관리자 페이지 구현 - 관리자멤버, 카테고리, 환율 관리 페이지 구현 #790

Conversation

LJW25 commented Feb 3, 2024

📄 Summary

🙋🏻 More

- 관리자 멤버 관리 페이지 (/admin/member)

- 관리자 추가 모달

- 관리자 비밀번호 수정 모달

- 카테고리 관리 페이지 (/admin/category)

- 카테고리 추가 및 수정 모달

- 환율 관리 페이지 (/admin/category)

환율 추가 및 수정 모달

ashleysyheo commented Feb 3, 2024

dladncks1217 left a comment • 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

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

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

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

jjongwa commented Feb 4, 2024

dladncks1217 left a comment •

edited

Loading