Skip to content

woohaengshi/frontend

Repository files navigation

🧑‍💻 프로젝트 소개

우리들의 행복한 시간 ⏰

우리FIS 아카데미 교육생들을 대상으로 공부한 시간을 측정하여 학습 기록을 확인할 수 있는 서비스

우행시에 접속하고 싶다면? 클릭해주세요! 👀


👻 팀원구성

강재연 공소연 이도이
프론트엔드 프론트엔드 프론트엔드
UI 가이드라인,
기록확인, 마이페이지 구현
인증/인가, 공부하기 구현,
API 설정
랜딩 페이지, 과목선택,
순위조회 구현
강현우(팀장) 길가은 김혜빈 공예진
백엔드 백엔드 백엔드 백엔드
클라우드 인프라 구축,
랭킹 API 개발
인증/인가, 이메일 인증 기능,
공부시간 기록 API 개발
CI 환경 구축,
타이머 조회 및 캘린더 API 개발
과목 및 회원 정보 API 개발

⭐ 프로젝트 주요 기능

준비중 입니다.


⚙️ 시스템 아키텍처

프로젝트 구조도

프로젝트 구조도

인프라 구조도

인프라 구조도


📚 기술 스택

Common

Notion GitHub Postman

UI/UX

Radix UI figma

Frontend

Next JS Zustand TypeScript authjs SWR
ESLint Prettier Vercel

Backend

Infra & DB

CI/CD

Amazon Elastic Beanstalk Status


🗂️ 폴더구조

├── .next ▶️ Next의 빌드 결과물 폴더
├── node_modules ▶️ 프로젝트 관련 JS 라이브러리가 설치된 폴더
├── public ▶️ 이미지, 폰트와 같은 정적 자원들을 배치하는 폴더
│   ├── easteregg/ ▶️ 이스터에그 폴더
│   ├── icons/ ▶️ 아이콘 폴더
│   ├── imgs/ ▶️ 이미지 폴더
│   └── fonts/ 폰트 폴더
├── app/ ▶️ 앱 라우팅 폴더
│   ├── (auth)/ ▶️ 인증 인가 폴더
│   ├── actions/ ▶️ auth.js 함수 호출 폴더
│   ├── api/auth/[...nextauth]/ ▶️ auth.js 설정 폴더
│   ├── mypage/ ▶️ 마이페이지 폴더
│   ├── ranking/ ▶️ 순위조회 폴더
│   ├── record/ ▶️ 기록확인 폴더
│   ├── study/ ▶️ 공부시작 폴더
│   ├── page.tsx ▶️ root 경로 페이지
│   └── layout.tsx ▶️ root 경로 레이아웃 구조
├── components/ ▶️ 컴포넌트 폴더
│   ├── common/ ▶️ 공통 컴포넌트 폴더
│   │   ├── Header/
│   │   │   ├── Header컴포넌트.tsx
│   │   │   └── Header컴포넌트.module.css
│   │   ├── Modal/
│   │   │   ├── Modal컴포넌트.tsx
│   │   │   └── Modal컴포넌트.module.css
│   │   ├── 컴포넌트.tsx
│   │   └── 컴포넌트.module.css
│   ├── 라우팅폴더명/컴포넌트.tsx
│   └── 라우팅폴더명/컴포넌트.module.css
├── constants/
│   └── 상수명.ts
├── hooks/
│   └── 커스텀훅.ts
├── apis/
│   ├── instancs.ts ▶️ api 요청 기본 설정 파일
│   └── 도메인Api.ts
├── stores/ ▶️ Zustand Store 폴더
│   └── 도메인Store.ts
├── types/ ▶️ TypeScript Interface 설정 폴더
│   └── 도메인Type.ts
├── utils/
│   └── 기능명Utils.ts
├── .eslintrc.json ▶️ ESLint 설정 파일
├── .gitignore ▶️ 깃 이그노어 파일
├── jsconfig.json ▶️ VSCode 설정 파일
├── next.config.mjs ▶️ 넥스트 설정 파일
├── package-lock.json ▶️ 라이브러리 의존 관계 설정 파일
└── package.json ▶️ NPM 프로젝트 설정 파일

🎈 Commit 방법

꼭 다음의 방법을 따라서 커밋할 필요는 없지만, 알아보기 쉽게하기 위함.
커밋의 제목은 타입을 기재 후 간단한 요약(명령조)을 기재 함.
본문 작성시 자세한 내용을 누구든 알아볼 수 있기 기재 함(어떻게 보다 에 초점을 맞춰 작성).
타입은 다음과 같음.

  • feat : 새로운 기능 추가
  • fix : 버그 수정
  • docs : 문서 수정
  • style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우
  • refactor : 코드 리팩터링
  • test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
  • chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
  • design : CSS 등 사용자 UI 디자인 변경
  • comment : 필요한 주석 추가 및 변경
  • rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
  • remove : 파일을 삭제하는 작업만 수행한 경우
  • !BREAKING CHANGE : 커다란 API 변경의 경우
  • !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우

예시 [feat/#이슈번호]: 타워 추가

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages