Refilled Free Assginment

실행방법

// Dev 모드
yarn dev

or

// Product 모드
yarn build && yarn start

과제를 하며 고려한 부분

주어진 피그마 디자인을 해석하고자 했어요!

과제를 위해 주어진 피그마 내의 디자인은 비록 크게 3컷의 디자인이었으나, 그 디자인 속에서 세부적으로 추가해야하는 부분이 있는 지, 아니면 이 디자인 내 요소들의 의미가 무엇인 지에 대해 고민하며 개발을 진행했습니다.

드랍박스 메뉴

처음에는 정적인 피그마 디자인을 그대로 구현하는 것을 목표로 하였으나, 구성되어있는 UI가 드랍박스를 위한 UI로 판단되어 동적으로 작동할 수 있게 하였습니다.

장바구니 뱃지

장바구니 기능 구현이 필수구현과제인 만큼 장바구니 수량을 사용자가 직관적으로 알 수 있는 뱃지를 추가했습니다.

장바구니 중복 방지

UI에서 확인할 수 있던 정보는 개별 수량이 없는 장바구니라는 점이었습니다. 이 때문에 장바구니 담기 버튼을 누를 때 중복으로 장바구니에 물건이 담기지 않도록 했습니다.

사용자 입장에서 추가해볼 수 있는 개선점을 생각했어요!

개발을 진행하며 사용자의 관점(동선) 에서 계속 테스트를 진행했습니다. 그 결과 주요 로직과는 관계없지만 사용자의 UX와 크게 관련된 개선할 부분을 찾아낼 수 있었고 적용할 수 있었습니다.

옵션 클릭 시 사용감 구분

드랍박스의 옵션을 클릭할 때 사용자가 클릭했는 지 인지할 수 있도록 active 속성을 이용해 구분감 있게 하였습니다.

모달 켜졌을 시 스크롤 방지

옵션 선택창이 떴을 때 상품 리스트가 스크롤에 따라 반응하면 사용에 있어서 커다란 불편함을 줍니다. 모달창이 떴을 때는 모달창이 닫히지 않는다면 스크롤이 되지 않도록 했습니다.

모달창 닫기

옵션 선택창 외 모달영역을 클릭했을 시 꺼질 수 있도록 했습니다.

사용 스택

Next.js - Page Directory (with 13버전)

13버전으로 업데이트 되면서 page router 방식에서 app router 및 app dir으로 변경되고 RSC의 적극적인 활용이나 폴더-파일으로 구성된 기존의 라우팅 방식이 폴더 단위로 바뀐 점, 렌더링 방식이 페이지에서 컴포넌트로 바뀐 점 등 12버전과 많은 부분에서 달라졌습니다.

이런 변화된 기술들은 13버전을 사용할 이유가 되기도 하지만, 실제 프로덕트라면 어떻게 개발이 진행될까 하고 고민을 했습니다. 그 결과, 새로운 스택을 도입하는 것보다 (현 시간 기준 실제 상용화된 프로덕트라면) 기존의 기술을 토대로 새로운 기능들을 도입할 것 같다고 생각되어 버전은 13버전으로 하되, 기존 12버전의 체계인 page dir를 활용했습니다.

redux-toolkit

클라이언트 상에서의 데이터를 전역관리하기 위해 redux-toolkit을 활용했습니다.
- 모달 on/off를 위한 state 관리
- 제품 카드 클릭 시 해당 상품 데이터 저장을 위한 state 관리
- 장바구니 수량 업데이트를 위한 state 관리

필수 외 추가 사용 라이브러리

react-toastify

알림 팝업을 위한 toastify 라이브러리

react-icons

아이콘 활용을 위한 라이브러리

axios

데이터 페칭을 위한 라이브러리

스택 요구 사항

Next.js 사용
SCSS 사용
Redux-toolkit 활용

기본 요구 사항

API를 통해 데이터를 받아와 물품 리스트 렌더링
상품 클릭 시 옵션 선택 창 노출

제시된 UI에 맞추어 드랍다운 메뉴로 구현
클릭 시 active 속성을 활용해 구분감 추가
장바구니 기능 구현

피그마 상 수량 구현이 없어 id값을 비교하여 중복 상품이 등록되는 것을 방지하는 형태로 구현
375px 초과 및 375px 이하 반응형 구현

추가 기능 고려 사항

장바구니 갯수 뱃지
옵션 미선택 시 알림 팝업
장바구니 담기 시 알림 팝업
장바구니에 담겨있는 물품 담기 시 이미 담겨있음을 알리는 팝업(중복 상품 추가 막기)

동작 예시

캡쳐

✔️사전 과제 진행 시 중요사항 꼭 읽어보세요!

Next.js를 사용해주셔야 합니다. 버전은 11이상이면 됩니다 :)
SCSS를 사용해주셔야 합니다.
font는 전부 Noto Sans KR로 통일합니다. 그 외 css는 디자인과 동일하게 진행해주세요.
redux / redux-toolkit / react-query 중 최소 1개를 사용해주셔야 합니다.
코드는 본인 github에 반드시 public으로 설정하셔서 올려주셔야 합니다.
branch는 다음과 같이 사용해주세요.
main : 개발이 완료되면 main으로 PR을 날려주세요! (main으로 바로 합치지 말아주세요.)
feature/test : 해당 브랜치에서 개발을 진행해주시고 push해주세요!
즉, 레포에 main, feature/test 이렇게 2개의 브랜치가 있으면 됩니다.
타인의 도움을 받거나, 타인의 코드를 복사할 경우 불합격 처리가 됩니다.

stardust6653 / refilled-free-assignment