WEB_MiliDream_Dreamers

군인들을 위한 진로 설계 및 취미 공유 웹 플랫폼 MiliDream(밀리드림)입니다.

발표자료	시연영상

Project name and Logo

Mili Dream

프로젝트 소개

MiliDream은 Military와 Dream을 합쳐서 만들었으며, 군대에서 꿈을 찾는 사람들을 위해 개발한 서비스입니다. 군대에 있는 동안 무엇을 하면 좋을지, 군대를 나온 후에 무엇을 할지 막막합니다. 이는 국방의 의무를 지고 있는 군인 누구나 느끼는 감정일 것입니다.
군대에 있는 기간 동안 군대에서 할 수 있는 대회/공모전 활동이 많은데 몰라서, 혹은 같이 할 사람이 없어서 하지 못하는 경우가 비일비재합니다.
그래서 진로 고민에 도움을 주고, 여러 대회/공모전에 좀 더 쉽게 참여할 수 있도록 MiliDream이라는 서비스를 만들었습니다.

Mili Dream 만의 독창적인 기능

1. 진로 설계 보조

• 군 장병 누구나 진로유형검사를 통해 나만의 진로 유형을 빠르게 알아볼 수 있고, 여기에 맞는 목표를 추천받아 구체화하고 설계할 수 있습니다.
  • 검사는 추상적이지 않도록 구체화하여 결과를 제공합니다.
  • 검사 결과를 카카오톡으로 공유할 수 있게 하였습니다.

2. 군 장병을 위한 대회/공모전 파악 및 팀원 모집

• 군 장병 대상으로 열리는 대회/공모전 파악이 용이하고, 커뮤니티를 활용하여 같이 대회/공모전에 나갈 사람을 모집할 수 있습니다.
  • 여러 곳에 흩어져 찾아보기 어려웠던 대회/공모전 정보를 모아 볼 수 있습니다.
  • 부대에서 혼자서 선뜻 나가기엔 어려웠지만 같이 나갈 사람을 커뮤니티에서 찾아볼 수 수 있으므로 여러 대회/공모전에 적극적으로 참여할 수 있습니다.

3. 군 장병을 위한 취미 공유 커뮤니티

• 다양한 취미에 따른 게시판들을 통해 마음이 맞는 사람들끼리 다양한 주제로 이야기를 나누어 볼 수 있습니다.
  • 취미/관심사/부대 별로 나누어져 있는 게시판을 통해 정보도 공유할 수 있고 관련 궁금증도 해결할 수 있습니다.
  • 다양한 사람들의 이야기를 통해 자신이 군 내에서 해야할 일을 정리해보고 진로 설계에 도움받을 수 있습니다.

이러한 기능을 통해 MiliDream은 이전에 없던 군 장병 대상의 진로 설계 서비스를 커뮤니티와 융합하여 더욱 효과적으로 장병들에게 다가갈 수 있습니다.

Mili Dream 서비스의 기대효과

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

• ECMAScript 2020 (ES11) 지원 브라우저 사용 권장
• Google Chrome 버젼 77 이상 권장

기술 스택 (Technique Used)

Language

Javascript

Server Management Tools

pm2	nodemon

Server(back-end)

Nodejs v16.17.0	Express v4.16

Database

MariaDB

Web Application(Frontend)

React	Next

Design Tool

Bootstrap

사용된 오픈소스(Used Open Source)

• axios
• eslint
• frontend
  • next-images
  • quill
  • slick
  • styled-components
  • zustand
• backend
  • cookie-parser
  • cors
  • debug
  • dotenv
  • express-session
  • helmet
  • http-errors
  • jade
  • method-override
  • morgan
  • multer
  • passport
  • sanitize-html
  • winston
  • cors
  • jsdoc
  • prettier

설치 안내 (Installation Process)

git clone

$ git clone https://github.com/osamhack2022/WEB_MiliDream_Dreamers.git
$ cd WEB_MiliDream_Dreamers

backend

.env.example 파일을 이용해 백엔드 API를 프론트의 /api 하위로 연결하기 위한 .env 파일을 작성해 주세요! MariaDB 설치 및 실행한 후, 명령어를 실행하면 됩니다.

$ cd backend
$ npm install
$ npm start

frontend

$ cd frontend
$ npm install
$ npm run dev
# or
$ yarn install
$ yarn dev

자세한 설치 및 실행 방법은 /backend와 /frontend의 README.md를 각각 참고해주세요!

• 추가적인 backend API, page route, Git Flow, Commit Convention, Directory Structure 등은 저희 Wiki를 참고해 주세요!

프로젝트 사용법 (Getting Started)

1. ᐅ 메인 화면 소개 (main)

첫 화면 상단

첫 화면 상단에서는 상단 네비게이션 바를 통해 원하는 페이지로 이동할 수 있고, [바로 유형검사] 버튼을 통해 로그인 없이 검사부터 진행해 볼 수 있습니다.

첫 화면 하단

첫 화면 하단에서는 각 이미지 버튼을 통해 원하는 세부 기능 페이지로 바로 이동할 수 있습니다.

