24hane-frontend

KO | EN

gitlite — search

#python #go #golang #machine-learning #rust #docker #macos #awesome #cli #kubernetes #vue #security #ios #open-source

24hane-frontend

(★ 9)

42서울 출입기록 관리 서비스

24hane-frontend 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 24HANE

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

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

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

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

## 서비스 소개

24 HANE (24 hours are not enough)

```
카뎃 여러분이 직접 클러스터 출입 누적 시간을 확인할 수 있는 24 HANE 서비스를 소개합니다.
 - 클러스터 출입태깅이 잘 됐는지 궁금한가요?
 - 클러스터 출입 누적 시간이 궁금한가요?

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

## 기능 소개

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

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

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

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

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

## 기술 스택

## 프로젝트 실행 방법

해당 앱은 벡엔드 서버와, env 설정이 필요합니다.

### .env 예시

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

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

### 앱 실행

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

```
//의존성 패키지 설정
npm install

//코드를 실행 합니다
npm run dev
```

## 프로젝트 배포 방법

### GithubActions 설정

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

- main 브랜치는 상용 서버와 연동
- develop 브랜치는 개발 서버와 연동

배포 자동화에 대한 yml 파일은 [링크](https://github.com/innovationacademy-kr/42checkin_v3-frontend/tree/master/.github/workflows)에서 확인 가능 합니다. 해당 파일의 env 값들은 `Actions secrets` 을 이용하여 변경 가능 합니다.

```
AWS_ACCESS_KEY_ID //AWS CLI 사용하기 위한 access key
AWS_SECRET_ACCESS_KEY //AWS CLI 사용하기 위한 secret access key
DEFAULT_BUCKET_REGION //S3 버킷 위치 아시아 태평양 (서울) "ap-northeast-2"
CLOUDFRONT_DISTRIBUTION_ID //CloudFront ID 상용
CLOUDFRONT_DISTRIBUTION_ID_DEV //CloudFront ID 개발용
S3_BUCKET  //S3 Bucket 이름 상용
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 // 토큰 명
```

## 개선 / 문의사항

Frontend 문의: 인트라ID `inshin`에게 DM 주세요💌

24hane-frontend

24hane-frontend 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

24hane-frontend

24hane-frontend 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README