sttock.png

🔗 https://sttock.vercel.app









softcon-docs.jpeg

🥇 2023-1학기 아주대학교 SOFTCON 미디어프로젝트 부문 최우수상(1위), 인기상(온라인투표) 1위 수상작




📜 Contents

해당 서비스는 아주대학교 미디어프로젝트 수업 내 프로젝트이자 2023 아주대학교 SOFTCON에 출품한 프로젝트입니다.


1. Description

sttock-3.png

본 서비스는 가정집에 생활용품 재고관리 개념을 적용하여 보다 현명한 소비가 가능한 사용자 경험을 제공하고자 했습니다. 여성의 월경 관리 어플리케이션에 착안하여 구체적으로는 상품의 다음 예상 구매 시기를 예측하고 구매 예정일을 계산하는 로직을 적용하고 있습니다. 이를 통해 개개인이 자신의 생활용품을 관리하는 과정 자체를 형식화 하는것을 목표로 하고자 합니다.


2. Background

sttock-1.png


### 3. Feature

유저가 생활소비재를 구매하여 상품정보를 입력하면, 각 소비재의 평균사용량을 이용하여 소진 예상일자를 계산합니다.

sttock-2.png

  • 상품 등록 구매한 상품의 상품명, 구매일자, 용량, 개수 등을 입력하여 스똑 내부 로직에 의한 사용예상일수와 예상소진일을 받게 됩니다. 해당 상품 사용중지, 소진, 아직 사용중 등을 표시하여 계산 로직의 정확성을 더하고자 합니다.

  • 이번주 구매 근 7일 이내로 소진 예정, 구매 예정인 상품 목록을 보여주는 부분입니다. 유저는 ‘이번주구매’ 기능을 이용하여 지금 당장 필요한 상품만의 구매를 고려하게 될 것입니다.

  • 스똑 캘린더 상품들의 현황을 달력형태로 볼 수 있는 부분입니다. 날짜를 클릭하면 변동사항이 있는 상품이 있는 경우 해당 상품을 노출합니다. ‘스똑캘린더’를 통해 각 상품을 언제 구매해야 하는지를 미리 파악함으로써 계획적인 소비습관을 가질 수 있게 됩니다.

  • 항목별 보기 상품들의 카테고리에 따라 보여주는 부분입니다. 정렬방식, 카테고리, 상태에 따라 필터링해서 상품을 확인할 수 있습니다. 프로그래스 바와 현 상태 정보를 볼 수 있으며 상세보기를 통해 상품의 세부적인 정보를 확인할 수 있습니다.


3. Develop

  • 2023 SOFTCON 출품 당시 : 프론트엔드1, 백엔드1, 기획1
  • 2024 리팩토링: 프론트엔드2, 백엔드2, 기획1



✅ Core Role

  • PM - 아이디어 기획 및 발표 경쟁사 분석 및 비즈니스 모델 설계
  • FE 전반 개발 - 전체 UI 구현, 예상 소진일자 계산, 및 연동, 상품 정보 및 추가 api 연동



⛏️ Growing Points


1. 기술 스택

  • Next 13 Page Router
  • Typescript
  • Tailwind CSS
  • React-Query
  • 클라이언트 배포 : Vercel

🚚 마이그레이션 진행

2023 소프트콘 출품 당시 React, JS를 활용하여 구현했습니다. 2024 마이그레이션 당시 SEO 최적화, metadata 간편 생성과 서버 컴포넌트를 활용하기 위해 page router 기반 Next.js를 채택하게 되었습니다.그 후 안정성을 높이기 위해 Typescript를 사용했습니다.



2. 트러블 슈팅


🚨 문제 배경

category.png 데이터 베이스에 표기되는 재고의 개수와 용량 표기 ml, kg, 개, 매 등 사용자의 편의를 위해 다양한 변수를 제공하고 해당 변수를 DB에도 등록할 것인지에 대한 문제가 있었습니다.


