From 41f345220fb9c92a1772fc974976bc158927007f Mon Sep 17 00:00:00 2001 From: kiyeong Date: Sat, 16 Nov 2024 00:52:25 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images}/African_manatee.svg | 0 .../images}/Arowana.svg | 0 .../images}/Black_stingray.svg | 0 .../images}/Blacktip_reef_shark.svg | 0 .../images}/California_sea_lion.svg | 0 .../images}/Clownfish.svg | 0 .../images}/Garden_eel.svg | 0 .../images}/Giant_grouper.svg | 0 .../images}/Humboldt_penguin.svg | 0 .../images}/Leatherback_sea_turtle.svg | 0 .../images}/Napoleon_wrasse.svg | 0 .../images}/Piranha.svg | 0 .../images}/Small_clawed_otter.svg | 0 .../images}/Zebra_shark.svg | 0 src/pages/Book/BookPage.tsx | 68 +++++++------------ 15 files changed, 23 insertions(+), 45 deletions(-) rename src/{assets/bookImages => components/images}/African_manatee.svg (100%) rename src/{assets/bookImages => components/images}/Arowana.svg (100%) rename src/{assets/bookImages => components/images}/Black_stingray.svg (100%) rename src/{assets/bookImages => components/images}/Blacktip_reef_shark.svg (100%) rename src/{assets/bookImages => components/images}/California_sea_lion.svg (100%) rename src/{assets/bookImages => components/images}/Clownfish.svg (100%) rename src/{assets/bookImages => components/images}/Garden_eel.svg (100%) rename src/{assets/bookImages => components/images}/Giant_grouper.svg (100%) rename src/{assets/bookImages => components/images}/Humboldt_penguin.svg (100%) rename src/{assets/bookImages => components/images}/Leatherback_sea_turtle.svg (100%) rename src/{assets/bookImages => components/images}/Napoleon_wrasse.svg (100%) rename src/{assets/bookImages => components/images}/Piranha.svg (100%) rename src/{assets/bookImages => components/images}/Small_clawed_otter.svg (100%) rename src/{assets/bookImages => components/images}/Zebra_shark.svg (100%) diff --git a/src/assets/bookImages/African_manatee.svg b/src/components/images/African_manatee.svg similarity index 100% rename from src/assets/bookImages/African_manatee.svg rename to src/components/images/African_manatee.svg diff --git a/src/assets/bookImages/Arowana.svg b/src/components/images/Arowana.svg similarity index 100% rename from src/assets/bookImages/Arowana.svg rename to src/components/images/Arowana.svg diff --git a/src/assets/bookImages/Black_stingray.svg b/src/components/images/Black_stingray.svg similarity index 100% rename from src/assets/bookImages/Black_stingray.svg rename to src/components/images/Black_stingray.svg diff --git a/src/assets/bookImages/Blacktip_reef_shark.svg b/src/components/images/Blacktip_reef_shark.svg similarity index 100% rename from src/assets/bookImages/Blacktip_reef_shark.svg rename to src/components/images/Blacktip_reef_shark.svg diff --git a/src/assets/bookImages/California_sea_lion.svg b/src/components/images/California_sea_lion.svg similarity index 100% rename from src/assets/bookImages/California_sea_lion.svg rename to src/components/images/California_sea_lion.svg diff --git a/src/assets/bookImages/Clownfish.svg b/src/components/images/Clownfish.svg similarity index 100% rename from src/assets/bookImages/Clownfish.svg rename to src/components/images/Clownfish.svg diff --git a/src/assets/bookImages/Garden_eel.svg b/src/components/images/Garden_eel.svg similarity index 100% rename from src/assets/bookImages/Garden_eel.svg rename to src/components/images/Garden_eel.svg diff --git a/src/assets/bookImages/Giant_grouper.svg b/src/components/images/Giant_grouper.svg similarity index 100% rename from src/assets/bookImages/Giant_grouper.svg rename to src/components/images/Giant_grouper.svg diff --git a/src/assets/bookImages/Humboldt_penguin.svg b/src/components/images/Humboldt_penguin.svg similarity index 100% rename from src/assets/bookImages/Humboldt_penguin.svg rename to src/components/images/Humboldt_penguin.svg diff --git a/src/assets/bookImages/Leatherback_sea_turtle.svg b/src/components/images/Leatherback_sea_turtle.svg similarity index 100% rename from src/assets/bookImages/Leatherback_sea_turtle.svg rename to src/components/images/Leatherback_sea_turtle.svg diff --git a/src/assets/bookImages/Napoleon_wrasse.svg b/src/components/images/Napoleon_wrasse.svg similarity index 100% rename from src/assets/bookImages/Napoleon_wrasse.svg rename to src/components/images/Napoleon_wrasse.svg diff --git a/src/assets/bookImages/Piranha.svg b/src/components/images/Piranha.svg similarity index 100% rename from src/assets/bookImages/Piranha.svg rename to src/components/images/Piranha.svg diff --git a/src/assets/bookImages/Small_clawed_otter.svg b/src/components/images/Small_clawed_otter.svg similarity index 100% rename from src/assets/bookImages/Small_clawed_otter.svg rename to src/components/images/Small_clawed_otter.svg diff --git a/src/assets/bookImages/Zebra_shark.svg b/src/components/images/Zebra_shark.svg similarity index 100% rename from src/assets/bookImages/Zebra_shark.svg rename to src/components/images/Zebra_shark.svg diff --git a/src/pages/Book/BookPage.tsx b/src/pages/Book/BookPage.tsx index fc09337..417daba 100644 --- a/src/pages/Book/BookPage.tsx +++ b/src/pages/Book/BookPage.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState } from "react"; import { Box, SimpleGrid, @@ -29,9 +29,6 @@ import SearchIcon from "./assets/SearchIcon"; import { MARINE_LIFE } from "./data/marin-life"; import { MAIN_LIFE } from "../../components/data/main-life"; import { useNavigate } from "react-router-dom"; -import axios from "axios"; -import { ENGLISH_TO_KOREAN_MAP } from "../../components/data/english-to-korean"; -import { API_BASE_URL } from "../../api/constant"; interface MarineLife { name: string; @@ -52,7 +49,6 @@ const BookPage = () => { const [selectedMarineLife, setSelectedMarineLife] = useState(null); const navigate = useNavigate(); - const [caughtFishNames, setCaughtFishNames] = useState([]); const getStatusColor = (status: string) => { switch (status) { @@ -72,34 +68,6 @@ const BookPage = () => { const modalSize = useBreakpointValue({ base: "90vw", md: "md" }); const cardSize = useBreakpointValue({ base: "80vw", md: "md" }); - const accessToken = localStorage.getItem("accessToken"); // 실제 토큰 값을 여기에 설정하세요. - useEffect(() => { - const fetchFishData = async () => { - try { - const data = await axios.get(`${API_BASE_URL}/api/v1/pokedex`, { - headers: { - Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 - }, - }); - const caughtFishKoreanNames = Object.entries(data) - .filter(([, caught]) => caught) - .map( - ([name]) => - ENGLISH_TO_KOREAN_MAP[name as keyof typeof ENGLISH_TO_KOREAN_MAP] - ) - .filter(Boolean); // undefined 제거 - setCaughtFishNames(caughtFishKoreanNames); - } catch (error) { - console.error( - "물고기 데이터를 가져오는 중 오류가 발생했습니다:", - error - ); - } - }; - - fetchFishData(); - }); - const handleCardClick = (fish: Partial) => { const matchedFish = MAIN_LIFE.find( (mainFish) => mainFish.name === fish.name @@ -121,7 +89,7 @@ const BookPage = () => { > } - aria-label="보호종 더 알아보기" + aria-label="보호종 더 알아보러 가기" onClick={() => window.open( "https://www.nie.re.kr/nie/pgm/edSearch/main.do?menuNo=200133", @@ -250,11 +218,13 @@ const BookPage = () => { {selectedMarineLife && ( <> + {/* 제목 */} {selectedMarineLife.name} + {/* 원형 이미지 */} { }} /> + + {/* 상태 텍스트 */} 멸종 등급: @@ -288,6 +260,7 @@ const BookPage = () => { + {/* 설명 */} {selectedMarineLife.description ?? "설명이 없습니다."} @@ -304,15 +277,15 @@ const BookPage = () => { overflowY="auto" css={{ "&::-webkit-scrollbar": { - width: "5px", - backgroundColor: "#E9F9FF", + width: "5px", // 스크롤바 너비 + backgroundColor: "#E9F9FF", // 스크롤바 배경색 (Box 배경과 일치) }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#888", - borderRadius: "4px", + backgroundColor: "#888", // 스크롤바 색상 + borderRadius: "4px", // 스크롤바 모서리 둥글게 }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "#555", + backgroundColor: "#555", // 호버 시 스크롤바 색상 변경 }, }} background="#E9F9FF" @@ -324,12 +297,10 @@ const BookPage = () => { mx="auto" mt={4} > - {MAIN_LIFE.map((fish, index) => ( + {MARINE_LIFE.map((fish, index) => ( { justifyContent="center" overflow="hidden" > - {caughtFishNames.includes(fish.name) ? ( + {MAIN_LIFE.some( + (mainFish) => + mainFish.name === fish.name && mainFish.image + ) ? ( mainFish.name === fish.name + )?.image + } // MAIN_LIFE에서 이미지 경로를 가져옵니다. alt={fish.name} style={{ width: "100%",