LIKELION 13th DanGoa!
25.07.21 - 25.08.26
서경대학교 앞 지역 상권은 학교 학생들의 주요 소비처임에도 불구하고 현재 활성화 되어있지 않아 학교 근처 번화가인 성신으로 유출되고 있는 상태입니다.
그 과정에서 학교 학생들을 수소문 해 본 결과, 소수의 학교 앞 상권은 입소문과 단골 중심으로 운영되고 있음을 알았습니다.
저희는 그 이후 “단골”을 키워드로 잡고 실행한 설문조사에서 “쿠폰을 챙기는 게 번거롭다” 등의 불편함을 확인했으며,
특히 학생·청년층은 온라인 위주의 생활방식 속에서 지역 상권에 대한 접근성이 낮아지고, 상인들은 온라인 홍보나 고객 관리에 어려움을 겪어 지역 경제와 생활이 단절되는 문제가 드러났습니다.
단추는 “단추와 실”처럼 가게와 소비자를 연결하는 플랫폼으로,
지역 상권과 주민을 다시 이어주는 역할을 함과 동시에, 사용자의 소비 경험을 미션과 스탬프라는 방식으로 기록하고 추억할 수 있게 합니다. 또한, 단골 경험을 AI 기반 추천, 미션, 디지털 적립 서비스로 확장해 지역 경제를 활성화하고, 상인과 소비자 모두가 지속적인 관계를 맺을 수 있도록 설계되었습니다.
현재는 성북구를 주요 타깃 지역으로 설정하고 있으나, 향후 타 지역으로 확장할 예정입니다. 더 나아가 서울 페이나 지역 화폐와의 연계를 통해 결제 수단을 다양화하고, 지역 기반 소비를 촉진함으로써 지역 경제 활성화에 기여하고자 합니다.
 |
 |
|---|---|
| @wonee42 유혜원 | @Jeongmokjin 정목진 |
src
├── assets # 정적 리소스 관리 (icons, images, logos)
├── components # 공용 UI 컴포넌트
├── pages # 페이지 단위 화면
│ ├── Home # 홈 화면
│ ├── Login # 로그인 화면
│ ├── Mission # 미션 관련 화면
│ ├── Mypage # 마이페이지 화면
│ ├── Splash # 스플래시 화면
│ ├── Stamp # 스탬프 관련 화면
│ └── Store # 가게 관련 화면
├── shared # 공용 모듈
│ └── api # API 호출/연동 모듈
├── App.jsx # 루트 컴포넌트
├── main.jsx # 엔트리 포인트
└── index.html # HTML 템플릿
-
사용자 친화적인 UI/UX
• 모바일 환경에 최적화된 카드형 레이아웃과 하단 네비게이션 바를 적용하여 직관적인 탐색이 가능하도록 구현하였습니다.
• 버튼 크기, 폰트 크기, 터치 영역 등을 모바일 사용성을 고려하여 설계하였으며, 접근성을 강화하였습니다.
• 스탬프 적립, 미션 수행, 쿠폰 확인 등 주요 기능을 시각적으로 명확히 드러내어 사용자의 이해와 몰입감을 높였습니다. -
Assets 관리
• assets 디렉토리를 icons, images, logos로 구분하여 정적 리소스를 체계적으로 관리하였습니다.
• 일관된 디자인 시스템을 유지하고, 재사용성을 높였습니다. -
컴포넌트 분리
• components 디렉토리에 공용 UI 컴포넌트를 모듈화하였습니다.
• 반복되는 UI 요소를 재사용할 수 있도록 하여 코드 중복을 최소화하였습니다. -
페이지 단위 구조화
• pages 디렉토리를 기능별 화면 단위로 구분하였습니다.
• 예: Login, Mission, Mypage, Store, Stamp 등
• 각 페이지를 독립적으로 관리하여 유지보수성과 기능 확장이 용이합니다. -
공용 모듈 관리
• shared/api 디렉토리에 API 연동 로직을 모듈화하였습니다.
• 백엔드와의 통신 규칙을 일관되게 적용하여 협업 효율성을 강화하였습니다. -
환경 및 품질 관리
• .env를 통해 환경 변수를 분리하여 운영/개발 환경 모두에서 안전하고 유연한 실행이 가능하도록 하였습니다.
• vite.config.js를 통해 빌드 및 개발 환경을 관리하였으며,
• eslint.config.js를 적용하여 코드 품질과 일관성을 유지하였습니다.
이 프로젝트는 Vite 기반의 React로 작성되었습니다.
Node.js만 설치되어 있으면 되고, 별도의 런타임(pip/Gradle 등)은 필요하지 않습니다.
프로젝트 루트에서 아래 명령어를 실행하면 실행 스크립트와 번들러(Vite)가 준비됩니다.
npm install⚡ Vite는 ESBuild 기반이므로 설치와 시작이 매우 빠르며, 프론트엔드 개발 환경에 특히 유리합니다.
- 개발 모드 실행: 로컬 개발 서버 실행 (HMR로 코드 변경 즉시 반영)
npm run dev- 프로덕션 빌드: 정적 번들을 생성하여 배포 가능
npm run build- 배포 결과 미리보기: 로컬에서 빌드 결과를 서빙하여 확인
npm run preview예시:
Netlify에 배포 시
- Build Command:
npm run build - Publish Directory:
dist
백엔드 API 주소를 Vite에 알려주기 위해 프로젝트 루트에 .env 파일을 생성하고, 아래 내용을 추가하세요:
VITE_API_BASE_URL=https://api.danchu.site/api
⚠️ 본 서비스의 주요 기능(가게/미션 추천, 스탬프 적립 및 쿠폰 관리, 마이페이지 등)은
사용자별 데이터를 기반으로 제공되므로 로그인이 반드시 필요합니다.
- 회원가입, 로그인, Access Token 재발급 API를 제외한 모든 요청은 발급받은 Access Token을
Request Header에 포함해야 합니다. - 테스트 계정 로그인을 원할 경우, 아래 엔드포인트를 이용하세요.
POST /api/auth/login/test