Feat/#159

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

@@ -1,7 +1,15 @@
 import styled from 'styled-components';
 import { EmptyLoadingPageProps } from './EmptyLoadingPage';
 
-export const Container = styled.div<Pick<EmptyLoadingPageProps, 'height'>>`
+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/page/emptyLoadingPage/EmptyLoadingPage.tsx

@@ -2,8 +2,20 @@ import * as S from './EmptyLoadingPage.styled';
 
 export interface EmptyLoadingPageProps {
   height: string;
+  tHeight: string;
+  mHeight: string;
 }
 
-export default function EmptyLoadingPage({ height }: EmptyLoadingPageProps) {
-  return <S.Container height={height}></S.Container>;
+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

@@ -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

@@ -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;
+  }
 `;

src/components/home/projectCardLists/cardList/CardList.tsx

@@ -3,28 +3,19 @@ import SkillTagImg from '../../../common/skillTagBox/skillTag/skillTagImg/SkillT
 import * as S from './CardList.styled';
 import beginner from '../../../../assets/beginner.svg';
 import Avatar from '../../../common/avatar/Avatar';
-import { EllipsisHorizontalIcon, EyeIcon } from '@heroicons/react/24/outline';
+import { EyeIcon } from '@heroicons/react/24/outline';
 import type { ProjectList } from '../../../../models/mainProjectLists';
 import { formatDate } from '../../../../util/formatDate';
-import { useState } from 'react';
 
 interface CardListProps {
   list: ProjectList;
 }
 
 export default function CardList({ list }: CardListProps) {
-  const listPositionTag = list.positionTags.slice(0, 3);
-  const listSkillTag = list.skillTags.slice(0, 6);
-  const [isShowTag, setIsShowTag] = useState({ position: false, skill: false });
-
-  const handlePositionTag = (state: boolean) => {
-    setIsShowTag((prev) => ({ ...prev, position: state }));
-  };
-
-  const handleSkillTag = (state: boolean) => {
-    setIsShowTag((prev) => ({ ...prev, skill: state }));
-  };
-
+  const listPositionTag = list.positionTags.slice(0, 2);
+  const listSkillTag = list.skillTags.slice(0, 4);
+  const othersPosition = list.positionTags.length - 2;
+  const othersSkill = list.skillTags.length - 4;
   return (
     <S.Container>
       <S.Deadline>마감일: {formatDate(list.recruitmentEndDate)}</S.Deadline>
@@ -36,21 +27,8 @@ export default function CardList({ list }: CardListProps) {
             listPositionTag.map((tag) => (
               <PositionButton position={tag.name} key={tag.id} />
             ))}
-          {isShowTag.position && Boolean(list.positionTags.length) && (
-            <S.TagWrapper $positionPadding={isShowTag.position}>
-              {list.positionTags.map((tag) => (
-                <PositionButton position={tag.name} key={tag.id} />
-              ))}
-            </S.TagWrapper>
-          )}
           {list.positionTags.length > listPositionTag.length && (
-            <S.EllipsisIcon
-              $hiddenIcon={isShowTag.position || isShowTag.skill}
-              onMouseOver={() => handlePositionTag(true)}
-              onMouseOut={() => handlePositionTag(false)}
-            >
-              <EllipsisHorizontalIcon />
-            </S.EllipsisIcon>
+            <S.EllipsisIconButton>+{othersPosition}</S.EllipsisIconButton>
           )}
         </S.TagsWrapper>
       </S.PositionWrapper>
@@ -59,21 +37,8 @@ export default function CardList({ list }: CardListProps) {
           listSkillTag.map((tag) => (
             <SkillTagImg image={tag.img} key={tag.id} skillTag={tag.name} />
           ))}
-        {isShowTag.skill && Boolean(list.skillTags.length) && (
-          <S.TagWrapper>
-            {list.skillTags.map((tag) => (
-              <SkillTagImg image={tag.img} key={tag.id} skillTag={tag.name} />
-            ))}
-          </S.TagWrapper>
-        )}
         {list.skillTags.length > listSkillTag.length && (
-          <S.EllipsisIcon
-            $hiddenIcon={isShowTag.position || isShowTag.skill}
-            onMouseOver={() => handleSkillTag(true)}
-            onMouseOut={() => handleSkillTag(false)}
-          >
-            <EllipsisHorizontalIcon />
-          </S.EllipsisIcon>
+          <S.EllipsisIconButton>+{othersSkill}</S.EllipsisIconButton>
         )}
       </S.TagsWrapper>
       <S.InfoWrapper>