themoment-team · yoosion030 · Jul 19, 2023 · Jul 15, 2023 · Jul 15, 2023 · Jul 15, 2023
diff --git a/apps/client/src/assets/svg/HeaderGSMLogo.tsx b/apps/client/src/assets/svg/HeaderGSMLogo.tsx
@@ -10,8 +10,8 @@ const GSMLogo = ({
   isAbovePromotionVideo: boolean;
 }) => (
   <svg
-    width='79'
-    height='35'
+    width='4.9375rem'
+    height='2.1875rem'
     viewBox='0 0 79 35'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'

diff --git a/apps/client/src/assets/svg/icon/ChevronIcon.tsx b/apps/client/src/assets/svg/icon/ChevronIcon.tsx
@@ -1,7 +1,7 @@
 const ChevronIcon = () => (
   <svg
-    width='24'
-    height='25'
+    width='1.5rem'
+    height='1.5625rem'
     viewBox='0 0 24 25'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'

diff --git a/apps/client/src/assets/svg/icon/CloseIcon.tsx b/apps/client/src/assets/svg/icon/CloseIcon.tsx
@@ -1,7 +1,7 @@
 const CloseIcon = () => (
   <svg
-    width='40'
-    height='40'
+    width='2.5rem'
+    height='2.5rem'
     viewBox='0 0 40 40'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'

diff --git a/apps/client/src/assets/svg/icon/HamburgerIcon.tsx b/apps/client/src/assets/svg/icon/HamburgerIcon.tsx
@@ -11,8 +11,8 @@ const HamburgerIcon = ({
 
   return (
     <svg
-      width='40'
-      height='40'
+      width='2.5rem'
+      height='2.5rem'
       viewBox='0 0 40 40'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'

diff --git a/apps/client/src/components/About/Section2/Content/index.tsx b/apps/client/src/components/About/Section2/Content/index.tsx
@@ -26,7 +26,7 @@ const Content = ({ children, index, scrollHeight }: ContentProps) => {
   const centerAverage = scrollSetting.scrollMax / scrollSetting.scrollItem;
   const isCentered =
     scrollHeight >= index * centerAverage &&
-    scrollHeight <= (index + 1) * centerAverage;
+    scrollHeight < (index + 1) * centerAverage;
 
   return (
     <ContentStyle

diff --git a/apps/client/src/components/About/Section5/MajorCard/index.tsx b/apps/client/src/components/About/Section5/MajorCard/index.tsx
@@ -114,12 +114,9 @@ const MajorCard = ({ major }: { major: MajorType }) => {
 
   return (
     <S.CardLayout>
-      <Image
-        src={`/images/about/section5/${major}.png`}
-        width={width > 800 ? 630 : 420}
-        height={width > 800 ? 250 : 167}
-        alt=''
-      />
+      <S.ImgWrapper>
+        <Image src={`/images/about/section5/${major}.png`} alt='' fill />
+      </S.ImgWrapper>
 
       <S.ContentSection>
         <S.Title>{selectedMajor.title}</S.Title>

diff --git a/apps/client/src/components/About/Section5/MajorCard/style.ts b/apps/client/src/components/About/Section5/MajorCard/style.ts
@@ -16,13 +16,25 @@ export const CardLayout = styled.div`
     width: 26.25rem;
     height: 100%;
     margin-left: 0;
-    margin-right: 0 2.5rem;
+    margin-right: 2.5rem;
+  }
+`;
+
+export const ImgWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 15.625rem;
+
+  img {
+    object-fit: cover;
+    border-top-left-radius: 1.875rem;
+    border-top-right-radius: 1.875rem;
   }
 `;
 
 export const ContentSection = styled.div`
   padding: 2rem 2rem 2.5rem;
-  flex: 1;
+  height: 80%;
 `;
 
 export const Title = styled.h3`
@@ -40,6 +52,10 @@ export const Content = styled.div`
   ${({ theme }) => theme.typo.h4};
   color: ${({ theme }) => theme.color.gray['090']};
   margin-bottom: 1.25rem;
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    margin: 0;
+  }
 `;
 
 export const HashTagSection = styled.div`

diff --git a/apps/client/src/components/GalleryCard/style.ts b/apps/client/src/components/GalleryCard/style.ts
@@ -58,12 +58,19 @@ export const Title = styled.h5`
   color: ${({ theme }) => theme.color.gray['090']};
   font-weight: 600;
   -webkit-line-clamp: 1;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme }) => theme.typo.h4}
+  }
 `;
 
 export const ContentPreview = styled.p`
   ${({ theme }) => theme.typo.body2}
   color: ${({ theme }) => theme.color.gray['080']};
-  height: 2.5rem;
   font-weight: 400;
   -webkit-line-clamp: 2;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme }) => theme.typo.h5}
+  }
 `;
diff --git a/apps/client/src/components/LinkToHelloGSM/style.ts b/apps/client/src/components/LinkToHelloGSM/style.ts
@@ -51,7 +51,11 @@ export const AdmissionText = styled.h3`
   font-weight: 700;
 
   @media ${({ theme }) => theme.breakPoint['600']} {
-    ${({ theme: { typo } }) => typo.h5}
+    ${({ theme: { typo } }) => typo.h4}
+  }
+
+  @media (max-width: 400px) {
+    ${({ theme: { typo } }) => typo.body1}
   }
 `;
 
@@ -66,6 +70,10 @@ export const HashTag = styled.h4`
   font-weight: 400;
 
   @media ${({ theme }) => theme.breakPoint['600']} {
-    ${({ theme: { typo } }) => typo.body1}
+    ${({ theme: { typo } }) => typo.h5}
+  }
+
+  @media (max-width: 400px) {
+    ${({ theme: { typo } }) => typo.body2}
   }
 `;
diff --git a/apps/client/src/components/ListPage/PostCard/style.ts b/apps/client/src/components/ListPage/PostCard/style.ts
@@ -24,8 +24,8 @@ export const PostCard = styled(Link)`
 export const IndexAndTitle = styled.div`
   width: 46.875rem;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 2.25rem;
 
   @media ${({ theme }) => theme.breakPoint['1440']} {
     width: 34.5625rem;
@@ -34,6 +34,10 @@ export const IndexAndTitle = styled.div`
   @media ${({ theme }) => theme.breakPoint['1024']} {
     width: 18.3125rem;
   }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 14.375rem;
+  }
 `;
 
 export const PostIndex = styled.p`
@@ -55,4 +59,8 @@ export const PostTitle = styled.p`
   @media ${({ theme }) => theme.breakPoint['1024']} {
     width: 14.375rem;
   }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 10.375rem;
+  }
 `;
diff --git a/apps/client/src/components/MainPage/Header/index.tsx b/apps/client/src/components/MainPage/Header/index.tsx
@@ -1,11 +1,16 @@
 'use client';
 
 import { Header } from 'client/components';
-import { useGetWindowHeight, useGetWindowScrollHeight } from 'client/hooks';
 
-const headerHeightPx = 64;
+import {
+  useGetWindowHeight,
+  useGetWindowScrollHeight,
+  useGetWindowWidth,
+} from 'client/hooks';
 
 const MainpageHeader = () => {
+  const windowWidth = useGetWindowWidth();
+  const headerHeightPx = windowWidth <= 600 ? 48 : 64;
   const windowScrollHeight = useGetWindowScrollHeight();
   const windowHeight = useGetWindowHeight();
 

diff --git a/apps/client/src/components/NewsletterCard/style.ts b/apps/client/src/components/NewsletterCard/style.ts
@@ -69,4 +69,8 @@ export const Preview = styled.h4`
   ${({ theme: { typo } }) => typo.body1}
   color: ${({ theme: { color } }) => color.gray['080']};
   font-weight: 400;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme: { typo } }) => typo.h5}
+  }
 `;
diff --git a/apps/client/src/components/PostPage/ReturnToList/style.ts b/apps/client/src/components/PostPage/ReturnToList/style.ts
@@ -29,4 +29,8 @@ export const ReturnText = styled.p`
   font-weight: 600;
   ${({ theme }) => theme.typo.body1}
   color: ${({ theme }) => theme.color.primary.navy};
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme }) => theme.typo.body2};
+  }
 `;
diff --git a/apps/client/src/components/SlotMachine/index.tsx b/apps/client/src/components/SlotMachine/index.tsx
@@ -31,9 +31,9 @@ const SlotMachine = () => {
           </S.Wrap>
           <span>{']'}</span>
         </S.ListWrap>
-        <S.Icon>
+        <span>
           <UnderscoreIcon />
-        </S.Icon>
+        </span>
       </S.ListIconWrap>
       <span className='second'>
         할 수 있어

diff --git a/packages/common/src/styles/GlobalStyle.tsx b/packages/common/src/styles/GlobalStyle.tsx
@@ -2,13 +2,24 @@
 
 import { Global, css } from '@emotion/react';
 import emotionReset from 'emotion-reset';
+import { theme } from './theme';
 
 export function GlobalStyle() {
   return (
     <Global
       styles={css`
         ${emotionReset}
 
+        html {
+          @media ${theme.breakPoint['600']} {
+            font-size: 12px;
+          }
+
+          @media (max-width: 400px) {
+            font-size: 10px;
+          }
+        }
+
         body {
           overscroll-behavior-y: none;
           overflow-x: hidden;

diff --git a/packages/ui/src/components/DateComponent/style.ts b/packages/ui/src/components/DateComponent/style.ts
@@ -11,4 +11,8 @@ export const Date = styled.time<{ workspace: 'client' | 'admin' }>`
     ${({ theme }) => theme.typo.caption}
     font-weight: 400;
   }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme }) => theme.typo.body1}
+  }
 `;
diff --git a/packages/ui/src/components/WriterAndDate/style.ts b/packages/ui/src/components/WriterAndDate/style.ts
@@ -16,6 +16,10 @@ export const WriterText = styled.p<{ workspace: 'client' | 'admin' }>`
     ${({ theme }) => theme.typo.caption}
     font-weight: 400;
   }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    ${({ theme }) => theme.typo.body1}
+  }
 `;
 
 export const Dot = styled.div`