diff --git a/BlueMosaic/src/App.tsx b/BlueMosaic/src/App.tsx index a46ca72..b6cab09 100644 --- a/BlueMosaic/src/App.tsx +++ b/BlueMosaic/src/App.tsx @@ -8,6 +8,7 @@ import { Ranking } from './pages/Ranking' import { Signin } from './pages/Signin' import { Signup } from './pages/Signup' import { Trash } from './pages/Trash' +import { CollectionFriend } from './pages/CollectionFriend' import { ThemeProvider } from '@emotion/react'; import GlobalStyle from './styles/GlobalStyle'; @@ -26,6 +27,7 @@ function App() { }/> }/> }/> + }/> }/> }/> }/> diff --git a/BlueMosaic/src/components/SmartphoneSVG.tsx b/BlueMosaic/src/components/SmartphoneSVG.tsx index a88fe3d..cddbbbe 100644 --- a/BlueMosaic/src/components/SmartphoneSVG.tsx +++ b/BlueMosaic/src/components/SmartphoneSVG.tsx @@ -163,25 +163,25 @@ export const SmartphoneSVG = ({ handleClickParent, imageUrl }) => { - + - + - + - - + + - - + + diff --git a/BlueMosaic/src/components/dashboard/MiniFrameSVG.tsx b/BlueMosaic/src/components/dashboard/MiniFrameSVG.tsx index ec5b8e6..8947163 100644 --- a/BlueMosaic/src/components/dashboard/MiniFrameSVG.tsx +++ b/BlueMosaic/src/components/dashboard/MiniFrameSVG.tsx @@ -4,7 +4,7 @@ export const MiniFrameSVG = ({ handleCircleClickParent, imageUrl, date, text }) return ( - img + img {text}

{date}

 diff --git a/BlueMosaic/src/components/ranking/CircleSVG.tsx b/BlueMosaic/src/components/ranking/CircleSVG.tsx new file mode 100644 index 0000000..920b657 --- /dev/null +++ b/BlueMosaic/src/components/ranking/CircleSVG.tsx @@ -0,0 +1,80 @@ +export const CircleSVG = ({ ranking, imageUrl }) => { + // console.log("imageUrl",imageUrl); + if (ranking === "1") { + return ( + + {/* Clip path for circle */} + + + + + {/* Pattern for image */} + + + + + + {/* Rest of the SVG */} + + + + + {/* Gradient definition */} + + + + + + + + ); + } else if (ranking === "2") { + return ( + + {/* Circle with image cover */} + + + + + + + + {/* Other elements */} + + + + {/* Gradient definitions */} + + + + + + + + + + + + ); + } else { + // Handle other rankings or provide a default SVG + return ( + + + + + + + + + + + + + + + + + ); + } +} diff --git a/BlueMosaic/src/components/ranking/RankingList.tsx b/BlueMosaic/src/components/ranking/RankingList.tsx index c6e2598..c61ba2b 100644 --- a/BlueMosaic/src/components/ranking/RankingList.tsx +++ b/BlueMosaic/src/components/ranking/RankingList.tsx @@ -1,6 +1,43 @@ import styled from "@emotion/styled" +import { TrashInfoStore } from "../../stores/TrashStore"; +import { FriendInfoStore } from "../../stores/FriendStore"; +import { FriendApis } from "../../hooks/useFriendQuery"; +import { UserInfoStore } from "../../stores/UserInfoStore"; +import { RankingApis } from "../../hooks/useRankingQuery"; +import { useEffect, useState } from "react"; +import { CircleSVG } from "./CircleSVG"; export const RankingList = () => { + const [data, setData] = useState([]); + const [mydata, setMydata] = useState(); + const [myfriend1, setMyfriend1] = useState(); + const [myfriend2, setMyfriend2] = useState(); + + useEffect(() => { + const fetchData = async () => { + try { + const result = await RankingApis.get(); + setData(result); + + // 본인 점수 찾기 + const currentUserId = UserInfoStore.getState().userId; + const currentUserData = result.find(item => item.userId === currentUserId); + setMydata(currentUserData); + + // 친구 점수 찾기 + const friends = await FriendApis.find(); + // friends 2명의 id를 저장 + const [friends1, friends2] = friends; + setMyfriend1(result.find(item => item.userId === friends1.id)); + setMyfriend2(result.find(item => item.userId === friends2.id)); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + fetchData(); + }, []); + + return (

Leaderboard

@@ -8,51 +45,57 @@ export const RankingList = () => {
My score -
1222P
+
{mydata && mydata.score}P
 - - - {"thirdName"} - {"300"}P - - - - {"thirdName"} - {"300"}P - - - - {"thirdName"} - {"300"}P - - + {data.length > 0 && ( + <> + + + {data[1]?.nickname} + {data[1]?.score}P + + + + + {data[0]?.nickname} + {data[0]?.score}P + + + + + {data[2]?.nickname} + {data[2]?.score}P + + + )} + - +
- 이름 - 100P + {mydata && mydata.nickname} + {mydata && mydata.score}P
- +
- 이름 - 100P + {myfriend1 && myfriend1.nickname} + {myfriend1 && myfriend1.score}P
- +
- 이름 - 100P + {myfriend2 && myfriend2.nickname} + {myfriend2 && myfriend2.score}P
@@ -69,7 +112,7 @@ const RankingWrapper = styled.div` align-items: stretch; justify-content: center; align-items: center; - gap: 2.5rem; + gap: 1.5rem; flex-shrink: 0; border-radius: 3.125rem 0rem 0rem 3.125rem; background: var(----white-color, #FFF); @@ -80,6 +123,7 @@ const RankingWrapper = styled.div` font-family: Roboto; font-size: 2.125rem; font-weight: 700; + margin: 0; }` const RankingTop = styled.div` @@ -160,7 +204,7 @@ em{ const RankingMine = styled.section` display: flex; -padding: 3.125rem; +padding: 1.125rem; flex-direction: column; justify-content: center; align-items: center; @@ -187,15 +231,15 @@ em { `; const Profile = styled.img` -width: 3.45275rem; -height: 3.45275rem; -border-radius: 3.92363rem; -background: #D9D9D9; + width: 3.45275rem; + height: 3.45275rem; + border-radius: 3.92363rem; + content: url(${props => props.src || '#D9D9D9'}); `; const Mine = styled.div` display: flex; -padding: 0.9375rem 11.6875rem 0.9375rem 1.25rem; +padding: 0.6375rem 11.6875rem 0.6375rem 1.25rem; align-items: center; gap: 1rem; align-self: stretch; diff --git a/BlueMosaic/src/hooks/useMarineQuery.ts b/BlueMosaic/src/hooks/useMarineQuery.ts index 5861c9f..f3d9e5f 100644 --- a/BlueMosaic/src/hooks/useMarineQuery.ts +++ b/BlueMosaic/src/hooks/useMarineQuery.ts @@ -36,6 +36,18 @@ export const MarineApis = { } }, + // 업로드하고 획득한 점수 확인하기 + uploadFriend: async (formData: FormData) => { + try { + const res = await MarineApis.instance.post('/friend-dummy-marine', formData); + console.log(res); + return res.data; + } catch (error) { + alert(`[Can't recognize] Please add a clearer picture`) + throw error; + } + }, + // 주어진 ID의 해양 생물 정보를 수정 update: async () => { try { @@ -57,7 +69,19 @@ export const MarineApis = { // 사용자가 모은 해양 생물 정보를 조회 getCollection: async () => { try { - const res = await MarineApis.instance.get(`/retrieve${UserInfoStore.getState().userId}`); + const res = await MarineApis.instance.get(`/retrieve/${UserInfoStore.getState().userId}`); + console.log(res); + return res.data; + } catch (error) { + alert(`[Can't recognize] Please add `) + throw error; + } + }, + + // 사용자가 모은 해양 생물 정보를 조회 + getCollectionDummy: async () => { + try { + const res = await MarineApis.instance.get(`/retrieve/${2}`); console.log(res); return res.data; } catch (error) { diff --git a/BlueMosaic/src/hooks/useRankingQuery.ts b/BlueMosaic/src/hooks/useRankingQuery.ts index 173bbac..ed70a3d 100644 --- a/BlueMosaic/src/hooks/useRankingQuery.ts +++ b/BlueMosaic/src/hooks/useRankingQuery.ts @@ -1,11 +1,5 @@ import axios from 'axios'; -const data = { - "id": 0, - "userId": 0, - "score": 0 -} - export const RankingApis = { instance: axios.create({ baseURL: 'http://localhost:8080/ranking', @@ -15,7 +9,7 @@ export const RankingApis = { // 랭킹 조회 get: async () => { try { - const res = await RankingApis.instance.get(`/`); + const res = await RankingApis.instance.get(``); console.log(res); return res.data; } catch (error) { diff --git a/BlueMosaic/src/pages/Collection.tsx b/BlueMosaic/src/pages/Collection.tsx index 3e160b6..fb9ef66 100644 --- a/BlueMosaic/src/pages/Collection.tsx +++ b/BlueMosaic/src/pages/Collection.tsx @@ -4,7 +4,7 @@ import styled from "@emotion/styled" import { Dashboard } from "../components/dashboard/dashboard" import { MiniFrameSVG } from "../components/dashboard/MiniFrameSVG" import HomeSVG from "../assets/HomeSVG.svg" -import { MediaApis } from "../hooks/useMediaQuery" +import { MarineApis } from '../hooks/useMarineQuery'; export const Collection = () => { const [mediaData, setMediaData] = useState([]); @@ -12,8 +12,8 @@ export const Collection = () => { useEffect(() => { async function fetchData() { try { - const response = await MediaApis.get(1); - setMediaData(response.data); + const response = await MarineApis.getCollection(); + setMediaData(response); } catch (error) { console.error('Error fetching data:', error); } @@ -28,15 +28,15 @@ export const Collection = () => { {/* Grid */} - {/* {mediaData.map((item, key) => ( + { mediaData && mediaData.map((item, key) => ( - ))} */} + ))} diff --git a/BlueMosaic/src/pages/CollectionFriend.tsx b/BlueMosaic/src/pages/CollectionFriend.tsx new file mode 100644 index 0000000..cf0bc01 --- /dev/null +++ b/BlueMosaic/src/pages/CollectionFriend.tsx @@ -0,0 +1,58 @@ +import { useState, useEffect } from 'react'; +import { Wrapper, Container } from "../styles/Layout" +import styled from "@emotion/styled" +import { Dashboard } from "../components/dashboard/dashboard" +import { MiniFrameSVG } from "../components/dashboard/MiniFrameSVG" +import HomeSVG from "../assets/HomeSVG.svg" +import { MarineApis } from '../hooks/useMarineQuery'; + +export const CollectionFriend = () => { + const [mediaData, setMediaData] = useState([]); + + useEffect(() => { + async function fetchData() { + try { + const response = await MarineApis.getCollection(); + setMediaData(response); + } catch (error) { + console.error('Error fetching data:', error); + } + } + + fetchData(); + }, []); + + return ( + + + + {/* Grid */} + + { mediaData && mediaData.map((item, key) => ( + + ))} + + + + + ); +} + +const GridContainer = styled.div` + width: 100%; + height: 100%; + display: grid; + box-sizing: border-box; + padding-left: 2rem; + padding-right: 2rem; + grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); + gap: 16px; + align-items: stretch; + align-content: flex-start; +`; diff --git a/BlueMosaic/src/pages/LandingPage.tsx b/BlueMosaic/src/pages/LandingPage.tsx index c427e42..e613ebd 100644 --- a/BlueMosaic/src/pages/LandingPage.tsx +++ b/BlueMosaic/src/pages/LandingPage.tsx @@ -66,12 +66,12 @@ export const LandingPage = () => { return( - + { const [showSmartphone, setShowSmartphone] = useState(false); const [showToast, setShowToast] = useState(true); const [selectedFile, setSelectedFile] = useState(null); + const [returndata, setReturndata] = useState(); const [selectedImageUrl, setSelectedImageUrl] = useState(null); const fileInputRef = useRef(null); const navigate = useNavigate(); @@ -47,8 +49,19 @@ export const Ocean = () => { } try { + // const resFriend = MarineApis.uploadFriend(formData); + // console.log(resFriend); const response = await MarineApis.upload(formData); console.log("Upload Response:", response); + const formattedData = response.map(item => ({ + score: item.score, + total: item.total, + names: item.names.join(', '), // Assuming names is an array + })); + + setReturndata(formattedData); + console.log(formattedData); + setShowSmartphone(true); } catch (error) { console.error('Error uploading file:', error);