Skip to content

Commit

Permalink
Merge pull request #46 from innovationacademy-kr/develop
Browse files Browse the repository at this point in the history
메인 서비스 배포를 위한 PR
  • Loading branch information
42inshin authored Mar 13, 2023
2 parents bdd2ed4 + ef0054c commit a59a6d8
Show file tree
Hide file tree
Showing 161 changed files with 14,554 additions and 11,105 deletions.
5 changes: 0 additions & 5 deletions .eslint

This file was deleted.

15 changes: 15 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier'
],
parserOptions: {
ecmaVersion: 'latest'
}
}
8 changes: 5 additions & 3 deletions .github/workflows/s3_deploy_dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,22 @@ jobs:
REACT_APP_API_URL: ${{secrets.REACT_APP_API_URL_DEV}}
REACT_APP_ENV: ${{secrets.REACT_APP_ENV_DEV}}
REACT_APP_SENTRY_DSN: ${{secrets.REACT_APP_SENTRY_DSN}}
VITE_APP_API_URL: ${{secrets.VITE_APP_API_URL_DEV}}
VITE_TOKEN: ${{secrets.VITE_TOKEN}}

steps:
- uses: actions/checkout@v2

- name: Install dependencies
run: yarn
run: npm i

- name: Build dev
run: yarn build:dev
run: npm run build

- name: Deploy
uses: reggionick/s3-deploy@v3
with:
folder: build
folder: dist
bucket: ${{ secrets.S3_BUCKET_DEV }}
bucket-region: ${{secrets.DEFAULT_BUCKET_REGION}}
dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_DEV }}
Expand Down
8 changes: 5 additions & 3 deletions .github/workflows/s3_deploy_master.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,22 @@ jobs:
REACT_APP_API_URL: ${{secrets.REACT_APP_API_URL}}
REACT_APP_ENV: ${{secrets.REACT_APP_ENV}}
REACT_APP_SENTRY_DSN: ${{secrets.REACT_APP_SENTRY_DSN}}
VITE_APP_API_URL: ${{secrets.VITE_APP_API_URL}}
VITE_TOKEN: ${{secrets.VITE_TOKEN}}

steps:
- uses: actions/checkout@v2

- name: Install dependencies
run: yarn
run: npm i

- name: Build Production
run: yarn build:prod
run: npm run build

- name: Deploy
uses: reggionick/s3-deploy@v3
with:
folder: build
folder: dist
bucket: ${{ secrets.S3_BUCKET }}
bucket-region: ${{secrets.DEFAULT_BUCKET_REGION}}
dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
Expand Down
47 changes: 26 additions & 21 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# dependencies
/node_modules
/.pnp
.pnp.js
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local

# testing
/coverage
*.env

# production
/build
/cypress/videos/
/cypress/screenshots/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.env.development*
.env.production
12 changes: 5 additions & 7 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
{
"trailingComma": "all",
"printWidth": 100,
"semi": true,
"singleQuote": false,
"bracketSameLine": false,
"arrowParens": "always",
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"bracketSpacing": true,
"jsxSingleQuote": true,
"tabWidth": 2
"arrowParens": "always"
}
204 changes: 139 additions & 65 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,155 @@
# 24HANE (42Checkin_v3-frontend)

# 프로젝트 실행 방법
<a href="https://24hoursarenotenough.42seoul.kr/" target="_blank">
<img width="100" alt="image" src="https://user-images.githubusercontent.com/72684256/222954950-6ab18005-81e1-4d0b-93d5-6097f11fee32.png">
</a>

# 24HANE

### 24 hours are not enough! 24시간이 부족해!

안녕하세요:) 42서울 공식 체크인 서비스 24HANE입니다💌

`"24 Hane" (24 hours are not enough)` 은 Cadet 여러분의 클러스터 출입 여부와 출입 누적 시간을 직접 확인할 수 있도록 개발된 서비스 입니다.

