Merge pull request #165 from D3vPals/feat/#162

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

Author: hyeongjun6364

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/layout/ApplicantViewLayout.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/common/layout/ApplicantViewLayout.tsx

@@ -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/common/layout/sidebar/LayoutSidebar.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/common/layout/sidebar/LayoutSidebar.tsx

@@ -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/common/sidebar/Sidebar.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};
+  }
 `;