HodooLabs 메인페이지 구현 과제

🏠 배포 URL

https://hodoolabs.vercel.app/

🏗 프로젝트 구조도

├── Appdownload
│   ├── AppDownload.tsx
│   └── Appdownload.module.scss
├── Banner
│   ├── Banner.module.scss
│   └── Banner.tsx
├── BookChoice
│   ├── Book.tsx
│   ├── BookChoice.module.scss
│   ├── BookChoice.tsx
│   └── RefCheck.tsx
├── Diary
│   ├── Diary.module.scss
│   └── Diary.tsx
├── Footer
│   ├── Footer.module.scss
│   └── Footer.tsx
├── Header
│   ├── Header.module.scss
│   └── Header.tsx
├── LanLive
│   ├── LanLive.module.scss
│   └── LanLive.tsx
├── Live
│   ├── Live.module.scss
│   └── Live.tsx
├── Nav
│   ├── Nav.module.scss
│   └── Nav.tsx
├── ReviewSlider
│   ├── Review.module.scss
│   └── Review.tsx
└── Slidebooks
    ├── ImageWrap.tsx
    ├── SlideBooks.module.scss
    └── SlideBooks.tsx

❗ 설치방법

1. npm install
2. npm run dev

🎬 구현내용

1. 마크업과 반응형 공용 스타일 코드.

#1 (comment)

- 웹페이지의 사이즈에 따라 특정 아이템이 보이거나 사라지도록 기능을 돕는 공용 스타일 코드를 작성하였습니다.
- 마크업 진행시 화면에 나타내고 싶지 않지만 텍스트를 브라우저에게 전달해야 하는 케이스들을 다룰 수 있도록 하였습니다.

2. Nav 스크롤 style 컨트롤.

- 웹페이지에 스크롤 동작을 감지하여 여부에 따라 nav의 배경색,폰트색,이미지 로고 색이 변하는 기능을 구현하였습니다.

3. 이용자 후기 레이아웃

- 이용자의 정보, 리뷰 데이터를 받아와 UI에 출력하였습니다.
- swiper을 적용해 autoplay 슬라이더를 구현하였습니다.

4. 독서 일기 및 실시간 방송 섹션 구현

- 독서일기 섹션 및 실시간 방송 섹션의 UI를 구현하였습니다.
- 위에서 아래 스크롤시 텍스트 애니메이션 효과를 구현하였습니다.

5. Footer 영역 구현

- Footer 영역 UI 구현