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

* 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 객체로 관리

frontend-monorepo/packages/hanglog-admin/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "import"],
   "extends": [
     "eslint:recommended",
     "airbnb",

frontend-monorepo/packages/hanglog-admin/.prettierrc

@@ -4,13 +4,22 @@
   "tabWidth": 2,
   "printWidth": 100,
   "semi": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": [
-    "^@utils/(.*)$",
-    "^@api/(.*)$",
+    "^@/(.*)$",
+    "^@components/(.*)$",
+    "^@type/(.*)$",
     "^@hooks/(.*)$",
     "^@pages/(.*)$",
-    "^@components/(.*)$",
     "^@styles/(.*)$",
+    "^@constants/(.*)$",
+    "^@assets/(.*)$",
+    "^@utils/(.*)$",
+    "^@api/(.*)$",
+    "^@mocks/(.*)$",
+    "^@stories/(.*)$",
+    "^@router/(.*)$",
+    "^@store/(.*)$",
     "^[./]"
   ],
   "importOrderSeparation": true,

frontend-monorepo/packages/hanglog-admin/package.json

@@ -39,6 +39,7 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/test": "^7.6.10",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/react": "^18.2.43",

frontend-monorepo/packages/hanglog-admin/src/App.tsx

@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 
-import Header from '@components/layout/Header/Header';
-import Footer from '@components/layout/Footer/Footer';
 import ToastContainer from '@components/common/ToastContainer/ToastContainer';
