Skip to content
This repository has been archived by the owner on May 1, 2022. It is now read-only.

Latest commit

 

History

History
636 lines (580 loc) · 23.3 KB

README.md

File metadata and controls

636 lines (580 loc) · 23.3 KB
Raw

👀 프로젝트 소개 (Introduction)

BarberForce Youtube
▲ BarberForce 프로젝트 시연영상

✂️바버포스(BarberForce) 는 국군 장병을 위한 미용시설 예약 웹 서비스입니다. 부대 주변의 미용실이나 이발소를 예약하고 방문한 뒤 리뷰를 공유할 수 있는 모바일 웹 서비스입니다. 이에 더하여 부대 인근 편의시설 방문 후기 게시판과 같은 커뮤니티 기능을 마련해, 군 장병들의 소통의 장이 되고자 합니다.

💼 기획 배경 (Background)

국군 장병들은 기존의 이발병 제도와 코로나19 팬데믹 상황으로 인해 아래와 같은 고충을 겪고 있습니다.

  • 💇 열악한 이발도구 및 시설의 지속과 이발 미경험자 이발병 차출로 병사의 이발환경이 악화되었습니다. 이로 인해 병사 이발환경의 개선 필요성이 부각되었습니다.
  • 💸 병사 이발비 예산으로 421억원을 편성하고, 2021년부터 병사에게 월 1만원의 이발비를 지급하기 시작했습니다. 그러나 짧은 주기로 관리를 해야 하는 병사의 두발규정 상 월 1만원의 이발비는 많이 부족합니다.
    • 프랜차이즈 미용실 남성 1회 커트 평균 비용 22,220원
  • 🚫 현행 이발병 제도가 폐지되면 외출 시에만 이발이 가능해질 것입니다. 그러나 외출·외박을 장기간 실시하지 못해 부대 인근 이발시설을 파악하고 있는 병사 수가 많이 줄었습니다.
    • 미용시설 수요가 급증하겠지만, 미용시설에 대한 사전 정보(위치, 가격, 후기 등)는 많이 부족할 것입니다.
  • 📉 군 장병들의 출타 제한으로 군부대 인근의 지역상권이 급격히 침체되었습니다.
    • 돌파감염으로 인해 ‘위드 코로나’ 시대에도 여전히 중요한 병력 방역관리, 그리고 지역경제와의 상생이라는 두 마리 토끼를 모두 잡기 위한 수단이 절실합니다.

📦 기능 설명 (Functionality)

✂️바버포스는 이러한 문제점을 해결하고, 군부대와 지역사회의 상생을 도모하는 장병들의 소통 창구가 되고자 합니다.

