feat : api연동

user/src/apis/club.js

@@ -10,4 +10,4 @@ export const getClub = async () => {
 export const getClubDetail = async (clubname) => {
   const response = await instance.get(`${router}/info/${clubname}`);
   return response.data;
-};
+};

user/src/pages/SeeAllPage.jsx

@@ -1,11 +1,42 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Header } from "../components/Header";
 import { CollectBtn } from "../components/SeeallPage/CollectBtn";
 import { Pagefooter } from "../components/PageFooter";
+import { getClub } from "../apis/club"; // API 호출 함수 가져오기
 import searchBtn from "../assets/searchBtn.svg";
 
 export const SeeAll = () => {
+  const [clubs, setClubs] = useState([]); // 동아리 데이터를 저장할 상태
+  const [loading, setLoading] = useState(true); // 로딩 상태 관리
+
+  // 데이터를 가져오는 함수
+  const fetchClubs = async ({ clubName , clubBanner , title , setData }) => {
+    try {
+      const data = await instance.post('../apis/club.js', {
+        clubName,
+        title,
+        clubBanner
+      }); // API 호출
+      setClubs(data); // 데이터를 상태에 저장
+
+      setData({
+        clubName: '',
+        title: '',
+        clubBanner: '',
+      });
+
+    } catch (error) {
+      console.error("동아리 데이터를 가져오는 데 실패했습니다...", error);
+    } finally {
+      setLoading(false); // 로딩 상태 종료
+    }
+  };
+
+  useEffect(() => {
+    fetchClubs(); // 컴포넌트가 렌더링될 때 API 호출
+  }, []);
+
   return (
     <Container>
       <Header />
@@ -18,25 +49,33 @@ export const SeeAll = () => {
             <SearchButton src={searchBtn} />
           </SearchBar>
         </SearchDiv>
-        <Grid>
-          {Array.from({ length: 8 }).map((_, index) => (
-            <Card key={index}>
-              <CardImage>
-                <CollectBtn />
-              </CardImage>
-              <CardContent>
-                <h3>대동여지도</h3>
-                <p>대동여지도와 실록 서비스를 개발 및 운영 중인 동아리</p>
-              </CardContent>
-            </Card>
-          ))}
-        </Grid>
+        {loading ? ( // 로딩 중일 때 표시
+          <LoadingMessage>로딩 중...</LoadingMessage>
+        ) : (
+          <Grid>
+            {clubs.map((club) => (
+              <Card key={club.id}>
+                <CardImage>
+                  <CollectBtn />
+                </CardImage>
+                <CardContent>
+                  <h3>{club.name}</h3>
+                  <p>{club.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </Grid>
+        )}
       </Content>
       <Pagefooter notMypage={true} />
     </Container>
   );
 };
 
+const LoadingMessage = styled.div`
+
+`;
+
 const Container = styled.div`
   margin: 0;
   padding: 0;

user/src/pages/siwootest.jsx

@@ -0,0 +1,30 @@
+import { instance } from './instance';
+
+export const apiSignUp = async ({ email, password, setModal, setInputs }) => {
+  try {
+    const response = await instance.post('/auth/signup', {
+      email,
+      password,
+    });
+
+    if (response.status === 200) {
+      console.log('회원가입 성공');
+
+      setInputs({
+        email: '',
+        code: '',
+        password1: '',
+        password2: '',
+      });
+      setModal(true);
+    }
+  } catch (error) {
+    if (error.response) {
+      if (error.response.status === 400) {
+        alert('비밀번호는 최대 64글자이고, 특수문자 한개가 포함되어야 합니다.');
+      } else if (error.response.status === 409) {
+        alert('이미 가입된 유저입니다.');
+      }
+    }
+  }
+};