원활하게 서비스를 이용할 수 있도록 기본 기능을 소개합니다. 👋

<br />
<br />

## 서비스 소개

<p align="center">
<a href="https://24hoursarenotenough.42seoul.kr/" target="_blank">
<img width="100" alt="image" src="https://user-images.githubusercontent.com/72684256/223358425-9eca18d8-577b-4476-8c93-aeeb9c3ec934.png" />
</a>
</p>

<p align="center">
<b>24 HANE (24 hours are not enough)</b>
</p>

```
카뎃 여러분이 직접 클러스터 출입 누적 시간을 확인할 수 있는 24 HANE 서비스를 소개합니다.
- 클러스터 출입태깅이 잘 됐는지 궁금한가요?
- 클러스터 출입 누적 시간이 궁금한가요?
24HANE 서비스를 이용한다면?
- 클러스터 출입 누적 시간을 오늘 / 월 기준으로 한 눈에 볼 수 있습니다.
- 목표 시간을 설정하여 오늘 / 월의 학습 시간 진척도를 그래프로 볼 수 있습니다.
- 최근 6주간 / 6달간의 학습 시간 진척도를 그래프로 볼 수 있습니다.
- 클러스터에서 학습중인 실시간 인원을 확인할 수 있습니다.
- 자신의 상세한 클러스터 출입 기록을 일별로 확인할 수 있습니다.(누락된 기록까지!)
- 자정 전후로 별도 태깅 없이 학습에만 몰입 할 수 있습니다.
- 카드를 분실한 경우 카드 재발급을 앱에서 신청할 수 있습니다.
```

<br />
<br />

## 기능 소개

새로워진 24HANE 서비스의 각 페이지를 소개합니다.

<table align="center">
<tr>
<td><img width="345" alt="image" src="https://user-images.githubusercontent.com/72684256/222955031-4ce9edd6-6dda-46f3-ac17-e6bacacfbcfe.png"></td>
<td><img width="345" alt="image" src="https://user-images.githubusercontent.com/72684256/222955101-301b7088-890b-4291-899f-9e685264c78f.png"></td>
<td><img width="345" alt="image" src="https://user-images.githubusercontent.com/72684256/222955264-301460c7-cc7d-4d2c-905a-5b73cba8383c.png"></td>
<tr>
</table>

- **로그인**
- Intra 로그인을 통해 서비스 로그인이 가능합니다.

- ****
- 로그인 후 바로 보이는 페이지로 본인의 정보와 출입 누적 시간(오늘, 이번 달) 현황을 한 눈에 볼 수 있습니다.
- **`개인 정보`**
- 본인의 인트라 사진과 ID를 통해 본인의 정보를 확인합니다.
- **`출입 여부`**
- 입실 시 홈 화면의 전체 배경이 바뀝니다. 또한
인트라ID의 우측 상단에 있는 작은 원으로 출입 여부가 표시됩니다.
- **(초록색🟢)** 정상적으로 입실(check-in) 되었음을 의미합니다.
- **`이용시간`**
- 오늘의 클러스터 누적 시간을 표시합니다.
- 단, 개인별 사진 출입 카드의 ‘입실’ 과 ‘퇴실’ 태깅 짝이 일치하는 경우에만 ‘오늘 누적 시간’으로 기록됩니다.
- 따라서, 입실(check-in) 중일 경우 오늘 누적 시간은 기록되지 않으며 퇴실(check-out) 태깅이 확인 된 후 누적 시간이 기록됩니다.
- 목표시간을 설정할 수 있습니다. 기본 값으로 4시간이 적용되어 있으며, 목표시간을 1시간 단위로 24시간까지 변경하실 수 있습니다.
- **`월 누적시간`**
- 이번 달 클러스터 누적 시간을 표시합니다.
- 목표시간을 설정할 수 있습니다. 기본 값으로 80시간이 적용되어 있으며, 목표시간을 20시간 단위로 420시간까지 변경하실 수 있습니다.
- **`6주 / 6개월 체류시간 그래프`**
- 6주, 6개월 체류 시간을 표시하는 바형 그래프가 추가되었습니다.
- 각 바를 클릭하면 누적 시간과 일 평균 시간을 확인할 수 있습니다.
- **`실시간 현황`**
- 개포, 서초 클러스터의 현재 체류 인원이 표시됩니다.

