프리온보딩 5Team Project

플레이키보드

소개

✅ 프리온보딩 1차 과제

기간

2022/10/04 ~ 06

배포 링크

https://elaborate-hotteok-6003a1.netlify.app

기술 스택

typescript

React

Vite

styled-components

axios

프로젝트 설치 및 실행 방법

✅ 설치방법

1. Node.JS를 다운받아 설치해주세요. vite를 사용하였기 때문에 최소 14.18 버전 이상이 요구됩니다. https://nodejs.org/

2. 리포지토리를 클론해주세요.

 git clone https://github.com/kkukileon305/playkeyboard.git

3. dependencies를 설치해주세요.

npm install

✅ 실행방법

1. 다음 명령어를 이용해 Dev server를 실행해주세요.

npm run dev

2. 브라우저에서 http://localhost:3000에 접속해주세요.

주요기능 및 설명

✅ 메인 페이지

• api 통신을 통하여 데이터를 불러온 뒤 Nav, 테마리스트, Footer 반응형 UI 구현

• 해당 테마 클릭 시 상세페이지로 이동하도록 동적 라우팅 구현

• 테마리스트 무한 스크롤 구현

상세 페이지

• api 통신을 통하여 데이터를 불러온 뒤 테마 데이터가 있을때만 UI를 보여주도록 구현, 없을 경우 404이미지 표시

• 이모티콘 및 버튼 구현

• 뒤로가기 버튼 구현

기능 분담

메인 페이지

정세영 - Footer UI구현 및 Infinite scroll 구현

이다익 - 프로젝트 초기 설정 및 깃 관리, Nav 구현, 상세페이지 스켈레톤

박유빈 - 테마리스트 UI 반응형 구현 및 이미지 Lazy loading 구현

상세 페이지

김슬기 - AD 및 figure UI 구현, 반응형 구현

김충만 - 이모티콘 UI 및 선택 유무 구현, 상품 문의 및 구매 버튼 UI 구현

유상호 - 상세페이지 뒤로가기 버튼부터 피규어까지 UI구현, 현재 url에 따라 상세페이지 요청 주소가 달라지게 구현, 상세페이지 정보가 없을경우 404페이지 보여지게 구현, 뒤로가기 버튼 기능, 피규어와 text UI 반응형 구현, 피규어 데이터가 있을때만 UI보여지게 구현