auth페이지, 마이페이지, 유저페이지 미디어쿼리 적용

src/components/auth/InputText.styled.ts

@@ -8,6 +8,9 @@ export const Container = styled.div`
   border-radius: 30px;
   background-color: ${({ theme }) => theme.color.white};
   width: 100%;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      padding: 0.5rem 0.75rem;
 `;
 
 export const IconContainer = styled.div`

src/components/common/avatar/Avatar.styled.ts

@@ -11,4 +11,9 @@ export const AvatarContainer = styled.div<Omit<AvatarProps, 'image'>>`
     height: 100%;
     border-radius: 50%;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    width: calc(${({ size }) => size} * 0.85);
+    height: calc(${({ size }) => size} * 0.85);
+  }
 `;

src/components/common/header/Header.styled.ts

@@ -12,6 +12,11 @@ export const HeaderContainer = styled.div`
   img {
     width: 80px;
     height: 80px;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 70px;
+      height: 70px;
+    }
   }
 
   .panel {
@@ -58,4 +63,8 @@ export const HeaderContainer = styled.div`
       }
     }
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 10px 60px;
+  }
 `;

src/components/common/layout/Layout.styled.ts

@@ -5,4 +5,8 @@ export const LayoutContainer = styled.div`
   margin: 0 auto;
   max-width: ${({ theme }) => theme.layout.width.desktop};
   padding: 0 120px;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0 60px;
+  }
 `;

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

@@ -6,11 +6,12 @@ export const Container = styled.div`
   border: 2px solid #f0f0f0;
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 22%;
-  min-width: 140px;
+  min-width: 130px;
   height: 80vh;
   margin-right: 1.25rem;
   padding-bottom: 1rem;
 `;
+
 export const AvartarContainer = styled.div`
   width: 100%;
   display: flex;
@@ -44,6 +45,10 @@ 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};
+  }
+
   &:hover {
     background-color: #f9f9f9;
   }
@@ -52,6 +57,11 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
     color: #6d6d6d;
     width: 30px;
     height: 30px;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 23px;
+      height: 23px;
+    }
   }
 `;
 export const IconWrapper = styled.div`

src/components/common/title/Title.styled.ts

@@ -4,4 +4,8 @@ import { TitleProps } from './Title';
 export const Container = styled.h1<Omit<TitleProps, 'children'>>`
   font-size: ${({ theme, size }) => theme.heading[size].fontSize};
   color: ${({ theme }) => theme.color.primary};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme, size }) => theme.heading[size].tabletFontSize};
+  }
 `;

src/components/mypage/appliedProject/MyApplyProject.styled.ts

@@ -20,4 +20,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 2rem;
+  }
 `;

src/components/mypage/appliedProject/MyStatus.styled.ts

@@ -3,13 +3,18 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 1.3rem;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: 20px;
   border: 1px solid #ededed;
 
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.9rem;
+  }
+
   &:hover {
     background-color: #eee;
   }
@@ -42,5 +47,9 @@ export const Status = styled.div<{ $isAccepted: boolean }>`
   span {
     font-size: 0.8rem;
     font-weight: 800;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 0.6rem;
+    }
   }
 `;

src/components/mypage/joinedProject/MyJoinProjects.styled.ts

@@ -29,8 +29,11 @@ export const Container = styled.div`
 
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: 5%;
+  justify-content: space-between;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 1rem 2rem;
+  }
 
   a {
     display: inline-block;

src/components/mypage/joinedProject/Project.styled.ts

@@ -8,6 +8,10 @@ export const Container = styled.div`
   border: 1px solid #ededed;
   width: 100%;
 
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 1.3rem;
+  }
+
   &:hover {
     background-color: #eee;
   }
@@ -24,6 +28,10 @@ export const Title = styled.p`
   font-weight: 600;
 
   margin-bottom: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 1rem;
+  }
 `;
 
 export const Date = styled.div`
@@ -35,6 +43,10 @@ export const Date = styled.div`
   span {
     font-size: 0.9rem;
     color: #777777;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 0.7rem;
+    }
   }
 `;
 
@@ -45,11 +57,21 @@ export const DateWrapper = styled.div`
   padding: 0.2rem 0.65rem;
   background-color: #3e5879;
   border-radius: 10px;
+  text-align: center;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.3rem;
+  }
 
   span {
     font-weight: 500;
     font-size: 0.78rem;
     color: #fff;
+    word-break: keep-all;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 0.6rem;
+    }
   }
 `;
 
@@ -61,6 +83,10 @@ export const Member = styled.div`
 
   span {
     font-size: 0.9rem;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 0.7rem;
+    }
   }
 `;
 
@@ -92,10 +118,20 @@ export const Skill = styled.div`
   align-items: center;
   gap: 0.6rem;
 
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    gap: 0.2rem;
+  }
+
   img {
     width: 40px;
+    height: 40px;
     border: 1px solid rgb(196 196 196);
     border-radius: 50%;
+
+    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   svg {