refactor: 폴더구조 및 사용하지 않는 코드 정리

src/components/accordion.tsx

@@ -1,11 +1,10 @@
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import FONT from '../constants/fonts';
 import COLOR from '../constants/theme';
 import { Down, Up } from './icons/BtnIcons';
 import { FoodIcon } from './icons/FoodIcons';
-import tw from 'tailwind-styled-components';
 import { Content } from '../interfaces/main';
 
 const customAnimation = keyframes`

src/components/common/cards/card_img_big.tsx

@@ -0,0 +1,76 @@
+import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+
+import FONT from '../../../constants/fonts';
+import COLOR from '../../../constants/theme';
+
+import { Themes } from '../../../interfaces/main';
+import { UseSave } from '../../../hooks/useSave';
+import { useImage } from '../../../hooks/useImage';
+
+import { SkeletonBig } from '../skeletons/card_skeleton';
+
+export const ImgCardBig = (props: Themes) => {
+  const router = useRouter();
+  const loaded = useImage(props.portrait_image);
+
+  return loaded ? (
+    <Container>
+      <BigContainer
+        imgProps={loaded}
+        onClick={() => {
+          router.push(`/theme/${props.id}`);
+        }}>
+        <Content>
+          <Title css={FONT.FOODTITLE}>{props.title}</Title>
+          <SubTitle css={FONT.DETAIL_2}>
+            {props.duration}일 식단 ∙ {props.recipe_count}개의 레시피
+            <UseSave id={props.id} type={'Themes'} />
+          </SubTitle>
+        </Content>
+      </BigContainer>
+    </Container>
+  ) : (
+    <SkeletonBig />
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const BigContainer = styled.div<{ imgProps: string }>`
+  width: 100%;
+  padding: calc(424 / 327 * 100%) 22px 22px 22px;
+
+  border-radius: 1rem;
+
+  background-image: linear-gradient(to top, #1c1c1c 1.09%, rgba(18, 18, 18, 0) 65.65%),
+    url(${(props) => props.imgProps});
+  background-size: cover;
+  background-position: center;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: end;
+  color: ${COLOR.PRIMARY_WHITE};
+`;
+
+const Title = styled.div`
+  width: 100%;
+`;
+
+const SubTitle = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;

src/components/common/cards/card_img_medium.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+
+import FONT from '../../../constants/fonts';
+import COLOR from '../../../constants/theme';
+
+import { Themes } from '../../../interfaces/main';
+import { UseSave } from '../../../hooks/useSave';
+import { useImage } from '../../../hooks/useImage';
+
+import { SkeletonMedium } from '../skeletons/card_skeleton';
+
+export const ImgCardMedium = (props: Themes) => {
+  const router = useRouter();
+  const loaded = useImage(props.landscape_image);
+
+  return loaded ? (
+    <Container>
+      <MediumContainer
+        onClick={() => {
+          router.push(`/theme/${props.id}`);
+        }}
+        img={loaded}>
+        <Content>
+          <Title css={FONT.FOODTITLE}>{props.title}</Title>
+          <SubTitle css={FONT.DETAIL_2}>
+            {props.duration}일 식단 ∙ {props.recipe_count}개의 레시피
+            <UseSave id={props.id} type={'Themes'} />
+          </SubTitle>
+        </Content>
+      </MediumContainer>
+    </Container>
+  ) : (
+    <SkeletonMedium />
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const MediumContainer = styled.div<{ img: string }>`
+  width: 100%;
+
+  padding: calc(156 / 327 * 100%) 22px 22px 22px;
+  border-radius: 1rem;
+
+  cursor: pointer;
+  background-image: linear-gradient(to top, #1c1c1c 1.09%, rgba(18, 18, 18, 0) 65.65%), url(${(props) => props.img});
+  background-size: cover;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: end;
+  color: ${COLOR.PRIMARY_WHITE};
+`;
+
+const Title = styled.div`
+  width: 100%;
+`;
+
+const SubTitle = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;

src/components/common/img_props/imgcard.tsx → src/components/common/cards/card_img_small.tsx

@@ -10,32 +10,7 @@ import { Themes, Recipes } from '../../../interfaces/main';
 import { UseSave } from '../../../hooks/useSave';
 import { useImage } from '../../../hooks/useImage';
 
-import { SkeletonBig, SkeletonMedium, SkeletonSmall } from '../skeletons/card';
-
-export const ImgCardMedium = (props: Themes) => {
-  const router = useRouter();
-  const loaded = useImage(props.landscape_image);
-
-  return loaded ? (
-    <Container>
-      <MediumContainer
-        onClick={() => {
-          router.push(`/theme/${props.id}`);
-        }}
-        img={loaded}>
-        <Content>
-          <Title css={FONT.FOODTITLE}>{props.title}</Title>
-          <SubTitle css={FONT.DETAIL_2}>
-            {props.duration}일 식단 ∙ {props.recipe_count}개의 레시피
-            <UseSave id={props.id} type={'Themes'} />
-          </SubTitle>
-        </Content>
-      </MediumContainer>
-    </Container>
-  ) : (
-    <SkeletonMedium />
-  );
-};
+import { SkeletonSmall } from '../skeletons/card_skeleton';
 
 export const ImgCardSmall = ({ recipe, route }: { recipe: Recipes; route: boolean }) => {
   const router = useRouter();
@@ -88,49 +63,12 @@ export const ImgCardSmall = ({ recipe, route }: { recipe: Recipes; route: boolea
   );
 };
 
-export const ImgCardBig = (props: Themes) => {
-  const router = useRouter();
-  const loaded = useImage(props.portrait_image);
-
-  return loaded ? (
-    <Container>
-      <BigContainer
-        imgProps={loaded}
-        onClick={() => {
-          router.push(`/theme/${props.id}`);
-        }}>
-        <Content>
-          <Title css={FONT.FOODTITLE}>{props.title}</Title>
-          <SubTitle css={FONT.DETAIL_2}>
-            {props.duration}일 식단 ∙ {props.recipe_count}개의 레시피
-            <UseSave id={props.id} type={'Themes'} />
-          </SubTitle>
-        </Content>
-      </BigContainer>
-    </Container>
-  ) : (
-    <SkeletonBig />
-  );
-};
-
 const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
 `;
 
-const BigContainer = styled.div<{ imgProps: string }>`
-  width: 100%;
-  padding: calc(424 / 327 * 100%) 22px 22px 22px;
-
-  border-radius: 1rem;
-
-  background-image: linear-gradient(to top, #1c1c1c 1.09%, rgba(18, 18, 18, 0) 65.65%),
-    url(${(props) => props.imgProps});
-  background-size: cover;
-  background-position: center;
-`;
-
 const SmallContainer = styled.div<{ img: string }>`
   width: 100%;
   min-width: 150px;
@@ -142,17 +80,6 @@ const SmallContainer = styled.div<{ img: string }>`
   background-size: cover;
 `;
 
-const MediumContainer = styled.div<{ img: string }>`
-  width: 100%;
-
-  padding: calc(156 / 327 * 100%) 22px 22px 22px;
-  border-radius: 1rem;
-
-  cursor: pointer;
-  background-image: linear-gradient(to top, #1c1c1c 1.09%, rgba(18, 18, 18, 0) 65.65%), url(${(props) => props.img});
-  background-size: cover;
-`;
-
 const Content = styled.div`
   width: 100%;
   height: 100%;
@@ -168,17 +95,6 @@ const Title = styled.div`
   width: 100%;
 `;
 
-const SubTitle = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const IconWrapper = styled.div`
-  z-index: 1;
-`;
-
 const Description = styled.div`
   width: 100%;
   padding-top: 0.5rem;

src/components/global/GNB.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import React from 'react';
 import { HomeIcon, SaveIcon, SearchIcon } from '../icons/GNBIcons';
 import { useRouter } from 'next/router';
 import PATH from '../../constants/path';

src/components/search.tsx

@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 import { useEffect, useCallback, useState } from 'react';
 import { useRouter } from 'next/router';
-import { useQuery } from 'react-query';
 import { MouseEvent } from 'react';
 
 import FONT from '../constants/fonts';
 import COLOR from '../constants/theme';
 
 import { api, accessApi } from '../api/api';
 import { PotatoIcon, EggIcon } from './icons/FoodIcons';
-import { ImgCardMedium, ImgCardSmall } from './common/img_props/imgcard';
+import { ImgCardSmall } from './common/cards/card_img_small';
+import { ImgCardMedium } from './common/cards/card_img_medium';
 
 export const SearchNone = () => {
   const router = useRouter();

src/pages/_app.tsx

@@ -1,12 +1,9 @@
-import type { AppProps, AppContext } from 'next/app';
+import type { AppProps } from 'next/app';
 import Layout from '../components/global/Layout';
 import '../../styles/globals.css';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { removeCookie } from '../util/cookie';
-import { useEffect } from 'react';
-
 const client = new QueryClient({
   defaultOptions: {
     queries: {

src/pages/calcDetail.tsx

@@ -1,4 +1,4 @@
-import GoBack from '../components/common/navigations/goBack';
+import GoBack from '../components/common/navigations/navigation_goback';
 import styled from '@emotion/styled';
 import FONT from '../constants/fonts';
 import Accordion from '../components/accordion';

src/pages/home/index.tsx

@@ -1,12 +1,11 @@
 import styled from '@emotion/styled';
 import { useQuery } from 'react-query';
-import { accessApi } from '../../api/api';
 import GNB from '../../components/global/GNB';
-import All_Theme from '../../components/common/navigations/All_Theme';
+import All_Theme from '../../components/common/navigations/navigation_theme';
 import FONT from '../../constants/fonts';
 
 import { Themes } from '../../interfaces/main';
-import { ImgCardMedium } from '../../components/common/img_props/imgcard';
+import { ImgCardMedium } from '../../components/common/cards/card_img_medium';
 import { themeAPI } from '../../api/themeAPI';
 
 const Home = () => {

src/pages/home/showTheme.tsx

@@ -1,10 +1,9 @@
-import AllTheme from '../../components/common/navigations/All_Theme';
+import AllTheme from '../../components/common/navigations/navigation_theme';
 import styled from '@emotion/styled';
 import GNB from '../../components/global/GNB';
 import { useQuery } from 'react-query';
-import { accessApi } from '../../api/api';
 import FONT from '../../constants/fonts';
-import { ImgCardBig } from '../../components/common/img_props/imgcard';
+import { ImgCardBig } from '../../components/common/cards/card_img_big';
 import COLOR from '../../constants/theme';
 import { useEffect, useState } from 'react';
 import { css } from '@emotion/react';

src/pages/index.tsx

@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
-import COLOR from '../constants/theme';
 import { useRouter } from 'next/router';
 import { getCookie } from '../util/cookie';
 
-import { MainLogo } from '../components/icons/LogoIcons';
-
 const LandingPage = () => {
   const router = useRouter();
   const isUser = Boolean(getCookie('accessToken'));

src/pages/login/callback.tsx

@@ -2,7 +2,7 @@ import { useEffect, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import { api, accessApi } from '../../api/api';
 import { setCookie } from '../../util/cookie';
-import { AxiosHeaders, AxiosResponse } from 'axios';
+import { AxiosResponse } from 'axios';
 
 const LoginCallback = () => {
   const router = useRouter();

src/pages/mypage/index.tsx

@@ -10,7 +10,8 @@ import TopNavBar from '../../components/common/navigations/navigation_top';
 import { SettingIcon } from '../../components/icons/BtnIcons';
 import FONT from '../../constants/fonts';
 import COLOR from '../../constants/theme';
-import { ImgCardMedium, ImgCardSmall } from '../../components/common/img_props/imgcard';
+import { ImgCardSmall } from '../../components/common/cards/card_img_small';
+import { ImgCardMedium } from '../../components/common/cards/card_img_medium';
 
 import { userAPI } from '../../api/userAPI';
 import Loading from '../../components/loading';

src/pages/mypage/setting.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import GoBack from '../../components/common/navigations/goBack';
+import GoBack from '../../components/common/navigations/navigation_goback';
 
 import FONT from '../../constants/fonts';
 import COLOR from '../../constants/theme';