Coder Social home page Coder Social logo

osamhack2022 / web_ai_miliroutine_miliroutine Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 6.0 98.34 MB

밀리루틴(MILIROUTINE) - 군생활 루틴 공유 서비스 | 지키고 싶은 밀리루틴을 만들고, 함께 인증해보세요!

License: MIT License

JavaScript 24.40% HTML 0.43% CSS 1.50% TypeScript 47.84% Python 24.68% Dockerfile 0.26% Shell 0.90%
hackathon-project website express react-ts-tailwindcss

web_ai_miliroutine_miliroutine's Introduction

밀리루틴(MILIROUTINE) - 군생활 루틴 공유

MILIROUTINE Logo

군대에서 시작하는, 나의 사소한 루틴 쌓기.
지키고 싶은 밀리루틴을 만들고, 함께 인증해보세요!

https://miliroutine.kr

💡 Service Needs | 기획 의도

군생활을 의미있게 보내려 노력하는 사람들이 정말 많습니다. 매일 헬스장 가기, 자격증 공부하기 등의 목표를 세우지만, 그저 자기자신과의 약속이기 때문에 종종 작심삼일에 그치곤 합니다.

군 바깥의 사람들과 함께 하려 해도, 카메라를 켜서 인증할 수도 없을 뿐더러 훈련 등 휴대폰을 사용할 수 없는 상황이 발생하면 계속 해오던 루틴이 끊겨 현실적으로 함께 루틴을 지켜나가기 어렵습니다.

밀리루틴은 이러한 문제를 해결하기 위해 탄생하였습니다.
군인의 입장에서, 군인의 특성에 맞춘 루틴 형성 서비스를 제공합니다.

🩸 Pain Points | 해결하려는 문제

  1. 루틴을 세워 자기계발을 하고 싶은 군인이 많지만, 작심삼일에 그치는 경우가 잦다.
    → 함께 같은 루틴에 참여하고, 함께 지켜나가는 서비스를 만들자!
  2. 루틴 수행을 인증하려면 사진을 찍어야 하는 경우가 많지만, 군인은 영내에서 사진을 찍을 수 없다.
    → PC/휴대폰 캡처, 글 업로드를 통해 인증 과정이 과도하게 엄밀해지는 것을 방지하고, 현금 대신 포인트와 기타 게이미피케이션 요소로 대체하여 동기부여를 시키자!
  3. 휴대폰으로 간편하게 참여하면 좋겠지만, 군인은 휴대폰 사용시간이 평일의 경우 3시간 내외로 제한적이다.
    → 앱이 아닌 웹(Web) 서비스로 제작하여 PC로 쉽게 접속할 수 있도록 하자!

☝️ Features | 기능

  • 습관화하고 싶은 루틴을 정해 모임을 개설할 수 있으며, 관심 있는 모임에 참여하거나 좋아요를 할 수 있습니다.
  • 유저가 관심 있어 하는 밀리루틴 정보를 수집하여 AI가 맞춤 루틴을 추천해줍니다.
  • 참여자순으로 정렬된 인기 루틴을 볼 수 있습니다.
  • 과거 참여했던 밀리루틴, 참여율, 자신이 작성한 인증 기록을 모아 보여줍니다.
  • 밀리루틴 참여를 통해 레벨을 쌓고, 받은 포인트로 각종 유용한 상품을 구매할 수 있습니다.

🙆‍♂️ Prerequisites | 권장 사양

  • ECMAScript 2015(ES6)을 지원하는 브라우저

⚙️ How to Install | 설치 방법

git clone https://github.com/osamhack2022/WEB_AI_MILIROUTINE_MILIROUTINE.git

