From eac35635dc40683159cb9309a0bf48175a368d66 Mon Sep 17 00:00:00 2001 From: Lin Date: Mon, 6 Jan 2025 22:33:12 +0900 Subject: [PATCH 1/6] =?UTF-8?q?1=EC=B0=A8=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 299 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 229 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 7a4658aa..3606bcae 100644 --- a/README.md +++ b/README.md @@ -1,81 +1,240 @@ -# Turborepo starter - -This is an official starter Turborepo. - -## Using this example - -Run the following command: - -```sh -npx create-turbo@latest -``` - -## What's inside? - -This Turborepo includes the following packages/apps: - -### Apps and Packages - -- `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 - -Each package/app is 100% [TypeScript](https://www.typescriptlang.org/). - -### Utilities - -This Turborepo has some additional tools already setup for you: - -- [TypeScript](https://www.typescriptlang.org/) for static type checking -- [ESLint](https://eslint.org/) for code linting -- [Prettier](https://prettier.io) for code formatting - -### Build - -To build all apps and packages, run the following command: - -``` -cd my-turborepo -pnpm build +
+ +

Codeit Resources

+ +[![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)]() + +사내 리소스 예약, 대여, 반납 플랫폼 + +❗**GIF 추가 예정** + +
+ +
+ +## 💫 Contents +- [📋 Overview](#-overview) +- [👥 Team](#-team) +- [🛠️ Tech stack](#️-tech-stack) +- [🚀 Installation](#-installation) +- [✨ Features](#-features) +- [📁 Project structure](#-project-structure) +- [🌟 Challenges](#-challenges) + +
+ +## 📋 Overview + +❗**GIF 추가 예정** + +Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. + +실시간 예약 시스템과 직관적인 사용자 인터페이스를 통해 사용자와 관리자 모두 쉽게 사용할 수 있도록 개발하였습니다. + +
+ +## 👥 Team + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ 소혜린 + + 김보경 + + 신승헌 + + 조현지 + + 배영준 +
+ FullStack, PM + + FullStack + + FullStack + + FrontEnd + + FrontEnd +
+ +
+ +## 🛠️ Tech stack + +### 1. Frontend + - **Language** + + + + - **Library & Framework** + + + + + + + + + - **Deploy** + + + + +### 2. Mobile❗**진행중** + +### 3. Backend + - **Language** + + + + - **Library & Framework** + + + + - **Database** + + + + - **Deploy** + + + +
+ +## 🚀 Installation +### 패키지 설치 + +```bash +pnpm install ``` -### Develop +### 개발 모드 -To develop all apps and packages, run the following command: - -``` -cd my-turborepo -pnpm dev +```bash +pnpm run dev ``` -### Remote Caching - -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. +### 프로덕션 모드 -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: - -``` -cd my-turborepo -npx turbo login +```bash +pnpm build ``` -This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview). - -Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo: - +
+ +## ✨ Features +❗**페이지 별 이미지 추가 예정** +## 1. Member 기능 +### 대시보드 +오늘 예약된 회의나 좌석을 확인할 수 있습니다. +### 회의실 예약 +특정 날짜와 시간을 선택하여 회의실을 예약할 수 있습니다. 회의는 제목, 회의실, 시간, 참여자를 선택할 수 있으며 예약한 회의는 수정, 취소가 가능합니다. +### 좌석 예약 +원하는 좌석을 예약할 수 있습니다. 좌석은 이동과 반납이 가능합니다. +### 내 프로필 +개인 프로필 정보를 확인할 수 있습니다. + +## 2. Admin 기능 +### 멤버 관리 +전체 멤버 목록을 확인하고 추가할 수 있습니다. 멤버 검색을 통해 특정 멤버를 찾을 수 있고 해당 멤버의 정보를 수정하거나 삭제가 가능합니다. +### 팀 관리 +전체 팀 목록을 확인하고 추가할 수 있습니다. 팀은 수정과 삭제가 가능합니다. +### 회의실 설정 +전체 회의실 목록을 확인하고 추가할 수 있습니다. 회의실은 수정과 삭제가 가능합니다. +### 좌석 설정 +특정 좌석의 상태(예약 가능, 고정 좌석, 사용 불가)를 변경할 수 있습니다. + +
+ +## 📁 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 문서 (Swagger) +│ │ +│ ├── mobile/ # 모바일 앱 (진행중) +│ │ +│ ├── storybook/ # StoryBook 설정 파일 +│ │ +│ └── web/ # 웹 클라이언트 (진행중) +└── packages/ + ├── constants/ # 상수 + ├── eslint-config/ # ESLint 설정 + ├── prettier-config/ # Prettier 설정 + ├── tailwind-config/ # Tailwind 설정 + ├── tsconfig/ # TypeScript 설정 + └── ui/ # 공통 UI 컴포넌트 ``` -## Useful Links - -Learn more about the power of Turborepo: - -- [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) +### Architecture +**1. Web / Mobile** +- AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포히였습니다. +- React Native Webview를 사용하여 Next.js로 만든 웹을 모바일 앱 내에 표시하였습니다. + +**2. Backend** +- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. +- AWS S3를 이용하여 이미지를 저장하였습니다. + +
+ +
+ +## 🌟 Challenges +❗**추가 예정** From 83e7b73be16d2a1c3ada8cbdd2a4d07c2953cb82 Mon Sep 17 00:00:00 2001 From: Lin Date: Mon, 6 Jan 2025 22:44:26 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 오타수정 - pnpm build -> pnpm run build로 수정정 --- README.md | 105 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 67 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 3606bcae..319fd527 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@
## 💫 Contents + - [📋 Overview](#-overview) - [👥 Team](#-team) - [🛠️ Tech stack](#️-tech-stack) @@ -30,7 +31,7 @@ ❗**GIF 추가 예정** -Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. +Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. 실시간 예약 시스템과 직관적인 사용자 인터페이스를 통해 사용자와 관리자 모두 쉽게 사용할 수 있도록 개발하였습니다. @@ -109,46 +110,49 @@ Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반 ## 🛠️ Tech stack ### 1. Frontend - - **Language** - - - - - **Library & Framework** - - - - - - - - - - **Deploy** - - - + +- **Language** + + + +- **Library & Framework** + + + + + + + + +- **Deploy** + + + ### 2. Mobile❗**진행중** ### 3. Backend - - **Language** - - - - - **Library & Framework** - - - - - **Database** - - - - - **Deploy** - - + +- **Language** + + + +- **Library & Framework** + + + +- **Database** + + + +- **Deploy** + +
## 🚀 Installation + ### 패키지 설치 ```bash @@ -164,40 +168,61 @@ pnpm run dev ### 프로덕션 모드 ```bash -pnpm build +pnpm run build ```
## ✨ Features + ❗**페이지 별 이미지 추가 예정** + ## 1. Member 기능 + ### 대시보드 + 오늘 예약된 회의나 좌석을 확인할 수 있습니다. + ### 회의실 예약 + 특정 날짜와 시간을 선택하여 회의실을 예약할 수 있습니다. 회의는 제목, 회의실, 시간, 참여자를 선택할 수 있으며 예약한 회의는 수정, 취소가 가능합니다. + ### 좌석 예약 + 원하는 좌석을 예약할 수 있습니다. 좌석은 이동과 반납이 가능합니다. + ### 내 프로필 + 개인 프로필 정보를 확인할 수 있습니다. ## 2. Admin 기능 + ### 멤버 관리 + 전체 멤버 목록을 확인하고 추가할 수 있습니다. 멤버 검색을 통해 특정 멤버를 찾을 수 있고 해당 멤버의 정보를 수정하거나 삭제가 가능합니다. + ### 팀 관리 + 전체 팀 목록을 확인하고 추가할 수 있습니다. 팀은 수정과 삭제가 가능합니다. + ### 회의실 설정 + 전체 회의실 목록을 확인하고 추가할 수 있습니다. 회의실은 수정과 삭제가 가능합니다. + ### 좌석 설정 + 특정 좌석의 상태(예약 가능, 고정 좌석, 사용 불가)를 변경할 수 있습니다.
## 📁 Project Structure + ### MonoRepo + 웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 모노레포로 구성하였습니다. 또한 TurboRepo를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다. 전체적인 폴더구조는 아래와 같습니다. + ``` codeit-resources/ # Project Root ├── apps/ @@ -224,17 +249,21 @@ codeit-resources/ # Project Root ``` ### Architecture + **1. Web / Mobile** -- AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포히였습니다. + +- AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포하였습니다. - React Native Webview를 사용하여 Next.js로 만든 웹을 모바일 앱 내에 표시하였습니다. - + **2. Backend** -- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. + +- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. - AWS S3를 이용하여 이미지를 저장하였습니다. - +
## 🌟 Challenges + ❗**추가 예정** From 16363dffb44feb04de567c956b5b45862128f94a Mon Sep 17 00:00:00 2001 From: Lin Date: Mon, 6 Jan 2025 23:53:01 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 59 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 319fd527..ed92fb46 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,32 @@ [![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)]() +[![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)]() -사내 리소스 예약, 대여, 반납 플랫폼 +사내 리소스 예약/대여/반납 플랫폼 ❗**GIF 추가 예정** +

