노웨잇 서비스는 대학교 축제에서 불필요한 주점 웨이팅, 수기로 작성되는 주문 시스템을 개선하기 위해 만들어졌습니다.
관리자와 사용자 모두 고려한 기획과 설계가 이루어졌으며, 1명의 디자이너와 프론트엔드 3명, 백엔드 2명이 팀을 이루어 기획 및 디자인, 개발을 진행 하였고, 주 2회 오프라인 회의와 Discord, Figma, Swagger를 통해 원활한 소통과 협업을 진행했습니다.
현재는 더 좋은 서비스 제공을 위해 웹 서비스에서 앱 서비스로 마이그레이션 진행중 입니다.
| 기술 | 설명 |
|---|---|
| React | 재사용성과 유지보수성을 고려한 프론트엔드 구조 설계 |
| TypeScript | 정적 타입을 적용해 컴파일 단계에서 오류를 예방하고 코드 안정성 및 가독성 향상 |
| React Query | 서버 상태 캐싱 및 동기화를 통해 데이터 패칭 로직을 단순화하고 성능 최적화 |
| Axios | API 요청/응답 인터셉터를 활용해 공통 네트워크 로직을 일관성 있게 관리 |
| Naver Map API | 위치 기반 서비스 구현을 위한 지도 렌더링 및 마커·좌표 기반 기능 제공 |
| Zustand | 간결한 전역 상태 관리로 불필요한 보일러플레이트 없이 상태 흐름을 명확히 유지 |
| Tailwind CSS | 빠른 UI 구성과 일관된 디자인 시스템 적용 |
 황대성 Frontend |
 김도경 Frontend |
 이병준 Frontend |
이 프로젝트는 Admin과 User 애플리케이션이 공존하는 프론트엔드 모노레포입니다.
Yarn Workspaces와 Yarn Berry, Turborepo 기반으로 구성되어 있어 Zero-install 및 디자인 통일성, 캐시 최적화가 가능합니다
스타일은 TailwindCSS를 사용하였으며, 배포는 Vercel을 사용했습니다.
NoWait_FE/
├── apps/
│ ├── nowait-admin/ # 관리자용 프론트엔드 앱 (Vite + React + TypeScript)
│ └── nowait-user/ # 사용자용 프론트엔드 앱 (Vite + React + TypeScript)
├── packages/
│ ├── ui/ # 공통 UI 컴포넌트(Button, Card 등)
│ └── tailwind-config/ # 공통 Tailwind 설정 (색상, 폰트 등)
├── turbo.json # Turborepo 설정
├── package.json # 루트 패키지 매니저 설정
├── .yarnrc.yml # Yarn Berry 설정
└── ...-
공통 색상 및 폰트는
packages/tailwind-config/shared-styles.css파일에서 관리됩니다. -
버튼 등의 공통 UI 컴포넌트는
packages/ui/src내부에 생성하며, 다음과 같이 사용합니다:import { Card } from "@repo/ui/card";
-
각 앱 별 Tailwind 설정(padding, margin 등)은 아래의 경로에서 개별적으로 수정할 수 있습니다.
apps/admin/tailwind.config.js apps/user/tailwind.config.js
- 원하는 폴더에 저장소 클론
git clone https://github.com/GTable/NoWait_FE.git- 루트 폴더로 이동 후 Yarn 버전 확인 (25.6.19 기준 4.9.2 필요)
cd NoWait_FE
yarn --version- 패키지 설치
yarn install- UI 패키지 빌드
yarn workspace @repo/ui build- 전체 앱 빌드 (Turborepo 사용)
npx turbo build- yarn pnp가 Typescript 인식 못하는 문제 해결 (좌측 하단의 Allow 버튼 꼭 눌러야 함, 누르지 못할 시 완전히 종료 후 재실행)
yarn dlx @yarnpkg/sdks vscode- 앱 실행
yarn dev:user # 사용자용 앱 실행
yarn dev:admin # 관리자용 앱 실행사용자: https://app.nowait.co.kr
관리자: https://www.nowait-admin.com