✔️ Getting Started | 튜토리얼

  1. 나만의 계정을 만드세요.
    1. 회원정보 입력하기
    2. AI가 회원님을 더 잘 이해할 수 있도록 관심 카테고리와 선호하는 밀리루틴을 선택해주세요!
  2. 관심 있는 밀리루틴에 참여하세요.
    1. AI가 추천하는 밀리루틴
    2. 테마별/인기 밀리루틴 보기
    3. 밀리루틴을 직접 개설할 수도 있습니다!
  3. 꾸준히 밀리루틴을 지키고 인증하세요.
    1. 참여율에 따라 경험치와 포인트를 얻을 수 있습니다.
    2. 포인트샵에서 원하는 상품을 구매해보세요.
    3. '나의 밀리루틴' 탭에서 인증 시 사용했던 이미지와 글을 다시볼 수 있습니다.

🖥️ Technique Used | 기술 스택

기획, UI/UX

  • FigJam
  • Figma

Backend

  • Node.js + Express
  • MySQL

Frontend

  • React
  • Typescript
  • tailwindCSS

AI(Machine Learning)

  • Pytorch

CI/CD

  • Git
  • Vite

💡 더 자세한 내용은 세부 폴더의 README.md에서 확인 바랍니다!

👋 Team Info | 팀 정보

이름 역할 이메일 깃허브 ID
박용준 팀장, 기획/디자인 [email protected]
권재원 Frontend [email protected]
이시웅 디자인, Frontend [email protected]
김민찬 Backend [email protected]
이동현 AI/ML [email protected]
  • 소스코드 버전 관리 : Github
  • 커뮤니케이션 : Slack
  • 문서, 회의록 관리 : Notion

📃 License | 저작권 및 사용권

  • MIT License

💡 권한 등 세부적인 내용은 LICENSE.md에서 확인 바랍니다!


  • 밀리루틴(MILIROUTINE)이라는 네이밍은, 군인이라는 뜻의 밀리(Mili-)와 1000분의 1을 뜻하는 밀리(Milli-)를 중의적으로 떠올릴 수 있도록 표현하였습니다.
  • "포인트 사용처"의 활용 가능성이 무궁무진합니다. 출시 초반에는 밀리루틴 내에서 활용할 수 있는 기능에 국한되겠지만, 이후 군과 연계하여 포인트를 각종 상품과 교환하거나 휴가 등의 혜택을 주는 방식으로 확장한다면 군인 분들의 자기계발 의욕을 촉진할 수 있을 것입니다.

web_ai_miliroutine_miliroutine's People

Contributors

dong97338 avatar minchan02 avatar silverttthin avatar springkjw avatar yoopark avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

web_ai_miliroutine_miliroutine's Issues

Gihub Codespace DB Problem

깃허브 코드스페이스 mysql 실행 안됨
service mysql start
mysql -u root
ERROR 2002 (HY000) : Can't Connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock (2)

signup/more 페이지 작업

  • #22
  • Category true/false 컴포넌트 제작
  • PreferMiliroutineTrue/False 컴포넌트 제작
  • signup/more 페이지 구현 돌입
  • Category True/False 두개 만들어 둔거 하나로 통합하기
  • PreferMiliroutine True/False 두개 만들어 둔거 하나로 통합하기
  • svg 줄넘김 상황 및 해결못한 레이아웃 문제 해결 및 최종 완성

파이팅!

React Router 설정

  • React Router를 이용한 전체적인 Router 구조 잡기 #24
    그래야 다른 인원들이 쉽게 페이지 개발이 가능할 듯.

React Router V6 사용 예정.

(FE) 개발 전 진행상황

디자인 확정 이전까지 FE에서 사용할 react, redux, react-query 복습 및 일부 내용 추가 필기하였습니다.
최근 사지방에서 코드스페이스가 잘 작동하지 않아 일단 구름IDE에서 공부하였으며 필기 내용은 하단 notion 링크 첨부하겠습니다.
https://band-baseball-d12.notion.site/bdcfe3cb724a4002bed650b583bbf37c

이후 내일 일부 내용이 생략되어 심플하게 바뀐 디자인 확정 이후 남은 시간은 전부 개발 및 추가 내용공부에 할애할 예정입니다

DB 명세서 논의