+ View Web Site + · + API Docs +


+## 📋 Overview + +❗**GIF 추가 예정** + +**Codeit Resources**는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. + +**실시간 예약 시스템**과 **직관적인 사용자 인터페이스**를 통해 사용자와 관리자 모두 손쉽게 이용할 수 있습니다. + +
+ ## 💫 Contents - [📋 Overview](#-overview) @@ -27,16 +42,6 @@
-## 📋 Overview - -❗**GIF 추가 예정** - -Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. - -실시간 예약 시스템과 직관적인 사용자 인터페이스를 통해 사용자와 관리자 모두 쉽게 사용할 수 있도록 개발하였습니다. - -
- ## 👥 Team @@ -111,11 +116,11 @@ Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반 ### 1. Frontend -- **Language** +- Language -- **Library & Framework** +- Library & Framework @@ -124,31 +129,35 @@ Codeit Resources는 회사의 리소스를 효율적으로 예약, 대여, 반 -- **Deploy** +- Deploy -### 2. Mobile❗**진행중** +### 2. Mobile❗진행중 ### 3. Backend -- **Language** +- Language -- **Library & Framework** +- Library & Framework -- **Database** +- Database -- **Deploy** +- Deploy +### 4. CI/CD + + +
## 🚀 Installation @@ -252,13 +261,13 @@ codeit-resources/ # Project Root **1. Web / Mobile** -- AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포하였습니다. -- React Native Webview를 사용하여 Next.js로 만든 웹을 모바일 앱 내에 표시하였습니다. +- **AWS S3**에 빌드된 정적 파일을 저장하고, 이를 **AWS CloudFront**를 통해 배포하였습니다. +- **React Native Webview**를 사용하여 **Next.js**로 만든 웹을 모바일 앱 내에 표시하였습니다. **2. Backend** -- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. -- AWS S3를 이용하여 이미지를 저장하였습니다. +- **AWS EC2** 인스턴스에서 **Express.js** 서버를 실행한 뒤, **MongoDB** 데이터베이스와 연동하였습니다. +- **AWS S3**를 이용하여 이미지를 저장하였습니다.
From 048a41afb3677fc8b241a28d3b441ffc1fc50d66 Mon Sep 17 00:00:00 2001 From: Lin Date: Tue, 14 Jan 2025 17:30:16 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 243 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 169 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index ed92fb46..d8d6444a 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@
-## 📋 Overview +# 📋 Overview ❗**GIF 추가 예정** @@ -30,19 +30,19 @@
-## 💫 Contents +# 💫 Table of contents - [📋 Overview](#-overview) - [👥 Team](#-team) - [🛠️ Tech stack](#️-tech-stack) -- [🚀 Installation](#-installation) -- [✨ Features](#-features) - [📁 Project structure](#-project-structure) +- [✨ Features](#-features) - [🌟 Challenges](#-challenges) +- [🚀 Installation](#-installation)
-## 👥 Team +# 👥 Team
@@ -112,9 +112,9 @@
-## 🛠️ Tech stack +# 🛠️ Tech stack -### 1. Frontend +## 1. Frontend - Language @@ -134,9 +134,9 @@ -### 2. Mobile❗진행중 +## 2. Mobile❗진행중 -### 3. Backend +## 3. Backend - Language @@ -154,125 +154,220 @@ -### 4. CI/CD +## 4. CI/CD - +
-## 🚀 Installation +# 📁 Project Structure -### 패키지 설치 +## MonoRepo -```bash -pnpm install -``` +웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 모노레포로 구성하였습니다. 또한 TurboRepo를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다. -### 개발 모드 +전체적인 폴더구조는 아래와 같습니다. -```bash -pnpm run dev +``` +codeit-resources/ # Project Root +├── apps/ +│ ├── api/ # 백엔드 서버 +│ │ └── src/ +│ │ ├── controllers/ # API 엔드포인트 핸들러 +│ │ ├── middleware/ # API 미들웨어 +│ │ ├── models/ # MongoDB 스키마 및 모델 정의 +│ │ ├── routes/ # API 라우트 +│ │ └── swagger/ # API 문서 (Swagger) +│ │ +│ ├── mobile/ # 모바일 앱 (진행중) +│ │ +│ ├── storybook/ # StoryBook 설정 파일 +│ │ +│ └── web/ # 웹 클라이언트 (진행중) +└── packages/ + ├── constants/ # 상수 + ├── eslint-config/ # ESLint 설정 + ├── prettier-config/ # Prettier 설정 + ├── tailwind-config/ # Tailwind 설정 + ├── tsconfig/ # TypeScript 설정 + └── ui/ # 공통 UI 컴포넌트 ``` -### 프로덕션 모드 +## Architecture -```bash -pnpm run build -``` +**1. Web / Mobile** -
+- AWS S3에 빌드된 정적 파일을 저장하고, 이를 AWS CloudFront를 통해 배포하였습니다. +- React Native Webview를 사용하여 Next.js로 만든 웹을 모바일 앱 내에 표시하였습니다. -## ✨ Features +**2. Backend** -❗**페이지 별 이미지 추가 예정** +- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. +- AWS S3를 이용하여 이미지를 저장하였습니다. + +
+ +
+ +
+ +# ✨ Features ## 1. Member 기능 ### 대시보드 -오늘 예약된 회의나 좌석을 확인할 수 있습니다. +오늘 예약된 회의나 좌석을 확인 할 수 있습니다. + +![스크린샷 2025-01-14 134555](https://github.com/user-attachments/assets/45a79e2f-384f-4716-87bb-b3293858b478) + +
### 회의실 예약 -특정 날짜와 시간을 선택하여 회의실을 예약할 수 있습니다. 회의는 제목, 회의실, 시간, 참여자를 선택할 수 있으며 예약한 회의는 수정, 취소가 가능합니다. +특정 날짜와 시간을 선택하여 회의실을 예약 할 수 있습니다. + +![스크린샷 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) + +
### 좌석 예약 -원하는 좌석을 예약할 수 있습니다. 좌석은 이동과 반납이 가능합니다. +원하는 좌석을 예약 할 수 있습니다. + +![스크린샷 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) + +
### 내 프로필 -개인 프로필 정보를 확인할 수 있습니다. +개인 프로필 정보를 확인 할 수 있습니다. + +비밀번호 변경, 로그아웃을 할 수 있습니다. + +![스크린샷 2025-01-14 134649](https://github.com/user-attachments/assets/0cff8370-4c18-4525-9da6-9d2be79959f0) + +
## 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) + +
### 팀 관리 -전체 팀 목록을 확인하고 추가할 수 있습니다. 팀은 수정과 삭제가 가능합니다. +전체 팀 목록을 확인할 수 있습니다. 드래그 앤 드롭으로 팀 위치를 변경 할 수 있습니다. + +![스크린샷 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) + +
### 회의실 설정 -전체 회의실 목록을 확인하고 추가할 수 있습니다. 회의실은 수정과 삭제가 가능합니다. +전체 회의실 목록을 확인 할 수 있습니다. + +![스크린샷 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) + +
### 좌석 설정 -특정 좌석의 상태(예약 가능, 고정 좌석, 사용 불가)를 변경할 수 있습니다. +특정 좌석의 상태(예약 가능, 고정 좌석, 사용 불가)를 변경 할 수 있습니다. + +![스크린샷 2025-01-14 142346](https://github.com/user-attachments/assets/19b3ff3c-e555-4e3b-8afd-86b89ef4f427)
-## 📁 Project Structure +# 🌟 Challenges -### MonoRepo +프로젝트를 진행하며 마주한 다양한 기술적 문제들과 해결 과정을 기록했습니다. -웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 모노레포로 구성하였습니다. 또한 TurboRepo를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다. +## 1. 정적 배포 선택 배경 -전체적인 폴더구조는 아래와 같습니다. +해당 서비스는 다음과 같은 페이지에서 실시간 데이터 처리가 필요했습니다. -``` -codeit-resources/ # Project Root -├── apps/ -│ ├── api/ # 백엔드 서버 -│ │ └── src/ -│ │ ├── controllers/ # API 엔드포인트 핸들러 -│ │ ├── middleware/ # API 미들웨어 -│ │ ├── models/ # MongoDB 스키마 및 모델 정의 -│ │ ├── routes/ # API 라우트 -│ │ └── swagger/ # API 문서 (Swagger) -│ │ -│ ├── mobile/ # 모바일 앱 (진행중) -│ │ -│ ├── storybook/ # StoryBook 설정 파일 -│ │ -│ └── web/ # 웹 클라이언트 (진행중) -└── packages/ - ├── constants/ # 상수 - ├── eslint-config/ # ESLint 설정 - ├── prettier-config/ # Prettier 설정 - ├── tailwind-config/ # Tailwind 설정 - ├── tsconfig/ # TypeScript 설정 - └── ui/ # 공통 UI 컴포넌트 -``` +- 회의실 예약 +- 좌석 예약 -### Architecture +이 두 페이지는 각각 예약 현황과 좌석 상태를 **실시간으로 반영**하는 것이 필수적이었습니다. -**1. Web / Mobile** +다른 사용자가 회의실을 예약하거나 좌석을 선점하는 상황을 즉시 확인할 수 있어야 하기 때문에 프로젝트 초기에는 서버 사이드 렌더링(SSR)을 통한 동적 배포를 고려했습니다. -- **AWS S3**에 빌드된 정적 파일을 저장하고, 이를 **AWS CloudFront**를 통해 배포하였습니다. -- **React Native Webview**를 사용하여 **Next.js**로 만든 웹을 모바일 앱 내에 표시하였습니다. +하지만 **결과적으로 정적 배포를 선택**했는데, 그 이유는 다음과 같습니다. -**2. Backend** +### 1. 실시간 데이터가 필요한 페이지는 일부인 점 -- **AWS EC2** 인스턴스에서 **Express.js** 서버를 실행한 뒤, **MongoDB** 데이터베이스와 연동하였습니다. -- **AWS S3**를 이용하여 이미지를 저장하였습니다. +회의실 예약과 좌석 예약 페이지를 제외한 대시보드, 프로필 페이지, 관리자 설정 페이지 등 **대부분의 페이지가 정적 컨텐츠**입니다. -
- -
+이러한 페이지들은 즉각적인 데이터 갱신이 필요하지 않고 변경 사항이 실시간으로 반영될 필요가 없었습니다. + +### 2. 서버 비용 절감 + +동적 배포의 경우 모든 페이지 요청마다 서버의 리소스를 사용하게 되어 트래픽에 따른 서버 비용이 증가합니다. + +반면 AWS S3와 CloudFront를 이용한 정적 배포는 **CDN**을 통해 효율적으로 트래픽을 처리할 수 있어 비용 효율적인 운영이 가능했습니다. -## 🌟 Challenges +### 웹소켓을 통한 실시간 처리 + +실시간 데이터가 필요한 페이지들은 클라이언트 사이드에서 **웹소켓**을 통해 처리하여 정적 배포의 장점을 살리면서도 실시간 데이터 갱신을 구현할 수 있었습니다. + +
+ +## 2. CI/CD 트러블 슈팅 + +### Shell + +### 메모리 부족 + +### SSH 연결 끊김 + +
-❗**추가 예정** +# 🚀 Installation + +### 패키지 설치 + +```bash +pnpm install +``` + +### 개발 모드 + +```bash +pnpm run dev +``` + +### 프로덕션 모드 + +```bash +pnpm run build +``` From 341696b09d3c7e88ea01163605dfb82a2e576249 Mon Sep 17 00:00:00 2001 From: Lin Date: Thu, 6 Mar 2025 12:54:03 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 283 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 201 insertions(+), 82 deletions(-) diff --git a/README.md b/README.md index d8d6444a..aebd2ec4 100644 --- a/README.md +++ b/README.md @@ -6,40 +6,31 @@ [![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)]() - -사내 리소스 예약/대여/반납 플랫폼 -❗**GIF 추가 예정** +

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

