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위
- {' '}
+
);
};