프리온보딩 프론트 3팀 1주차 1번미션

프로젝트 설명

• 플레이키보드 웹 스토어 페이지를 통해 제품을 소개합니다.
• 서버 API를 활용하여 UI에 정보를 출력합니다.
• 동적 라우팅을 통해 페이지를 구성합니다.
• 웹에서 작동하는 키보드를 구현합니다.
  
  

언어

• JavaScript
• React.js
  
  

라이브러리

• styled-components
• styled-reset
• react-icons
• react-router-dom
• prettier
• axios
• hangul-js
• swiper
  
  

프로젝트 설치 및 실행 방법

✅ 설치방법

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

https://nodejs.org/

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

git clone https://github.com/Poylib/pre-onboarding-3team-1st.git

3.dependencies를 설치해주세요.

npm install

✅ 실행방법

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

npm run dev

2. 브라우저에서 http://localhost:3000/pre-onboarding-3team-1st/ 로 접속하거나, 배포주소로 접속해주시면 됩니다.

   
   
   
   

저작권, 라이선스 정보

[저작권] (주)비트바이트

• ✅ 프로젝트내 이미지는 모두 (주)비트바이트 에서 제공받았습니다.
  
  

기능 분담

구현 - [상세페이지] 유저반응영역 및 하단 UI, 버튼 상호작용 추가

박찬영 - [상세페이지] 이모티콘 UI, [메인페이지] 카드 라우터 연결 및 무한 스크롤 추가

이동호 - [메인페이지] 상단 및 하단 UI, 카테고리 캐러셀

이유나 - [메인페이지] 컨텐츠 UI

최승철 - [상세페이지] 컨텐츠 UI, 키보드 UI 및 적용로직

주요기능 및 설명

✅ 데이터 받아오는 동안 로딩바 구현

✅ 무한스크롤 구현

✅ 카테고리별 Nav 구현

✅ 카테고리별 키보드 테마 표시 구현

✅ 스토어/충전소/MY테마/설정 Click시 선택 구현

✅ 키보드 테마 클릭시 해당 키보드 상세페이지로 이동

✅ 맘에들어요/심쿵했어요/응원해요/갖고싶어요 Click시 선택 구현

✅ 반응형 메인페이지

✅ 반응형 상세페이지

✅ 키보드테마 img 클릭시 테스트 키보드 팝업 On/Off 기능구현

✅ 텍스트 삭제시 자음/모음 순서대로 제거되는 기능구현

✅ :-) / 스페이스바/ .(dot) / 한줄띄우기 기능구현

✅ shift 클릭시 쌍자음으로 바꾸고 쌍자음 클릭시 단자음으로 변경하는 기능 구현

팀원소개

✅ 프론트엔드 구현

• 깃허브 https://github.com/Goohyun3436
• 블로그 https://velog.io/@3436rngus

✅ 프론트엔드 박찬영

• 깃허브 https://github.com/Poylib
• 블로그 https://poylib.tistory.com/

✅ 프론트엔드 이동호

• 깃허브 https://github.com/cratuss
• 블로그 https://cratuss.tistory.com/

✅ 프론트엔드 이유나

• 깃허브 https://github.com/yoon1257
• 블로그 https://velog.io/@yoon_reve

✅ 프론트엔드 최승철

• 깃허브 https://github.com/tmdcjf152
• 블로그 https://choa-ri.tistory.com/