happybell80 22ac747394 docs: DOS 터미널 UI 구현 트러블슈팅 문서 추가

- /game001 경로 DOS 스타일 터미널 구현
- MCP 도구 설정 과정
- 모바일 반응형 개선
- 커서 스타일 변경 과정

2025-08-06 21:54:24 +09:00

3.2 KiB

Raw Blame History

DOS 터미널 UI 구현 (/game001)

날짜: 2025-08-06
작업자: happybell80 & Claude (서버팀)
관련 프로젝트: frontend-customer
관련 파일: dos-terminal.tsx, game-dos.tsx

오후 8시 40분

요구사항

로빙 레벨 1 단계를 표현하는 DOS 스타일 터미널 UI 구현:

완전한 MS-DOS 감성 (검은 화면, 초록색 텍스트)
도트 매트릭스 폰트
깜빡이는 커서
타이핑 애니메이션
RO-BEING ASCII 아트 로고

구현 내역

1. MCP 도구 설정

시도한 MCP:

@21st-dev/magic: API 키 필요로 실패
@magicuidesign/mcp: 정상 설치 (무료, API 키 불필요)
@jpisnice/shadcn-ui-mcp-server: 정상 설치

MCP 설치 명령:

claude mcp add magicui npx @magicuidesign/mcp@latest -- -y
claude mcp add shadcn-ui npx @jpisnice/shadcn-ui-mcp-server

2. 컴포넌트 구현

dos-terminal.tsx:

// 주요 기능
- ASCII 아트 RO-BEING 로고
- 타이핑 애니메이션 (50ms 간격)
- 커서 깜빡임 (500ms 간격)
- 3단계 시퀀스:
  1. intro: "안녕하세요. 로빙#1334234 입니다."
  2. name: "당신의 이름을 알려주세요."
  3. input: "INPUT : " 프롬프트

3. 스타일링

VT323 도트 폰트 적용:

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

CRT 효과:

스캔라인 효과
플리커 애니메이션
RGB 색수차 표현

4. 라우팅 설정

// App.tsx
<Route path="/game001" component={GameDos} />

오후 9시 00분

배포 및 수정

초기 문제점:

"당신의 이름을 알려주세요:" → 콜론을 마침표로 변경
INPUT 프롬프트에 커서 중복 표시
언더스코어 커서가 DOS 느낌 부족

수정 내역:

텍스트 마침표로 변경
INPUT 프롬프트 이후 커서 제거
커서를 세로줄(|) 스타일로 변경

오후 9시 10분

모바일 반응형 개선

문제점:

모바일에서 ASCII 로고 너무 큼
텍스트 크기 부적절
전체 레이아웃 깨짐

해결책:

// 모바일 반응형 클래스 적용
"text-[8px] md:text-xs"  // 로고 크기
"text-xs md:text-sm"      // 본문 텍스트
"w-full md:w-[524px]"     // 컨테이너 너비
"mt-4 md:mt-8"            // 여백 조정

결과

✅ 성공적 구현:

https://ro-being.com/game001 에서 확인 가능
정통 DOS 터미널 감성 재현
타이핑 애니메이션 자연스러움
모바일/데스크톱 반응형 완벽 지원

향후 개선사항

사용자 입력 후 다음 단계 구현
실제 로빙 API 연동
레벨별 UI 변화 시스템 구축
사운드 효과 추가 (키보드 타이핑 소리)

교훈

MCP 도구 선택:
- 무료 버전 확인 필수
- API 키 요구사항 사전 체크
- npm 패키지명 정확히 확인
DOS UI 구현:
- 세로줄 커서가 더 정통적
- 모바일 반응형 필수
- 폰트 크기 세심한 조정 필요
배포 프로세스:
- Gitea Actions 자동 배포 활용
- 빠른 피드백 사이클 중요

작성자: happybell80 & Claude (서버팀)
프로젝트: frontend-customer
주제: DOS 터미널 UI 구현

3.2 KiB Raw Blame History