Merge pull request #175 from D3vPals/feat/#174

Feat/#174

Author: YouD0313

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

@@ -17,6 +17,11 @@ export const HeaderContainer = styled.div`
       width: 70px;
       height: 70px;
     }
+
+    @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+      width: 50px;
+      height: 50px;
+    }
   }
 
   .panel {
@@ -67,4 +72,7 @@ export const HeaderContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 10px 60px;
   }
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 10px 16px;
+  }
 `;

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

@@ -9,4 +9,8 @@ export const LayoutContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0 60px;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0;
+  }
 `;

src/components/home/projectCardLists/cardList/CardList.styled.ts

@@ -4,7 +4,7 @@ export const Container = styled.article`
   position: relative;
   cursor: pointer;
   width: 100%;
-  min-width: 19rem;
+  min-width: 15rem;
   height: 22rem;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 2rem;

src/components/home/projectStats/ProjectStats.styled.ts

@@ -6,20 +6,23 @@ export const Container = styled.section`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 3rem 0;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 2rem 0;
+  }
 `;
 export const Wrapper = styled.div`
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+  justify-content: space-evenly;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(40%, auto));
-    padding: 0 4rem;
-    gap: 1rem;
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+    gap: 1rem;
     padding: 0;
   }
 `;

src/components/home/projectStats/projectStat/ProjectStat.styled.ts

@@ -2,15 +2,18 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
-  justify-content: center;
-  flex: 1;
-  padding-left: 1.25rem;
+  padding-left: 2rem;
   align-items: center;
   gap: 1rem;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    justify-content: start;
-    padding-left: 2rem;
+    gap: 0.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding-left: 1rem;
+    gap: 0.3rem;
+    align-items: start;
   }
 `;
 
@@ -24,7 +27,7 @@ export const Border = styled.div`
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
-    height: 2rem;
+    width: 0.1rem;
   }
 `;
 

src/pages/home/Home.styled.ts

@@ -3,3 +3,9 @@ import styled from 'styled-components';
 export const Container = styled.main`
   width: 100%;
 `;
+
+export const Wrapper = styled.div`
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0 20px;
+  }
+`;

src/pages/home/Home.tsx

@@ -9,9 +9,11 @@ const Home = () => {
   return (
     <S.Container>
       <Banner />
-      <ProjectStats />
-      <SearchFiltering />
-      <ProjectCardLists />
+      <S.Wrapper>
+        <ProjectStats />
+        <SearchFiltering />
+        <ProjectCardLists />
+      </S.Wrapper>
       <ReactQueryDevtools initialIsOpen={false} />
     </S.Container>
   );