Merge pull request #178 from D3vPals/feat/#177

fix: 모바일 검색창 너비 조정, 새싹모집 클릭시 카드너비 변동 수정

Author: YouD0313

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

@@ -17,6 +17,6 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
-    width: 1.8rem;
+    width: 1.5rem;
   }
 `;

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

@@ -23,7 +23,7 @@ export const Wrapper = styled.div<{ $flex: boolean }>`
   width: 100%;
   display: ${({ $flex }) => ($flex ? 'flex' : 'grid')};
   grid-template-columns: ${({ $flex }) =>
-    $flex ? '' : 'repeat(auto-fit, minmax(30%, auto))'};
+    $flex ? '' : 'repeat(auto-fit, minmax(30%, 1fr))'};
   place-items: ${({ $flex }) => ($flex ? '' : 'center')};
   /* justify-content: space-evenly; */
   gap: 3rem;
@@ -34,14 +34,14 @@ export const Wrapper = styled.div<{ $flex: boolean }>`
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     grid-template-columns: ${({ $flex }) =>
-      $flex ? '' : 'repeat(auto-fit, minmax(40%, auto))'};
+      $flex ? '' : 'repeat(auto-fit, minmax(40%, 1fr))'};
     gap: 2rem;
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
     width: 100%;
     grid-template-columns: ${({ $flex }) =>
-      $flex ? '' : 'repeat(auto-fit, minmax(50%, auto))'};
+      $flex ? '' : 'repeat(auto-fit, minmax(50%, 1fr))'};
     gap: 1rem;
   }
 `;

src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts

@@ -22,7 +22,7 @@ export const Container = styled.div`
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(45%, auto));
+    grid-template-columns: repeat(auto-fit, minmax(45%, auto));
     gap: 0.5rem;
     > * {
       width: 100%;

src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts

@@ -44,12 +44,16 @@ export const SelectWrapper = styled.div`
 export const SelectButton = styled.button`
   width: 100%;
   display: block;
-  font-size: 01rem;
+  font-size: 1rem;
   text-align: initial;
   padding: 0.5rem;
 
   &:hover {
     background-color: ${({ theme }) => theme.color.navy};
     color: ${({ theme }) => theme.color.white};
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 0.9rem;
+  }
 `;

src/components/home/searchFiltering/search/Search.styled.ts

@@ -14,6 +14,7 @@ export const Container = styled.div`
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0.4rem 0;
+    width: 100%;
   }
 `;