모집공고관리 페이지 반응형 구현(issue #162)

src/components/common/infoCard/InfoCard.styled.ts

@@ -7,7 +7,7 @@ export const Container = styled.div`
   border: 2px solid #f0f0f0;
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 80%;
-  min-width: 530px;
+  min-width: 500px;
   height: 80vh;
   padding-bottom: 1rem;
   position: relative;

src/components/common/sidebar/Sidebar.styled.ts

@@ -45,8 +45,8 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
   background-color: ${({ $isActive }) =>
     $isActive ? '#f9f9f9' : 'transparent'};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize};
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.7rem;
   }
 
   &:hover {
@@ -58,9 +58,9 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
     width: 30px;
     height: 30px;
 
-    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-      width: 23px;
-      height: 23px;
+    @media ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 20px;
+      height: 20px;
     }
   }
 `;

src/components/manageProjects/Card.styled.ts

@@ -22,6 +22,10 @@ export const CardWrapper = styled.div`
   &:hover {
     background-color: ${({ theme }) => theme.color.grey};
   }
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 19rem;
+    height: 14rem;
+  }
 `;
 
 export const CardTitle = styled.h3`
@@ -33,20 +37,35 @@ export const CardTitle = styled.h3`
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   overflow: hidden;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
+    margin-bottom: 0.8rem;
+  }
 `;
 
 export const RecruitmentDate = styled.small`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.deepgrey};
   margin-bottom: 0.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    margin-bottom: 0.7rem;
+  }
 `;
 
 export const TotalMember = styled.small`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.deepgrey};
   margin-bottom: 1.125rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    margin-bottom: 1rem;
+  }
 `;
 
 export const RecruitmentEnd = styled.span`

src/components/manageProjects/CardList.styled.ts

@@ -21,12 +21,22 @@ export const CreateButton = styled.button`
   align-items: center;
 
   img {
-    width: 1.875rem;
-    height: 1.875rem;
+    width: 30px;
+    height: 30px;
     margin-bottom: 0.75rem;
   }
 
   &:hover {
     background-color: ${({ theme }) => theme.color.grey};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 19rem;
+    height: 14rem;
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
 `;

src/components/manageProjects/RecruitmentDate.styled.ts

@@ -5,6 +5,7 @@ export const Container = styled.div`
   justify-content: start;
   align-items: center;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 `;
 
 export const DateTag = styled.span`
@@ -13,16 +14,27 @@ export const DateTag = styled.span`
   align-items: center;
   width: 6.25rem;
   height: 2rem;
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   color: ${({ theme }) => theme.color.navy};
   padding: 0.5rem 1.25rem;
   border: 1px solid ${({ theme }) => theme.color.navy};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   margin-right: 1.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 5rem;
+    height: 1.5rem;
+    padding: 0.25rem 1rem;
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
 
 export const Period = styled.small`
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   color: ${({ theme }) => theme.color.deepgrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;

src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts

@@ -5,7 +5,7 @@ export const Container = styled.div`
   flex-direction: column;
   width: 100%;
   min-width: 270px;
-  height: 550px;
+  height: 100%;
   padding: 1.5rem;
   padding-bottom: 0;
   border: 1px solid ${({ theme }) => theme.color.border};
@@ -22,25 +22,37 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h2`
-  font-size: 1.8rem;
+  font-size: ${({ theme }) => theme.heading.large.fontSize};
   font-weight: 600;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.medium.tabletFontSize};
+  }
 `;
 
 export const Label = styled.p`
-  font-size: 1.2rem;
+  font-size: ${({ theme }) => theme.heading.medium.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const Text = styled.p`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1rem;
 
   .period {
     color: ${({ theme }) => theme.color.deepGrey};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;

src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts

@@ -1,18 +1,25 @@
 import styled from 'styled-components';
 
 export const Label = styled.p`
-  font-size: 1.2rem;
+  font-size: ${({ theme }) => theme.heading.medium.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const Content = styled.span`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1rem;
 
   .period {
     color: ${({ theme }) => theme.color.deepGrey};
   }
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;

src/components/manageProjects/applicantList/ApplicantItem.styled.ts

@@ -18,7 +18,7 @@ export const getBorderColor = ($passStatus: string, theme: DefaultTheme) => {
 
 export const Button = styled.button<ButtonProps>`
   text-align: center;
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   flex-shrink: 0;
   width: 10rem;
@@ -36,4 +36,11 @@ export const Button = styled.button<ButtonProps>`
     color: ${({ theme }) => theme.buttonScheme.primary.color};
     border: none;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 6.5rem;
+    height: 1.9rem;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    font-size: 0.6rem;
+  }
 `;

src/components/manageProjects/applicantList/ApplicantList.styled.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  width: 195px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -12,8 +14,12 @@ export const Container = styled.div`
   }
   gap: 1rem;
   padding: 1rem;
-  width: 195px;
-  height: 550px;
+
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.7rem;
+    width: 130px;
+  }
 `;

src/components/manageProjects/applicantList/PassNonPassButton.styled.ts

@@ -3,6 +3,7 @@ import { PassNonPassButtonProps } from './PassNonPassButton';
 
 export const PassNonPassButton = styled.button<PassNonPassButtonProps>`
   padding: 0.5rem 0.6rem;
+  font-size: 0.8rem;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   color: ${({ theme }) => theme.color.white};
   background-color: ${({ theme, isPass }) =>
@@ -18,4 +19,8 @@ export const PassNonPassButton = styled.button<PassNonPassButtonProps>`
     background-color: ${({ theme }) => theme.color.grey};
   }
 
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.6rem;
+    padding: 0.3rem 0.4rem;
+  }
 `;

src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts

@@ -12,9 +12,17 @@ export const ItemWrapper = styled.li`
     background-color: ${({ theme }) => theme.color.navy};
     color: ${({ theme }) => theme.color.white};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.8rem;
+  }
 `;
 
 export const NickName = styled.p`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;

src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts

@@ -2,8 +2,8 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.ul`
   width: 100%;
-  height: 27rem;
-  min-width: 22rem;
+  height: 100%;
+  min-width: 16rem;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   border: 1px solid ${({ theme }) => theme.color.border};
   padding: 1.6rem 2rem;
@@ -17,4 +17,9 @@ export const Wrapper = styled.ul`
   &::-webkit-scrollbar {
     display: none;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    min-width: 9rem;
+    padding: 1rem;
+  }
 `;

src/components/manageProjects/passNonPassList/SendResultButton.styled.ts

@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   align-items: center;
   position: absolute;
   top: 7rem;
-  right: 2.5rem;
+  right: 2rem;
 `;
 
 export const SendEmailButton = styled(Button)`
@@ -21,4 +21,15 @@ export const SendEmailButton = styled(Button)`
   &:hover {
     opacity: 0.8;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 7rem;
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    padding: ${({ theme }) => theme.buttonSize.small.padding};
+
+    svg {
+      width: 15px;
+      height: 15px;
+    }
+  }
 `;