반응형웹 적용 (#18)

* Design: media theme 생성

* Design: media의 breakpoints에 xLarge속성 추가

xLarge: 1360

* Design: 반응형웹에서 사용할 css variable 설정

* Design: markdownStyle 스타일 수정

* Design: About페이지 css variable적용

* Design: 404페이지 css variable적용

* Design: Layout페이지 css variable적용

* Design: PostList페이지에 css variable적용

* Rename: PostDetail관련 스타일 파일 합치기

PostHeader, PostBody, PostFooter .style -> PostDetail.style

* Design: Bio컴포넌트 css variable적용

* Design: CategoryHeader컴포넌트 css variable적용

* Design: Footer컴포넌트에 css variable적용

* Chore: MainInfo컴포넌트 제거

* Design: GNB컴포넌트에 css variable적용

* Fix: Image 컴포넌트 이미지가 찌그러지는 버그 수정

* Fix: Bio 이미지 사이즈, description의 간격 수정

* Design: Image컴포넌트에 css variable적용

* Chore: media theme 사용법 주석 작성

* Feat: viewport 메타 태그 설정

* Docs: 리드미 최신화

Author: kimyouknow

README.md

@@ -20,11 +20,11 @@
 
 ### 추가
 
-- [ ] : 반응형 웹
+- [x] : 반응형 웹
 - [x] : read time
 - [ ] : 반응 및 조회수 표시
 - [ ] : 검색 기능
-- [ ] : 카테고리 검색
+- [x] : 카테고리 검색
 - [ ] : 시리즈 검색
 - [ ] : 이전 포스트 , 다음 포스트, 최신포스트
 - [x] : 맞춤법 검사 자동화 -> vscode-hanspell extension으로 필요할 때마다 사용

src/Layout/Layout.style.ts

@@ -3,7 +3,8 @@ import styled from '@emotion/styled'
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  padding-top: 100px;
+  width: 100%;
+  padding-top: var(--padding-xl);
   color: var(--color-text);
   background-color: var(--color-background);
 `

src/components/Bio/Bio.style.ts

@@ -15,7 +15,10 @@ export const Info = styled.div`
 
 export const Author = styled.h3``
 
-export const Desc = styled.div``
+export const Desc = styled.div`
+  ${({ theme: { typography } }) => typography.textBase}
+  line-height: 1.4;
+`
 
 export const Socials = styled.ul`
   display: flex;
@@ -31,7 +34,7 @@ export const Socials = styled.ul`
     }
   }
   a > svg {
-    width: 18px;
-    height: 18px;
+    width: var(--icon-small);
+    height: var(--icon-small);
   }
 `

src/components/Bio/index.tsx

@@ -14,7 +14,7 @@ const Bio = () => {
   }
   return (
     <S.Container>
-      <Image src="profile-image.png" isCircle />
+      <Image src="profile-image.png" isCircle size="l" />
       <S.Info>
         <S.Author>{author}</S.Author>
         <S.Desc>{description}</S.Desc>

src/components/CategoryHeader/CategoryHeader.style.tsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import { ReactNode } from 'react'
 
 export const Container = styled.div`
-  width: 768px;
+  width: var(--main-content-width);
   padding: 1rem;
   margin: 0 auto;
   color: var(--color-heading-text);
@@ -27,13 +27,13 @@ interface GatsbyLinkProps extends CategoryItemProps {
 export const CategoryList = styled.div`
   display: flex;
   flex-wrap: wrap;
+  gap: var(--space-m);
 `
 
 export const CategoryItem = styled(({ active, ...props }: GatsbyLinkProps) => <Link {...props} />)`
   cursor: pointer;
-  margin-right: 12px;
   border-radius: 8px;
-  padding: 0 6px;
+  padding: 0 var(--space-s);
   ${({ theme: { typography } }) => typography.linkSmall}
 
   color: var(--color-text);

src/components/Common/Image/index.tsx

@@ -6,9 +6,9 @@ import { useMemo } from 'react'
 import { GatsbyImageDataType } from '@/types/gatsby.type'
 
 const ImageSizeMap = {
-  s: '32px',
-  m: '64px',
-  l: ' 128px',
+  s: 'var(--icon-medium)',
+  m: 'var(--icon-large)',
+  l: 'var(--icon-xLarge)',
 }
 
 type ImageSize = keyof typeof ImageSizeMap
@@ -65,6 +65,7 @@ const SImage = styled((props: GatsbyImgProps) => <GatsbyImage {...props} />)`
   border-radius: ${({ isCircle }) => isCircle && '50%'};
   &.gatsby-image-wrapper {
     z-index: 0; // IOS에서 border-radius 적용안되는 버그 해결
+    min-width: ${({ size }) => size && ImageSizeMap[size]};
   }
 `
 

src/components/Footer/index.tsx

@@ -7,8 +7,9 @@ const Footer = () => {
 export default Footer
 
 const Container = styled.footer`
-  margin-top: 32px;
-  padding: 40px 0;
+  margin-top: var(--padding-s);
+  padding: var(--padding-s) 0;
   text-align: center;
-  font-size: 11pt;
+  border-top: 1px solid var(--color-background-secondary);
+  ${({ theme: { typography } }) => typography.textBase}
 `

src/components/GlobalNavigation/GlobalNavigation.style.ts

@@ -2,6 +2,7 @@ import styled from '@emotion/styled'
 import { Link } from 'gatsby'
 
 export const Container = styled.header<{ isHidden: boolean }>`
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -13,8 +14,8 @@ export const Container = styled.header<{ isHidden: boolean }>`
   padding: 1rem 2rem;
   backdrop-filter: blur(5px);
   transition: top 0.5s, opacity 0.5s;
-  z-index: 999;
-  width: 100vw;
+  z-index: var(--z-index-top);
+
   ${({ theme: { typography } }) => typography.linkMedium};
 
   color: var(--color-text);
@@ -36,8 +37,8 @@ export const NavLinks = styled.nav`
 export const NavLink = styled(Link)``
 
 export const ThemeSwitchButton = styled.button`
-  width: 24px;
-  height: 24px;
+  width: var(--icon-medium);
+  height: var(--icon-medium);
   > svg {
     width: 100%;
     height: 100%;