+

+ View Web Site + · + API Docs +

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

- View Web Site - · - API Docs -


- -# 📋 Overview - -❗**GIF 추가 예정** - -**Codeit Resources**는 회사의 리소스를 효율적으로 예약, 대여, 반납할 수 있는 통합 플랫폼입니다. - -**실시간 예약 시스템**과 **직관적인 사용자 인터페이스**를 통해 사용자와 관리자 모두 손쉽게 이용할 수 있습니다. -
# 💫 Table of contents -- [📋 Overview](#-overview) - [👥 Team](#-team) - [🛠️ Tech stack](#️-tech-stack) - [📁 Project structure](#-project-structure) -- [✨ Features](#-features) - [🌟 Challenges](#-challenges) +- [✨ Features](#-features) - [🚀 Installation](#-installation) +

# 👥 Team @@ -110,6 +101,7 @@
+

# 🛠️ Tech stack @@ -118,7 +110,7 @@ - Language - + - Library & Framework @@ -134,13 +126,21 @@ -## 2. Mobile❗진행중 +## 2. Mobile + +- Language + + + +- Library & Framework + + ## 3. Backend - Language - + - Library & Framework @@ -158,13 +158,14 @@ +

# 📁 Project Structure ## MonoRepo -웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 모노레포로 구성하였습니다. 또한 TurboRepo를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다. +웹과 모바일 앱이 동일한 백엔드 API를 사용하고, UI 컴포넌트를 공유하기 때문에 **모노레포**로 구성하였습니다. 또한 **TurboRepo**를 도입하여 빌드 속도를 개선하고 효율적인 개발 환경을 구축했습니다. 전체적인 폴더구조는 아래와 같습니다. @@ -177,19 +178,38 @@ codeit-resources/ # Project Root │ │ ├── middleware/ # API 미들웨어 │ │ ├── models/ # MongoDB 스키마 및 모델 정의 │ │ ├── routes/ # API 라우트 -│ │ └── swagger/ # API 문서 (Swagger) +│ │ └── swagger/ # API 문서 │ │ -│ ├── mobile/ # 모바일 앱 (진행중) +│ └── mobile/ # 모바일 앱 +│ │ └── app/ +│ │ ├── (route)/ # 라우팅 디렉토리 +│ │ ├── assets/ # 정적 자산 폴더 +│ │ ├── components/ # 재사용 가능한 컴포넌트 +│ │ ├── constants/ # 앱 전역 상수 +│ │ ├── utils/ # 유틸리티 함수 +│ │ ├── hooks/ # 커스텀 훅 +│ │ └── store/ # 상태 관리 스토어 │ │ -│ ├── storybook/ # StoryBook 설정 파일 +│ ├── storybook/ # StoryBook 설정 및 구성 파일 │ │ -│ └── web/ # 웹 클라이언트 (진행중) -└── packages/ - ├── constants/ # 상수 +│ └── 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 설정 - ├── tsconfig/ # TypeScript 설정 + ├── tailwind-config/ # Tailwind CSS 설정 └── ui/ # 공통 UI 컴포넌트 ``` @@ -202,13 +222,158 @@ codeit-resources/ # Project Root **2. Backend** -- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB 데이터베이스와 연동하였습니다. +- AWS EC2 인스턴스에서 Express.js 서버를 실행한 뒤, MongoDB와 연동하였습니다. - AWS S3를 이용하여 이미지를 저장하였습니다.
+
+
+ +# 🌟 Challenges + +프로젝트를 진행하며 마주한 다양한 기술적 문제들과 해결 과정을 기록했습니다. + +## 1. 정적 배포를 선택한 이유 + +### 서버 비용 절감 + +동적 배포의 경우 모든 페이지 요청마다 서버의 리소스를 사용하게 되어 트래픽에 따른 서버 비용이 증가합니다. + +반면 AWS S3와 CloudFront를 이용한 정적 배포는 **CDN**을 통해 효율적으로 트래픽을 처리할 수 있어 비용 효율적인 운영이 가능했습니다. + +## 2. Mongo DB 해킹 + +AWS EC2에 배포된 MongoDB 서버에서 주기적인 데이터 초기화 현상이 발생했습니다. +![스크린샷 2025-01-31 132651](https://github.com/user-attachments/assets/44d0273e-c267-430d-87f3-3bcbff3b009c) + +이는 외부로부터 무단 접근 시도로 인한 것으로 판단되어 EC2의 /etc/mongod.conf 설정 파일에 보안 설정을 추가하여 인증된 사용자만 데이터베이스에 접근할 수 있도록 제한했습니다. + +``` +security: + authorization: enabled +``` + +### 추가 개선 방안 + +TODO: 추가 개선 방안 작성 + +## 3. CI/CD 트러블 슈팅 + +### Shell 관련 이슈 + +Github Actions에서 배포 스크립트 실행 시 **command not found** 오류가 발생했습니다. + +![스크린샷 2025-01-14 162317](https://github.com/user-attachments/assets/e3956e2b-e7b7-4146-847d-c6edbd27b4ed) + +원인은 shell의 환경 설정 문제였습니다. Github Actions의 SSH 실행은 **non-interactive, non-login shell** 환경에서 실행되는데 `.bashrc` 파일은 기본적으로 **non-interactive shell**에서 아무 작업도 수행하지 않도록 설정되어 있었습니다. + +이를 해결하기 위해 .bashrc 파일의 interactive shell 여부를 확인하는 조건문 이전에 pnpm 실행 경로를 추가하여 배포 스크립트가 정상적으로 실행되도록 수정했습니다. + +```bash +# Add pnpm and pm2 to PATH +export PATH="$PATH:/home/ubuntu/.local/share/pnpm" + +# If not running interactively, don't do anything +case $- in + *i*) ;; + *) return;; +esac +``` + +
+ +### 메모리 부족 + +EC2 프리티어 인스턴스(1GiB RAM)에서 모노레포의 여러 패키지를 동시에 설치하는 과정에서 메모리 사용량이 급격히 증가하여 시스템에 의해 **프로세스가 강제 종료**되었습니다. + +![스크린샷 2025-01-14 163305](https://github.com/user-attachments/assets/47589f66-fe72-4558-b666-4981ea18744b) + +이를 해결하기 위해 **Swap Memory를 2G로 설정**하여 **제한된 메모리 환경에서도 안정적으로 빌드 프로세스를 완료**할 수 있었습니다. + +![스크린샷 2025-01-17 155425](https://github.com/user-attachments/assets/f1f575e5-fe5f-4d62-a532-8e6cc4e32c1d) + +
+ +### SSH 연결 끊김 + +배포 과정에서 **client_loop: send disconnect: Broken pipe** 오류가 발생하여 배포가 중단되는 현상이 발생했습니다. + +![스크린샷 2025-01-14 162535](https://github.com/user-attachments/assets/f476e1e7-46c7-4e6b-b520-4ff3f79a1e80) + +이는 GitHub Actions에서 EC2로의 SSH 연결이 일정 시간 동안 데이터 전송이 없으면 자동으로 종료되는 문제였고, 특히 패키지 설치 과정이 길어지면서 SSH 연결이 타임아웃되어 발생한 문제였습니다. + +이를 해결하기 위해 EC2 인스턴스의 SSH 설정 파일(/etc/ssh/sshd_config)에 다음 설정을 추가했습니다. + +``` +ClientAliveInterval 60 # 60초마다 클라이언트에게 응답 요청 +ClientAliveCountMax 3 # 최대 3번까지 재시도 +``` + +따라서 SSH 연결이 안정적으로 유지되어 배포가 정상적으로 완료될 수 있었습니다. + +
+ +## 4. Suspense, ErrorBoundary + +컴포넌트 내에서 **isLoading**이나 **isError** 처리를 한 경우 컴포넌트의 의도나 동작을 한눈에 파악하기 어려웠습니다. + +``` +import { useQuery } from 'react-query'; + +const ResponsiveTeamsPage = () => { + const { data, isLoading, isError, error } = useQuery('teams', fetchTeams); + + if (isLoading) { + return ( + <> + + + + ); + } + + if (isError) { + return ( + <> + +
Error occurred: {error.message}
+ + ); + } + + return ( + <> + + + + ); +}; +``` + +
+ +따라서 **Suspense**와 **ErrorBoundary**를 사용하여 상태를 UI 레벨에서 선언적으로 처리하여 코드를 읽기 쉽고 유지보수 하기 쉬운 구조로 변경하였습니다. + +``` +export default function ResponsiveTeamsPage(): JSX.Element | null { + + return ( + <> + + + }> + + + + + ); +} +``` + +

# ✨ Features @@ -249,9 +414,7 @@ codeit-resources/ # Project Root ### 내 프로필 -개인 프로필 정보를 확인 할 수 있습니다. - -비밀번호 변경, 로그아웃을 할 수 있습니다. +개인 프로필 정보를 확인 할 수 있으며 비밀번호 변경, 로그아웃을 할 수 있습니다. ![스크린샷 2025-01-14 134649](https://github.com/user-attachments/assets/0cff8370-4c18-4525-9da6-9d2be79959f0) @@ -261,11 +424,11 @@ codeit-resources/ # Project Root ### 멤버 관리 -전체 멤버 목록을 확인 할 수 있습니다. +전체 멤버 목록을 확인할 수 있습니다. ![스크린샷 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) @@ -277,7 +440,7 @@ codeit-resources/ # Project Root ### 팀 관리 -전체 팀 목록을 확인할 수 있습니다. 드래그 앤 드롭으로 팀 위치를 변경 할 수 있습니다. +전체 팀 목록을 확인할 수 있으며 드래그 앤 드롭 기능으로 팀 위치를 변경 할 수 있습니다. ![스크린샷 2025-01-14 133640](https://github.com/user-attachments/assets/23a08bbe-fee2-4bef-94aa-b36327fd54e9) @@ -306,50 +469,6 @@ codeit-resources/ # Project Root ![스크린샷 2025-01-14 142346](https://github.com/user-attachments/assets/19b3ff3c-e555-4e3b-8afd-86b89ef4f427)
- -# 🌟 Challenges - -프로젝트를 진행하며 마주한 다양한 기술적 문제들과 해결 과정을 기록했습니다. - -## 1. 정적 배포 선택 배경 - -해당 서비스는 다음과 같은 페이지에서 실시간 데이터 처리가 필요했습니다. - -- 회의실 예약 -- 좌석 예약 - -이 두 페이지는 각각 예약 현황과 좌석 상태를 **실시간으로 반영**하는 것이 필수적이었습니다. - -다른 사용자가 회의실을 예약하거나 좌석을 선점하는 상황을 즉시 확인할 수 있어야 하기 때문에 프로젝트 초기에는 서버 사이드 렌더링(SSR)을 통한 동적 배포를 고려했습니다. - -하지만 **결과적으로 정적 배포를 선택**했는데, 그 이유는 다음과 같습니다. - -### 1. 실시간 데이터가 필요한 페이지는 일부인 점 - -회의실 예약과 좌석 예약 페이지를 제외한 대시보드, 프로필 페이지, 관리자 설정 페이지 등 **대부분의 페이지가 정적 컨텐츠**입니다. - -이러한 페이지들은 즉각적인 데이터 갱신이 필요하지 않고 변경 사항이 실시간으로 반영될 필요가 없었습니다. - -### 2. 서버 비용 절감 - -동적 배포의 경우 모든 페이지 요청마다 서버의 리소스를 사용하게 되어 트래픽에 따른 서버 비용이 증가합니다. - -반면 AWS S3와 CloudFront를 이용한 정적 배포는 **CDN**을 통해 효율적으로 트래픽을 처리할 수 있어 비용 효율적인 운영이 가능했습니다. - -### 웹소켓을 통한 실시간 처리 - -실시간 데이터가 필요한 페이지들은 클라이언트 사이드에서 **웹소켓**을 통해 처리하여 정적 배포의 장점을 살리면서도 실시간 데이터 갱신을 구현할 수 있었습니다. - -
- -## 2. CI/CD 트러블 슈팅 - -### Shell - -### 메모리 부족 - -### SSH 연결 끊김 -
# 🚀 Installation From d8c66d15271db83339ed78ee98d4e4de72002b77 Mon Sep 17 00:00:00 2001 From: Lin Date: Mon, 24 Mar 2025 21:41:00 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 188 +++++++----------------------------------------------- 1 file changed, 23 insertions(+), 165 deletions(-) diff --git a/README.md b/README.md index aebd2ec4..7e3af856 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,6 @@ - [👥 Team](#-team) - [🛠️ Tech stack](#️-tech-stack) - [📁 Project structure](#-project-structure) -- [🌟 Challenges](#-challenges) - [✨ Features](#-features) - [🚀 Installation](#-installation) @@ -161,6 +160,29 @@

+# 🚀 Installation + +### 패키지 설치 + +```bash +pnpm install +``` + +### 개발 모드 + +```bash +pnpm run dev +``` + +### 프로덕션 모드 + +```bash +pnpm run build +``` + +
+
+ # 📁 Project Structure ## MonoRepo @@ -232,150 +254,6 @@ codeit-resources/ # Project Root

-# 🌟 Challenges - -프로젝트를 진행하며 마주한 다양한 기술적 문제들과 해결 과정을 기록했습니다. - -## 1. 정적 배포를 선택한 이유 - -### 서버 비용 절감 - -동적 배포의 경우 모든 페이지 요청마다 서버의 리소스를 사용하게 되어 트래픽에 따른 서버 비용이 증가합니다. - -반면 AWS S3와 CloudFront를 이용한 정적 배포는 **CDN**을 통해 효율적으로 트래픽을 처리할 수 있어 비용 효율적인 운영이 가능했습니다. - -## 2. Mongo DB 해킹 - -AWS EC2에 배포된 MongoDB 서버에서 주기적인 데이터 초기화 현상이 발생했습니다. -![스크린샷 2025-01-31 132651](https://github.com/user-attachments/assets/44d0273e-c267-430d-87f3-3bcbff3b009c) - -이는 외부로부터 무단 접근 시도로 인한 것으로 판단되어 EC2의 /etc/mongod.conf 설정 파일에 보안 설정을 추가하여 인증된 사용자만 데이터베이스에 접근할 수 있도록 제한했습니다. - -``` -security: - authorization: enabled -``` - -### 추가 개선 방안 - -TODO: 추가 개선 방안 작성 - -## 3. CI/CD 트러블 슈팅 - -### Shell 관련 이슈 - -Github Actions에서 배포 스크립트 실행 시 **command not found** 오류가 발생했습니다. - -![스크린샷 2025-01-14 162317](https://github.com/user-attachments/assets/e3956e2b-e7b7-4146-847d-c6edbd27b4ed) - -원인은 shell의 환경 설정 문제였습니다. Github Actions의 SSH 실행은 **non-interactive, non-login shell** 환경에서 실행되는데 `.bashrc` 파일은 기본적으로 **non-interactive shell**에서 아무 작업도 수행하지 않도록 설정되어 있었습니다. - -이를 해결하기 위해 .bashrc 파일의 interactive shell 여부를 확인하는 조건문 이전에 pnpm 실행 경로를 추가하여 배포 스크립트가 정상적으로 실행되도록 수정했습니다. - -```bash -# Add pnpm and pm2 to PATH -export PATH="$PATH:/home/ubuntu/.local/share/pnpm" - -# If not running interactively, don't do anything -case $- in - *i*) ;; - *) return;; -esac -``` - -
- -### 메모리 부족 - -EC2 프리티어 인스턴스(1GiB RAM)에서 모노레포의 여러 패키지를 동시에 설치하는 과정에서 메모리 사용량이 급격히 증가하여 시스템에 의해 **프로세스가 강제 종료**되었습니다. - -![스크린샷 2025-01-14 163305](https://github.com/user-attachments/assets/47589f66-fe72-4558-b666-4981ea18744b) - -이를 해결하기 위해 **Swap Memory를 2G로 설정**하여 **제한된 메모리 환경에서도 안정적으로 빌드 프로세스를 완료**할 수 있었습니다. - -![스크린샷 2025-01-17 155425](https://github.com/user-attachments/assets/f1f575e5-fe5f-4d62-a532-8e6cc4e32c1d) - -
- -### SSH 연결 끊김 - -배포 과정에서 **client_loop: send disconnect: Broken pipe** 오류가 발생하여 배포가 중단되는 현상이 발생했습니다. - -![스크린샷 2025-01-14 162535](https://github.com/user-attachments/assets/f476e1e7-46c7-4e6b-b520-4ff3f79a1e80) - -이는 GitHub Actions에서 EC2로의 SSH 연결이 일정 시간 동안 데이터 전송이 없으면 자동으로 종료되는 문제였고, 특히 패키지 설치 과정이 길어지면서 SSH 연결이 타임아웃되어 발생한 문제였습니다. - -이를 해결하기 위해 EC2 인스턴스의 SSH 설정 파일(/etc/ssh/sshd_config)에 다음 설정을 추가했습니다. - -``` -ClientAliveInterval 60 # 60초마다 클라이언트에게 응답 요청 -ClientAliveCountMax 3 # 최대 3번까지 재시도 -``` - -따라서 SSH 연결이 안정적으로 유지되어 배포가 정상적으로 완료될 수 있었습니다. - -
- -## 4. Suspense, ErrorBoundary - -컴포넌트 내에서 **isLoading**이나 **isError** 처리를 한 경우 컴포넌트의 의도나 동작을 한눈에 파악하기 어려웠습니다. - -``` -import { useQuery } from 'react-query'; - -const ResponsiveTeamsPage = () => { - const { data, isLoading, isError, error } = useQuery('teams', fetchTeams); - - if (isLoading) { - return ( - <> - - - - ); - } - - if (isError) { - return ( - <> - -
Error occurred: {error.message}
- - ); - } - - return ( - <> - - - - ); -}; -``` - -
- -따라서 **Suspense**와 **ErrorBoundary**를 사용하여 상태를 UI 레벨에서 선언적으로 처리하여 코드를 읽기 쉽고 유지보수 하기 쉬운 구조로 변경하였습니다. - -``` -export default function ResponsiveTeamsPage(): JSX.Element | null { - - return ( - <> - - - }> - - - - - ); -} -``` - -
-
- # ✨ Features ## 1. Member 기능 @@ -470,23 +348,3 @@ export default function ResponsiveTeamsPage(): JSX.Element | null {

- -# 🚀 Installation - -### 패키지 설치 - -```bash -pnpm install -``` - -### 개발 모드 - -```bash -pnpm run dev -``` - -### 프로덕션 모드 - -```bash -pnpm run build -```