Merge pull request #11 from gdsc-ssu/feat/flow-setting

feat/flow-setting

client/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tanstack/react-query": "^4.36.1",
     "@types/lodash": "^4.14.199",
     "axios": "^1.5.1",
     "jotai": "^2.4.3",

client/src/@types/Auth.d.ts

@@ -0,0 +1,63 @@
+declare module 'Auth' {
+  export type AuthResponse = {
+    success: boolean;
+    code: string;
+    message: string;
+    data: AuthData;
+  };
+
+  export type AuthData = {
+    availableHomepages: number[];
+    isPrivacyPolicyAgree: boolean;
+    privacyPolicyAgreePeriod: number;
+    dept: Dept;
+    accessToken: string;
+    parentDept: UserDept;
+    branch: Branch;
+    showMobileMain: boolean;
+    memberNo: string;
+    alternativeId: string;
+    lastUpdated: string;
+    branchGroup: BranchGroup;
+    isPortalLogin: boolean;
+    patronType: PatronType;
+    disableServices: string[];
+    hasFamily: boolean;
+    name: string;
+    printMemberNo: string;
+    patronState: PatronState;
+    id: number;
+    multiTypePatrons: any[];
+    isExpired: boolean;
+    isFamilyLogin: boolean;
+  };
+
+  export type UserDept = {
+    id: number;
+    code: string;
+    name: string;
+  };
+
+  export type Branch = {
+    id: number;
+    name: string;
+    alias: string;
+    libraryCode: string;
+    sortOrder: number;
+  };
+
+  export type BranchGroup = {
+    id: number;
+    name: string;
+  };
+
+  export type PatronType = {
+    id: number;
+    name: string;
+  };
+
+  export type PatronState = {
+    id: number;
+    name: string;
+  };
+}

client/src/@types/common.d.ts

@@ -0,0 +1,41 @@
+declare module 'AxiosCommon' {
+  import {
+    AxiosInstance,
+    AxiosInterceptorManager,
+    AxiosRequestConfig,
+    AxiosResponse,
+  } from 'axios';
+
+  type CustomAxiosResponse<T = any> = {
+    response?: T;
+    refreshToken?: string;
+  };
+
+  export interface CustomAxiosInterface extends AxiosInstance {
+    interceptors: {
+      request: AxiosInterceptorManager<AxiosRequestConfig>;
+      response: AxiosInterceptorManager<AxiosResponse<CustomAxiosResponse>>;
+    };
+
+    get<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    delete<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+    put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+    patch<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+  }
+
+  export interface CommonRequest {
+    status: number;
+    message: string;
+    success?: boolean;
+    data?: any;
+  }
+  interface APIDataResponse<T> {
+    data: T;
+  }
+  export interface CommonResponse<T> {
+    data: APIDataResponse<T>;
+    status: number;
+    statusText: string;
+  }
+}

client/src/apis/AxiosCreate.ts

@@ -0,0 +1,87 @@
+import { getAccessToken, removeAccessToken } from '@/utils/lib/tokenHandler';
+import axios, { AxiosRequestConfig } from 'axios';
+import { CustomAxiosInterface, CommonResponse } from 'AxiosCommon';
+
+const apiClient: CustomAxiosInterface = axios.create({
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  baseURL: `${process.env.NEXT_PUBLIC_BASE_URL}`,
+});
+
+// 요청 interceptor
+apiClient.interceptors.request.use(
+  async (config: any) => {
+    const token = getAccessToken();
+    config.headers = {
+      Accept: 'application/json, text/plain, */*',
+      'pyxis-auth-token': `${token}`,
+    };
+    return config;
+  },
+  (error: unknown) => {
+    console.log(error);
+    return Promise.reject(error);
+  },
+);
+
+// 응답 interceptor
+apiClient.interceptors.response.use(
+  async (config: any) => {
+    return config;
+  },
+  async (error: any) => {
+    if (error.response.status === 400) {
+      removeAccessToken(); //만료시 토큰 제거 (업데이트가 없기 떄문)
+    }
+    return Promise.reject(error);
+  },
+);
+
+const Get = async <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {
+  const response = await apiClient.get<CommonResponse<T>>(url, config);
+  return response.data.data;
+};
+
+const Post = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig,
+): Promise<T> => {
+  const response = await apiClient.post<CommonResponse<T>>(url, data, config);
+  return response.data.data;
+};
+
+const Put = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig,
+): Promise<T> => {
+  const response = await apiClient.put<CommonResponse<T>>(url, data, config);
+  return response.data.data;
+};
+
+const Patch = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig,
+): Promise<T> => {
+  const response = await apiClient.patch<CommonResponse<T>>(url, data, config);
+  return response.data.data;
+};
+
+const Delete = async <T>(
+  url: string,
+  config?: AxiosRequestConfig,
+): Promise<T> => {
+  const response = await apiClient.delete<CommonResponse<T>>(url, config);
+  return response.data.data;
+};
+
+export {
+  Get as get,
+  Post as post,
+  Put as put,
+  Patch as patch,
+  Delete as remove,
+};

client/src/apis/auth.ts

@@ -0,0 +1,23 @@
+import { AuthData, AuthResponse } from 'Auth';
+import axios, { AxiosResponse } from 'axios';
+
+class AuthApi {
+  /** 로그인 */
+  login = async (loginId: string, password: string): Promise<AuthData> => {
+    const data: AxiosResponse<AuthResponse> = await axios({
+      method: 'post',
+      url: `${process.env.NEXT_PUBLIC_BASE_URL}/login`,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      data: {
+        loginId,
+        password,
+      },
+    });
+
+    return data.data.data;
+  };
+}
+
+export default AuthApi;

client/src/atoms/authInfoState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+
+export type authInfoType = {
+  name: string;
+  sId: string;
+};
+
+export const authInfoState = atom<authInfoType | null>(null);

client/src/atoms/headerTitleState.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const headerTitleState = atom<string>('');

client/src/components/Buttons/Mini/index.tsx

@@ -54,7 +54,7 @@ const ButtonWrapper = styled.button<{ theme: Theme }>`
   border-radius: 5rem;
   border: none;
   outline: none;
-  ${TYPO.title3.Md};
+  ${TYPO.text1.Md};
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
   ${(props) => {

client/src/components/Buttons/Round/index.tsx

@@ -51,7 +51,7 @@ const ButtonWrapper = styled.button<{ theme: Theme }>`
   border-radius: 5rem;
   border: none;
   outline: none;
-  ${TYPO.title3.Sb};
+  ${TYPO.text1.Sb};
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
   ${flex('row', 'center', 'center', 0)};

client/src/components/Buttons/Square/index.tsx

@@ -51,7 +51,7 @@ const ButtonWrapper = styled.button<{ theme: Theme }>`
   border-radius: 1rem;
   border: none;
   outline: none;
-  ${TYPO.title3.Sb};
+  ${TYPO.text1.Sb};
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
   ${flex('row', 'center', 'center', 0)};

client/src/components/Field/TextInput/TextInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { StoryObj } from '@storybook/react';
+import TextInput from '.';
+
+const meta = {
+  title: 'Field/TextInput',
+  component: TextInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    placeholder: '값을 입력해주세요',
+    warning: false,
+  },
+};
+
+export const Input: Story = {
+  args: {
+    value: '입력 값 입니다.',
+    warning: false,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    value: '입력 값 입니다.',
+    warning: true,
+  },
+};
+
+export const WarningCaption: Story = {
+  args: {
+    value: '입력 값 입니다.',
+    warning: true,
+    warningCaption: '경고 문구입니다.',
+  },
+};