From 340f02272cec52c13d5b604fec61d464e33c2180 Mon Sep 17 00:00:00 2001
From: seunghwan <sun1238799@naver.com>
Date: Sat, 4 Feb 2023 02:30:05 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=20-=20any=20=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95=20-=20?=
 =?UTF-8?q?=EC=93=B0=EC=A7=80=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/Dockerfile                           |  2 +-
 frontend/api/api.ts                           |  9 +---
 frontend/package-lock.json                    | 17 +++++++-
 frontend/package.json                         |  3 ++
 frontend/src/App.css                          | 41 -------------------
 .../src/components/DetailFishList/index.tsx   | 10 +----
 frontend/src/components/insertImage/index.tsx | 19 ++++-----
 frontend/src/components/loading2/index.tsx    |  1 +
 frontend/src/components/login/index.tsx       |  9 ++--
 frontend/src/components/nav/index.tsx         |  6 +--
 frontend/src/components/signup/index.tsx      | 18 ++------
 frontend/src/main.tsx                         |  1 -
 frontend/src/page/chart/index.tsx             |  8 ++--
 frontend/src/page/login/index.tsx             |  2 +-
 frontend/src/page/login/is_login.tsx          |  2 +-
 frontend/src/page/login/loginpage.tsx         |  5 ++-
 frontend/src/page/main/index.tsx              |  9 +---
 frontend/src/page/result/index.tsx            |  4 +-
 frontend/src/page/storage/index.tsx           | 13 +++---
 frontend/src/queryClient.ts                   |  4 +-
 frontend/src/type/detail.ts                   | 11 +++++
 21 files changed, 75 insertions(+), 119 deletions(-)
 delete mode 100644 frontend/src/App.css
 create mode 100644 frontend/src/type/detail.ts

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 08232ea..2d95836 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node
+FROM node:16-alpine
 RUN mkdir /app
 WORKDIR /app
 COPY . ./
diff --git a/frontend/api/api.ts b/frontend/api/api.ts
index 97bbc95..1ef7026 100644
--- a/frontend/api/api.ts
+++ b/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;
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 69bbae8..2b4a63c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,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",
@@ -29,6 +31,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",
@@ -1181,6 +1184,12 @@
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
       "dev": true
     },
+    "node_modules/@types/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==",
+      "dev": true
+    },
     "node_modules/@types/debug": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
@@ -2218,6 +2227,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4272,8 +4286,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
diff --git a/frontend/package.json b/frontend/package.json
index 684f7bf..c6b21c7 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index 2c5e2ef..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/frontend/src/components/DetailFishList/index.tsx b/frontend/src/components/DetailFishList/index.tsx
index 021b3f4..9fea9a2 100644
--- a/frontend/src/components/DetailFishList/index.tsx
+++ b/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;
 }
diff --git a/frontend/src/components/insertImage/index.tsx b/frontend/src/components/insertImage/index.tsx
index 8c2d4fa..93c0ad6 100644
--- a/frontend/src/components/insertImage/index.tsx
+++ b/frontend/src/components/insertImage/index.tsx
@@ -1,6 +1,4 @@
-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';
@@ -8,21 +6,20 @@ 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 = () => {
diff --git a/frontend/src/components/loading2/index.tsx b/frontend/src/components/loading2/index.tsx
index c2938cc..3b64f05 100644
--- a/frontend/src/components/loading2/index.tsx
+++ b/frontend/src/components/loading2/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './index.scss';
+//사진 올려서 돌릴떄 스켈레톤 ui
 const Loading2 = () => {
   return (
     <div className="loading2">
diff --git a/frontend/src/components/login/index.tsx b/frontend/src/components/login/index.tsx
index 93f48fe..3781ee4 100644
--- a/frontend/src/components/login/index.tsx
+++ b/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>
 
diff --git a/frontend/src/components/nav/index.tsx b/frontend/src/components/nav/index.tsx
index ea5818c..911b315 100644
--- a/frontend/src/components/nav/index.tsx
+++ b/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({
diff --git a/frontend/src/components/signup/index.tsx b/frontend/src/components/signup/index.tsx
index 92300d7..2ef4876 100644
--- a/frontend/src/components/signup/index.tsx
+++ b/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,13 +21,7 @@ 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',
@@ -36,6 +29,7 @@ const SignUpComponents = () => {
     });
   });
 
+  //유저 생성
   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">
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 2f9b8f1..24ee8eb 100644
--- a/frontend/src/main.tsx
+++ b/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();
diff --git a/frontend/src/page/chart/index.tsx b/frontend/src/page/chart/index.tsx
index 5eb087b..546ab3c 100644
--- a/frontend/src/page/chart/index.tsx
+++ b/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]);
 
