fix: 주석 처리 - any 타입 수정 - 쓰지않는 코드 삭제

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node
+FROM node:16-alpine
 RUN mkdir /app
 WORKDIR /app
 COPY . ./

frontend/api/api.ts

@@ -24,15 +24,10 @@ export async function post_storge(resultData: result, user: User) {
     fish_url: resultData.image_url,
     fish_id: resultData.model,
   };
-  await axios.post(
-    `http://www.deepblue3.shop:8000/api/history/${user.id}`,
-    body,
-  );
+  await axios.post(`${BASE_URL}history/${user.id}`, body);
 }
 
 export async function get_storage(user: User): Promise<resultType[]> {
-  const res = await axios.get(
-    `http://www.deepblue3.shop:8000/api/history/${user.id}`,
-  );
+  const res = await axios.get(`${BASE_URL}/history/${user.id}`);
   return res.data;
 }

frontend/package.json

@@ -17,6 +17,8 @@
     "autoprefixer": "10.4.13",
     "axios": "1.2.2",
     "chart.js": "^4.2.0",
+    "debounce": "^1.2.1",
+    "lodash": "^4.17.21",
     "postcss": "8.4.20",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
@@ -30,6 +32,7 @@
     "tailwindcss": "3.2.4"
   },
   "devDependencies": {
+    "@types/debounce": "^1.2.1",
     "@types/node": "18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",

frontend/src/components/DetailFishList/index.tsx

@@ -1,14 +1,8 @@
-import { fishInform } from '@/mocks/handlers';
-import { ResultData, ResultData2 } from '@/type/result';
+import { modalData } from '@/type/detail';
 import React from 'react';
 import './index.scss';
 
-export interface result extends ResultData {
-  fish_url: string;
-  fish_type: string;
-}
-
-interface fishInfromProps extends result {
+interface fishInfromProps extends modalData {
   setModal: React.Dispatch<React.SetStateAction<boolean>>;
   modal: boolean;
 }

frontend/src/components/insertImage/index.tsx

@@ -1,28 +1,25 @@
-import Nav from '@/components/nav';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Loading from '../loading';
 import download from '@/assets/download.png';
 import './index.scss';
 import { useDropzone } from 'react-dropzone';
 import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@tanstack/react-query';
 import { restFetcher } from '@/queryClient';
 import Loading2 from '../loading2';
+
 const InsertImage = () => {
   const navigate = useNavigate();
   const imageRef = useRef<HTMLInputElement>(null);
   const [imagefile, setImageFile] = useState<File>();
   const [preview, setPreview] = useState<string>('');
 
-  const { mutate, isLoading, isSuccess, isError } = useMutation(
-    (formData: FormData) => {
-      return restFetcher({
-        method: 'POST',
-        path: 'http://www.deepblue3.shop:8000/api/ai',
-        body: formData,
-      });
-    },
-  );
+  const { mutate, isLoading } = useMutation((formData: FormData) => {
+    return restFetcher({
+      method: 'POST',
+      path: '/ai',
+      body: formData,
+    });
+  });
 
   //이미지 클릭시 file선택창이 나오게하는 함수
   const openFile = () => {

frontend/src/components/loading2/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import './index.scss';
+//사진 올려서 돌릴떄 스켈레톤 ui
 const Loading2 = () => {
   return (
     <div className="loading2">

frontend/src/components/login/index.tsx

@@ -23,10 +23,10 @@ const LoginComponent = () => {
   const [pw, setPw] = useState('');
   const setUserInform = useSetRecoilState<User>(UUid);
 
-  const { mutate, isLoading, isError } = useMutation((user: userType) => {
+  const { mutate } = useMutation((user: userType) => {
     return restFetcher({
       method: 'POST',
-      path: 'http://www.deepblue3.shop:8000/api/users/login',
+      path: `${BASE_URL}/users/login`,
       params: user,
     });
   });
@@ -45,9 +45,7 @@ const LoginComponent = () => {
         localStorage.setItem('access_token', data.access_token);
         navigator('/');
 
-        const result = await axios.get(
-          `http://www.deepblue3.shop:8000/api/users?skip=0&limit=100`,
-        );
+        const result = await axios.get(`${BASE_URL}/users?skip=0&limit=100`);
         const findUser = result.data.find(
           (item: AllUser) => item.username == data.username,
         );
@@ -70,7 +68,6 @@ const LoginComponent = () => {
           onChange={(e) => {
             setId(e.target.value);
           }}
-          //onKeyup={changeButton}
         />
       </div>
 

frontend/src/components/nav/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link, useMatch, useNavigate } from 'react-router-dom';
-import home from '../../assets/home.png';
 import './index.scss';
 import logo from '../../assets/logo.png';
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { User } from '../signup';
 import { UUid } from '@/atom/atom';
+
 const Nav = () => {
   const main = useMatch('/');
   const storage = useMatch('/storage');
@@ -17,7 +17,7 @@ const Nav = () => {
   const gotoMain = () => {
     navigator('/');
   };
-  const [userInform, setUserInform] = useRecoilState<User>(UUid);
+  const setUserInform = useSetRecoilState<User>(UUid);
   const goLogout = () => {
     alert('로그아웃되었습니다!');
     setUserInform({

frontend/src/components/signup/index.tsx

@@ -1,9 +1,8 @@
-import { UUid } from '@/atom/atom';
 import { restFetcher } from '@/queryClient';
 import { useMutation } from '@tanstack/react-query';
 import React, { useState } from 'react';
 import './index.scss';
-//유저생성
+
 export interface User extends createUser {
   id: string;
   is_active?: boolean;
@@ -22,20 +21,15 @@ const SignUpComponents = () => {
   const [pw, setPw] = useState('');
   const [checkPw, setCheckPw] = useState('');
 
-  const [button, setButton] = useState(true);
-
-  function changeButton() {
-    id.includes('@') && pw.length >= 5 ? setButton(false) : setButton(true);
-  }
-
-  const { mutate, isLoading } = useMutation((newUser: createUser) => {
+  const { mutate } = useMutation((newUser: createUser) => {
     return restFetcher({
       method: 'POST',
       path: '/users/signup',
       body: newUser,
     });
   });
 
+  //유저 생성
   const createUser = () => {
     const newUser = {
       name: userName,
@@ -44,7 +38,7 @@ const SignUpComponents = () => {
       password_check: checkPw,
     };
     mutate(newUser, {
-      onSuccess: (data) => {
+      onSuccess: () => {
         alert('회원가입 완료!');
       },
       onError: () => {
@@ -66,7 +60,6 @@ const SignUpComponents = () => {
           onChange={(e) => {
             setUserName(e.target.value);
           }}
-          onKeyUp={changeButton}
         />
       </div>
       <div className="user_input">
@@ -79,7 +72,6 @@ const SignUpComponents = () => {
           onChange={(e) => {
             setId(e.target.value);
           }}
-          //onKeyup={changeButton}
         />
       </div>
       <div className="user_input">
@@ -93,7 +85,6 @@ const SignUpComponents = () => {
           onChange={(e) => {
             setPw(e.target.value);
           }}
-          onKeyUp={changeButton}
         />
       </div>
       <div className="user_input">
@@ -107,7 +98,6 @@ const SignUpComponents = () => {
           onChange={(e) => {
             setCheckPw(e.target.value);
           }}
-          onKeyUp={changeButton}
         />
       </div>
       <button onClick={createUser} className="signup_page_button">

frontend/src/main.tsx

@@ -10,7 +10,6 @@ import { worker } from './mocks/worker';
 import { getClient } from './queryClient';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
-import reset from './reset.scss';
 import axios from 'axios';
 // if (import.meta.env.DEV) {
 //   worker.start();

frontend/src/page/chart/index.tsx

@@ -8,6 +8,7 @@ import inline from '@/assets/inline.png';
 import bar from '@/assets/var.png';
 import { useQuery } from '@tanstack/react-query';
 import { restFetcher } from '@/queryClient';
+import { debounce } from 'debounce';
 type chartType = 'line' | 'area' | 'bar' | 'radar' | undefined;
 
 const ChartPage = () => {
@@ -20,7 +21,7 @@ const ChartPage = () => {
   const { data } = useQuery<any>(['CHAT'], async () => {
     return restFetcher({
       method: 'GET',
-      path: 'http://www.deepblue3.shop:8000/api/charts/',
+      path: '/charts/',
     });
   });
 
@@ -52,12 +53,11 @@ const ChartPage = () => {
       height: window.innerHeight,
     });
   };
-
   useEffect(() => {
-    window.addEventListener('resize', handleResize);
+    window.addEventListener('resize', debounce(handleResize, 1000));
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debounce(handleResize, 1000));
     };
   }, [windowSize]);
 

frontend/src/page/login/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './index.scss';
 import Is_login_check from './is_login';
 import Whale from '@/assets/whale.png';

frontend/src/page/login/is_login.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Login_page from './loginpage';
 import './index.scss';
-function Is_login_check({ round = false }) {
+function Is_login_check() {
   const [is_login, set_is_login] = useState(true);
 
   const set_toggle = (e: React.MouseEvent<HTMLButtonElement>) => {

frontend/src/page/login/loginpage.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import whale from '@/assets/png_whale2.jpeg';
+import React from 'react';
 import LoginComponent from '@/components/login';
 import SignUpComponents from '@/components/signup';
 import './index.scss';
+
 interface Props {
   is_login: boolean;
 }
+
 const Login_page = ({ is_login }: Props) => {
   const is_login_page = is_login;