아래 글은 똑같이 Notion에도 올려놓았습니다!

제가 BE, AI 쪽을 잘 몰라서 혹시 AI 통계 낼 때 힘들겠다거나, BE 내부 로직 상 추가적으로 들어가야 하는 정보가 있다면 말씀해주세요! 없으면 일단 이런 방식으로 DB를 구성하려 합니다.

DATABASE : miliroutine

Created: 2022년 9월 27일 오후 4:57
Last Edited Time: 2022년 10월 3일 오전 1:00

(BE) DB 관련 내용

💡 위 문서의 내용을 포함한 문서입니다.

MySQL types

전화번호, 이메일 등 : VARCHAR(n); n은 바이트가 아니라 글자 수
댓글, 게시글 등 : TEXT(n)

정수 : INT
작은 정수 : TINYINT(-128 ~ 127)
소수 : FLOAT

연월일 : DATE
시분초 : TIME
연월일시분초 : DATETIME

TABLE : user

이름 타입 설명
id VARCHAR(30) 아이디, PK
pw VARCHAR(100) 암호화된 비밀번호
salt VARCHAR(100) 비밀번호 암호화에 필요한 키 값
email VARCHAR(60)
nickname VARCHAR(10)
category_list VARCHAR(100) 관심 카테고리 리스트 (JSON.stringify(list) 형식으로 저장) ex) {”study”, “workout”, “morningroutine”, “economy”, “selfcare”, “dream”, “hobby”, “emotion”, “health”}
point INT UNSIGNED

TABLE : routine

이름 타입 설명
id INT UNSIGNED AUTO_INCREMENT, PK
user_id VARCHAR(30) 주최자 아이디, FK ← user
name VARCHAR(20)
category VARCHAR(5)
thumbnail VARCHAR(300) 대표 이미지 URL
auth_cycle TINYINT UNSIGNED 주 n회
auth_description_list TEXT 인증 방법 단계별로 설명 (JSON.stringify(list) 형식으로 저장) ex) {”스스로 30분 이상 공부하세요”, “오늘 공부한…
start_date DATE 루틴 시작일
duration TINYINT UNSIGNED 루틴 진행기간 (n주)
participants INT UNSIGNED 참여자 수
point_info_list VARCHAR(100) 포인트 지급 기준 (JSON.stringify(list) 형식으로 저장) ex) {{”EVERY_WEEK”, 1, 250}, {”RATE”, 0.8, 500}, {”RATE”, 1.0, 500}}

TABLE : user_routine

이름 타입 설명
id INT UNSIGNED AUTO_INCREMENT, PK
user_id VARCHAR(30) FK ← user
routine_id INT UNSIGNED FK ← routine
type VARCHAR(10) 참여 : “JOIN”, 좋아요 : “LIKE”

TABLE : auth

이름 타입 설명
id INT UNSIGNED AUTO_INCREMENT, PK
user_id VARCHAR(30) FK ← user
routine_id INT UNSIGNED FK ← routine
week TINYINT UNSIGNED n주차
day TINYINT UNSIGNED n회차
img VARCHAR(300) 인증 이미지
text TEXT 인증 글

TABLE : goods

이름 타입 설명
id INT UNSIGNED AUTO_INCREMENT, PK
name VARCHAR(20)
description TEXT 상품 설명
thumbnail VARCHAR(300) 대표 이미지 URL
price INT UNSIGNED

TABLE : user_goods

이름 타입 설명
id INT UNSIGNED AUTO_INCREMENT, PK
user_id VARCHAR(30) FK ← user
goods_id INT UNSIGNED FK ← goods
datetime DATETIME 상품 구매 시각

/user 페이지 api 개발

  • /user/settings
  • /user/settings/pw
  • /user/my
  • /user/my/like
  • /user/routine/:routineId/:auth

피드백은 언제나 환영입니다. 여태까지 작성된 코드들 중 의아한 부분있으시면 언제든지 Comment 달아주세요

MySQL Server 통일