diff --git a/frontend/src/page/login/index.tsx b/frontend/src/page/login/index.tsx
index fc10fc5..690ae02 100644
--- a/frontend/src/page/login/index.tsx
+++ b/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';
diff --git a/frontend/src/page/login/is_login.tsx b/frontend/src/page/login/is_login.tsx
index 529fe11..dba9d66 100644
--- a/frontend/src/page/login/is_login.tsx
+++ b/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>) => {
diff --git a/frontend/src/page/login/loginpage.tsx b/frontend/src/page/login/loginpage.tsx
index 909c514..dfccf4e 100644
--- a/frontend/src/page/login/loginpage.tsx
+++ b/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;
 
diff --git a/frontend/src/page/main/index.tsx b/frontend/src/page/main/index.tsx
index b1999d5..d3b0a24 100644
--- a/frontend/src/page/main/index.tsx
+++ b/frontend/src/page/main/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import './index.scss';
 import Nav from '@/components/nav';
 import InsertImage from '@/components/insertImage';
@@ -6,15 +6,8 @@ import shark from '@/assets/shark.jpg';
 import crucian from '@/assets/crucian.jpg';
 import turtle from '@/assets/turtle.jpg';
 import jellyfish from '@/assets/jellyfish.jpg';
-import { useRecoilValue } from 'recoil';
-import { User } from '@/components/signup';
-import { UUid } from '@/atom/atom';
 
 const Main = () => {
-  const userInform = useRecoilValue<User>(UUid);
-  useEffect(() => {
-    console.log(userInform);
-  }, []);
   return (
     <div>
       <div className="main_background">
diff --git a/frontend/src/page/result/index.tsx b/frontend/src/page/result/index.tsx
index 5dd9f5a..7e4e631 100644
--- a/frontend/src/page/result/index.tsx
+++ b/frontend/src/page/result/index.tsx
@@ -8,7 +8,7 @@ import { UUid } from '@/atom/atom';
 import { post_storge } from '../../../api/api';
 
 interface RouterState {
-  data: result2;
+  data: fishInform;
 }
 
 export interface aiResult extends ResultData {
@@ -16,7 +16,7 @@ export interface aiResult extends ResultData {
   fish_type: string;
 }
 
-interface result2 extends ResultData {
+interface fishInform extends ResultData {
   image_url: string;
 }
 
diff --git a/frontend/src/page/storage/index.tsx b/frontend/src/page/storage/index.tsx
index d0790a8..da3a2af 100644
--- a/frontend/src/page/storage/index.tsx
+++ b/frontend/src/page/storage/index.tsx
@@ -1,17 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import './index.scss';
 import { Navigate } from 'react-router-dom';
 import DetailFishList from '@/components/DetailFishList';
 import Nav from '@/components/nav';
 import { useRecoilValue } from 'recoil';
 import { UUid } from '@/atom/atom';
-import { get_storage, result, resultType2 } from 'api/api';
+import { get_storage } from 'api/api';
+import { modalData } from '@/type/detail';
 
 const Storage = () => {
   const user = useRecoilValue(UUid);
-  const [modal, setModal] = useState(false); //
-  const [currentModalInform, setCurrentModalInform] = useState<any>({
+  const [modal, setModal] = useState(false);
+  const [currentModalInform, setCurrentModalInform] = useState<modalData>({
     classification: '',
     closed_season: '',
     description: '',
@@ -40,7 +41,7 @@ const Storage = () => {
     );
   }
 
-  const showDetailFish = (item: any) => {
+  const showDetailFish = (item: modalData) => {
     setCurrentModalInform(() => item); //curretnModalInform을 item으로 변경
     setModal(true); //Modal을 true로 변경
   };
@@ -61,7 +62,7 @@ const Storage = () => {
       </div>
       <div onClick={gotoTop} className="fishList_gotoMain"></div>
       <div className="fishList_view-grid">
-        {res?.map((item, index) => {
+        {res?.map((item: any, index) => {
           return (
             <div
               key={index}
diff --git a/frontend/src/queryClient.ts b/frontend/src/queryClient.ts
index ba2e9c4..e15dadc 100644
--- a/frontend/src/queryClient.ts
+++ b/frontend/src/queryClient.ts
@@ -20,7 +20,9 @@ export const getClient = (() => {
   };
 })();
 
-const BASE_URL = '';
+const BASE_URL = import.meta.env.DEV //DEV PROD버전 baseURL 나누기
+  ? 'http://localhost:8000/api'
+  : 'http://www.deepblue3.shop:8000/api';
 
 export const restFetcher = async ({
   method,
diff --git a/frontend/src/type/detail.ts b/frontend/src/type/detail.ts
new file mode 100644
index 0000000..7af33c2
--- /dev/null
+++ b/frontend/src/type/detail.ts
@@ -0,0 +1,11 @@
+export interface modalData {
+  classification: string;
+  closed_season: string;
+  description: string;
+  habitat: string;
+  fish_url: string;
+  model: string;
+  scientific_name: string;
+  toxicity: string;
+  fish_type: string;
+}