Feat/#159

src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { EmptyLoadingPageProps } from './EmptyLoadingPage';
+
+export const Container = styled.div<EmptyLoadingPageProps>`
+  width: 100%;
+  height: ${({ height }) => height};
+
+  @media screen ${({ theme }) => theme.mediaQuery.tablet} {
+    height: ${({ tHeight }) => tHeight};
+  }
+
+  @media screen ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ mHeight }) => mHeight};
+  }
+`;

src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx

@@ -0,0 +1,21 @@
+import * as S from './EmptyLoadingPage.styled';
+
+export interface EmptyLoadingPageProps {
+  height: string;
+  tHeight: string;
+  mHeight: string;
+}
+
+export default function EmptyLoadingPage({
+  height,
+  tHeight,
+  mHeight,
+}: EmptyLoadingPageProps) {
+  return (
+    <S.Container
+      height={height}
+      tHeight={tHeight}
+      mHeight={mHeight}
+    ></S.Container>
+  );
+}

src/components/common/page/noResultPage/NoResultPage.styled.ts → src/components/common/noResultPage/NoResultPage.styled.ts

@@ -7,6 +7,10 @@ export const Container = styled.div<Pick<NoResultPageProps, 'height'>>`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ height }) => `calc(${height}*0.5)`};
+  }
 `;
 
 export const Wrapper = styled.div`
@@ -20,4 +24,8 @@ export const Wrapper = styled.div`
 
 export const Title = styled.span`
   font-size: 1.5rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 1rem;
+  }
 `;

src/components/common/skillTagBox/SkillTagBox.styled.ts

@@ -4,9 +4,18 @@ import { SkillTagBoxProps } from './SkillTagBox';
 export const Container = styled.div<Pick<SkillTagBoxProps, 'width'>>`
   width: ${({ width }) => width};
   border: 1px solid ${({ theme }) => theme.color.border};
-  border-radius: 3rem;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
   background-color: ${({ theme }) => theme.color.white};
   padding: 2rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 1.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    border-radius: ${({ theme }) => theme.borderRadius.primary};
+    padding: 1rem;
+  }
 `;
 
 export const Wrapper = styled.div`
@@ -45,8 +54,36 @@ export const ResetButton = styled.button`
     transform: scale(1.1);
     transition: all 100ms ease-in;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.4rem;
+    gap: 0.4rem;
+    svg {
+      width: 0.9rem;
+    }
+    &:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0.2rem;
+    gap: 0.2rem;
+    svg {
+      width: 0.8rem;
+    }
+  }
 `;
 
 export const ResetSpan = styled.span`
   font-size: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.9rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 0.7rem;
+  }
 `;

src/components/common/skillTagBox/skillTag/SkillTag.styled.ts

@@ -14,10 +14,26 @@ export const Wrapper = styled.div<{ $select: boolean }>`
   align-items: center;
   gap: 0.5rem;
   transition: all 200ms ease-in;
+  cursor: pointer;
 
   &:hover {
-    cursor: pointer;
     transform: scale(1.1);
     transition: all 100ms ease-in-out;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.4rem;
+    gap: 0.4rem;
+    font-size: 0.9rem;
+    &:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0.2rem;
+    gap: 0.2rem;
+    font-size: 0.8rem;
+  }
 `;

src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts

@@ -11,4 +11,12 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
   border-radius: 50%;
   border: 1px solid
     ${({ theme, $select }) => ($select ? 'none' : theme.color.border)};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 2rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 1.8rem;
+  }
 `;

src/components/home/banner/Banner.styled.ts

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
-export const Container = styled.section`
-  margin-top: 2rem;
-`;
+export const Container = styled.section``;
 
 export const BannerImg = styled.img`
   width: 100%;

src/components/home/projectCardLists/ProjectCardLists.styled.ts

@@ -4,16 +4,44 @@ export const Container = styled.section`
   width: 100%;
 `;
 
+export const CardListTitleWrapper = styled.div``;
+
+export const CardListTitle = styled.h1`
+  padding: 6rem 0 2rem 0;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 4rem 0 2rem 0;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 2rem 0 2rem 0;
+    font-size: 1.5rem;
+  }
+`;
+
 export const Wrapper = styled.div<{ $flex: boolean }>`
   width: 100%;
   display: ${({ $flex }) => ($flex ? 'flex' : 'grid')};