- **캘린더**
- 2022. 8(24HANE 서비스 시작 월)부터 현재까지의 기록을 확인 할 수 있습니다.
- 월별로 총 누적시간을 확인할 수 있습니다.
- 일별 진척도를 색상을 통해 확인할 수 있습니다. (3시간 단위)
- Pagination과 타이틀을 클릭해서 월을 변경할 수 있습니다.
- 일별로 태깅기록을 확일 할 수 있으며, 누락된 기록도 표시됩니다.
- 캘린더 메뉴버튼 클릭 시, 현재 일의 태깅기록을 볼 수 있습니다.

- **더보기**
- 앱을 통해 카드 재발급 신청을 진행하실 수 있습니다.
- 지원금 지침 안내페이지(링크)
- 출입기록 문의(링크)
- 이용 가이드(링크)
- 앱 피드백(링크)
- 로그아웃

<br />
<br />

## 기술 스택

<p>
<img src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=Vue.js&logoColor=black">
<img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=black">
<img src="https://img.shields.io/badge/amazons3-569A31?style=for-the-badge&logo=amazons3&logoColor=black">
</p>


<br />
<br />

## 프로젝트 실행 방법

해당 앱은 벡엔드 서버와, env 설정이 필요합니다.
벡엔드 설정을 아래의 링크를 따라가서 설정해 주시고 env설정은 `env.sample` 을 참고하여 작성 하여 주시기 바랍니다.

### .env 예시

루트에 .env파일을 만듭니다.

```
# 백엔드 url 주소
VITE_APP_API_URL = http://localhost:2424
# 토큰 이름
VITE_TOKEN = accessToken
```

### 앱 실행

