♻️ 불필요한 코드 및 주석 수정

E1-I4 · Jul 22, 2023 · 34aa04b · 34aa04b
1 parent 618d0d2
commit 34aa04b
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 88 deletions.
diff --git a/frontend/src/pages/Achieve.js b/frontend/src/pages/Achieve.js
@@ -22,7 +22,9 @@ const Achieve = () => {
 
     const { data } = await axios
       .get(`${BACKEND_URL}/api/animals/${id}`)
-      .catch(function (error) {});
+      .catch(function (error) {
+        console.error(error);
+      });
     setAnimals(data);
   };
 
@@ -39,16 +41,17 @@ const Achieve = () => {
           console.log(response);
         })
         .catch(function (error) {
-          console.log(error);
+          console.error(error);
         })
         .finally(function (data) {
           console.log(data);
         });
       console.log(res);
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   };
+
   useEffect(() => {
     fetchData();
     sendData();

diff --git a/frontend/src/pages/Album.js b/frontend/src/pages/Album.js
@@ -26,6 +26,7 @@ const Album = () => {
     );
     setUserAnimals(userData);
   };
+
   useEffect(() => {
     fetchData();
   }, []);

diff --git a/frontend/src/pages/AlbumItem.js b/frontend/src/pages/AlbumItem.js
@@ -28,14 +28,9 @@ const AlbumItem = ({ animal, userAnimals }) => {
   return (
     <Link onClick={onClick} id={id}>
       {userAnimalsIdArr.includes(animal.id) ? (
-        <ImgCard
-          src={image}
-          alt={name}
-          description={description}
-          id={id}
-        ></ImgCard>
+        <ImgCard src={image} alt={name} description={description} id={id} />
       ) : (
-        <ImgCard src={sil} alt={name} id={id}></ImgCard>
+        <ImgCard src={sil} alt={name} id={id} />
       )}
     </Link>
   );

diff --git a/frontend/src/pages/Discover.js b/frontend/src/pages/Discover.js
@@ -20,19 +20,19 @@ const Discover = () => {
     const { data } = await axios
       .get(`${BACKEND_URL}/api/animals/${id}/`)
       .catch(function (error) {
-        // error 확인 함수
         if (error.response) {
-          console.log(error.response.data);
-          console.log(error.response.status);
-          console.log(error.response.headers);
+          console.error(error.response.data);
+          console.error(error.response.status);
+          console.error(error.response.headers);
         } else if (error.request) {
-          console.log(error.request);
+          console.error(error.request);
         } else {
-          console.log("Error", error.message);
+          console.error("Error", error.message);
         }
       });
     setAnimals(data);
   };
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -67,7 +67,7 @@ const Discover = () => {
               {id === 3 || id === 4 ? "을" : "를"} 발견했어요
             </span>
           </Title>
-          <ChaImg src={animals.sick} alt={animals.name}></ChaImg>
+          <ChaImg src={animals.sick} alt={animals.name} />
           <Button onClick={navigateToRecyclePage} id={id}>
             {animals.trash_name} 치워주기
           </Button>

diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
@@ -1,19 +1,16 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import AppLayout from "../styles/AppLayout";
 import "../styles/theme.css";
-import bgImg from "../assets/img/mainbg.png";
-import { useNavigate } from "react-router-dom";
 import { ReactComponent as MainLogo } from "../assets/svg/logo_main.svg";
+import bgImg from "../assets/img/mainbg.png";
 
 const Home = () => {
   const navigate = useNavigate();
-  const navigateToAlbumPage = () => {
-    navigate("/album");
-  };
-  const navigateToMapPage = () => {
-    navigate("/map");
-  };
+
+  const navigateToAlbumPage = () => navigate("/album");
+  const navigateToMapPage = () => navigate("/map");
 
   return (
     <HomeContainer>

diff --git a/frontend/src/pages/KakaoLogin.js b/frontend/src/pages/KakaoLogin.js
@@ -4,7 +4,7 @@ import { checkAccessToken } from "../utils/Token";
 import { useEffect } from "react";
 import { setAuthorization } from "../utils/Token";
 
-const JWT_EXPIRE_TIME = 2 * 3600 * 1000; // expiration time(2 hours in milliseconds)
+const JWT_EXPIRE_TIME = 2 * 3600 * 1000;
 
 const KakaoLogin = () => {
   const location = useLocation();
@@ -25,12 +25,11 @@ const KakaoLogin = () => {
           checkAccessToken,
           JWT_EXPIRE_TIME - 60000,
           res.refresh_token
-        ); // 1 minute before expiration
+        );
         navigate("/");
       });
   }, []);
   return <></>;
-  //이쪽에 스플래시를 넣어봅시다
 };
 
 export default KakaoLogin;
