Codeit Resources

사내 리소스 예약/대여/반납 플랫폼

View Web Site · API Docs

💫 Table of contents

• 👥 Team
• 🛠️ Tech stack
• 📁 Project structure
• ✨ Features
• 🚀 Installation

👥 Team

소혜린	김보경	신승헌	조현지	배영준
FullStack, PM	FullStack	FullStack	FrontEnd	FrontEnd

🛠️ Tech stack

1. Frontend

• Language

  

• Library & Framework

  

• Deploy

  

2. Mobile

• Language

  

• Library & Framework

  

3. Backend

• Language

  

• Library & Framework

  

• Database

  

• Deploy

  

4. CI/CD

🚀 Installation

패키지 설치

pnpm install

개발 모드

pnpm run dev

프로덕션 모드

pnpm run build

📁 Project Structure

MonoRepo

웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 모노레포로 구성하였습니다. 또한 TurboRepo를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다.

전체적인 폴더구조는 아래와 같습니다.

codeit-resources/              # Project Root
├── apps/
│   ├── api/                   # 백엔드 서버
│   │   └── src/
│   │       ├── controllers/   # API 엔드포인트 핸들러
│   │       ├── middleware/    # API 미들웨어
│   │       ├── models/        # MongoDB 스키마 및 모델 정의
│   │       ├── routes/        # API 라우트
│   │       └── swagger/       # API 문서
│   │
│   └── mobile/                # 모바일 앱
│   │    └── app/
│   │       ├── (route)/       # 라우팅 디렉토리
│   │       ├── assets/        # 정적 자산 폴더
│   │       ├── components/    # 재사용 가능한 컴포넌트
│   │       ├── constants/     # 앱 전역 상수
│   │       ├── utils/         # 유틸리티 함수
│   │       ├── hooks/         # 커스텀 훅
│   │       └── store/         # 상태 관리 스토어
│   │
│   ├── storybook/             # StoryBook 설정 및 구성 파일
│   │
│   └── web/                   # 웹 클라이언트
│       ├── api/               # API 호출 관련 코드
│       ├── app/
│       │   ├── _components/   # 재사용 가능한 컴포넌트
│       │   ├── _hooks/        # 커스텀 훅
│       │   ├── (admin)/       # 관리자 페이지
│       │   ├── (seats)/       # 좌석 예약 페이지
|       |   ...                # 이외의 프로젝트에 구성된 페이지들
│       │   ├── layout.tsx     # 레이아웃 컴포넌트
│       │   └── page.tsx       # 루트 컴포넌트
│       ├── components/        # 공통 UI 컴포넌트
│       └── lib/               # 라이브러리 함수 및 모듈
│
└── packages/                  # 공유 패키지 디렉토리
    ├── constants/             # 프로젝트 전역 상수
    ├── eslint-config/         # ESLint 설정
    ├── prettier-config/       # Prettier 설정
    ├── tailwind-config/       # Tailwind CSS 설정
    └── ui/                    # 공통 UI 컴포넌트

Architecture

1. Web / Mobile

• AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포하였습니다.
• React Native Webview를 사용하여 Next.js로 만든 웹을 모바일 앱 내에 표시하였습니다.

2. Backend

• AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB와 연동하였습니다.
• AWS S3를 이용하여 이미지를 저장하였습니다.

✨ Features

1. Member 기능

대시보드

오늘 예약된 회의나 좌석을 확인 할 수 있습니다.

회의실 예약

특정 날짜와 시간을 선택하여 회의실을 예약 할 수 있습니다.

회의는 제목, 회의실, 시간, 참여자를 선택할 수 있으며 예약한 회의는 수정, 취소가 가능합니다.

좌석 예약

원하는 좌석을 예약 할 수 있습니다.

좌석은 이동과 반납이 가능합니다.

내 프로필

개인 프로필 정보를 확인 할 수 있으며 비밀번호 변경, 로그아웃을 할 수 있습니다.

2. Admin 기능

멤버 관리

전체 멤버 목록을 확인할 수 있습니다.

멤버 검색 기능을 통해 특정 멤버를 찾을 수 있습니다.

멤버의 정보를 추가, 수정, 삭제 할 수 있습니다.

팀 관리

전체 팀 목록을 확인할 수 있으며 드래그 앤 드롭 기능으로 팀 위치를 변경 할 수 있습니다.

팀은 추가, 수정, 삭제가 가능합니다.

회의실 설정

전체 회의실 목록을 확인 할 수 있습니다.

회의실은 추가, 수정, 삭제가 가능합니다.

좌석 설정

특정 좌석의 상태(예약 가능, 고정 좌석, 사용 불가)를 변경 할 수 있습니다.