From b0d4ad1835cd68dc8384ba68d1da625789ac0f34 Mon Sep 17 00:00:00 2001 From: kiyeong Date: Fri, 15 Nov 2024 22:45:49 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8F=84=EA=B0=90=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/data/main-life.ts | 28 ++++++------- src/pages/Book/BookPage.tsx | 68 +++++++++++++++++++++----------- 2 files changed, 59 insertions(+), 37 deletions(-) diff --git a/src/components/data/main-life.ts b/src/components/data/main-life.ts index 5ae66bb..8706bd3 100644 --- a/src/components/data/main-life.ts +++ b/src/components/data/main-life.ts @@ -4,97 +4,97 @@ export const MAIN_LIFE = [ status: "LC", description: "가든일은 물속 모래 속에 몸을 숨기며 살아가는 작은 해양 생물입니다. 가든일의 서식지인 모래와 해저는 건강한 해양 생태계를 위한 중요한 역할을 하며, 이를 보호하기 위해서는 오염을 줄이고 해양 생태계를 보호해야 합니다.", - image: "assets/Garden_eel.svg", + image: "src/components/images/Garden_eel.svg", }, { name: "나폴레옹피쉬", status: "CR", description: "나폴레옹피쉬는 산호초 주변에서 생활하며, 큰 몸집과 독특한 모양으로 유명합니다. 불법적인 남획과 서식지 파괴로 인해 멸종 위기에 처해 있습니다. 산호초 보호는 나폴레옹피쉬뿐만 아니라 다양한 해양 생물들에게 필수적입니다.", - image: "assets/Napoleon_wrasse.svg", + image: "src/components/images/Napoleon_wrasse.svg", }, { name: "매부리바다거북", status: "EN", description: "매부리바다거북은 전 세계적으로 위협받는 종으로, 해양 쓰레기와 오염으로부터 큰 영향을 받고 있습니다. 바다거북 보호는 해양 생태계를 보호하는 데 중요한 부분입니다.", - image: "assets/Leatherback_sea_turtle.svg", + image: "src/components/images/Leatherback_sea_turtle.svg", }, { name: "아로와나", status: "LC", description: "아로와나는 강과 늪에서 서식하는 대형 물고기로, 지역 환경 변화에 민감한 종입니다. 아로와나의 서식지 보존은 주변 생태계를 보호하는 데 중요한 역할을 합니다.", - image: "assets/Arowana.svg", + image: "src/components/images/Arowana.svg", }, { name: "아프리카매너티", status: "CR", description: "아프리카매너티는 서식지 파괴와 오염으로 인해 멸종 위기에 처해 있는 대형 해양 포유류입니다. 매너티의 서식지를 보호하는 것은 해양 생태계의 다양성을 지키는 데 중요합니다.", - image: "assets/African_manatee.svg", + image: "src/components/images/African_manatee.svg", }, { name: "자이언트그루퍼", status: "EN", description: "자이언트그루퍼는 산호초 지역의 대형 포식어로, 무분별한 남획과 서식지 파괴로 인해 멸종 위기에 놓여 있습니다. 자이언트그루퍼를 보호하는 것은 산호초 생태계를 유지하는 데 도움이 됩니다.", - image: "assets/Giant_grouper.svg", + image: "src/components/images/Giant_grouper.svg", }, { name: "작은발톱수달", status: "EN", description: "작은발톱수달은 하천과 해양 생태계 모두에서 중요한 역할을 하는 동물로, 서식지 파괴로 인해 위기에 처해 있습니다. 수달의 서식지 보호는 생물 다양성 유지와 하천 생태계 건강에 필수적입니다.", - image: "assets/Small_clawed_otter.svg", + image: "src/components/images/Small_clawed_otter.svg", }, { name: "제브라상어", status: "LC", description: "제브라상어는 산호초와 해양 바닥에서 서식하며, 낮에는 휴식을 취하고 밤에 활동하는 종입니다. 산호초와 바닥 생태계 보호는 제브라상어뿐만 아니라 다양한 해양 생물들의 생존을 위해 중요합니다.", - image: "assets/Blacktip_reef_shark.svg", + image: "src/components/images/Blacktip_reef_shark.svg", }, { name: "캘리포니아 바다사자", status: "LC", description: "캘리포니아 바다사자는 해양 포식자로, 물고기와 갑각류를 먹으며 해양 생태계의 균형을 유지하는 데 기여합니다. 오염과 서식지 감소로 인해 위협을 받고 있으며, 이를 보호하기 위해 해양 환경 개선이 필요합니다.", - image: "assets/California_sea_lion.svg", + image: "src/components/images/California_sea_lion.svg", }, { name: "피라냐", status: "LC", description: "피라냐는 강력한 이빨을 가진 포식성 어류로, 하천 생태계에서 먹이 사슬의 균형을 유지하는 데 중요한 역할을 합니다. 남획과 서식지 파괴는 피라냐와 같은 어종의 생존에 큰 위협이 됩니다.", - image: "assets/Piranha.svg", + image: "src/components/images/Piranha.svg", }, { name: "흑가오리", status: "LC", description: "흑가오리는 해양 바닥 생태계에서 중요한 역할을 하는 종으로, 바닥에 숨겨진 먹이를 사냥합니다. 해양 바닥 생태계 보호는 흑가오리와 같은 종의 생존에 필수적입니다.", - image: "assets/Black_stingray.svg", + image: "src/components/images/Black_stingray.svg", }, { name: "흑기흉상어", status: "LC", description: "흑기흉상어는 강력한 포식자로, 해양 먹이 사슬의 균형을 유지하는 데 중요한 역할을 합니다. 흑기흉상어를 보호하기 위해서는 남획을 줄이고 해양 서식지 보호가 필수적입니다.", - image: "assets/Blacktip_reef_shark.svg", + image: "src/components/images/Blacktip_reef_shark.svg", }, { name: "흰동가리", status: "LC", description: "흰동가리는 산호초에서 군집 생활을 하며 공생 관계를 맺고 있습니다. 산호초 보호는 흰동가리와 같은 종들의 서식지 보존뿐 아니라, 해양 생물 다양성을 유지하는 데 중요한 역할을 합니다.", - image: "assets/Clownfish.svg", + image: "src/components/images/Clownfish.svg", }, { name: "홈볼트펭귄", status: "CR", description: "홈볼트펭귄은 해양 서식지에서 생존하는 펭귄으로, 어류 감소와 환경 변화로 인해 멸종 위기에 처해 있습니다. 어류 자원 관리와 서식지 보전은 홈볼트펭귄 생존에 필수적입니다.", - image: "assets/Humboldt_penguin.svg", + image: "src/components/images/Humboldt_penguin.svg", }, ]; diff --git a/src/pages/Book/BookPage.tsx b/src/pages/Book/BookPage.tsx index 417daba..fc09337 100644 --- a/src/pages/Book/BookPage.tsx +++ b/src/pages/Book/BookPage.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Box, SimpleGrid, @@ -29,6 +29,9 @@ 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; @@ -49,6 +52,7 @@ const BookPage = () => { const [selectedMarineLife, setSelectedMarineLife] = useState(null); const navigate = useNavigate(); + const [caughtFishNames, setCaughtFishNames] = useState([]); const getStatusColor = (status: string) => { switch (status) { @@ -68,6 +72,34 @@ 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 @@ -89,7 +121,7 @@ const BookPage = () => { > } - aria-label="보호종 더 알아보러 가기" + aria-label="보호종 더 알아보기" onClick={() => window.open( "https://www.nie.re.kr/nie/pgm/edSearch/main.do?menuNo=200133", @@ -218,13 +250,11 @@ const BookPage = () => { {selectedMarineLife && ( <> - {/* 제목 */} {selectedMarineLife.name} - {/* 원형 이미지 */} { }} /> - - {/* 상태 텍스트 */} 멸종 등급: @@ -260,7 +288,6 @@ const BookPage = () => { - {/* 설명 */} {selectedMarineLife.description ?? "설명이 없습니다."} @@ -277,15 +304,15 @@ const BookPage = () => { overflowY="auto" css={{ "&::-webkit-scrollbar": { - width: "5px", // 스크롤바 너비 - backgroundColor: "#E9F9FF", // 스크롤바 배경색 (Box 배경과 일치) + width: "5px", + backgroundColor: "#E9F9FF", }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#888", // 스크롤바 색상 - borderRadius: "4px", // 스크롤바 모서리 둥글게 + backgroundColor: "#888", + borderRadius: "4px", }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "#555", // 호버 시 스크롤바 색상 변경 + backgroundColor: "#555", }, }} background="#E9F9FF" @@ -297,10 +324,12 @@ const BookPage = () => { mx="auto" mt={4} > - {MARINE_LIFE.map((fish, index) => ( + {MAIN_LIFE.map((fish, index) => ( { justifyContent="center" overflow="hidden" > - {MAIN_LIFE.some( - (mainFish) => - mainFish.name === fish.name && mainFish.image - ) ? ( + {caughtFishNames.includes(fish.name) ? ( mainFish.name === fish.name - )?.image - } // MAIN_LIFE에서 이미지 경로를 가져옵니다. + src={fish.image} alt={fish.name} style={{ width: "100%",