NoColored - Front-End

---

📇목차

• 프로젝트 소개
• 기획 배경
• 팀원 소개
• Role
• 기술 스택
• Front 구동 환경
• 주요 기능 및 역할
• 폴더 구조 및 아키텍쳐 설계

---

🍀 프로젝트 소개

숨바꼭질 대전 웹 게임 - NoColored

main-service

• 숨바꼭질 대전 웹 게임
• NoColored는 2~4인 경쟁 기반 2D 캐쥬얼 게임입니다.
• NPC 사이 숨은 플레이어를 찾아 점수를 획득하는 방식의 게임입니다.
• 경쟁전을 통해 유사한 성적의 플레이어들과 대전을 펼칠 수 있습니다.
• 비공개/공개방을 생성하여 친선전 플레이가 가능합니다.

sub-service

• 게임의 진행상황을 통해 스킨, 칭호, 업적 보상을 얻을 수 있습니다.
• 전체 플레이어의 랭킹을 제공하여 자신의 티어와 점수를 확인할 수 있습니다.

기획 배경 바로 가기

서비스 주요 과제

• 웹소켓을 활용한 React - Phaser3 연결
• 공통 컴포넌트 디자인을 기반으로 한 깔끔한 UI
• 사용자가 게임에 빠르게 접근하고, 직관적으로 적응할 수 있도록 한 UX

---

💁 팀원 소개

👑이담비	🍪김세진	🎰박은수	💟전민정

👨‍👩‍👧‍👦Role

이담비

• Team Leader
• npm + vite 기반 프론트 환경 구축
• 프론트 코딩 컨벤션 설정
• 전체 Assets 제작 및 수정
• 공통 컴포넌트 제작
• 메인 페이지 제작
• Phaser3를 활용한 게임 전체 구현
• 코드 리뷰를 통한 피드백 제공
• 중간/최종 발표 PPT 제작
• UCC 감독
• 최종 발표

김세진

• Front Leader
• 피그마 디자인
• 공통 axios api 제작
• 공통 컴포넌트 제작
• 전체 프레임 및 대기실 페이지 제작
• axios 기반 백엔드 데이터 연결
• User 상태 관리
• 최종 발표 PPT 제작
• 코드 리뷰를 통한 피드백 제공

전민정

• 서기
• 피그마 디자인
• 회의 내용 필기하여 노션에 기록
• 공통 컴포넌트 제작
• 랜딩, 랭킹 페이지 제작
• 대기실 및 결과창 페이지 제작
• 웹 소켓, Axios 기반 API 연결
• 토큰을 기반으로 한 라우터 보안 관리
• 코드 리뷰를 통한 피드백 제공
• 최종 발표 UCC 촬영 및 제작

박은수

• 기획 및 정책 담당
• 피그마 디자인
• 요구사항 정의서 및 기능 명세서 작성
• 세계관, 아이템, 수집 요소, 경험치에 대한 정책 수립
• 공통 컴포넌트 제작
• 회원 기능 , 게임 정보 , 환경설정, Collection 페이지 제작
• Axios 기반 API 연결
• Collection, Music 상태관리
• 코드 리뷰를 통한 피드백 제공
• UCC 출연
• 중간 발표
• ReadMe 파일 작성

---

🛠️ 기술 스택

React 18.2.0 + Vite 5.1.4
Language : TypeScript 5.2.2
Css : Vanilla Extract Css 1.14.0
State : Zustand 4.5.2
Game : Phaser3 3.80.0 Web-Socket
Etc : Node.js 20.11.20 WebStorm

* 기술 별 선택 이유 확인하기

---

🏃 Front 구동 환경

// 패키지 라이브러리 설치
npm install

// 개발 환경 실행
npm run dev

// 빌드 파일 생성
npm run bulid

• front-domain : https://nocolored.world

---

⚙️ 주요 기능 및 역할

🖥️ 랜딩 페이지 - 전민정

첫 화면

🏠 메인 페이지 - 이담비

메인 (게스트)	메인 (회원)

🗃️ 컬렉션 페이지 - 박은수

스킨	칭호	업적

🥇 랭킹 페이지 - 전민정, 이담비

랭킹 조회 화면

🎮 친선전, 대기실 페이지 - 김세진, 이담비

친선전 - 대기실 리스트	친선전 - 모드 선택
친선전 - 대기실

🎮 게임 진입, 결과 페이지 - 김세진, 이담비, 전민정

경쟁전 매칭, 게임 로딩	게임 결과 화면

🎮 게임 플레이 - 이담비

게임 화면

⚙️ 환경설정, 정보 - 박은수

플레이 가이드	아이템 및 티어 가이드
게스트 회원전환	환경 설정

---

📂 폴더 구조 및 아키텍쳐 설계 - 김세진, 이담비

.
├── node_modules
├── public
|   ├── fonts
|   ├── images
|   └── music
└── src
    ├── app
    ├── components
    ├── constants
    ├── containers
    ├── hooks
    ├── services
    ├── states
    ├── styles
    ├── types
    └── utils