프로젝트 개요

cafe24 앱스토어에 출시한 프로젝트로서 쇼핑몰 관리자가 자신의 페이지에 NFT상품을 추가할 수 있는 기능을 제공하는 애플리케이션입니다.

사용된 기술

Vue.js, Nuxt.js, Vuex, SCSS

작업 내역

프로필 수정에 관한 팝업 제작

햄버거 버튼을 추가하고 프로필 수정과 로그아웃을 할 수 있는 팝업을 제작하였습니다. 입사한지 일주일만에 처음으로 참여한 작업이기 때문에 퍼블리싱 업무로 시작하였습니다.

버튼 노출 범위 설정

플로팅 버튼을 본인 쇼핑몰의 어느 페이지에 노출시킬것인지 선택하는 페이지입니다.
플로팅 버튼을 열면 나의 NFT목록 및 상세내역을 확인 할 수 있는 일종의 지갑기능입니다.

api통신을 통해 받아온 데이터를 settingData에 저장하는 loadSetting함수입니다.

통신을 통해 들어오는 데이터는 toggle이 on상태인 데이터를 배열에 key값으로 넘겨주어서, 기존 settingData와 대조하여 key값이 일치하면 toggle을 on상태로 표시해줍니다.

에어드랍 내역

에어드랍 리스트와 에어드랍 detail페이지입니다.
리스트는 card형 item 컴포넌트를 제작하여 v-for를 이용하여 반복문으로 해결했지만, 에어드랍 상세내역에서는 컴포넌트화의 필요성을 절감했습니다.

시간에 쫓겨 하나의 컴포넌트에 모든 요소들을 작성했는데, css와 JS를 한페이지에 작성하는 vue특성을 감안하더라도 총 824줄이기 때문에 추후 에러수정과 디자인 QA반영시에 굉장히 애를 먹었습니다.

회고시 빨간 박스로 표시한대로 컴포넌트화를 했다면 다른 페이지에서도 재활용을 할 수 있었을 것이라고 생각하였습니다.

엔프티콘 발행하기

store를 통한 상태관리 필요성을 절실히 느낀 순간이었습니다.

단계별로 URL이 routing되는 것이 아니라, 단계별 컴포넌트가 show and hide되는 개념이었기에 data의 값을 유지하고 관리하는 것이 필요했습니다.

발행단계에 관한 store를 다음과 같이 생성하였으며 그에 따른 mutation과 action을 구성하였습니다.
propsdriling을 해결한 것도 좋았지만 mutation을 통해 비동기처리를 했기 때문에 로컬 컴포넌트에서 가독성또한 눈에 띄게 좋아졌습니다.

총평

처음으로 현업에 투입되어 매일 긴장하며 진땀을 뺏던 프로젝트입니다. 아무래도 사수분과 다른 개발자분들의 도움을 많이 받았기 떄문에 온전히 저의 코드라 할 수 없으나, 현업에서 일하는 방식을 알 수 있었던 기회였습니다.