§01Contributions
CRUD API 구현
  • 회원가입·로그인·아이디 중복 확인·회원 목록/삭제·세션 조회·로그아웃 API 구현
  • 상품 등록·단건 조회·엔티티 변경감지를 활용한 수정 API와 판매량 상위 10개 상품 조회 API 구현
  • 주문 생성 시 재고 차감·판매량 증가·총 주문금액 계산, 주문 목록(페이징)·주문 상품 상세·주문 상태 변경 API와, 취소 사유를 이력으로 남기는 주문 취소 및 취소 내역 조회/수정 API 구현
  • 이번 달·연간 매출, 진행 중인 주문, 월별 매출/순이익 차트, 인기 상품 차트 등 대시보드 조회 API 구현
  • 매출은 주문 기준, 원가는 주문상품 기준으로 각각 JPQL 집계 쿼리를 작성한 뒤 월 단위로 병합해 순이익 데이터를 산출하도록 구현
쇼핑몰 관리자 페이지 개발
  • Vue3 Composition API + Vuex + Vue Router 기반 SPA로 회원/상품/주문/일정 관리 및 매출 대시보드를 구현.
  • 백엔드 서버와 API 연동
공용 페이지네이션 컴포넌트 및 Vuex 전역 페이지 상태 설계
  • 동일한 페이징 UI가 필요한 여러 조회 목록 화면을 위해 공용 페이지네이션 컴포넌트를 구축.
  • 페이지 정보를 Vuex에 두고, 페이지 클릭 시 reqPage 값만 변경하면 각 화면이 이를 watch로 감지해 화면에 맞는 조회 API를 호출하도록 설계.
Chart.js 라이브러리르 이용한 차트 컴포넌트 구현
  • 연간 매출/순이익/주문수를 하나의 라인 차트에서 드롭다운으로 전환하도록 구성
  • props 변경을 watch로 감지해 차트 인스턴스를 재생성하지 않고 chartRef.update()로 데이터셋만 갱신해서 구현
오픈 API 기반 날씨 연동
  • navigator.geolocation으로 사용자 좌표를 획득
  • OpenWeatherMap에서 좌표 기반으로 날씨 정보를 받아와 날씨 코드에 맞게 아이콘을 매핑해서화면에 렌더링
FullCalendar 연동 일정 관리 기능 구현
  • 일정 정보를 콜백 함수로 등록해 달력에 보이는 기간만 서버에서 조회하도록 구성
  • 날짜 셀 선택 → 등록 팝업 → 일정 클릭 → 삭제 확인 흐름을 이벤트 핸들러로 분리하고, moment로 날짜 포맷을 서버 규격 (YYYY-MM-DD)에 맞춰 정규화.