■ 1. 문제점

기존 수동 매매의 한계:
- 타이밍 놓침: 감정적 판단과 수동 주문으로 인한 최적 진입/청산 타이밍 상실
- 일관성 부족: 매매 전략의 비체계적 실행, 규칙 준수 어려움
- 24시간 모니터링 불가: 시장 변동성에 실시간 대응 불가능
- 데이터 분석 한계: 수동 기록 및 분석의 비효율성

개발 전 검증 필요성:
- 비용 절감: 실제 백엔드 개발 전 UI/UX 사전 검증으로 재작업 최소화
- 사용자 피드백: 클라이언트/투자자 대상 시각적 데모 제공
- 요구사항 명확화: 화면 흐름을 통한 비즈니스 로직 구체화

■ 2. 바카라 사이트 목표

- 고품질 프론트엔드 목업: 실제 시스템과 동일한 수준의 인터랙티브 UI 제작
- 전문적인 트레이딩 UI: 금융 전문가가 신뢰할 수 있는 디자인 시스템 구축
- 실시간 시뮬레이션: Mock 데이터 기반 실제 동작 재현
- 향후 확장성: 실제 API 연동 시 최소 수정으로 전환 가능한 구조

■ 3. 주안점

- 사용자 경험: 직관적 네비게이션, 명확한 정보 계층, 빠른 응답성
- 기술 완성도: React 최신 패턴 적용, 성능 최적화, 크로스 브라우저 호환성
- 확장 가능성: 컴포넌트 재사용성, Context 기반 상태 관리, 모듈화된 구조

■ 1. 포트폴리오 소개

※ 서비스 개요

금융 트레이딩 시스템 | 개인/전문 투자자 대상 자동매매 솔루션

코스피200 선물 상품을 대상으로 하는 자동매매 시스템의 관리자 인터페이스를 구현한 프론트엔드 목업 바카라 사이트입니다. 실제 키움증권 API 연동 이전 단계로, 클라이언트 프레젠테이션 및 UI/UX 검증을 목적으로 개발되었습니다.

배포 URL: https://kospi200-auto-trader.netlify.app/

※ 주요 특징
- 전문 트레이딩 UI: 다크 모드 기반의 금융 전문가를 위한 직관적 인터페이스
- 완전 반응형: 모바일(320px)부터 대형 데스크톱(1920px+)까지 최적화
- 실시간 시뮬레이션: Mock 데이터를 활용한 실시간 시세 변동 및 손익 계산
- 데이터 시각화: Recharts 기반의 수익률 차트 및 거래 분석

---

■ 2. 작업 범위

※ 개발 참여 범위
- 화면 설계: 와이어프레임 및 정보 구조 설계
- UI/UX 디자인: 다크 모드 트레이딩 시스템 디자인 시스템 구축
- Front-end 개발: React 기반 전체 프론트엔드 개발
- Mock 데이터 구조 설계: JSON 기반 시뮬레이션 데이터 설계

※ 지원 환경
- 데스크톱: 1280px 이상 (권장), 1920px (최적)
- 태블릿: 768px ~ 1279px (부분 지원)
- 모바일: 320px ~ 767px (완전 반응형)
- 브라우저: Chrome 90+, Edge 90+, Firefox 88+, Safari 14+

※ 개발 환경
- 프레임워크: React 18 (Create React App)
- 스타일링: Tailwind CSS v3 (엄격 준수)
- 상태 관리: Context API + useReducer
- 차트 라이브러리: Recharts 2.x
- 라우팅: React Router 6.x
- 배포: Netlify

※ 팀 구성
- 개발사: 트레넷 팀
- 역할: 풀스택 개발자 (프론트엔드 전담) / UI/UX 디자이너 겸 개발자
- 개발 기간: 30일 (2025.01.01 ~ 2025.01.30)

---

■ 3. 주요 업무

※ 핵심 기능 구현