⭐️ 해결 방법

db.png

사실 어떤 단위 표기도, 계산 로직은 상수로만 이루어진다는 것을 감안하였습니다. 결과적으로, DB 내부에는 상품 단위 변수를 통일하고 UI 상 매, 개, ml, kg, l, g 을 모두 제공하기로 했습니다. ml, L와 같이 같은 단위지만 크기의 차이가 있는 경우도 유저의 편의를 위해 모두 포함 시켰습니다.

예를 들어, 유저가 구매한 상품이 3L로 표기되어 있다면, ml만 상품 항목에 있을 경우에 3000ml로 등록해야한다고 한번 더 생각하게 만드는 과정을 없애는게 UX 상 좋은 방식이라고 판단했습니다.

3. 구현 사항


🚚 React, JS -> Next, TS

졸업프로젝트가 끝난 후 백엔드1, 프론트엔드1 개발자가 추가되어 마이그레이션을 진행했습니다. 현재는 Next page router와 타입스크립트로 구현되어 있습니다. 넥스트 13에 대한 이해와 SSR 경험을 쌓을 수 있었습니다. 그 외에, meta tag를 작성해보며 SEO에 대한 고려를 해볼 수 있었습니다.


🗂️ MSW

백엔드와 프론트엔드에 개발 속도 차이가 발생할 수 밖에 없기 때문에 목업 데이터로 테스트 해보기 위해 사용하였습니다. 뒤늦게 합류한 백엔드 팀원의 개발을 기다리면서 API가 나오지 않은 부분에 대한 대기 시간 동안 MSW를 사용하여 목업데이터를 사용해 다른 부분의 컴포넌트 구현을 진행했고, 기간 내에 구현을 마칠 수 있었습니다.

(현재는 마이그레이션 이후 MSW 를 떼어낸 상태입니다.)


📆 달력과 날짜

date2.png date.png

DatePicker, Dayjs 를 통해 캘린더 상 오늘 소진되는 상품 정보를 불러오기와 상품 추가 기능 구현했습니다. 이를 통해 리액트 캘린더 라이브러리 없이 모달을 만들었으며, 평균 구매주기를 예측해 계산하는 로직을 실행시킬 수 있었습니다.



4. Communication

softcon-me.jpeg


👀 사용자의 관점 이해

프론트엔드 개발 팀원으로서 프로젝트의 계획 및 분석 단계에 적극적으로 참여했습니다. 이 경험을 통해 소프트웨어 서비스를 만들 때 사용자의 관점을 고려하는 것의 중요성을 깊이 이해하게 되었습니다.

또한, IA와 기획안, Figma로 디자인된 프로토타입을 프로젝트에 직접적으로 적용했습니다. 이를 통해 요구 사항과 기능을 더 잘 이해할 수 있었으며, UI와 UX를 고려한 프로덕트가 될 수 있었습니다.


🫂 PR 및 이슈 관리, 협업

협업을 원활하게 하기 위해 Figma, Github-wiki, Github-Issue와 같은 도구들을 사용하여 진행 상황을 문서화하고 커뮤니케이션하며, 이슈를 관리하고 풀 리퀘스트를 추적했습니다. 이러한 접근 방식을 통해 조직적으로 일할 수 있게 돕고자 했습니다.


✍🏼 코드 리뷰와 리팩토링

미디어 프로젝트 담당 멘토링을 신청하여 현직 멘토와 Slack을 통해 코드리뷰와 피드백을 경험하고 개선할 수 있었습니다. 이 과정을 통해 코드베이스를 더 깊이 이해하고 리팩토링 과정을 경험해볼 수 있었습니다.

코드의 가독성과 유지보수성을 향상시키기 위해 사용자 인터페이스를 작은, 재사용 가능한, 컴포넌트로 분리하여 관리와 수정이 더 용이하도록 했습니다.