@minchan02 @dong97338
#31 민찬님이 현재 사용하고 계시는 MySQL Server를, 이제 팀 단위에서 접근하도록 관리해야 할 것 같습니다.
Azure에 Server를 만들려하였지만 사용시간이 제한적이기 때문에 그 외 시간에는 직접 테스트를 해볼 수 없다는 한계점이 존재하여,
직접 Goorm IDE에 Server 컨테이너를 하나 만들었습니다 👍
테스트 결과 원격 접속도 문제없이 실행되어 사용하기에 문제 없을 것으로 생각됩니다.

이번 이슈를 통하여 데이터 명세를 통일하고자 합니다!
민찬님, 동현님도 혹시 따로 사용하고 계시는 DB가 있다면 이 이슈에서 말씀해주세요.

현재 제가 만든 miliroutine_db는 #8 을 기반으로 하여 user의 level 정보, category_list 분리 등의 사소한 부분만 수정된 상황입니다.

CREATE DATABASE miliroutine_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE miliroutine_db;

CREATE TABLE user (
    no INT UNSIGNED AUTO_INCREMENT,
    id VARCHAR(30),
    pw VARCHAR(100) NOT NULL,
    salt VARCHAR(64) NOT NULL,
    email VARCHAR(60) NOT NULL,
    nickname VARCHAR(10) NOT NULL,
    profile_img VARCHAR(300),
    background_img VARCHAR(300),
    point INT UNSIGNED DEFAULT 0,
    exp INT UNSIGNED DEFAULT 0,
    PRIMARY KEY (no)
);

CREATE TABLE user_category (
    id INT UNSIGNED AUTO_INCREMENT,
    user_no INT UNSIGNED,
    category VARCHAR(20) NOT NULL, # study, workout, morningroutine, economy, selfcare, dream, hobby, emotion, health
    PRIMARY KEY (id),
    FOREIGN KEY (user_no) REFERENCES user(no)
);

CREATE TABLE level_exp (
    level TINYINT UNSIGNED,
    exp INT UNSIGNED NOT NULL,
    PRIMARY KEY (level)
);

CREATE TABLE routine (
    id INT UNSIGNED AUTO_INCREMENT,
    host INT UNSIGNED,
    name VARCHAR(20) NOT NULL,
    category VARCHAR(20) NOT NULL,
    thumbnail_img VARCHAR(300),
    auth_cycle  TINYINT UNSIGNED NOT NULL,
    auth_description_list JSON NOT NULL, # ["매일 저녁 감사한 일을 생각해보세요", "해당 내용을 [인증하기] 탭에 기록하여 업로드하면 참여 완료!\n(업로드한 글은 다른 사람에게 공개되지 않습니다)"]
    start_date DATE NOT NULL, # yyyy-mm-dd
    duration TINYINT UNSIGNED NOT NULL,
    point_info_list JSON, # [{'type': "every_week", 'point': 20}, {'type': "rate", 'number': 0.5, 'point': 100}, {'type': "rate", 'number': 0.9, 'point': 100}]
    PRIMARY KEY (id),
    FOREIGN KEY (host) REFERENCES user(no)
);

CREATE TABLE user_routine (
    id INT UNSIGNED AUTO_INCREMENT,
    user_no INT UNSIGNED,
    routine_id INT UNSIGNED,
    type VARCHAR(10) NOT NULL, # join, like
    PRIMARY KEY (id),
    FOREIGN KEY (user_no) REFERENCES user(no),
    FOREIGN KEY (routine_id) REFERENCES routine(id)
);


CREATE TABLE auth (
    id INT UNSIGNED AUTO_INCREMENT,
    user_no INT UNSIGNED,
    routine_id INT UNSIGNED,
    week TINYINT UNSIGNED NOT NULL,
    day TINYINT UNSIGNED NOT NULL,
    date DATE NOT NULL,
    img VARCHAR(300),
    text TEXT,
    PRIMARY KEY (id),
    FOREIGN KEY (user_no) REFERENCES user(no),
    FOREIGN KEY (routine_id) REFERENCES routine(id)
);