+import Footer from '@components/layout/Footer/Footer';
+import Header from '@components/layout/Header/Header';
 
 const App = () => {
   return (

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

@@ -0,0 +1,10 @@
+import type { AdminMemberData } from '@type/adminMember';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const getAdminMember = async () => {
+  const { data } = await axiosInstance.get<AdminMemberData[]>(END_POINTS.MEMBER);
+  return data;
+};

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

@@ -0,0 +1,18 @@
+import type { PasswordPatchData } from '@type/adminMember';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '../axiosInstance';
+
+export interface PatchPasswordParams extends PasswordPatchData {
+  adminMemberId: number;
+}
+
+export const patchAdminMemberPassword = (
+  { adminMemberId, ...passwordInformation }: PatchPasswordParams
+) => {
+  return axiosInstance.patch<PasswordPatchData>(
+    END_POINTS.CHANGE_MEMBER_PASSWORD(adminMemberId),
+    passwordInformation
+  );
+};

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

@@ -0,0 +1,13 @@
+import type { AdminMemberPostData } from '@type/adminMember';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const postAdminMember = async (adminMemberFormData: AdminMemberPostData) => {
+  const response = await axiosInstance.post(END_POINTS.MEMBER, adminMemberFormData);
+
+  const adminMemberId = response.headers.location.replace(`${END_POINTS.MEMBER}/`, '');
+
+  return adminMemberId;
+};

frontend-monorepo/packages/hanglog-admin/src/api/axiosInstance.ts

@@ -1,9 +1,9 @@
 import axios from 'axios';
 
-import { handleAPIError } from '@api/interceptors';
-
 import { AXIOS_BASE_URL, NETWORK } from '@constants/api';
 
+import { handleAPIError } from '@api/interceptors';
+
 export const axiosInstance = axios.create({
   baseURL: AXIOS_BASE_URL,
   timeout: NETWORK.TIMEOUT,

frontend-monorepo/packages/hanglog-admin/src/api/category/getCategory.ts

@@ -0,0 +1,10 @@
+import type { CategoryData } from '@type/category';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const getCategory = async () => {
+  const { data } = await axiosInstance.get<CategoryData[]>(END_POINTS.CATEGORY);
+  return data;
+};

frontend-monorepo/packages/hanglog-admin/src/api/category/postCategory.ts

@@ -0,0 +1,13 @@
+import type { CategoryData } from '@type/category';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const postCategory = async (categoryData: CategoryData) => {
+  const response = await axiosInstance.post(END_POINTS.CATEGORY, categoryData);
+
+  const categoryId = response.headers.location.replace(`${END_POINTS.CATEGORY}/`, '');
+
+  return categoryId;
+};

frontend-monorepo/packages/hanglog-admin/src/api/category/putCategeory.ts

@@ -0,0 +1,11 @@
+import type { CategoryData } from '@type/category';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const putCategory = (category: CategoryData) => {
+  return axiosInstance.put<CategoryData>(END_POINTS.CHANGE_CATEGORY(category.id), {
+    ...category,
+  });
+};

frontend-monorepo/packages/hanglog-admin/src/api/city/getCity.ts

@@ -1,9 +1,9 @@
-import { axiosInstance } from '@api/axiosInstance';
-
 import type { CityData } from '@type/city';
 
 import { END_POINTS } from '@constants/api';
 
+import { axiosInstance } from '@api/axiosInstance';
+
 export const getCity = async () => {
   const { data } = await axiosInstance.get<CityData[]>(END_POINTS.CITY);
   return data;

frontend-monorepo/packages/hanglog-admin/src/api/city/postCity.ts

@@ -1,13 +1,13 @@
-import { axiosInstance } from '@api/axiosInstance';
-
 import type { CityFormData } from '@type/city';
 
 import { END_POINTS } from '@constants/api';
 
+import { axiosInstance } from '@api/axiosInstance';
+
 export const postCity = async (cityFormData: CityFormData) => {
   const response = await axiosInstance.post(END_POINTS.CITY, cityFormData);
 
-  const tripId = response.headers.location.replace(`${END_POINTS.CITY}/`, '');
+  const cityId = response.headers.location.replace(`${END_POINTS.CITY}/`, '');
 
-  return tripId;
+  return cityId;
 };

frontend-monorepo/packages/hanglog-admin/src/api/city/putCity.ts

@@ -1,9 +1,9 @@
-import { axiosInstance } from '@api/axiosInstance';
-
 import type { CityFormData } from '@type/city';
 
 import { END_POINTS } from '@constants/api';
 
+import { axiosInstance } from '@api/axiosInstance';
+
 export interface PutCityParams extends CityFormData {
   cityId: number;
 }

frontend-monorepo/packages/hanglog-admin/src/api/currency/getCurrency.ts

@@ -0,0 +1,10 @@
+import type { CurrencyListData } from '@type/currency';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const getCurrency = async (page: number, size: number) => {
+  const { data } = await axiosInstance.get<CurrencyListData>(END_POINTS.CURRENCY_PAGE(page, size));
+  return data;
+};

frontend-monorepo/packages/hanglog-admin/src/api/currency/postCurrency.ts

@@ -0,0 +1,13 @@
+import type { CurrencyFormData } from '@type/currency';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const postCurrency = async (currencyFormData: CurrencyFormData) => {
+  const response = await axiosInstance.post(END_POINTS.CURRENCY, currencyFormData);
+
+  const currencyId = response.headers.location.replace(`${END_POINTS.CURRENCY}/`, '');
+
+  return currencyId;
+};

frontend-monorepo/packages/hanglog-admin/src/api/currency/putCurrency.ts

@@ -0,0 +1,15 @@
+import type { CurrencyFormData } from '@type/currency';
+
+import { END_POINTS } from '@constants/api';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export interface PutCurrencyParams extends CurrencyFormData {
+  currencyId: number;
+}
+
+export const putCurrency = ({ currencyId, ...currencyInformation }: PutCurrencyParams) => {
+  return axiosInstance.put<CurrencyFormData>(END_POINTS.CHANGE_CURRENCY(currencyId), {
+    ...currencyInformation,
+  });
+};

frontend-monorepo/packages/hanglog-admin/src/api/interceptors.ts

@@ -1,8 +1,9 @@
 import type { AxiosError } from 'axios';
 
-import { HTTPError } from '@api/HTTPError';
 import { HTTP_STATUS_CODE } from '@constants/api';
 
+import { HTTPError } from '@api/HTTPError';
+
 export interface ErrorResponseData {
   statusCode?: number;
   message?: string;

frontend-monorepo/packages/hanglog-admin/src/components/adminMember/AdminMemberAddModal/AdminMemberAddModal.style.ts

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
+
+export const wrapperStyling = css({
+  width: '400px',
+  minHeight: '528px',
+
+  '@media screen and (max-width: 600px)': {
+    width: `calc(100vw - ${Theme.spacer.spacing4})`,
+    height: `80%`,
+  },
+});
+
+export const formStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: Theme.spacer.spacing4,
+  width: '80%',
+});
+
+export const buttonStyling = css({
+  width: '100%',
+});
+
+export const closeButtonStyling = css({
+  position: 'absolute',
+  right: Theme.spacer.spacing4,
+  top: Theme.spacer.spacing4,
+  alignSelf: 'flex-end',
+
+  marginBottom: Theme.spacer.spacing1,
+
+  border: 'none',
+  backgroundColor: 'transparent',
+
+  cursor: 'pointer',
+});
+
+export const closeIconStyling = css({
+  width: '16px',
+  height: '16px',
+});