[FE][Feat] #193 : 공통 함수 세팅

eslint.config.mjs

@@ -56,6 +56,7 @@ export default [
       'prettier/prettier': 'error',
       'no-underscore-dangle': 'warn',
       'no-undef': 'off',
+      'max-classes-per-file': 'off',
       'import/extensions': [
         'error',
         'always',

frontend/package.json

@@ -1,64 +1,66 @@
-{
-    "name": "ddara-frontend",
-    "private": true,
-    "workspaces": [
-      "frontend",
-      "backend"
-    ],
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-      "dev": "vite",
-      "build": "tsc -b && vite build",
-      "test": "vitest",
-      "test:watch": "vitest --watch",
-      "test:coverage": "vitest run --coverage",
-      "lint": "pnpm lint-staged",
-      "preview": "vite preview",
-      "storybook": "storybook dev -p 6006",
-      "build-storybook": "storybook build"
-    },
-    "dependencies": {
-      "@fontsource/pretendard": "^5.1.0",
-      "react": "^18.3.1",
-      "react-dom": "^18.3.1",
-      "react-icons": "^5.3.0",
-      "react-router-dom": "^6.28.0"
-    },
-    "devDependencies": {
-      "@chromatic-com/storybook": "^3.2.2",
-      "@eslint/js": "^9.13.0",
-      "@storybook/addon-essentials": "^8.4.2",
-      "@storybook/addon-interactions": "^8.4.2",
-      "@storybook/addon-onboarding": "^8.4.2",
-      "@storybook/blocks": "^8.4.2",
-      "@storybook/react": "^8.4.2",
-      "@storybook/react-vite": "^8.4.2",
-      "@storybook/test": "^8.4.2",
-      "@types/navermaps": "^3.7.8",
-      "@types/react": "^18.3.12",
-      "@types/react-dom": "^18.3.1",
-      "@types/react-router-dom": "^5.3.3",
-      "@vitejs/plugin-react-swc": "^3.5.0",
-      "autoprefixer": "^10.4.20",
-      "classnames": "^2.5.1",
-      "eslint": "^9.13.0",
-      "eslint-import-resolver-typescript": "^3.6.3",
-      "eslint-plugin-react-hooks": "^5.0.0",
-      "eslint-plugin-react-refresh": "^0.4.14",
-      "eslint-plugin-storybook": "^0.11.0",
-      "globals": "^15.11.0",
-      "postcss": "^8.4.47",
-      "storybook": "^8.4.2",
-      "tailwindcss": "^3.4.14",
-      "typescript": "~5.6.2",
-      "typescript-eslint": "^8.11.0",
-      "vite": "^5.4.10",
-      "vite-tsconfig-paths": "^5.1.1"
-    },
-    "eslintConfig": {
-      "extends": [
-        "plugin:storybook/recommended"
-      ]
-    }
-  }
+{
+  "name": "ddara-frontend",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "backend"
+  ],
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "lint": "pnpm lint-staged",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@fontsource/pretendard": "^5.1.0",
+    "axios": "^1.7.7",
+    "lz-string": "^1.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/navermaps": "^3.7.8",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "classnames": "^2.5.1",
+    "eslint": "^9.13.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.0",
+    "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "storybook": "^8.4.2",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

frontend/src/api/client.api.ts

@@ -0,0 +1,31 @@
+import { AppConfig } from '@/constants';
+import { loadLocalData } from '@/utils/common/manageLocalData.ts';
+import axios from 'axios';
+
+let apiClient = axios.create({
+  baseURL: AppConfig.API_SERVER,
+  headers: {
+    'Content-type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Credentials': true,
+  },
+});
+
+export function setApiToken(token: string): void {
+  if (apiClient) apiClient.defaults.headers.common.Authorization = `Bearer ${token}`;
+}
+
+export const getApiClient = () => {
+  const token = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN);
+  if (token) setApiToken(token);
+  if (!apiClient) {
+    apiClient = axios.create({
+      baseURL: AppConfig.API_SERVER,
+      headers: {
+        'Content-type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  }
+  return apiClient;
+};

frontend/src/api/dto/response.dto.ts

@@ -0,0 +1,16 @@
+export class ResponseDto<T> {
+  resultCode = 0;
+
+  resultMsg = '';
+
+  data?: T;
+
+  totalCount = 0;
+
+  constructor(data?: any) {
+    if (data.resultCode) this.resultCode = data.resultCode;
+    if (data.resultMsg) this.resultMsg = data.resultMsg;
+    if (data.data) this.data = data.data;
+    if (data.totalCount) this.totalCount = data.totalCount;
+  }
+}

frontend/src/constants.ts

@@ -0,0 +1,17 @@
+export const KEYS = {
+  LOGIN_USER: 'LUT',
+  LOGIN_TOKEN: 'LUT_TK',
+};
+
+export const AppConfig = {
+  /**
+   * API SERVER
+   */
+  API_SERVER: 'http://223.130.151.43:3001/api',
+  // API_SERVER: 'http://localhost:3001/api',
+
+  /**
+   * ETC
+   */
+  KEYS,
+};

frontend/src/pages/Main.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { getUserLocation } from '@/hooks/getUserLocation';
 import { Map } from '@/component/maps/Map';
 import { BottomSheet } from '@/component/BottomSheet/BottomSheet';

frontend/src/utils/common/manageLocalData.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import lzString from 'lz-string'
+
+export function saveLocalData(key: string, val: string): void {
+  if (typeof window !== 'undefined') {
+    const storage = window.localStorage;
+
+    if (storage) {
+      try {
+        storage.setItem(key, lzString.compressToUTF16(val));
+      } catch (e) {
+        console.error('Storage Full ... clean old data...');
+        for (const k in storage) {
+          if (k.indexOf('DATA_MESSAGE_DETAIL_') > -1) {
+            storage.removeItem(k);
+          }
+        }
+        storage.setItem(key, lzString.compressToUTF16(val));
+      }
+    }
+  }
+}
+
+export function loadLocalData(key: string): string | null {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+
+    if (storage) {
+      const keyValue = storage.getItem(key);
+      if (keyValue) return lzString.decompressFromUTF16(keyValue);
+    }
+  }
+  return null;
+}
+
+export function clearLocalData() {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+
+    if (storage) {
+      storage.clear();
+    }
+  }
+}
+
+export function removeLocalData(key: string): void {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+    if (storage) {
+      storage.removeItem(key);
+    }
+  }
+}