로그인 화면
로그인 화면 		회원가입 화면
회원가입 화면 		카카오로그인 화면
카카오로그인 화면 		추가정보 입력 화면
추가정보 입력 화면
로그인 화면에서는 카카오톡과 이메일 2가지 방법으로 로그인 할 수 있습니다. 회원가입 페이지에서는 카카오톡과 이메일 2가지 방법으로 가입할 수 있습니다. 카카오톡으로 가입할 경우 카카오로그인 화면으로 넘어가서 카카오톡 계정을 인증하고 정보 제공 동의를 합니다. 카카오 인증이 완료된 후에 추가정보를 입력하는 페이지로 넘어갑니다.
회원가입 화면
회원가입 화면 		이메일 등록 화면
정보입력 화면 		회원가입 화면
정보입력 화면 		카카오로그인 화면
가입 성공
회원가입 화면에서 이메일 회원가입을 선택한 경우 정보 입력화면으로 넘어갑니다. 조건에 맞는 이메일과 비밀번호를 입력하고 다음페이지에서 추가 정보를 입력합니다. 이름, 별명, 전화번호, 군번 그리고 계급 정보를 입력합니다. 가입한 이메일로 로그인을 하면 BarberForce 서비스를 이용할 수 있습니다.
홈페이지
홈페이지 메인 		홈페이지 하단
홈페이지 하단 		메뉴 탭
우측 메뉴 탭
로그인에 성공하면 위와 같은 홈페이지가 보입니다. 중앙에는 미용실 배너가 위치해있고 슬라이드해서 다른 미용실을 살펴볼 수 있습니다. 하단에 위치한 배너는 사용자들이 머리깎고 뭐하지 게시판에 작성한 게시글들 중 추천수가 높은 것들을 보여줍니다. 페이지 하단에는 게시판으로 이동할 수 있는 더보기 버튼이 있으며 최하단에는 내가 속한 부대의 제휴 미용실을 보여주는 '미용실 정보', 머리깎고 뭐하지 게시판으로 이동하는 '맛집 리스트', 자유 게시판으로 이동하는 '자유 게시판' 버튼 등이 있습니다. 우측 상단에 있는 버튼을 누르면 메뉴 탭이 뜹니다. 이곳에서는 내 정보를 볼 수 있는 '마이페이지', 내 예약들을 볼 수 있는 '내 예약'과 다른 페이지들로 이동할 수 있는 메뉴들이 위치해있습니다.
프로필
마이페이지 		정보 수정
내 정보 수정 		내 예약
내 예약 		메뉴 탭
우측 메뉴 탭
'마이페이지'에서는 현재 로그인한 사용자의 정보를 볼 수 있습니다. 수정하기 버튼을 통해 이름, 닉네임, 이메일, 휴대전화, 계급등을 수정할 수 있습니다. '내 예약'에서는 다가오는 예약과 과거 예약을 살펴 볼 수 있습니다. 다가오는 예약을 클릭하여 예약 날짜와 시간, 용무를 수정하거나 취소할 수 있습니다.
미용실 정보
미용실 정보 		미용실 정보
미용실 정보(리뷰) 		예약 페이지
예약 페이지 상단 		예약 페이지
예약 페이지 중단 		예약 페이지
예약 페이지 하단
'미용실 정보'에서는 내가 속한 부대와 제휴를 맺은 미용실 목록과 별점같은 정보들을 보여줍니다. '미용실 정보'에 화살표 버튼을 누르게 되면 해당 미용실을 이용했던 사용자들의 별점과 리뷰를 볼 수 있습니다. 미용실 배너나 미용실 정보를 통해 예약 페이지로 넘어 날짜와 시간을 선택해서 예약을 할 수 있습니다. 예약 페이지 중단에는 미용실을 이용한 사용자들의 별점과 리뷰를 볼 수 있습니다. 예약 페이지 하단에는 미용실의 세부 위치, 영업시간, 커트 비용, 정보를 볼 수 있습니다.
예약 확인
예약 확인 페이지 		미용실 정보
홈페이지 메인 		예약 페이지
미용 완료 확인 		예약 페이지
예약 페이지 중단
예약 확인 페이지에서는 내가 예약한 내용을 보여주며 하단에 위치한 예약 확인 버튼을 눌러 예약을 완료할 수 있습니다. 예약을 완료하면 홈페이지 메인에서 내가 예약한 미용실과 예약 내용을 확인 할 수 있고 수정/취소하기 버튼을 통해 '내 예약'으로 이동하여 예약을 수정하거나 취소 할 수 있습니다. 취소되지 않은 미용실 예약이 시간이 지나게 되면 미용을 완료했는지 확인하는 페이지로 바뀌게 됩니다. 예를 선택할 경우 미용실에 대한 리뷰와 별점을 작성할 수 있습니다.
머리깎고 뭐하지
머리깎고 뭐하지 		게시글 작성
게시글 작성 		댓글 작성 및 추천
댓글 작성 및 추천 		홈페이지 배너
홈페이지 배너
머리깎고 뭐하지와 자유게시판에서는 다른 사용자들이 작성한 게시글들을 시간/추천순으로 정렬하여 볼 수 있습니다. 게시판 우측 상단에 글쓰기 버튼을 누르면 제목과 내용을 입력하고 게시글을 작성 할 수 있습니다. 관심있는 게시글을 누른 후에 댓글을 달 수 있고 마음에 드는 게시글과 댓글을 추천하여 배너에 노출되게 할 수 있습니다. 내가 작성한 게시글은 홈페이지 배너에 추천순으로 배치되어 확인할 수 있습니다.

🎁 기대 효과 (Expectations)

  • 💈 군부대와 미용시설간의 직접 연결·사전 계약을 통해 지역사회와의 상생을 꾀합니다.
    • 이발이 까다롭지 않은 병사의 두발규정을 이용해 병사의 이발비를 낮출 수 있습니다. 이를 통해 병사의 이발 주기를 줄여 두발 상태를 양질화할 수 있습니다.
    • 기존의 플랫폼은 직접 알아보고 본인의 업체를 등록해야 하지만, 바버포스는 부대 측에서 사전 연락을 취하므로 디지털 플랫폼에 소외된 취약 계층에 큰 도움을 줍니다.
  • 🩺 ‘위드 코로나’ 상황에서 외출·외박이 시행될 경우 병사 외출의 가장 많은 사유는 ‘이발’입니다. 돌파감염의 방지가 중요한 현재 상황에서 바버포스는 병력의 효율적인 방역관리에 도움이 됩니다.
    • 미용시설측에 사전 소독 및 온도체크 등 방역 협조를 요청하고, 동의한 업체에 대해 소독/방역여부를 표시합니다.
  • 🔒 부대 및 병영 내 정보통신장비 보안위규 문제에서 자유롭습니다.
    • 바버포스는 상권의 위치정보만을 활용하며, 군 내 정보나 인트라넷 체계, 또는 별도의 전자기기를 요구하지 않는 프로젝트입니다.
  • 💬 병사 이발외출 수요를 통해 인근 지역상권에 보탬이 되며, 병사간의 건전한 소통 창구를 마련합니다.
    • 지역상권 내 편의시설 방문 후기를 작성하고 공유할 수 있는 ‘머리깎고 뭐하지?’ 게시판을 구축합니다.
  • 🌟 최종적으로, 병사 이발여건을 개선하고 지역경제 활성화에 공헌합니다. 이를 통해 이발비 지급 정책의 기존 목적을 달성하고 정상화시킵니다.