2. ᐅ 로그인 및 회원가입 (login / signup)

로그인

[시작하기] 버튼 혹은 상단 바의 [로그인] 버튼을 누르면 로그인 모달 창을 띄워, 따로 페이지 이동 없이 편히 로그인 가능하게 UI 디자인 했습니다.

회원가입

[회원가입] 버튼을 눌렀을 때 이동되는 페이지입니다. 사용자의 기본적인 정보를 받으며, 최소한의 정보로 계정을 만들 수 있도록 했습니다. 로그인이 안 된 상태면 회원가입을 먼저 해 달라는 안내가 뜹니다.

3. ᐅ 진로 설계 (map)

진로 설계

진로 설계 페이지에서는 사용자가 현재 필요한 진로 수준에 대한 정보를 얻을 수 있도록, 3 단계로 나누어 각각의 상세 서비스로 연결하였습니다. 먼저 자신의 진로 유형을 분석한 후, 진로를 설계하며, 이를 다른 사람들과 공유하며 발전시킬 수 있도록 기획하였습니다.

유저 프로필

상단 바의 [프로필] 버튼으로 자신만의 프로필을 만들고, 정보를 추가하고, 조회할 수 있게 하였습니다. 유형 검사에서 나온 자신의 유형을 바탕으로, 자신만의 진로 세부 목표를 설정하고 칸반 보드 형식으로 관리할 수 있습니다.

4. ᐅ 게시판 (board)

게시판 메인화면

게시판 메인 화면에서는 유저 개인 프로필, 검색, 공지사항, 부대별/취미별 게시판 등 다양한 세부 페이지로 가는 버튼을 넣었습니다. 가운데 이미지 carousel을 통해 추후 추천 공모전, 광고, 공지사항 등을 띄울 수 있습니다. 중앙에는 각 게시판을 격자 배열한 후 게시판들에서 몇 개의 글만 추려서 빠른 접근이 가능하도록 디자인하였습니다.

게시글 검색

게시글을 원하는 단어로 검색하면 최대한 비슷한 글들까지 뜨도록 개발하였습니다. 이를 통해 사용자는 원하는 정보를 쉽고 빠르게 찾아낼 수 있습니다.

게시글 화면

게시글을 누르면 해당 게시글 화면으로 넘어갑니다. 작성자와 시간, 댓글 정보를 볼 수 있습니다. 추천, 신고 버튼이 있으며 댓글을 달아 자신의 의견을 표현하고 소통할 수 있습니다.

게시글 수정

게시글 작성 기능과 함께 오픈소스인 Quill-editor 기반으로 제작하였습니다. 이미지, 링크 등 다양한 것들을 추가한 글을 작성할 수 있습니다.

5. ᐅ 공모전 (contest)

공모전

공모전 페이지에서는 특히 군에서 진행하는 공모전을 중심으로 정보를 모아서 보여주는 것으로 기획하였습니다. 이 공모전들을 보고 게시판에서 함께 나갈 팀원도 구인할 수 있습니다.

6. ᐅ 유형 검사 (career/survey)

진로 유형 검사 메인 화면

설문을 통해 자신만의 진로 유형을 검사할 수 있는 기능입니다.

진로 유형 검사 진행 화면

병영생활 도중 흔히 맞닥뜨리는 상황에서 자신은 어떻게 행동할 것인지에 대한 질문으로 이루어져 있습니다.

진로 유형 검사 완료 화면

설문을 완료하면 각각의 가중치에 따라 나만의 진로 유형을 보여줍니다. 구체적으로 작성하려고 노력했으며, 이러한 유형을 가진 사람은 어떤 진로가 좋을지도 추천받을 수 있습니다.

협업 과정

저희는 모두가 다른 부대 소속이고, 직접 만날 수가 없었기 때문에 협업은 전부 온라인으로 진행되었습니다.
[Notion] 을 통해 문서화 작업을 진행했으며, Discord를 통해 실시간 소통을 했고, Figma를 통해 디자인 작업을 함께 진행하고 확인했습니다.

팀 정보 (Team Information)

프로젝트 : MiliDream
팀명: Dreamers

📝성명	🎖️소속	🚩역할	🐱깃허브	📩이메일
김지환 (팀장)	육군 제37보병사단 정보통신대대 전산과	프론트엔드 개발 기획
김선우 (백엔드 팀장)	공군 작전정보통신단 체계개발실 감시정찰체계팀	백엔드 개발 디자인 아키텍처 설계
가수연	육군 육군사관학교 사이버방호실	백엔드/프론트엔드 개발 DB 설계
민진홍	해군 작전사령부 잠수함사령부 제909교육훈련전대 제1훈련대대	프론트엔드 개발
추인엽	육군 제7공병여단 572공병대대	백엔드/프론트엔드 개발
손현진	국방부 국군지휘통신사령부 57정보통신대대	프론트엔드 개발 발표 자료 제작 발표 영상 제작
양승모	육군 수도방위사령부 56사단 기동대대	디자인 발표 자료 제작

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

• MIT

This project is licensed under the terms of the MIT license.

이 프로젝트는 MIT 라이센스를 따릅니다.