Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/team-GDGline/gdgline-FE
Browse files Browse the repository at this point in the history
  • Loading branch information
@Catleap02
Catleap02 committed Nov 15, 2024
2 parents 60a8794 + 279ef5c commit 47bd051
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 23 deletions.
28 changes: 14 additions & 14 deletions src/components/data/main-life.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
];
34 changes: 25 additions & 9 deletions src/pages/MainPage/components/Aquarium.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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" },
Expand All @@ -42,22 +44,36 @@ interface AquariumProps {

const Aquarium: React.FC<AquariumProps> = ({ children }) => {
const [fishData, setFishData] = useState<Record<string, boolean>>({});
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 (
Expand Down

0 comments on commit 47bd051

Please sign in to comment.