시스템 구조 시각화
+------------------+
| Browser |
| (React Client) |
+--------+---------+
|
| HTTP/WebSocket
|
+--------v---------+
| Frontend |
| (React + Vite) |
| :3000 |
+--------+---------+
|
| REST API
|
+--------v---------+
| Backend |
| (FastAPI) |
| :8080 |
+--------+---------+
|
+--------------+--------------+
| | |
+--------v---+ +-------v----+ +------v------+
| MongoDB | | AI Service | | File Storage|
| :27017 | | :8001 | | (Local/GDrive)|
+------------+ +------------+ +-------------+
App.jsx
|
+-- AuthProvider (인증 상태 관리)
|
+-- Router
|
+-- Layout.jsx
| |
| +-- TopNav.jsx (상단 네비게이션)
| |
| +-- LeftSidebar.jsx (좌측 메뉴)
| |
| +-- [Page Content] (페이지별 내용)
| | |
| | +-- MainHome.jsx
| | +-- UniversalBoard.jsx
| | +-- BoardDetail.jsx
| | +-- ...
| |
| +-- RightSidebar.jsx (우측 사이드바)
| |
| +-- Footer.jsx
|
+-- Login.jsx (Layout 없음)
+-- SignUp.jsx (Layout 없음)
URL 요청
|
v
App.jsx (라우터)
|
+-- /community/:boardType --> UniversalBoard.jsx
| |
| v
| boardConfig.js
| (설정 조회)
| |
| v
| 게시판 렌더링
|
+-- /community/:boardType/detail/:postId --> BoardDetail.jsx
|
+-- /community/:boardType/edit/:postId --> BoardEdit.jsx
[로그인 요청]
|
v
POST /api/auth/login
|
v
Backend: 비밀번호 검증
|
+-- 실패 --> 401 반환
|
+-- 성공
|
v
JWT 토큰 생성
(Access Token + Refresh Token)
|
v
응답 반환
|
v
Frontend: 토큰 저장
- sessionStorage (브라우저 탭)
- localStorage (기억하기 체크시)
|
v
AuthContext 업데이트
(user, isAuthenticated)
Frontend
|
+-- api/board.js: getPosts()
|
v
HTTP Request
|
+-- Headers: Authorization: Bearer {token}
|
v
Backend (main.py)
|
+-- CORS Middleware
|
+-- Performance Middleware
|
v
Router (routers/board.py)
|
+-- Depends(get_current_user) --> 인증 검사
|
v
Database Query (MongoDB)
|
v
Response (JSON)
|
v
Frontend
|
+-- 상태 업데이트
|
+-- UI 렌더링
[파일 선택]
|
v
FileAttachment.jsx
|
+-- 파일 유효성 검사 (크기, 타입)
|
v
FormData 생성
|
v
POST /api/attachment/upload
|
v
Backend
|
+-- 파일 타입 검증
+-- 악성 파일 검사
+-- 파일 저장 (uploads/ 또는 Google Drive)
+-- 메타데이터 DB 저장
|
v
응답 (file_id, url)
|
v
게시글에 첨부파일 ID 연결
[채팅방 입장]
|
v
WebSocket 연결
ws://server/ws/chat/{room_id}
|
v
Backend (websocket_native.py)
|
+-- 연결 관리자에 등록
|
v
[메시지 전송]
|
+-- ws.send({type: "message", content: "..."})
|
v
Backend
|
+-- DB 저장
+-- 같은 방 사용자에게 브로드캐스트
|
v
[메시지 수신]
|
+-- ws.onmessage
|
v
UI 업데이트
+-------------+ 1:N +-------------+
| User |------------>| Post |
+-------------+ +-------------+
| |
| | 1:N
| v
| +-------------+
| | Comment |
| +-------------+
|
| 1:N
v
+-------------+ N:1 +-------------+
| ChatMessage |------------>| ChatRoom |
+-------------+ +-------------+
+-------------+ N:1 +-------------+
| Attachment |------------>| Post |
+-------------+ +-------------+
project/
|
+-- frontend/
| |
| +-- public/
| | +-- index.html
| | +-- favicon.ico
| |
| +-- src/
| |
| +-- api/ <-- API 호출 함수
| | +-- board.js
| | +-- ai.js
| | +-- attachment.js
| |
| +-- components/ <-- 재사용 컴포넌트
| | +-- Layout.jsx
| | +-- TopNav.jsx
| | +-- UniversalBoard.jsx
| | +-- ...
| |
| +-- config/ <-- 설정
| | +-- boardConfig.js
| |
| +-- contexts/ <-- 전역 상태
| | +-- AuthContext.jsx
| |
| +-- pages/ <-- 페이지
| | +-- MainHome.jsx
| | +-- Login.jsx
| | +-- boards/
| | +-- admin/
| | +-- mymenu/
| |
| +-- services/ <-- 서비스
| | +-- api.js
| | +-- auth.js
| |
| +-- utils/ <-- 유틸리티
| | +-- permissions.js
| | +-- logger.js
| |
| +-- styles/ <-- 스타일
| +-- variables.css
| +-- fonts.css
|
+-- backend/
|
+-- app/
|
+-- core/ <-- 핵심 설정
| +-- config.py
| +-- database.py
|
+-- models/ <-- 데이터 모델
| +-- user.py
| +-- attachment.py
|
+-- routers/ <-- API 라우터
| +-- auth.py
| +-- board.py
| +-- chat.py
|
+-- schemas/ <-- Pydantic 스키마
| +-- user.py
|
+-- services/ <-- 비즈니스 로직
| +-- ai_client.py
|
+-- utils/ <-- 유틸리티
+-- security.py
+-- email.py
+-- permissions.py
+------------------+
| Netlify |
| (Frontend) |
| - React Build |
| - Static Files |
+--------+---------+
|
| API Calls
|
+--------v---------+
| Cloud Server |
| (Backend) |
| - FastAPI |
| - Uvicorn |
+--------+---------+
|
|
+--------v---------+
| MongoDB Atlas |
| (Database) |
+------------------+