[팀 프로젝트] JAEGO (편의점 재고 관리 앱 애플리케이션)

heegon·2025년 7월 25일
appnode.jsreactnative
0

프로젝트

목록 보기
3/4

프로젝트 개요

  1. 프로젝트명 : JAEGO (재고)

  2. 개발기간 : 2025.06.24 - 2025.07.25 (약 30일)

  3. 팀원 : 4명
    김서연 : 팀장(PM)
    JAEGO(재고) 프로젝트 아이디어 제안
    프로젝트 전체 일정 관리
    팀원 역할 분배 및 전체적인 팀 관리 담당
    전체 코드 병합 작업 진행

    박우현 : 백엔드 & 프론트엔드
    백엔드 API (재고관리 : inventory) 구현
    백엔드 API 전체 통합 진행
    DB.js 데이터베이스 파일 설계 및 구현
    프론트엔드 (폐기임박 상품목록 : dispose) 구현

    이차원 : 프론트엔드 & 백엔드
    탭 네비게이션을 활용한 메인화면 구현
    상품 카테고리 관련 화면 구현
    상품 카테고리 관련 백엔드 API 일부 수정 및 개선

    (본인)김희곤 : 백엔드 & 프론트엔드
    백엔드 API (폐기임박 : dispose / 카테고리 및 상품 : category) 구현
    프론트엔드 (카테고리별 상품목록 : showScreen / 상품별 상세목록 : detailScreen) 구현

  4. 프로젝트 아이디어의 시작
    4-1. 현재 편의점 물품 관리의 현 상황
    부족한 물건을 발주를 넣고, 발주 내역을 보고 본사는 물건을 지점으로 보내준다. 물건의 바코드를 바코드 스캐너로 찍어서 매장별 재고 관리 프로그램으로 상품 정보를 업로드하여 관리하게 된다.
    문제는 유통기한(소비기한)의 경우, 상품의 겉에 인쇄 혹은 스티커 형태로 출력되어 관리되는데 바코드를 찍어서는 유통기한(소비기한) 데이터까지 전산화가 되지는 않는다. 따라서 사람이 일일이 모든 물건의 유통기한 내역을 확인하여 관리를 해야 하는 문제가 발생한다.
    4-2. JAEGO 앱 서비스를 이용하면, 현재와 동일하게 바코드로 등록한 정보를 그대로 받아오고 사용자가 유통기한을 상품별로 기입한다. 사용자가 설정한 시간 내의 유통기한의 경우 알람 및 폐기 목록 조회 버튼을 통해 미리 폐기 임박 상품에 대한 안내를 받을 수 있다.

  5. 프로젝트 목표
    5-1. 기존의 본사에서 제공해주는 재고 관리 desktop 프로그램보다 편리하게 재고 관리를 할 수 있다.
    5-2. 유통기한(소비기한) 데이터에 대한 전산화 진행.
    5-3. 앱 애플리케이션을 통한 GUI 환경 제공으로 사용자의 사용 편의성 증가

  6. JAEGO 주요 기능 목록
    6-1. 재고 등록 (실제 GS25 재고 관리 사이트에서 엑셀 데이터를 주기적으로 받아와서, JAEGO 앱으로 데이터 전송)
    6-2. 등록된 상품들을 카테고리별 분리 가능 (편의점 점주 혹은 직원이 상품들을 임의로 카테고리화하여 관리 가능)
    6-3. 유통기한 알림 기능 (앱을 통한 유통기한(소비기한)의 전산화. 그리고 유통기한(소비기한) 임박 N시간 전을 설정하여 폐기 임박 상품만 조회 가능)
    6-4. 상품별 전체 재고량 조회 기능과 더불어, 동일한 유통기한별 재고량 조회 기능 구현.

설계

UI 디자인