⁕ 3.1 로그인 및 인증 시스템
- Mock 기반 사용자 인증 플로우
- localStorage 세션 관리
- Protected Route 구현
- 로그인 상태 유지 및 자동 리다이렉트

⁕ 3.2 대시보드 (메인 화면)
- 실시간 계좌 정보: 총 평가금액, 예수금, 손익 실시간 표시
- 현재 포지션 관리: 보유 계약, 평균가, 평가손익 실시간 시뮬레이션
- 수익률 차트: 최근 30일 누적 수익률 시각화 (Recharts)
- 전략 상태 모니터링: 이동평균선, RSI, MACD 파라미터 표시
데스크톱: 4열 Grid 레이아웃
모바일: 카드형 리스트 + 2열 Grid

⁕ 3.3 거래 내역 페이지
- 주문 내역 탭: 주문 상태별 필터링 (전체, 대기, 체결, 취소)
- 체결 내역 탭: 실제 체결된 거래 조회
- 고급 필터: 날짜 범위, 거래 방향, 종목별 필터링
- 페이지네이션: 20건 단위 페이지 네비게이션
데스크톱: 테이블 형식
모바일: 카드형 리스트 + 바텀시트 필터

⁕ 3.4 시스템 로그 및 모니터링
- API 연결 상태: 실시간 연결 상태 모니터링
- 시스템 리소스: CPU/메모리 사용률 시뮬레이션
- 로그 뷰어: 레벨별 필터링 (INFO, WARNING, ERROR)
- 실시간 로그 스트림: 5~10초 간격 자동 업데이트
데스크톱: 3열 카드 + 테이블
모바일: 1열 카드 + 리스트

⁕ 3.5 설정 페이지 (고급 기능)
- 거래 전략 설정: 진입/청산 조건, 포지션 관리
- 리스크 관리: 손절/익절 비율, 포지션 제한
- 알림 설정: 거래/손익/시스템 알림 on/off
- API 연결 설정: Mock API 키 관리 및 연결 테스트
- 프리셋 시스템: 보수적/균형적/공격적 3가지 프리셋

---

■ 4. 주안점

※ 개발 시 중점 사항

⁕ 4.1 전문성 있는 UI/UX
- 다크 모드 최적화: 금융 트레이딩 시스템의 표준 색상 팔레트 적용
- 정보 계층 구조: 중요 정보 우선 배치 및 시각적 강조
- 직관적 네비게이션: 최소 클릭으로 모든 기능 접근 가능
- 실시간 피드백: 가격 변동 시 셀 깨빗임 효과, 손익 색상 구분

⁕ 4.2 완전 반응형 디자인
- 모바일 우선 전략: 320px부터 설계 시작
- 적응형 레이아웃: 테이블 ↔ 카드형 자동 전환
- 터치 최적화: 최소 44px 터치 타겟, 제스처 지원
- 브레이크포인트 세분화: xs(320px), sm(480px), md(768px), lg(1024px), xl(1280px), 2xl(1920px)

⁕ 4.3 실시간 시뮬레이션
- 가격 변동 시뮬레이션: 3-5초 간격 랜덤 ±0.25pt 변동
- 손익 자동 재계산: 현재가 변동 시 평가손익 실시간 업데이트
- 로그 스트림: 5-10초 간격 새로운 시스템 로그 자동 추가
- 차트 애니메이션: 부드러운 라인 애니메이션 및 툴팁 인터랙션

⁕ 4.4 성능 최적화
- React.memo: 불필요한 리렌더링 방지
- useCallback: 이벤트 핸들러 메모이제이션
- Code Splitting: 페이지별 lazy loading
- 번들 크기: 총 JS 번들 300KB 미만 유지

⁕ 4.5 기술 스택 준수
- Tailwind v3 엄격 준수: CSS 오버라이드 방지, @layer 활용
- 일관된 스타일링: 컴포넌트 재사용성 극대화
- CSS 충돌 방지: !important 최소화, CSS Module 활용