diff --git a/frontend/src/pages/Map.js b/frontend/src/pages/Map.js
@@ -10,22 +10,21 @@ import arrowLeft from "../assets/img/arrowLeft.png";
 const { kakao } = window;
 
 const Map = () => {
+  const [animals, setAnimals] = useState({});
   const navigate = useNavigate();
 
-  const [animals, setAnimals] = useState({});
   const fetchData = async () => {
     const { data } = await axios
       .get(`${BACKEND_URL}/api/animals/`)
       .catch(function (error) {
-        // error 확인 함수
         if (error.response) {
-          console.log(error.response.data);
-          console.log(error.response.status);
-          console.log(error.response.headers);
+          console.error(error.response.data);
+          console.error(error.response.status);
+          console.error(error.response.headers);
         } else if (error.request) {
-          console.log(error.request);
+          console.error(error.request);
         } else {
-          console.log("Error", error.message);
+          console.error("Error", error.message);
         }
       });
     setAnimals(data);
@@ -34,76 +33,59 @@ const Map = () => {
   useEffect(() => {
     fetchData();
 
-    console.log(animals);
-
-    ////////// 카카오맵 생성 ////////////////
-    var mapContainer = document.getElementById("map"), // 지도를 표시할 div
+    // MARK: 카카오맵 생성
+    var mapContainer = document.getElementById("map"),
       mapOption = {
-        center: new kakao.maps.LatLng(33.373701, 126.570667), // 지도의 중심좌표
+        center: new kakao.maps.LatLng(33.373701, 126.570667),
         level: 11, // 지도의 확대 레벨
       };
 
-    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+    var map = new kakao.maps.Map(mapContainer, mapOption);
 
-    /////////// 현위치 (geolocation) 구현 ////////////////
+    // MARK: 현위치 (geolocation) 구현
 
-    // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
     if (navigator.geolocation) {
-      // GeoLocation을 이용해서 접속 위치를 얻어옵니다
       navigator.geolocation.getCurrentPosition(function (position) {
-        var lat = position.coords.latitude, // 위도
-          lon = position.coords.longitude; // 경도
+        var lat = position.coords.latitude,
+          lon = position.coords.longitude;
 
-        var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
-          message = '<div style="padding:5px;">여기에 계신가요?</div>'; // 인포윈도우에 표시될 내용입니다
+        var locPosition = new kakao.maps.LatLng(lat, lon),
+          message = '<div style="padding:5px;">여기에 계신가요?</div>';
 
-        // 마커와 인포윈도우를 표시합니다
         displayMarker(locPosition, message);
       });
     } else {
-      // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
-
       var locPosition = new kakao.maps.LatLng(33.373701, 126.570667),
         message = "geolocation을 사용할수 없어요..";
 
       displayMarker(locPosition, message);
     }
 
-    /////////// 인포윈도우 구현 ////////////////
+    // MARK: 인포윈도우 구현
 
-    // 지도에 마커와 인포윈도우를 표시하는 함수입니다
     function displayMarker(locPosition, message) {
-      // 마커를 생성합니다
       var marker = new kakao.maps.Marker({
         map: map,
         position: locPosition,
       });
 
-      // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
       var iwContent =
           '<div style="padding:5px;">여기 계신가요?<br><a href="https://map.kakao.com/link/map/현위치,33.450701,126.570667" style="color:blue" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/현위치,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>',
-        // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
         iwPosition = new kakao.maps.LatLng(33.450701, 126.570667);
 
-      // 인포윈도우를 생성합니다
       var infowindow = new kakao.maps.InfoWindow({
         position: iwPosition,
         content: iwContent,
       });
 
-      // 마커에 클릭이벤트를 등록합니다
       kakao.maps.event.addListener(marker, "click", function () {
-        // 마커 위에 인포윈도우를 표시합니다
         infowindow.open(map, marker);
       });
 
-      // 지도 중심좌표를 접속위치로 변경합니다
       map.setCenter(locPosition);
     }
 
-    /////////// 마커(핀) 여러 개 생성 ////////////////
-
-    // 마커를 표시할 위치와 title 객체 배열입니다
+    // MARK: 마커(핀) 여러 개 생성
 
     var positions = [
       {
@@ -138,42 +120,27 @@ const Map = () => {
       },
     ];
 
-    // 마커 이미지의 이미지 주소입니다
     var imageSrc =
       "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
 
     for (let i = 0; i < positions.length; i++) {
-      // 마커 이미지의 이미지 크기 입니다
       var imageSize = new kakao.maps.Size(24, 35);
-
-      // let Id = animals[i].id;
-      // console.log(Id);
-
-      // 마커 이미지를 생성합니다
       var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
 
-      // 마커를 생성할 때 필요한 position 을 미리 설정해놓습니다
-      // var latlng = new kakao.maps.LatLng(animal.latitude, animal.longtitude);
-
       let markerId = positions[i].id;
 
-      // 마커를 생성합니다
       var marker = new kakao.maps.Marker({
-        map: map, // 마커를 표시할 지도
-        position: positions[i].latlng, // 마커를 표시할 위치
-        title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
-        image: markerImage, // 마커 이미지
+        map: map,
+        position: positions[i].latlng,
+        title: positions[i].title,
+        image: markerImage,
         id: markerId,
       });
 
-      // 마커에 표시할 인포윈도우를 생성합니다
       var infowindow = new kakao.maps.InfoWindow({
-        content: positions[i].content, // 인포윈도우에 표시할 내용
+        content: positions[i].content,
       });
 
-      // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
-      // 이벤트 리스너로는 클로저를 만들어 등록합니다
-      // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
       kakao.maps.event.addListener(
         marker,
         "mouseover",
@@ -194,19 +161,16 @@ const Map = () => {
       });
     }
 
-    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
     function makeOverListener(map, marker, infowindow) {
       return function () {
         infowindow.open(map, marker);
         <div></div>;
       };
     }
 
-    // 인포윈도우를 닫는 클로저를 만드는 함수입니다
     function makeOutListener(infowindow) {
       return function () {
         infowindow.close();
-        // 여기에 이곳에는 이런동물이 서식해요 html 태그 다시 아무내용도 없이 만들어줌.
         <div></div>;
       };
     }

diff --git a/frontend/src/pages/Recycle.js b/frontend/src/pages/Recycle.js
@@ -1,8 +1,8 @@
 import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import AppLayout from "../styles/AppLayout";
 import "../styles/theme.css";
-import { useNavigate, useLocation } from "react-router-dom";
 import { DndContext } from "@dnd-kit/core";
 import { TargetContainer } from "./TargetContainer";
 import { TrashContainer } from "./TrashContainer";

diff --git a/frontend/src/pages/SilContainer.js b/frontend/src/pages/SilContainer.js
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { ReactComponent as MapSil } from "../assets/svg/mapSil.svg";
 
-export function SillContainer({ animals }) {
+export function SillContainer() {
   return (
     <Container>
       <Content>