이온디

# ec_api 채팅 시스템 기술 설명서 > 라이믹스 쪽지를 카카오톡처럼 사용할 수 있게 만든 스킨입니다. ## 한 줄 요약 **기존 라이믹스 쪽지 시스템 위에 React로 채팅 화면만 입힌 것**입니다. --- ## 🤔 자주 묻는 질문 ### "API 토큰은 어떻게 처리하나요?" **별도의 API 토큰이 없습니다.** 라이믹스의 기본 로그인 세션을 그대로 사용합니다. #### 왜 토큰이 필요 없나요? ``` 일반적인 분리형 구조 (토큰 필요) ┌─────────────────┐ ┌─────────────────┐ │ 별도 서버 │ ← ? → │ 라이믹스 서버 │ │ (React 앱) │ │ (API) │ │ app.example.com│ │ api.example.com│ └─────────────────┘ └─────────────────┘ → 서로 다른 서버라서 "나 누구야" 증명이 필요 = 토큰 ec_api 구조 (토큰 불필요) ┌─────────────────────────────────────────────┐ │ 같은 라이믹스 서버 │ │ ┌─────────────┐ ┌─────────────────────┐ │ │ │ React 화면 │ ←→ │ PHP API │ │ │ │ (스킨) │ │ (같은 서버 내 파일) │ │ │ └─────────────┘ └─────────────────────┘ │ │ example.com │ └─────────────────────────────────────────────┘ → 같은 서버 안이라서 로그인 상태 공유 = 토큰 불필요 ``` ### "회원번호를 조작하면 다른 사람 쪽지도 볼 수 있지 않나요?" **불가능합니다.** 모든 데이터 조회는 서버에서 현재 로그인한 사용자 기준으로만 처리됩니다. #### 보안 처리 방식 ```php // 서버에서 현재 로그인한 사용자 확인 (조작 불가능) $logged_info = Context::get('logged_info'); $member_srl = $logged_info->member_srl; // 예: 나 = 100번 // 쪽지 조회 쿼리 (항상 본인 기준) WHERE sender_srl = 100 OR receiver_srl = 100 ↑ 내가 보낸 것 ↑ 내가 받은 것 ``` 클라이언트에서 `receiver_srl=999`로 요청해도: - 서버는 **"100번(나)과 999번 사이의 대화"**만 찾습니다 - 100번(나)이 참여하지 않은 대화는 **절대 조회 불가** --- ## 🏗️ 시스템 구조 ### 전체 흐름 ``` [사용자] → [React 화면] → [PHP API] → [DB] → [PHP API] → [React 화면] → [사용자] (보기 좋게) (처리) (저장) (조회) (표시) ``` ### 구성 요소 | 구성 요소 | 역할 | 기술 | |---------|------|-----| | **화면 (Frontend)** | 채팅 UI 표시, 사용자 입력 처리 | React + TypeScript | | **API (Backend)** | 데이터 조회/저장, 권한 검증 | PHP (라이믹스) | | **데이터베이스** | 쪽지 내용 저장 | MySQL (기존 테이블) | ### 파일 구조 ``` modules/communication/skins/ec_api/ ├── messages.blade.php # 메인 페이지 (React가 여기에 마운트) ├── _api_router.blade.php # API 처리 (대화목록, 메시지 등) ├── assets/ │ ├── src/ # React 소스코드 │ │ ├── components/ # 화면 컴포넌트들 │ │ ├── hooks/ # 데이터 처리 로직 │ │ └── services/ # API 호출 │ └── dist/ # 빌드된 JS/CSS └── skin.xml # 스킨 설정 ``` --- ## 🔐 인증과 보안 ### 1. 로그인 확인 모든 API 요청의 첫 번째 단계: ```php $logged_info = Context::get('logged_info'); if (!$logged_info || !$logged_info->member_srl) { // 로그인 안 됨 → 거부 return ['error' => -1, 'message' => 'Login required']; } ``` ### 2. 권한 검증 자신의 데이터만 접근 가능: | API | 검증 내용 | |-----|---------| | 대화 목록 | 내가 보내거나 받은 쪽지만 조회 | | 메시지 조회 | 내가 참여한 대화만 조회 | | 메시지 전송 | 내 계정으로만 전송 가능 | | 읽음 처리 | 내가 받은 메시지만 처리 가능 | ### 3. CSRF 토큰 메시지 전송 등 데이터 변경 시 추가 보안: ```javascript // 전송 요청 시 CSRF 토큰 포함 params.append('_rx_csrf_token', csrfToken); ``` 이 토큰이 없거나 틀리면 요청이 거부됩니다. --- ## 🔄 실시간 메시지 수신 ### Polling 방식 (기본) ``` [React] → "새 메시지 있어?" → [서버] (3초마다 확인) ↓ [React] ← "2개 도착했어" ← [서버] (화면에 표시) ``` - 장점: 별도 설정 없이 동작 - 단점: 서버 부하, 최대 3초 지연 ### Pusher 방식 (선택) ``` [서버] → "새 메시지!" → [Pusher] → [React] (즉시 알림) (바로 표시) ``` - 장점: 진짜 실시간, 서버 부하 적음 - 단점: Pusher 서비스 비용 (무료 티어 있음) --- ## 📊 데이터 구조 ### 기존 쪽지 테이블 활용 ec_api는 **새 테이블을 만들지 않습니다**. 라이믹스의 기존 쪽지 테이블을 그대로 사용합니다. ``` member_message 테이블 ┌────────────┬────────────┬─────────────┬──────────┐ │ message_srl│ sender_srl │ receiver_srl│ content │ ├────────────┼────────────┼─────────────┼──────────┤ │ 1001 │ 100 (나) │ 200 (상대) │ 안녕하세요│ │ 1002 │ 200 (상대) │ 100 (나) │ 네 안녕! │ └────────────┴────────────┴─────────────┴──────────┘ ``` ### 호환성 - ✅ ec_api로 보낸 쪽지 → 기존 쪽지함에서도 보임 - ✅ 기존 방식으로 보낸 쪽지 → ec_api에서도 보임 - ✅ 기존 스킨으로 언제든 전환 가능 --- ## 🛠️ 기술 스택 | 분류 | 기술 | 용도 | |-----|------|------| | **프론트엔드** | React 18 | 화면 렌더링 | | | TypeScript | 타입 안정성 | | | Tailwind CSS | 스타일링 | | | Webpack | 빌드 도구 | | **백엔드** | PHP | API 처리 | | | 라이믹스 Core | 인증, DB 연동 | | **실시간** | Polling | 기본 업데이트 | | | Pusher (선택) | 실시간 푸시 | --- ## 📝 API 목록 | API | 설명 | 메서드 | |-----|------|-------| | `conversations` | 대화 목록 조회 | GET | | `messages` | 특정 상대와의 대화 내용 | GET | | `new_messages` | 새 메시지 확인 (폴링) | GET | | `send` | 메시지 전송 | POST | | `mark_read` | 읽음 처리 | POST | ### 예시: 대화 목록 조회 ``` 요청: GET /index.php?mid=message&act=dispCommunicationMessages&api=conversations 응답: { "error": 0, "data": { "conversations": [ { "member_srl": 200, "nick_name": "홍길동", "last_message": "안녕하세요", "unread_count": 2 } ], "total_unread": 2 } } ``` --- ## ❓ 추가 질문 ### "Next.js 같은 완전 분리 앱에서 쓰려면?" 별도의 API 인증 시스템이 필요합니다: - JWT 토큰 발급 API 구현 - 토큰 검증 미들웨어 추가 - CORS 설정 이건 ec_api의 범위를 벗어나는 별도 개발이 필요합니다. ### "모바일 앱에서 쓰려면?" 마찬가지로 토큰 기반 인증이 필요합니다. 현재 ec_api는 **웹 브라우저 전용**입니다. --- ## 📚 참고 자료 - [라이믹스 공식 문서](https://rhymix.org/manual) - [React 공식 문서](https://react.dev) - [Pusher 문서](https://pusher.com/docs)