ui디자인시안
앱 시작화면은 MainScreen 에서 시작된다. 아래 카테고리를 선택하게 되면 카테고리별 상품목록이 SearchScreen 에서 출력된다. SearchScreen 에서 상품명을 클릭하면 같은 이름의 상품의 상세 목록 (productScreen) 페이지로 이동하여, 해당 상품의 전체 수량과 유통기한별 수량이 각각 출력된다. MainScreen에서 dispose(폐기 임박 상품 목록) 조회 버튼을 클릭하면 disposeScreen 으로 이동하여 폐기 임박 상품의 목록을 조회할 수 있다.

기술 스택

  1. FrontEnd : React Native
    크로스 플랫폼 : 하나의 코드로 iOS와 Android 앱 모두 개발 가능
    핫 리로딩 : 개발 중 코드 수정 시 앱을 다시 실행하지 않고도 즉시 반영

  2. BackEnd : Node.js
    자바스크립트 언어를 사용해 서버를 개발할 수 있게 해주는 환경.
    npm (오픈소스 패키지 저장소 사용 가능)

  3. DB : SQLite
    별도의 서버 프로세스 없이 진행.
    라이브러리 기반으로 앱에 직접 포함되어 배포됨.
    모든 데이터가 하나의 .db 파일에 저장됨.

구현

사용 라이브러리 및 패키지

axios
HTTP 요청을 보내기 위한 Promise 기반 클라이언트.
API 호출에 사용

express
Node.js 웹 프레임워크.
백엔드 API 서버를 구축하는데 사용.

cors
Express 서버에서 Cross-Origin Resource Sharing 설정을 도와주는 미들웨어.

multer
Express 기반 앱에서 파일 업로드를 처리하는 미들웨어

sqlite3
Node.js 에서 SQLite 데이터베이스를 사용할 수 있도록 해주는 패키지

xlsx
Excel 파일 (.xlsx, .xls 등) 의 읽기/쓰기를 지원하는 라이브러리.

@react-native/new-app-screen
React-Native 앱 초기 화면 구성에 사용되는 컴포넌트 패키지.

@react-navigation/material-top-tabs
상단 탭 내비게이션을 구현할 수 있는 라이브러리.

react-native-safe-area-context
아이폰X 이후 노치, 홈바 등 안전 영역을 고려한 UI 구성을 도와주는 라이브러리.

@react-navigation/native-stack
React Navigation에서 제공하는 Native Stack Navigatior로, 화면 간 이동을 스택 구조로 처리.

@react-native-vector-icons/ant-design
Ant Design 아이콘 세트를 React Native 에서 사용할 수 있게 해주는 라이브러리.

react-native-ionicons
ionicons 아이콘을 React Native 에서 사용할 수 있도록 해주는 패키지.

디렉터리 구조

디렉터리 구조

프로젝트 후기 및 느낀 점

KDT 수업 외에도 4명으로 팀을 만들어서 팀프로젝트를 진행했다. 편의점 재고 앱 어플리케이션인데, 현재 편의점 재고의 문제점인 유통기한과 소비기한까지 전산화하는 것을 목표로 시작한 프로젝트이다. 결론적으로 유통기한(소비기한)의 관리를 자동화까지 하는 것에는 실패했지만, 앱 어플리케이션을 한 번도 경험해보지 못한 나에게는 앱 어플리케이션의 기본적인 구현을 공부해 볼 수 있는 기회였다. 리액트 네이티브도 처음 써봤고, 안드로이드 스튜디오도 처음 써보고, 애뮬레이터는 너무 신기하다. Node.js 도 처음 써보았다. 다음 팀프로젝트도 앱 어플리케이션으로 진행해보고 싶다. GUI가 정말 이쁘게 잘 나오는 것 같다.

profile
heegon
❤️
이전 포스트

[팀 프로젝트] 코코아톡 (PC 메신저 프로그램)

다음 포스트

[팀 프로젝트] hospiTrack 병원 프로그램 (병원 EMR)

0개의 댓글