CREATE TABLE goods (
    id INT UNSIGNED AUTO_INCREMENT,
    name VARCHAR(20) NOT NULL,
    description TEXT NOT NULL,
    thumbnail_img VARCHAR(300),
    price INT UNSIGNED NOT NULL,
    PRIMARY KEY (id)
);

CREATE TABLE user_goods (
    id INT UNSIGNED AUTO_INCREMENT,
    user_no INT UNSIGNED,
    goods_id INT UNSIGNED,
    datetime DATETIME NOT NULL, # yyyy-mm-dd hh:mm:ss
    PRIMARY KEY (id),
    FOREIGN KEY (user_no) REFERENCES user(no),
    FOREIGN KEY (goods_id) REFERENCES goods(id)
);

INSERT INTO level_exp
	VALUES(1, 100), (2, 100+500), (3, 600+1000), (4, 1600+2000), (5, 3600+2000), (6, 5600+2000), (7, 7600+5000), (8, 12600+5000), (9, 17600+5000);

P.S. 접속 방법과 계정 정보는 Slack을 참고해주시기 바랍니다.
P.S. Notion DATABASE : miliroutine_db 글은 이 이슈 종료 이후 한번에 수정하겠습니다!

기획/디자인 단순화 논의

처음에는 일단 간단하지만 작동하도록 만들라는 멘토님의 의견을 반영하여, 구현을 미룰 부분에 대하여 생각해보았습니다. 한번 보시고 의견을 댓글로 적어주시면 감사하겠습니다.

  1. 반응형 지원 → 보류
  2. [카테고리별 인기] → 일단은 페이지 삭제
  3. [기간별 인기] → 주간, 월간 나누는 의미 없을 듯. 그냥 전체 하나만 보여주도록
    1. 1, 2, 3위만 다르게 UI하는 것 → 보류
    2. 유튜브처럼 처음 8개만 보여주고 아래로 스크롤하면 계속 나타나도록
  4. 인증 방법 중 [인증 예시 사진] → 보류
  5. [밀리루틴 게시판] 기능 → 보류
    1. [밀리루틴 게시판] 삭제에 따른 GNB [알림] 삭제
  6. [추천] 탭에서 [새로운 밀리루틴에도 도전해보세요] 기능 → 보류
    1. 추천은 Main Page 최상단으로 옮기고, 10~15개만 찾아서 보여주는 걸로.
  7. [추천] 탭에서 운영진에서 [큐레이션]으로 추천하는 기능 → 보류
  8. 가입자수 통계 → 어차피 통계가 안 날 듯
  9. 회원가입 시 유효성 검사, 유효성 검사 UI → 보류
  10. Naver, Google 로그인 → 보류
  11. 실명, 군 구분, 전역일자 등 없어도 되는 문항 삭제
    1. /signup 페이지에서 아이디, 비밀번호, 닉네임만 정하고 중복 검사
  12. /signup/more 페이지에서 관심 카테고리 선택 + 넷플릭스처럼 밀리루틴 랜덤으로 제목만 띄워서 체크하도록 하는 란 신설 ← 멘토님 AI쪽 의견 반영
  13. [나의 밀리루틴] 중 [북마크한 밀리루틴] 삭제
    1. [좋아요한 밀리루틴]은 일단 남김

가장 중요한 기능이 무엇일지 생각해보았고, 일단 과감하게 빼보았습니다

링크로 들어오시면 현재 수정중인 Simple 버전의 디자인을 보실 수 있습니다.
보시고 꼭 의견 남겨주세요!

😢현재 진행중인 FE 개발 패턴 공부 및 이해하기