💾 컴퓨터 구성 / 필수 조건 안내 (Prerequisites)

Google Chrome
Google Chrome 		Microsoft Edge
Microsoft Edge 		Mozilla Firefox
Firefox 		Safari
Safari
☑️ ☑️ ☑️ ☑️

🗃️ 기술 스택 (Tech Stacks)

Tech Stacks

🖼️Front-end 🔙Back-end

📘 설치 안내 (Installation Process)

1. 프로젝트 Clone

cd /YOUR/DIRECTORY
git clone https://github.com/osamhack2021/WEB_BarberForce_Duty-Free.git

2. 백엔드 의존성 설치 & 서버 실행

cd "WEB(BE)"
npm install --no-save

이후, .env 파일을 생성하여 jwt 토큰에 사용될 시크릿 키 문자열을 설정해주어야 합니다.

vi .env
# SECRETTOKEN=설정할_시크릿_키

서버를 실행합니다.

(여기서는 개발 서버를 실행하는 방법입니다. 프로덕션 서버일 경우 pm2 등을 사용합니다.)

npm run dev

3. 프론트엔드 의존성 설치 & dotenv 설정 & 서버 실행

cd "../WEB(FE)"
npm install --no-save
cp .env
# .env 관련 설정 후 (하단 참고)
npm run dev

회원가입시, 군번은 20-70000000 ~ 20-70020000 사이 범위의 군번을 입력해주세요.

프로덕션 서버일 경우 pm2 등을 사용합니다.

.env (dotenv) 설정 관련

./WEB(FE)/.env.example 을 복사하여 .env 파일을 생성하면, 초기 상태는 아래와 같습니다.

# kakao keys (https://developers.kakao.com/console/app/641963)
KAKAO_REST_KEY=
KAKAO_JAVASCRIPT_KEY=
# kakao login redirect
KAKAO_REDIRECT_URI=https://api.barberforce.shop/kakao/callback
# backend url (change for localtest..)
BACKEND_URL=https://api.barberforce.shop

여기서 KAKAO_REST_KEY 와 KAKAO_JAVASCRIPT_KEY 는 카카오 개발자 센터의 생성한 앱의 키값을 적어주면 됩니다. (참고: TEAM Duty-Free 의 앱)

KAKAO_REST_KEY 와 KAKAO_JAVASCRIPT_KEY 는 각각 카카오 로그인, 카카오 지도 API 에서 사용합니다.

KAKAO_REDIRECT_URI 는 카카오 로그인 시 OAuth 처리를 위해 리다이렉트 시킬 URL 입니다.

BACKEND_URL 은 프론트엔드 코드에서 API를 사용할 때 사용되는 BaseURL 입니다. 로컬에서 서버를 구동중인 경우, http://localhost:포트 로 설정해주시면 됩니다. (백엔드 기본포트: 3306)

카카오 로그인 등 리다이렉트 URL이 실제 서버 도메인과 연결된 서비스는 별도 카카오 API 관련 설정을 하지 않을 경우, 로컬 환경에서 관련 기능이 동작하지 않을 수 있습니다.

👨‍💻 팀 정보 (Team Information)

Duty-Free 팀을 소개합니다.

📷 사진 ✔️ 역할 📛 소속, 이름 👔 담당 📪 이메일, GitHub
Se Lee 팀장 공군작전정보통신단
병장 이세 		기획, 디자인, 프론트엔드
Chanhyuk Byeon 팀원 공군작전정보통신단
병장 변찬혁 		프론트엔드, 백엔드
Sangwook Park 팀원 공군작전정보통신단
병장 박상욱 		백엔드
Jongyoul Lee 멘토 LINE
이종열 멘토님 		PM, FE, BE 멘토링

©️ 저작권 및 사용권 정보 (Copyleft / End User License)

This project is multi-licensed under the terms of the MIT license, Apache License 2.0, and BSD 2-Clause.