Merge pull request #57 from kdhqwe1030/group/BasicInfo

feat: api연결
IT-Cotato · Aug 13, 2024 · 970d1fa · 970d1fa
2 parents c958f5b + cce0bda
commit 970d1fa
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 33 deletions.
diff --git 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 (
     <>
       <BaseContainer>
         <ClubMainInfo
-          region={'서울'}
-          personality={'모두 환영'}
-          name={'중앙 가르드'}
-          memRecent={32}
-          memMax={40}
-          establishDate={'2023.09.01'}
+          region={information.tags[0]}
+          personality={information.tags[1]}
+          name={information.clubName}
+          memRecent={information.numberOfMembers}
+          memMax={information.maxMembers}
+          establishDate={fommatDate()}
+          img={information.logo}
         />
-        <ClubSubInfo onClick={toggleModal} />
+        <ClubSubInfo onClick={toggleModal} information={information} />
       </BaseContainer>
 
       <Rank isOpen={isModalOpen} onClose={closeModal} />
@@ -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
@@ -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 (
     <Container>
-      <ClubImage />
+      <ClubImage src={img} alt={"Club Image"} />
       <TagInfo>
         <TagItem content={region} />
         <TagItem content={personality} />

diff --git 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 (
     <Container>
       <RankContainer onClick={onClick}>
@@ -62,12 +62,12 @@ const ClubSubInfo = ({ onClick }) => {
 
         <RankTextContainer>
           <TextSmall>티어 정보</TextSmall>
-          <TextBIg>실버</TextBIg>
+          <TextBIg>{information.clubTier}</TextBIg>
           <TextBIg>138팀 중 7위</TextBIg>
           <TextSmall>다음 레벨까지 남은 순위 : 3위</TextSmall>
         </RankTextContainer>
       </RankContainer>
-      <ClubComment title={'동아리 한마디'} content={'화이팅!!'} />{' '}
+      <ClubComment title={"동아리 한마디"} content={information.clubMessage} />
     </Container>
   );
 };