💬 Purgo Chat - Frontend

Purgo Chat은 React와 Tailwind CSS 기반의 실시간 채팅 웹 애플리케이션입니다.
사용자는 닉네임을 입력하고 채팅방에 입장해 WebSocket을 통해 메시지를 주고받을 수 있습니다.

---

📁 프로젝트 구조 및 설명

PurgoChat/
├── public/
│   ├── index.html              # HTML 템플릿
│   ├── favicon.ico
│   └── ...
│
├── src/
│   ├── App.js                  # 라우팅 포함된 루트 컴포넌트
│   ├── index.js                # ReactDOM 렌더링 진입점
│   ├── context/
│   │   └── NicknameContext.js  # 닉네임 전역 상태 관리
│   ├── components/
│   │   └── NicknameForm.js     # 닉네임 입력 폼 UI
│   ├── pages/
│   │   ├── ChatRoomPage.js     # WebSocket 기반 채팅방
│   │   └── NicknamePage.js     # 입장 전 닉네임 입력 화면
│   ├── Mockup/
│   │   ├── IPhoneMockup.js     # SVG 프레임 내 렌더링 컴포넌트
│   │   └── iPhone.svg          # 아이폰 프레임 SVG
│
├── .gitignore
├── package.json
├── tailwind.config.js
└── README.md

---

🧩 주요 기능

• 💡 닉네임 입력 후 채팅방 입장
• ⚡ WebSocket을 통한 실시간 채팅
• 👥 참여자 목록 실시간 갱신
• 🚫 욕설 횟수 카운팅 UI
• 📱 iPhone 프레임 내 웹페이지 시연

---

🌐 라우팅 구조

<Route path="/" element={<NicknamePage />} />
<Route path="/chat" element={<ChatRoomPage />} />

1. "/" → 닉네임 입력 화면
2. "/chat" → 채팅방 진입 + WebSocket 연결

---

🎨 UI 구성 특징

🎨	Tailwind CSS 기반 유틸리티 스타일
📱	모바일 우선 반응형 설계

---

🖼️ 아이폰 목업 시연

아이폰 기기처럼 보이는 SVG 프레임 안에 웹 페이지를 삽입하여 시각적 시연이 가능합니다.

• 사용 파일:
• src/Mockup/iPhone.svg (SVG 프레임)
• src/Mockup/IPhoneMockup.js (React 삽입 컴포넌트)
• 사용 예시:

<IPhoneMockup>
  <ChatRoomPage />
</IPhoneMockup>

👉 관련 설명:
velog 글 보기

---

🚀 실행 방법

# 의존성 설치
npm install

# 개발 서버 실행
npm start

---

🛠️ 기술 스택

• ⚛️ React (CRA)
• 🎨 Tailwind CSS
• 🧭 React Router v6
• 📡 WebSocket API