- 해당 레포를 clone 받습니다.
- [벡엔드 레포](https://github.com/innovationacademy-kr/42checkin_v3-backend) 를 클론 받습니다.
- [벡엔드 레포](https://github.com/innovationacademy-kr/24hane-backend) 를 클론 받습니다.

```
//의존성 패키지 설정
npm install
//코드를 실행 합니다
npm run start
npm run dev
```

# 프로젝트 배포 방법
<br />
<br />

## 프로젝트 배포 방법

### GithubActions 설정

배포자동화를 통해서 아래 와 같이 연동 되어 있습니다.
배포자동화를 통해서 아래 와 같이 연동되어 있습니다.

- main 브랜치는 상용 서버와 연동
- develop 브랜치는 개발 서버와 연동
Expand All @@ -41,64 +168,11 @@ S3_BUCKET_DEV //S3 Bucket 이름 개발용
REACT_APP_ENV //개발 환경 (ex: development,local,production)
REACT_APP_API_URL_DEV //server url (ex. https://localhost:3000)
REACT_APP_SENTRY_DSN = Sentry DSN key (ex: Sentry credential 파일 확인)
VITE_APP_API_URL // 배포 환경의 server url
VITE_APP_API_URL_DEV // 개발 환경의 server url
VITE_TOKEN // 토큰 명
```

# 프로젝트 소개

**24 HANE(24 hours are not enough)**

```
카뎃 여러분이 직접 클러스터 출입 누적 시간을 확인할 수 있는 24 HANE 서비스를 소개합니다.
- 클러스터 출입태깅이 잘 됐는지 궁금한가요?
- 클러스터 출입 누적 시간이 궁금한가요?
24HANE 서비스를 이용해서 확인 할 수 있습니다.
- 클러스터 출입 누적 시간을 오늘/이번 달 기준으로 한 눈에 볼 수 있습니다.
- 상세한 클러스터 출입 기록을 확인할 수 있습니다.
- 자정 전후로 별도 태깅 없이 학습에만 몰입 할 수 있습니다.
```

<div align="center">
<a align="center" href="https://24hoursarenotenough.42seoul.kr/">
<img width="522" alt="스크린샷 2022-10-02 오후 5 04 40" src="https://user-images.githubusercontent.com/61973070/193444442-3f718559-06b5-43d5-bd31-6f91e9ee4194.png"></a></br>

위의 로고를 클릭하여, 24HANE 으로 접속하세요!
[사이트 링크](https://24hoursarenotenough.42seoul.kr/)

</div>

# 기술 스택

<p>
<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">
<img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=black">
<img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=black">
<img src="https://img.shields.io/badge/amazons3-569A31?style=for-the-badge&logo=amazons3&logoColor=black">

</p>

# 기능 소개

- **로그인**
- Intra 로그인을 통해 서비스 로그인이 가능합니다.
- **MainPage**

- 로그인 후 바로 보이는 페이지로 본인의 정보와 출입 누적 시간(오늘, 이번 달) 현황을 한 눈에 볼 수 있습니다.
- **`개인 정보`** 본인의 인트라 사진과 아이디를 통해 본인의 정보를 확인합니다.
- **`입출입 여부`** 인트라 사진의 우측 상단에 있는 작은 원으로 입 출입 여부가 표시됩니다.
- **(초록색🟢)** 정상적으로 입실(check-in) 되었음을 의미합니다.
- **(회색⚪)** 정상적으로 퇴실(check-out) 되었음을 의미합니다.
- **`오늘 누적시간`** 오늘의 클러스터 누적 시간을 표시합니다.
- 단, 개인별 사진 출입 카드의 ‘입실’ 과 ‘퇴실’ 태깅 짝이 일치하는 경우에만 ‘오늘 누적 시간’이 기록됩니다.
- 따라서, 입실(check-in) 중일 경우 오늘 누적 시간은 기록되지 않으며 퇴실(check-out) 태깅이 확인 된 후 누적 시간이 기록됩니다.
- **`이번 달 누적시간`** 이번 달 클러스터 누적 시간을 표시합니다.
- 우측 상단에 있는 버튼을 클릭🖱️하면 SUB PAGE로 이동합니다! 🚀🪂🌌
<p align="center"><img width="640" alt="메인페이지 스크린샷" src="https://user-images.githubusercontent.com/61973070/193443447-ef653232-7d9d-4b11-a598-5aaed1a243ad.png"></p>

- **SubPage**
- 이번 달 총 입, 퇴실 기록을 확인할 수 있는 페이지 입니다.
- **`입-퇴실 상세 내역`** 입-퇴실 별 상세 기록과 입-퇴실에 따른 체류 시간을 확인할 수 있습니다. 데이터가 많을 경우 스크롤을 내려 정보를 확인하시면 됩니다.
- **`문의하기`** 입-퇴실 내역에 궁금한 점이 있거나, 기타 서비스 관련 문의 사항이 있을 경우 문의하기 버튼을 눌러 설문을 작성해주세요.
- SUB PAGE 우측 상단에 있는 버튼을 클릭🖱️하면 다시 MAIN PAGE로 이동합니다! 🚀🪂🌌
## 개선 / 문의사항

<p align="center"><img width="320" alt="서브페이지 스크린샷" src="https://user-images.githubusercontent.com/61973070/193443620-5e48da91-5391-4b5e-b1a2-f603293c7ed4.png"></p>
Frontend 문의: 인트라ID `inshin`에게 DM 주세요💌
1 change: 1 addition & 0 deletions env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
Loading

0 comments on commit a59a6d8

Please sign in to comment.