diff --git a/src/pages/group/basicinfo/BasicInfo.jsx b/src/pages/group/basicinfo/BasicInfo.jsx index bbf4edf..2832988 100644 --- a/src/pages/group/basicinfo/BasicInfo.jsx +++ b/src/pages/group/basicinfo/BasicInfo.jsx @@ -1,21 +1,40 @@ -import styled from 'styled-components'; -import { useState } from 'react'; -import ClubMainInfo from './basicInfo_components/ClubMainInfo'; -import ClubSubInfo from './basicInfo_components/ClubSubInfo'; -import Rank from './Rank'; - -const BaseContainer = styled.div` - width: 100%; - height: 100%; - overflow-y: auto; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 12px; - box-sizing: border-box; -`; +import styled from "styled-components"; +import { useEffect, useState } from "react"; +import ClubMainInfo from "./basicInfo_components/ClubMainInfo"; +import ClubSubInfo from "./basicInfo_components/ClubSubInfo"; +import Rank from "./Rank"; +import axios from "axios"; const BasicInfo = () => { + const [information, setInfomation] = useState({ + id: 1, + clubMessage: "", + clubName: "", + clubRank: "", + clubTier: "", + createdAt: "", + logo: "", + maxMembers: null, + numberOfMembers: 0, + sportsCategory: "", + tags: [], + university: "", + }); + const getInfo = async () => { + axios + .get("http://15.165.165.240:8080/v1/api/clubs/1") + .then((res) => { + console.log(res.data); + setInfomation(res.data); + }) + .catch((err) => { + console.log(err); + }); + }; + + useEffect(() => { + getInfo(); + }, []); const [isModalOpen, setIsModalOpen] = useState(false); const toggleModal = () => { setIsModalOpen((prev) => !prev); @@ -24,18 +43,26 @@ const BasicInfo = () => { const closeModal = () => { setIsModalOpen(false); }; + const fommatDate = () => { + const tmp = new Date(information.createdAt); + const result = `${tmp.getFullYear()}.${ + tmp.getMonth() + 1 + }.${tmp.getDate()}`; + return result; + }; return ( <> - + @@ -44,3 +71,14 @@ const BasicInfo = () => { }; export default BasicInfo; + +const BaseContainer = styled.div` + width: 100%; + height: 100%; + overflow-y: auto; + padding: 16px 20px; + display: flex; + flex-direction: column; + gap: 12px; + box-sizing: border-box; +`; diff --git a/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx b/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx index 038d510..251d775 100644 --- a/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx @@ -1,7 +1,7 @@ -import styled from 'styled-components'; -import TagItem from './TagItem'; +import styled from "styled-components"; +import TagItem from "./TagItem"; -const ClubImage = styled.div` +const ClubImage = styled.img` width: 100%; height: 192px; border-radius: 8px; @@ -44,10 +44,11 @@ const ClubInfo = ({ memRecent, memMax, establishDate, + img, }) => { return ( - + diff --git a/src/pages/group/basicinfo/basicInfo_components/ClubSubInfo.jsx b/src/pages/group/basicinfo/basicInfo_components/ClubSubInfo.jsx index 6d7f5bd..e02c1be 100644 --- a/src/pages/group/basicinfo/basicInfo_components/ClubSubInfo.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/ClubSubInfo.jsx @@ -1,6 +1,6 @@ -import ClubComment from './ClubComment'; -import styled from 'styled-components'; -import { ReactComponent as Tier } from '../../../../assets/group/RankItem.svg'; +import ClubComment from "./ClubComment"; +import styled from "styled-components"; +import { ReactComponent as Tier } from "../../../../assets/group/RankItem.svg"; const Container = styled.div` display: flex; @@ -52,7 +52,7 @@ const TextBIg = styled.div` color: #ffffff; `; -const ClubSubInfo = ({ onClick }) => { +const ClubSubInfo = ({ onClick, information }) => { return ( @@ -62,12 +62,12 @@ const ClubSubInfo = ({ onClick }) => { 티어 정보 - 실버 + {information.clubTier} 138팀 중 7위 다음 레벨까지 남은 순위 : 3위 - {' '} + ); };