-  grid-template-columns: ${({ $flex }) => ($flex ? '' : 'repeat(3, 1fr)')};
+  grid-template-columns: ${({ $flex }) =>
+    $flex ? '' : 'repeat(auto-fit, minmax(30%, auto))'};
   place-items: ${({ $flex }) => ($flex ? '' : 'center')};
+  /* justify-content: space-evenly; */
   gap: 3rem;
-`;
 
-export const CardListTitleWrapper = styled.div``;
+  a {
+    width: 100%;
+  }
 
-export const CardListTitle = styled.h1`
-  padding: 4rem 0 2rem 0;
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    grid-template-columns: ${({ $flex }) =>
+      $flex ? '' : 'repeat(auto-fit, minmax(40%, auto))'};
+    gap: 2rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 100%;
+    grid-template-columns: ${({ $flex }) =>
+      $flex ? '' : 'repeat(auto-fit, minmax(50%, auto))'};
+    gap: 1rem;
+  }
 `;

src/components/home/projectCardLists/ProjectCardLists.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useProjectCardListData } from '../../../hooks/useProjectCardListData';
-import EmptyLoadingPage from '../../common/page/emptyLoadingPage/EmptyLoadingPage';
-import NoResultPage from '../../common/page/noResultPage/NoResultPage';
+import EmptyLoadingPage from '../../common/emptyLoadingPage/EmptyLoadingPage';
+import NoResultPage from '../../common/noResultPage/NoResultPage';
 import CardList from './cardList/CardList';
 import Pagination from './pagination/Pagination';
 import * as S from './ProjectCardLists.styled';
@@ -11,6 +11,7 @@ import { ROUTES } from '../../../constants/routes';
 export default function ProjectCardLists() {
   const { projectListsData, isLoading } = useProjectCardListData();
   const [isFlex, setIsFlex] = useState(false);
+
   useEffect(() => {
     if (projectListsData && Boolean(projectListsData.projects.length)) {
       setIsFlex(false);
@@ -19,7 +20,10 @@ export default function ProjectCardLists() {
     setIsFlex(true);
   }, [projectListsData]);
 
-  if (isLoading) return <EmptyLoadingPage height='115.2rem' />;
+  if (isLoading)
+    return (
+      <EmptyLoadingPage height='115.2rem' tHeight='142rem' mHeight='275rem' />
+    );
 
   return (
     <S.Container>

src/components/home/projectCardLists/cardList/CardList.styled.ts

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const Container = styled.article`
   position: relative;
   cursor: pointer;
-  width: 22.4rem;
+  width: 100%;
+  min-width: 19rem;
   height: 22rem;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 2rem;
@@ -12,6 +13,12 @@ export const Container = styled.article`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 1.5rem;
+    gap: 0.5rem;
+    height: 18rem;
+  }
 `;
 
 export const Deadline = styled.div`
@@ -60,22 +67,16 @@ export const TagWrapper = styled.div<{ $positionPadding?: boolean }>`
   z-index: 10;
 `;
 
-export const EllipsisIcon = styled.button<{ $hiddenIcon: boolean }>`
+export const EllipsisIconButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 2rem;
   padding-left: 0.8rem;
-  cursor: pointer;
-  z-index: ${({ $hiddenIcon }) => ($hiddenIcon ? '0' : '100')};
-
-  &:hover {
-    transform: scale(1.3);
-    transition: all 200ms ease-in;
-    opacity: 0;
-  }
+  font-size: 0.7rem;
 `;
 
+export const MoreSpan = styled.span``;
+
 export const InfoWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -103,6 +104,10 @@ export const StatusWrapper = styled.div`
 
 export const BeginnerImg = styled.img`
   width: 2rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 1.5rem;
+  }
 `;
 
 export const ViewWrapper = styled.div`
@@ -113,9 +118,20 @@ export const ViewWrapper = styled.div`
     width: 1.3rem;
     color: #5f5f5f;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    svg {
+      width: 1rem;
+    }
+  }
 `;
 
 export const ViewCount = styled.span`
   flex-direction: row;
   color: #5f5f5f;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    align-items: end;
+    font-size: 0.9rem;
+  }
 `;