[#71] 폴더 구조를 개선 했습니다.

src/App.tsx

@@ -16,7 +16,7 @@ import { QueryClientProvider, QueryClient } from 'react-query';
 import Header from './components/Header/index.tsx';
 import styled from 'styled-components';
 import Notfound from './components/Loading/Notfound.tsx';
-import { PrivateRoute } from './utils/libs/PrivateRoute.tsx';
+import { PrivateRoute } from './apis/PrivateRoute.tsx';
 
 const queryClient = new QueryClient();
 

src/Pages/AuthCallBack/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, Location, useNavigate } from 'react-router-dom';
 import Loading from '../../components/Loading/index.tsx';
-import apiClient from '../../utils/libs/apiClient.ts';
+import apiClient from '../../apis/apiClient.ts';
 
 const AuthCallBack = () => {
   const navigate = useNavigate();

src/Pages/Category/Nomal/index.tsx

@@ -3,7 +3,7 @@ import Category from '../../../components/Category/index.tsx';
 import { useNavigate } from 'react-router-dom';
 import TeamAddButton from '../../../assets/svg/TeamAddButton.tsx';
 import { useEffect, useState } from 'react';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { EmptyPlaying } from '../../../assets/index.ts';
 
 interface Team {

src/Pages/Category/Sports/index.tsx

@@ -4,7 +4,7 @@ import * as S from './style.ts';
 import Category from '../../../components/Category/index.tsx';
 import { useNavigate, useParams } from 'react-router-dom';
 import TeamAddButton from '../../../assets/svg/TeamAddButton.tsx';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Formation/BadmintonForm/index.tsx

@@ -6,7 +6,7 @@ import Draggable from 'react-draggable';
 import BadmintonField from '../../../assets/png/BadmintonField.png';
 import LoadingContent from '../../../components/Loading/content.tsx';
 import { useNavigate, useParams } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Formation/NomalForm/index.tsx

@@ -3,7 +3,7 @@ import { OpenReview, CloseReview } from '../../../assets';
 import * as S from './style.ts';
 import { useNavigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Formation/SoccerForm/index.tsx

@@ -6,7 +6,7 @@ import Draggable from 'react-draggable';
 import FiledImg from '../../../assets/png/Field.png';
 import LoadingContent from '../../../components/Loading/content.tsx';
 import { useNavigate, useParams } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Formation/VolleyForm/index.tsx

@@ -5,7 +5,7 @@ import * as D from './style.ts';
 import Draggable from 'react-draggable';
 import LoadingContent from '../../../components/Loading/content.tsx';
 import { useNavigate, useParams } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Ranking/index.tsx

@@ -1,29 +1,26 @@
 import { RankBar } from '../../assets';
-import apiClient from '../../utils/libs/apiClient';
+import apiClient from '../../apis/apiClient';
 import { Category, CategoryContainer } from '../Formation/style';
 import * as S from './style';
 import { useQuery } from 'react-query';
 import LoadingContent from '../../components/Loading/content';
 
-const Ranking = ()=>{
+const Ranking = () => {
   return (
     <>
       <S.Wrapper>
         <S.Container>
           <CategoryContainer style={{ marginBottom: '1.25rem' }}>
             <Category style={{ color: 'var(--White, #FFF)' }}>랭킹</Category>
           </CategoryContainer>
-          <Content/>
+          <Content />
         </S.Container>
       </S.Wrapper>
     </>
   );
-}
+};
 const Content = () => {
-  const {
-    data: RankData,
-    isLoading: isRankLoading
-  } = useQuery(
+  const { data: RankData, isLoading: isRankLoading } = useQuery(
     'rankData',
     async () => {
       const token = localStorage.getItem('accessToken');
@@ -40,10 +37,7 @@ const Content = () => {
     }
   );
 
-  const {
-    data: myId,
-    isLoading: isMyIdLoading
-  } = useQuery(
+  const { data: myId, isLoading: isMyIdLoading } = useQuery(
     'myId',
     async () => {
       const token = localStorage.getItem('accessToken');
@@ -60,10 +54,13 @@ const Content = () => {
     }
   );
 
-  if (isRankLoading || isMyIdLoading) return <LoadingContent/>;
-  if (!RankData || !myId) return null; 
-
-  const topThreeDatatest = RankData.length > 0 ? RankData.sort((a: { user_point: number; }, b: { user_point: number; }) => b.user_point - a.user_point).slice(0, 3) : [];
+  if (isRankLoading || isMyIdLoading) return <LoadingContent />;
+  if (!RankData || !myId) return null;
+
+  const topThreeDatatest =
+    RankData.length > 0
+      ? RankData.sort((a: { user_point: number }, b: { user_point: number }) => b.user_point - a.user_point).slice(0, 3)
+      : [];
 
   const firstPlacePointstest = topThreeDatatest.length > 0 ? topThreeDatatest[0].user_point : 0;
   const secondPlacePointstest = topThreeDatatest.length > 1 ? topThreeDatatest[1].user_point : 0;
@@ -129,77 +126,87 @@ const Content = () => {
 
   return (
     <>
-          <S.MainContainer>
-            <S.LankWrapper>
-              {RankData.sort((a: { user_point: number; }, b: { user_point: number; }) => b.user_point - a.user_point)
-                .slice(0, 3)
-                .sort((a: { user_name: number; }, b: { user_name: number; }) => (a.user_name > b.user_name ? 1 : -1))
-                .map((_: any, index: number) => {
-                  const { rankName, rankPoint, rankClass, rankGrade, rankComponent, rank } = getRankInfotest(
-                    index,
-                    RankData
-                  );
-                  return (
-                    <S.LankContainer key={index}>
-                      <S.Name>
-                        {' '}
-                        {Number[rankGrade]}-{Number[rankClass]} {rankName}
-                      </S.Name>
-                      <S.Point>{rankPoint}P</S.Point>
-                      {rankComponent}
-                      <S.Name
-                        style={{
-                          position: 'absolute',
-                          bottom: '1rem',
-                          justifySelf: 'center',
-                        }}
-                      >
-                        {rank}
-                      </S.Name>
-                    </S.LankContainer>
-                  );
-                })}
-            </S.LankWrapper>
-            <S.ListWrapper>
-              {RankData.map((item: { user_id: number; user_grade: string; user_class: string; user_name: string; user_point:number; }, index: number) => (
-                <>
-                  {item.user_id === myId && (
-                    <S.List myrank={item.user_id === myId} key={index}>
-                      <S.TextContainer>
-                        <S.Text>
-                          <S.Lank rank={index < 3}>{index + 1}등</S.Lank>
-                          <S.Name>
-                            {' '}
-                            {Number[item.user_grade]}-{Number[item.user_class]} {item.user_name}
-                          </S.Name>
-                        </S.Text>
-                      </S.TextContainer>
+      <S.MainContainer>
+        <S.LankWrapper>
+          {RankData.sort((a: { user_point: number }, b: { user_point: number }) => b.user_point - a.user_point)
+            .slice(0, 3)
+            .sort((a: { user_name: number }, b: { user_name: number }) => (a.user_name > b.user_name ? 1 : -1))
+            .map((_: any, index: number) => {
+              const { rankName, rankPoint, rankClass, rankGrade, rankComponent, rank } = getRankInfotest(
+                index,
+                RankData
+              );
+              return (
+                <S.LankContainer key={index}>
+                  <S.Name>
+                    {' '}
+                    {Number[rankGrade]}-{Number[rankClass]} {rankName}
+                  </S.Name>
+                  <S.Point>{rankPoint}P</S.Point>
+                  {rankComponent}
+                  <S.Name
+                    style={{
+                      position: 'absolute',
+                      bottom: '1rem',
+                      justifySelf: 'center',
+                    }}
+                  >
+                    {rank}
+                  </S.Name>
+                </S.LankContainer>
+              );
+            })}
+        </S.LankWrapper>
+        <S.ListWrapper>
+          {RankData.map(
+            (
+              item: { user_id: number; user_grade: string; user_class: string; user_name: string; user_point: number },
+              index: number
+            ) => (
+              <>
+                {item.user_id === myId && (
+                  <S.List myrank={item.user_id === myId} key={index}>
+                    <S.TextContainer>
                       <S.Text>
-                        <S.Point>{item.user_point.toLocaleString()}P</S.Point>
+                        <S.Lank rank={index < 3}>{index + 1}등</S.Lank>
+                        <S.Name>
+                          {' '}
+                          {Number[item.user_grade]}-{Number[item.user_class]} {item.user_name}
+                        </S.Name>
                       </S.Text>
-                    </S.List>
-                  )}
-                </>
-              ))}
-              <S.Stroke />
-              {RankData.sort((a: { user_point: number; }, b: { user_point: number; }) => b.user_point - a.user_point).map((item: { user_id: number; user_grade: string; user_class: string; user_name: string; user_point:number; }, index: number) => (
-                <S.List myrank={item.user_id == myId} key={index}>
-                  <S.TextContainer>
+                    </S.TextContainer>
                     <S.Text>
-                      <S.Lank rank={index < 3}>{index + 1}등</S.Lank>
-                      <S.Name>
-                        {' '}
-                        {Number[item.user_grade]}-{Number[item.user_class]} {item.user_name}
-                      </S.Name>
+                      <S.Point>{item.user_point.toLocaleString()}P</S.Point>
                     </S.Text>
-                  </S.TextContainer>
+                  </S.List>
+                )}
+              </>
+            )
+          )}
+          <S.Stroke />
+          {RankData.sort((a: { user_point: number }, b: { user_point: number }) => b.user_point - a.user_point).map(
+            (
+              item: { user_id: number; user_grade: string; user_class: string; user_name: string; user_point: number },
+              index: number
+            ) => (
+              <S.List myrank={item.user_id == myId} key={index}>
+                <S.TextContainer>
                   <S.Text>
-                    <S.Point>{item.user_point.toLocaleString()}P</S.Point>
+                    <S.Lank rank={index < 3}>{index + 1}등</S.Lank>
+                    <S.Name>
+                      {' '}
+                      {Number[item.user_grade]}-{Number[item.user_class]} {item.user_name}
+                    </S.Name>
                   </S.Text>
-                </S.List>
-              ))}
-            </S.ListWrapper>
-          </S.MainContainer>
+                </S.TextContainer>
+                <S.Text>
+                  <S.Point>{item.user_point.toLocaleString()}P</S.Point>
+                </S.Text>
+              </S.List>
+            )
+          )}
+        </S.ListWrapper>
+      </S.MainContainer>
     </>
   );
 };

src/Pages/Register/Badminton/index.tsx

@@ -4,7 +4,7 @@ import * as S from './style.ts';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import BadmintonField from '../../../assets/png/BadmintonField.png';
 import { useLocation, useNavigate } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Register/Soccer/index.tsx

@@ -4,7 +4,7 @@ import * as S from './style.ts';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import Field from '../../../assets/png/Field.png';
 import { useLocation, useNavigate } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Register/Volleyball/index.tsx

@@ -4,7 +4,7 @@ import * as S from './style.ts';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import VolleyField from '../../../assets/png/VolleyField.png';
 import { useLocation, useNavigate } from 'react-router-dom';
-import apiClient from '../../../utils/libs/apiClient.ts';
+import apiClient from '../../../apis/apiClient.ts';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 

src/Pages/Register/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import * as S from './style.ts';
 import { Search, XIcon } from '../../assets/index.ts';
 import { useNavigate } from 'react-router-dom';
-import apiClient from '../../utils/libs/apiClient.ts';
+import apiClient from '../../apis/apiClient.ts';
 import Nomal from './nomal.tsx';
 import useStorePoint from '../../utils/libs/storePoint';
 import { ToastContainer, toast } from 'react-toastify';

src/Pages/Register/nomal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import * as S from './style.ts';
 import { Search, SmallXIcon } from '../../assets/index.ts';
-import apiClient from '../../utils/libs/apiClient.ts';
+import apiClient from '../../apis/apiClient.ts';
 
 interface Data {
   id: number;

src/Pages/Signin/index.tsx

@@ -1,7 +1,7 @@
 import * as S from './style.ts';
 import { GAuthLogo, SignInLogo } from '../../assets';
 import '@msg-team/gauth-react/dist/index.css';
-import apiClient from '../../utils/libs/apiClient.ts';
+import apiClient from '../../apis/apiClient.ts';
 import { useState } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';

src/Pages/Signup/index.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Logo } from '../../assets/svg';
 import { FormData } from '../../types/FormDataType';
 import { useNavigate } from 'react-router-dom';
-import apiClient from '../../utils/libs/apiClient';
+import apiClient from '../../apis/apiClient';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 

src/utils/libs/PrivateRoute.tsx → src/apis/PrivateRoute.tsx

@@ -1,4 +1,4 @@
-import { useAuthenticate } from '../../hook/useAuthenticate';
+import { useAuthenticate } from '../hook/useAuthenticate';
 import { Navigate, Outlet } from 'react-router-dom';
 
 export const PrivateRoute = () => {

src/utils/apis/auth.ts → src/apis/auth.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useLocation, Location, useNavigate } from 'react-router-dom';
-import apiClient from '../libs/apiClient';
+import apiClient from './apiClient';
 
 export function Login() {
   const navigate = useNavigate();

src/components/Header/index.tsx

@@ -2,7 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { ThreeDot } from '../../assets';
 import * as S from './style';
 import { useEffect, useState } from 'react';
-import apiClient from '../../utils/libs/apiClient';
+import apiClient from '../../apis/apiClient';
 import useStorePoint from '../../utils/libs/storePoint';
 
 interface TextTypeProps {

src/components/Input/index.tsx

@@ -3,7 +3,7 @@ import { UseFormRegisterReturn, UseFormSetError } from 'react-hook-form';
 import * as S from './style';
 import Timer from '../Timer';
 import { FormData } from '../../types/FormDataType';
-import apiClient from '../../utils/libs/apiClient';
+import apiClient from '../../apis/apiClient';
 import { ToastContainer, toast } from 'react-toastify';
 import { Toaster } from 'react-hot-toast';
 import 'react-toastify/dist/ReactToastify.css';

src/style/Globalstyles.ts

@@ -1,10 +1,10 @@
 import { createGlobalStyle } from 'styled-components';
-import '../fonts/woff/PretendardWoff.css';
-import '../fonts/woff2/PretendardWoff2.css';
+import '../assets/fonts/woff/PretendardWoff.css';
+import '../assets/fonts/woff2/PretendardWoff2.css';
 
 export const GlobalStyles = createGlobalStyle`
 	body{
-	      overflow-x: hidden;
+        overflow-x: hidden;
         background: var(--Black, #1C1C1F);
         width: 100vw;
         height: 100vh;