전반적으로 생성된 프로젝트 구조가 배운 것들이랑 공부한것들이랑 많이 달라 숨이 턱 막혀 일단 제가 모르는 것들을 명확히 하고 그것들을 먼저 해결하는 방향을 택했습니다.

  1. 생성 배경을 잘 모르는 파일 및 경로들이 많아 일단 직관적으로 분석해보았다.

    assets: 밀리루틴 로고 사진

    components 폴더

    • Element : Button, Header, Footer, Jumbotron, Navitem 컴포넌트 저장소

      → 내가 만들어야 할 Category 컴포넌트들도 여기에 넣어놔야 할듯?

    • Layout :

      • index.ts : 모르겠음
      • MainLayout.tsx : 화면 전반적인 레이아웃인듯
    • features 폴더

      • auth
        • routes
          • index.tsx : 경로가 login or signup일 때 로드할 element 이끌기
        • types
          • index.ts : 타입 지정해둔 것들
        • index.ts : routes와 type를 export..? 잘모르겠음
      • misc
        • routes
          • index.tsx : 점보트론 관련된 landing.tsx를 export..?
          • landing.tsx : 점보트론 컴포넌트 로드
        • index.ts : routes 전부 export..?
    • routes 폴더

      • index.tsx : 메인 페이지 로드할 것들 지정하는 핵심 파일. 헤더, 푸터, 내부 content(예정) 리턴하도록 돼있음

    .. 등등 이외는 기본 세팅파일이나 위보다 차선순위인듯

    각기 만들어둔 요소들을 index라는 동일한 파일명의 파일들이 export하는 것 같습니다. 다른 파일에서 한번에 index를 임포트해서 그런건가 추측하는데 잘 모르겠음

  2. 순수한 css만 사용하다가 css framework를 처음 접해서 tailwind css 사용법이 낯설긴한데.. 일단 구글링 해보면서 공부해보면서 시행착오 겪어봐야할듯?

  3. React Route 처음 공부했을 때 <Route path="signup/more"element = {<signupmore / >} /> 이렇게 해두고 signupmore 컴포넌트에서 해당 페이지를 그리는 식으로 했습니다.

    → 그래서 이번에도 일단 auth 디렉토리 아래에 있는 index.tsx에서 <Route path="signup/more" element = {<signupMore />}/>로 일단 만들어두고 해당 path로 들어가서 화면에 그려지는 변경사항들 보면서 작업하려 했습니다. 그런데 생각해둔 컴포넌트가 로드 되지 않고 no routes matched location 오류로 확인되는데 구글링해서 봐도 저희 프로젝트에 맞게 해결하기가 어렵습니다. 진행이 안되니 css 실습도 못해보고 맡은 분량이 시작 전 세팅부터 막혀버리니..ㅠ

사실상 다른 문제를 포괄하는 메인 문제가 3번. 변경사항들을 화면으로 보면서 공부와 동시에 구현해 진행도를 조금씩 느리게라도 늘려나가고 싶은데 시작도 못하고 있습니다.

개인 공부하던 프로젝트에서 규모가 큰 협업 플젝으로 넘어가니 수준이 너무 크게 달라져서 혼자로는 해결이 어려워 이슈로 도움을 요청합니다.

⚡Slider 컴포넌트 개발

  • 홈 화면에 루틴 아이템을 Slider 형식으로 보여줄 컴포넌트 개발 필요.
  • 라이브러리를 사용해도 되지만, TailwindCSS를 이용하여 자체 개발할 예정.
  • 개발 Scope이 모바일은 포함되어 있지않기 때문에 웹에서 동작하는 것만 생각하기.

세부 컴포넌트 디자인

  • GNB에서 프로필 사진을 클릭하였을 때 나오는 마이페이지 모달 창
  • /settings 페이지
  • 좋아요한 밀리루틴
  • 밀리루틴 소개 페이지 (이미지는 아직 없으니 개요만이라도)
  • 루틴 게시판 삭제로 인한 /my 페이지 변경

(BE) 작업 진행사항 2022.10.2

<완료>

  • router 분리
  • 로그인, 회원가입 기능 구현
  • DB 연결 (나중에 VM환경 받으면 따로 또 연결)

<진행>

  • routine개설 및 DB연결

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.