feat: GNB5 api 연결 / GNB4 디자인 완성 /

src/apis/api/match.jsx

@@ -0,0 +1,18 @@
+import api from "../utils/api";
+
+// 매치 생성 API 호출 함수
+export const createMatch = (accessToken, matchData) => {
+  return api.post('/v1/api/matches', matchData, {
+    headers: {
+      'Content-Type': 'application/json',
+      access: `${accessToken}`,
+    }
+  })
+  .then((response) => {
+    return response.data;
+  })
+  .catch((error) => {
+    console.error('매치 생성 중 오류가 발생했습니다:', error);
+    throw error;
+  });
+};

src/apis/api/user.jsx

@@ -0,0 +1,48 @@
+import api from "../utils/api";
+
+// 사용자 데이터를 가져오는 API 호출 함수
+export const getUserInfo = (accessToken) => {
+  return api.get('/v1/api/members/info', {
+    headers: {
+      'Content-Type': 'application/json',
+      access: `${accessToken}`,
+    },
+  })
+  .then((response) => {
+    return response.data;
+  })
+  .catch((error) => {
+    console.error('getUserInfo 실패:', error);
+    throw error;
+  });
+};
+
+// 사용자가 속한 동아리 정보를 가져오는 API 호출 함수
+export const getUserClubs = (accessToken) => {
+  return api.get('/v1/api/members/clubs', {
+    headers: {
+      'Content-Type': 'application/json',
+      access: `${accessToken}`,
+    },
+  })
+  .then((response) => {
+    return response.data;
+  })
+  .catch((error) => {
+    console.error('getUserClubs 실패:', error);
+    throw error;
+  });
+};
+
+// 사용자가 관리자로 속한 동아리 정보를 필터링하는 함수
+export const getAdminClubs = async (accessToken) => {
+  try {
+    const clubs = await getUserClubs(accessToken);
+    const adminClubs = clubs.memberClubResponseList.filter(club => club.isAdmin);
+    return adminClubs;
+  } catch (error) {
+    console.error('getAdminClubs 실패:', error);
+    throw error;
+  }
+};
+

src/apis/utils/api.jsx

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import useAuthStore from '../../stores/useAuthStore';
+
+const api = axios.create({
+  baseURL: process.env.REACT_APP_SERVER_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+let isTokenRefreshing = false; // 토큰 재발급 중 여부를 체크하기 위한 플래그
+
+// Axios 인터셉터로 401 에러 발생 시 재발급 로직 추가
+api.interceptors.response.use(
+  response => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response.status === 401 && !originalRequest._retry) {
+      if (isTokenRefreshing) return Promise.reject(error); // 이미 재발급 중이면 추가 재발급 방지
+      console.log("이미 발급 중인지 여부: ", isTokenRefreshing);
+      originalRequest._retry = true;
+      isTokenRefreshing = true;
+
+      try {
+        // 토큰 재발급 시도
+        await useAuthStore.getState().reissueTokens(); 
+
+        // 로컬 스토리지에서 갱신된 액세스 토큰 가져오기
+        const accessToken = localStorage.getItem('accessToken');
+
+        // 새로운 액세스 토큰으로 헤더 업데이트
+        originalRequest.headers['access'] = accessToken;
+
+        isTokenRefreshing = false;
+
+        // 재발급 후 원래 요청 재시도
+        return api(originalRequest); 
+      } catch (err) {
+        isTokenRefreshing = false;
+        return Promise.reject(err); // 재발급 실패 시 에러 반환
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default api;

src/pages/group/fee/ExpenseCreate.jsx

@@ -20,6 +20,8 @@ const Container = styled.div`
   max-width: 649px;
   justify-content: center;
   background-color: white;
+  display: flex;
+  flex-direction: column;
 `;
 
 const HeaderContainer = styled.div`
@@ -66,28 +68,30 @@ const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: 20px;
+  gap: 16px;
 `;
 
 const FieldContainer = styled.div`
+  width: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  margin-bottom: 10px;
-  width: 100%;
-  position: relative;
+  gap: 8px;
 `;
 
 const Label = styled.div`
-  font-size: 18px;
-  color: ${({ theme }) => theme.colors.neutral[400]};
-  width: 40%;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.neutral[500]};
 `;
 
 const Input = styled.input`
-  width: 60%;
+  width: 100%;
   padding: 10px;
   border: none;
   border-radius: 8px;
-  background-color: ${({ theme }) => theme.colors.neutral[100]};
+  background-color: ${({ theme }) => theme.colors.neutral[50]};
   color: ${({ theme }) => theme.colors.neutral[700]};
   font-size: 16px;
   /* input 타입이 number일 때 스타일 */
@@ -104,7 +108,6 @@ const Input = styled.input`
 `;
 
 
-
 const ExpenseCreate = ({ closeExpenseCreate }) => {
   const [expenseDate, setExpenseDate] = useState(new Date());
   const [showCalendar, setShowCalendar] = useState(false);
@@ -147,7 +150,7 @@ const ExpenseCreate = ({ closeExpenseCreate }) => {
             )}
           </FieldContainer>
           <FieldContainer>
-            <Label>금액 (원)</Label>
+            <Label>사용 금액 (원)</Label>
             <Input
               type="number"
               min="0"  // 최소값을 0으로 설정