Skip to content

[Docs] README.md 작성 #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miraclee1226 merged 7 commits into from
Mar 24, 2025
Merged

[Docs] README.md 작성 #188

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eac3563
1차 리드미 작성
miraclee1226 Jan 6, 2025
83e7b73
Docs: 리드미 업데이트
miraclee1226 Jan 6, 2025
16363df
Docs: 리드미 업데이트
miraclee1226 Jan 6, 2025
048a41a
Docs: 리드미 업데이트
miraclee1226 Jan 14, 2025
b0d1c15
Chore: Merge branch 'develop' of https://github.com/codeit-internship…
miraclee1226 Jan 14, 2025
341696b
Docs: 리드미 업데이트
miraclee1226 Mar 6, 2025
d8c66d1
Docs: 리드미 업데이트
miraclee1226 Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
367 changes: 318 additions & 49 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,350 @@
# Turborepo starter
<div align="center">
<img src="https://github.com/user-attachments/assets/38a66efd-c2c1-4b87-8a5a-497605a72ad3" width="100px" height="100px" />
<h1>Codeit Resources</h1>

[![GitHub issues](https://img.shields.io/github/issues/codeit-internship-group-b/codeit-resources?color=red)]()
[![GitHub stars](https://img.shields.io/github/stars/codeit-internship-group-b/codeit-resources?color=yellow)]()
[![GitHub forks](https://img.shields.io/github/forks/codeit-internship-group-b/codeit-resources?color=orange)]()
[![GitHub watchers](https://img.shields.io/github/watchers/codeit-internship-group-b/codeit-resources?color=blue)]()
Comment on lines +1 to +8
Copy link

@coderabbitai coderabbitai bot Jan 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

배지 링크를 업데이트해야 합니다.

GitHub 배지의 링크가 비어있습니다. 각 배지를 해당하는 GitHub 페이지로 연결해야 합니다.

다음과 같이 수정해주세요:

-[![GitHub issues](https://img.shields.io/github/issues/codeit-internship-group-b/codeit-resources?color=red)]()
+[![GitHub issues](https://img.shields.io/github/issues/codeit-internship-group-b/codeit-resources?color=red)](https://github.com/codeit-internship-group-b/codeit-resources/issues)

-[![GitHub stars](https://img.shields.io/github/stars/codeit-internship-group-b/codeit-resources?color=yellow)]()
+[![GitHub stars](https://img.shields.io/github/stars/codeit-internship-group-b/codeit-resources?color=yellow)](https://github.com/codeit-internship-group-b/codeit-resources/stargazers)

-[![GitHub forks](https://img.shields.io/github/forks/codeit-internship-group-b/codeit-resources?color=orange)]()
+[![GitHub forks](https://img.shields.io/github/forks/codeit-internship-group-b/codeit-resources?color=orange)](https://github.com/codeit-internship-group-b/codeit-resources/network/members)

-[![GitHub watchers](https://img.shields.io/github/watchers/codeit-internship-group-b/codeit-resources?color=blue)]()
+[![GitHub watchers](https://img.shields.io/github/watchers/codeit-internship-group-b/codeit-resources?color=blue)](https://github.com/codeit-internship-group-b/codeit-resources/watchers)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div align="center">
<img src="https://github.com/user-attachments/assets/38a66efd-c2c1-4b87-8a5a-497605a72ad3" width="100px" height="100px" />
<h1>Codeit Resources</h1>
[![GitHub issues](https://img.shields.io/github/issues/codeit-internship-group-b/codeit-resources?color=red)]()
[![GitHub stars](https://img.shields.io/github/stars/codeit-internship-group-b/codeit-resources?color=yellow)]()
[![GitHub forks](https://img.shields.io/github/forks/codeit-internship-group-b/codeit-resources?color=orange)]()
[![GitHub watchers](https://img.shields.io/github/watchers/codeit-internship-group-b/codeit-resources?color=blue)]()
<div align="center">
<img src="https://github.com/user-attachments/assets/38a66efd-c2c1-4b87-8a5a-497605a72ad3" width="100px" height="100px" />
<h1>Codeit Resources</h1>
[![GitHub issues](https://img.shields.io/github/issues/codeit-internship-group-b/codeit-resources?color=red)](https://github.com/codeit-internship-group-b/codeit-resources/issues)
[![GitHub stars](https://img.shields.io/github/stars/codeit-internship-group-b/codeit-resources?color=yellow)](https://github.com/codeit-internship-group-b/codeit-resources/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/codeit-internship-group-b/codeit-resources?color=orange)](https://github.com/codeit-internship-group-b/codeit-resources/network/members)
[![GitHub watchers](https://img.shields.io/github/watchers/codeit-internship-group-b/codeit-resources?color=blue)](https://github.com/codeit-internship-group-b/codeit-resources/watchers)
🧰 Tools
🪛 Markdownlint (0.37.0)

5-5: null
No empty links

(MD042, no-empty-links)

6-6: null
No empty links

(MD042, no-empty-links)

7-7: null
No empty links

(MD042, no-empty-links)

8-8: null
No empty links

(MD042, no-empty-links)

2-2: null
Images should have alternate text (alt text)

(MD045, no-alt-text)


This is an official starter Turborepo.
<p>사내 리소스 예약/대여/반납 플랫폼</p>
<p align="center">
<a href="https://codeit.click">View Web Site</a>
·
<a href="https://api.codeit.click">API Docs</a>
</p>

![CodeitResources](https://github.com/user-attachments/assets/95a700e0-b710-4f99-85b2-9d11a4e0fdbc)

## Using this example
</div>

Run the following command:
<br />
<br />

```sh
npx create-turbo@latest
```
# 💫 Table of contents

## What's inside?
- [<code>👥 Team</code>](#-team)
- [<code>🛠️ Tech stack</code>](#️-tech-stack)
- [<code>📁 Project structure</code>](#-project-structure)
- [<code>✨ Features</code>](#-features)
- [<code>🚀 Installation</code>](#-installation)

This Turborepo includes the following packages/apps:
<br />
<br />

### Apps and Packages
# 👥 Team

- `docs`: a [Next.js](https://nextjs.org/) app
- `web`: another [Next.js](https://nextjs.org/) app
- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
<table align="center">
<tbody>
<tr>
<td>
<a href="https://github.com/miraclee1226">
<img src="https://avatars.githubusercontent.com/miraclee1226" width="100" height="100"/>
</a>
</td>
<td>
<a href="https://github.com/bokeeeey">
<img src="https://avatars.githubusercontent.com/bokeeeey" width="100" height="100"/>
</a>
</td>
<td>
<a href="https://github.com/AdamSeungheonShin">
<img src="https://avatars.githubusercontent.com/AdamSeungheonShin" width="100px" height="100px"/>
</a>
</td>
<td>
<a href="https://github.com/cindycho0423">
<img src="https://avatars.githubusercontent.com/cindycho0423" width="100px" height="100px"/>
</a>
</td>
<td>
<a href="https://github.com/dudwns0213">
<img src="https://avatars.githubusercontent.com/dudwns0213" width="100px" height="100px"/>
</a>
</td>
</tr>
<tr>
<th>
<a href="https://github.com/miraclee1226">소혜린</a>
</th>
<th>
<a href="https://github.com/bokeeeey">김보경</a>
</th>
<th>
<a href="https://github.com/AdamSeungheonShin">신승헌</a>
</th>
<th>
<a href="https://github.com/cindycho0423">조현지</a>
</th>
<th>
<a href="https://github.com/dudwns0213">배영준</a>
</th>
</tr>
<tr>
<th>
FullStack, PM
</th>
<th>
FullStack
</th>
<th>
FullStack
</th>
<th>
FrontEnd
</th>
<th>
FrontEnd
</th>
</tr>
</tbody>
</table>

Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
<br />
<br />

### Utilities
# 🛠️ Tech stack

This Turborepo has some additional tools already setup for you:
## 1. Frontend

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- Language

### Build
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">

To build all apps and packages, run the following command:
- Library & Framework

```
cd my-turborepo
pnpm build
```
<img src="https://img.shields.io/badge/Next.js-black?style=for-the-badge&logo=next.js&logoColor=white">
<img src="https://img.shields.io/badge/Tailwind%20CSS-38bdf8?style=for-the-badge&logo=tailwindcss&logoColor=white">
<img src="https://img.shields.io/badge/TanStack%20Query-ff5a1f?style=for-the-badge&logo=react-query&logoColor=white">
<img src="https://img.shields.io/badge/Storybook-ff4785?style=for-the-badge&logo=storybook&logoColor=white">
<img src="https://img.shields.io/badge/Zustand-1c6c7e?style=for-the-badge&logo=zustand&logoColor=white">
<img src="https://img.shields.io/badge/React%20Hook%20Form-61dafb?style=for-the-badge&logo=react-hook-form&logoColor=black">

### Develop
- Deploy

To develop all apps and packages, run the following command:
<img src="https://img.shields.io/badge/AWS%20S3-232f3e?style=for-the-badge&logo=amazon-s3&logoColor=white">
<img src="https://img.shields.io/badge/AWS%20CloudFront-ff9900?style=for-the-badge&logo=aws&logoColor=white">

```
cd my-turborepo
pnpm dev
```
## 2. Mobile

- Language

<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">

- Library & Framework

<img src="https://img.shields.io/badge/ReactNative (Expo)-222222?style=for-the-badge&logo=React&logoColor=">

## 3. Backend

- Language

<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">

- Library & Framework

<img src="https://img.shields.io/badge/express-000000?style=for-the-badge&logo=express&logoColor=white">

- Database

<img src="https://img.shields.io/badge/mongoDB-47A248?style=for-the-badge&logo=MongoDB&logoColor=white">

- Deploy

<img src="https://img.shields.io/badge/AWS%20EC2-ff9900?style=for-the-badge&logo=amazon-ec2&logoColor=white">

## 4. CI/CD

<img src="https://img.shields.io/badge/githubactions-2088FF?style=for-the-badge&logo=github-actions&logoColor=black">

### Remote Caching
<br />
<br />

Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
# 🚀 Installation

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
### 패키지 설치

```bash
pnpm install
```
cd my-turborepo
npx turbo login

### 개발 모드

```bash
pnpm run dev
```

### 프로덕션 모드

```bash
pnpm run build
```

This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
<br />
<br />

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
# 📁 Project Structure

## MonoRepo

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

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

```
npx turbo link
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 컴포넌트
```

## Useful Links
## Architecture

**1. Web / Mobile**

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

**2. Backend**

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

<div align="center">
<img src="https://github.com/user-attachments/assets/0a76d65a-1662-4843-a3a2-37791ac55a53" width="800px" />
</div>

<br />
<br />

# ✨ Features

## 1. Member 기능

### 대시보드

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

![스크린샷 2025-01-14 134555](https://github.com/user-attachments/assets/45a79e2f-384f-4716-87bb-b3293858b478)

<br />

### 회의실 예약

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

![스크린샷 2025-01-14 141122](https://github.com/user-attachments/assets/703e396c-8d28-4a81-9e70-8b2d58578d60)

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

![스크린샷 2025-01-14 134523](https://github.com/user-attachments/assets/d8fbc607-ba5d-4e75-a5f6-a7b2e46bf71a)

<br />

### 좌석 예약

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

![스크린샷 2025-01-14 142225](https://github.com/user-attachments/assets/05736685-b3e0-4e73-bb7c-b277d049c7dd)

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

![스크린샷 2025-01-14 142257](https://github.com/user-attachments/assets/f292417e-b534-46f0-b486-89c1165c1213)

<br />

### 내 프로필

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

![스크린샷 2025-01-14 134649](https://github.com/user-attachments/assets/0cff8370-4c18-4525-9da6-9d2be79959f0)

<br />

## 2. Admin 기능

### 멤버 관리

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

![스크린샷 2025-01-14 133616](https://github.com/user-attachments/assets/aae08e78-6f12-455c-aa02-22a42c022695)

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

![스크린샷 2025-01-14 133601](https://github.com/user-attachments/assets/648e673c-af33-4b1f-b4c2-ab9583bf0aa2)

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

![스크린샷 2025-01-14 134750](https://github.com/user-attachments/assets/1daddc78-e610-4c99-bbe3-ff38d930d978)

<br />

### 팀 관리

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

![스크린샷 2025-01-14 133640](https://github.com/user-attachments/assets/23a08bbe-fee2-4bef-94aa-b36327fd54e9)

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

![스크린샷 2025-01-14 134838](https://github.com/user-attachments/assets/7826470e-af41-4e7e-a1cb-57cea986fe09)

<br />

### 회의실 설정

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

![스크린샷 2025-01-14 133716](https://github.com/user-attachments/assets/20ce9c61-874d-4d51-877a-134377085dfd)

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

![스크린샷 2025-01-14 135011](https://github.com/user-attachments/assets/8bb8967a-fa87-4e25-907d-922a9d2f422c)

<br />

### 좌석 설정

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

Learn more about the power of Turborepo:
![스크린샷 2025-01-14 142346](https://github.com/user-attachments/assets/19b3ff3c-e555-4e3b-8afd-86b89ef4f427)

- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
<br />
<br />