1.0.0

Feature

🛠 Navigation Bar (#7)

설명

• 페이지 상단에 고정된 네비게이션 바 입니다.
• 화면을 스크롤해도 상단 영역에 계속 고정되어있습니다.
• 다른 페이지로 이동하는 버튼 및 홈 로고 버튼이 있습니다. (현재는 Posts만 있지만, Visitor 및 Study 페이지 추가 예정)
• css
  • position: fixed 속성을 통해 상단에 고정했습니다.
  • shadow 속성을 통해 입체적인 느낌을 주었습니다.

🛠 Main Page (#16 #22 #24)

설명

• 크게 4개의 영역으로 이루어져있습니다. (내 소개 / Projects / Popular Posts / Open Source Contribution)
  • 공통
    • transition을 통해 hover시 각 컴포넌트들이 살짝 움직임 + 색상 변화를 부드럽게 주었습니다.
    • shadow 속성을 통해 입체적인 느낌을 주었습니다.
  • 내 소개
    • Glitch Text를 통해 움직이는 소개글을 만들었습니다.
  • Projects
    • 주요 프로젝트 3가지가 보이는 부분입니다.
  • PopularPosts
    • 좋아요순으로 가장 인기있는 포스팅 3가지가 보여집니다.
  • Open Source Contirbution
    • 오픈소스에 기여한 주요 3가지가 보여집니다.

🛠 Footer (#21)

설명

• 저작권에 대한 정보가 나와있습니다.
• 모든 페이지 제일 하단에 존재합니다.
• css
  • shadow 속성을 통해 입체적인 느낌을 주었습니다.

🛠 Posts Page (#29)

설명

• 모든 Velog 포스트들이 보이는 페이지입니다.
• GraphQL을 통해 Velog 데이터를 가져왔습니다.
• Tanstack Query를 통해 데이터를 패칭했습니다.
• 3가지 정렬 버튼이 존재합니다. (최신순 / 오래된순 / 좋아요순)

🛠 Mobile UI (#27)

설명

• 반응형 UI 최적화 작업 (Samsung S8+ 기준 사진)
• 크게 3가지 분기점으로 진행하였습니다.
  • 데스크탑: 768px ~
  • 태블릿: 480 ~ 767px
  • 모바일: ~ 479px
• css
  • @media 를 사용하여 width 분기별 처리를 하였습니다.
  • font는 px대신 rem 단위를 사용햇습니다.

🛠 Meta Tag Setting (#18)

설명

• Meta Tag 설정 및 robot.tst 등의 설정을 통해 SEO를 진행하였습니다.

  • 구글 검색시 최상단에 뜨는 것을 확인할 수 있습니다.
  • (페이지별로 나눠서 3가지가 뜨는 부분은 추후에 확인해 보겠습니다...)

• OG 메타태그를 통해 URL 링크 공유 시 미리보기 화면도 최적화 하였습니다.