diff --git a/src/components/data/main-life.ts b/src/components/data/main-life.ts index 8706bd3..de22e23 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: "src/components/images/Garden_eel.svg", + image: "assets/gardenEel-BgvFBKv5.svg", }, { name: "나폴레옹피쉬", status: "CR", description: "나폴레옹피쉬는 산호초 주변에서 생활하며, 큰 몸집과 독특한 모양으로 유명합니다. 불법적인 남획과 서식지 파괴로 인해 멸종 위기에 처해 있습니다. 산호초 보호는 나폴레옹피쉬뿐만 아니라 다양한 해양 생물들에게 필수적입니다.", - image: "src/components/images/Napoleon_wrasse.svg", + image: "assets/napoleonWrasse-BlDJaYxU.svg", }, { name: "매부리바다거북", status: "EN", description: "매부리바다거북은 전 세계적으로 위협받는 종으로, 해양 쓰레기와 오염으로부터 큰 영향을 받고 있습니다. 바다거북 보호는 해양 생태계를 보호하는 데 중요한 부분입니다.", - image: "src/components/images/Leatherback_sea_turtle.svg", + image: "assets/leatherbackSeaTurtle-YBobPTQB.svg", }, { name: "아로와나", status: "LC", description: "아로와나는 강과 늪에서 서식하는 대형 물고기로, 지역 환경 변화에 민감한 종입니다. 아로와나의 서식지 보존은 주변 생태계를 보호하는 데 중요한 역할을 합니다.", - image: "src/components/images/Arowana.svg", + image: "assets/arowana-CcRDvswm.svg", }, { name: "아프리카매너티", status: "CR", description: "아프리카매너티는 서식지 파괴와 오염으로 인해 멸종 위기에 처해 있는 대형 해양 포유류입니다. 매너티의 서식지를 보호하는 것은 해양 생태계의 다양성을 지키는 데 중요합니다.", - image: "src/components/images/African_manatee.svg", + image: "assets/africanManatee-49-qTj6X.svg", }, { name: "자이언트그루퍼", status: "EN", description: "자이언트그루퍼는 산호초 지역의 대형 포식어로, 무분별한 남획과 서식지 파괴로 인해 멸종 위기에 놓여 있습니다. 자이언트그루퍼를 보호하는 것은 산호초 생태계를 유지하는 데 도움이 됩니다.", - image: "src/components/images/Giant_grouper.svg", + image: "assets/giantGrouper-CKtIAJx9.svg", }, { name: "작은발톱수달", status: "EN", description: "작은발톱수달은 하천과 해양 생태계 모두에서 중요한 역할을 하는 동물로, 서식지 파괴로 인해 위기에 처해 있습니다. 수달의 서식지 보호는 생물 다양성 유지와 하천 생태계 건강에 필수적입니다.", - image: "src/components/images/Small_clawed_otter.svg", + image: "assets/smallClawedOtter-Cf40VQxR.svg", }, { name: "제브라상어", status: "LC", description: "제브라상어는 산호초와 해양 바닥에서 서식하며, 낮에는 휴식을 취하고 밤에 활동하는 종입니다. 산호초와 바닥 생태계 보호는 제브라상어뿐만 아니라 다양한 해양 생물들의 생존을 위해 중요합니다.", - image: "src/components/images/Blacktip_reef_shark.svg", + image: "assets/zebraShark-DsQxowZx.svg", }, { name: "캘리포니아 바다사자", status: "LC", description: "캘리포니아 바다사자는 해양 포식자로, 물고기와 갑각류를 먹으며 해양 생태계의 균형을 유지하는 데 기여합니다. 오염과 서식지 감소로 인해 위협을 받고 있으며, 이를 보호하기 위해 해양 환경 개선이 필요합니다.", - image: "src/components/images/California_sea_lion.svg", + image: "assets/californiaSeaLion-BSJBpSF-.svg", }, { name: "피라냐", status: "LC", description: "피라냐는 강력한 이빨을 가진 포식성 어류로, 하천 생태계에서 먹이 사슬의 균형을 유지하는 데 중요한 역할을 합니다. 남획과 서식지 파괴는 피라냐와 같은 어종의 생존에 큰 위협이 됩니다.", - image: "src/components/images/Piranha.svg", + image: "assets/piranha-CHA4oVn2.svg", }, { name: "흑가오리", status: "LC", description: "흑가오리는 해양 바닥 생태계에서 중요한 역할을 하는 종으로, 바닥에 숨겨진 먹이를 사냥합니다. 해양 바닥 생태계 보호는 흑가오리와 같은 종의 생존에 필수적입니다.", - image: "src/components/images/Black_stingray.svg", + image: "assets/blackStingray-CmDPSbfm.svg", }, { name: "흑기흉상어", status: "LC", description: "흑기흉상어는 강력한 포식자로, 해양 먹이 사슬의 균형을 유지하는 데 중요한 역할을 합니다. 흑기흉상어를 보호하기 위해서는 남획을 줄이고 해양 서식지 보호가 필수적입니다.", - image: "src/components/images/Blacktip_reef_shark.svg", + image: "assets/blacktipReefShark-Cg5qI7oq.svg", }, { name: "흰동가리", status: "LC", description: "흰동가리는 산호초에서 군집 생활을 하며 공생 관계를 맺고 있습니다. 산호초 보호는 흰동가리와 같은 종들의 서식지 보존뿐 아니라, 해양 생물 다양성을 유지하는 데 중요한 역할을 합니다.", - image: "src/components/images/Clownfish.svg", + image: "assets/clownfish-O-ggpUQ7.svg", }, { name: "홈볼트펭귄", status: "CR", description: "홈볼트펭귄은 해양 서식지에서 생존하는 펭귄으로, 어류 감소와 환경 변화로 인해 멸종 위기에 처해 있습니다. 어류 자원 관리와 서식지 보전은 홈볼트펭귄 생존에 필수적입니다.", - image: "src/components/images/Humboldt_penguin.svg", + image: "assets/humboldtPenguin-zgBJ0ffw.svg", }, ]; diff --git a/src/pages/MainPage/components/Aquarium.tsx b/src/pages/MainPage/components/Aquarium.tsx index cb404f8..1ad34b4 100644 --- a/src/pages/MainPage/components/Aquarium.tsx +++ b/src/pages/MainPage/components/Aquarium.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import styled from "@emotion/styled"; import { keyframes } from "@emotion/react"; import axios from "axios"; -import { API_BASE_URL } from "../../../api/constant"; + import background_aquarium from "../../../assets/background_aquarium.svg"; import gardenEel from "../../../assets/pixel/gardenEel.svg"; import napoleonWrasse from "../../../assets/pixel/napoleonWrasse.svg"; @@ -18,6 +18,8 @@ import clownfish from "../../../assets/pixel/clownfish.svg"; import blackStingray from "../../../assets/pixel/blackStingray.svg"; import leatherbackSeaTurtle from "../../../assets/pixel/leatherbackSeaTurtle.svg"; import humboldtPenguin from "../../../assets/pixel/humboldtPenguin.svg"; +import { API_BASE_URL } from "../../../api/constant"; + const fishPixel = [ { src: gardenEel, key: "gardenEel", top: "75%", left: "10%", width: "80px", height: "80px" }, @@ -42,22 +44,36 @@ interface AquariumProps { const Aquarium: React.FC = ({ children }) => { const [fishData, setFishData] = useState>({}); - const accessToken = localStorage.getItem("accessToken"); // 실제 토큰 값을 여기에 설정하세요. + useEffect(() => { const fetchFishData = async () => { try { - const response = await axios.get(`${API_BASE_URL}/api/v1/pokedex`, - { headers: { - Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 - }, - }); + const response = await axios.get(`${API_BASE_URL}/api/v1/pokedex`); setFishData(response.data); // 물고기 데이터 저장 + // setFishData( + // { + // "gardenEel": true, + // "napoleonWrasse": false, + // "arowana": true, + // "blacktipReefShark": false, + // "africanManatee": true, + // "giantGrouper": false, + // "smallClawedOtter": true, + // "piranha": false, + // "zebraShark": true, + // "californiaSeaLion": true, + // "clownfish": false, + // "blackStingray": true, + // "leatherbackSeaTurtle": false, + // "humboldtPenguin": true + // } + // ) } catch (error) { console.error("물고기 데이터를 가져오는 중 오류가 발생했습니다:", error); } }; - - fetchFishData(); + + fetchFishData(); }, []); return (