[React] 디자인시스템 FOCUS 챌린지 - Numble

시작 방법

npm start

소개

넘블 챌린지

챌린지 미션

• Class101의 디자인 시스템을 적용해서 메인페이지 카피하기
  • https://ui.class101.dev/
  • 옛날에 구글링하다가 class101의 디자인 시스템은 접해본적이 있었다. 실제로 사용해볼 생각은 못했는데, 이번기회에 해보는 걸로.
• 조건
  • React Framework를 사용할 것
  • javascript보다 Typescript를 활용할 것
  • 서버에 배포할 것 (Vercel과 같은 서비스를 이용해 보세요)
• 결과물 제출 형식
  • 배포한 서비스 URL
    • ex. https://www.numble.it
  • 깃허브 주소
    • Public 저장소에 올려주세요
  • 블로그 주소
    • 기술블로그에 작성
    • 포함 할 내용
      • 주요코드에 대한 설명
        • 주요 로직(ex.소비자 구매 로직)과 그 이유
        • 코드내에서 고려한 특정 유저 행동과 그에 대한 대처
      • 활용한 라이브러리와 그 이유
      • 프로젝트를 진행할 때 어려웠던 점/고민했던 부분과 해결방법

사용 기술 스택

• react
• typescript
• class101/ui
• emotion
• react-responsive
• swiper

소요 기간

• 5일

결과물

vercel 링크

https://study-numble-class101.vercel.app/

벨로그 스리즈

https://velog.io/@ezh29/series/%EB%84%98%EB%B8%94%EB%A6%AC%EC%95%A1%ED%8A%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8