시안

프론트엔드 프로젝트 구조

src/
├── components/           # 재사용 가능한 UI 컴포넌트들
│   ├── ChatContainer.jsx    # 채팅 컨테이너 (메시지 목록 + 입력창)
│   ├── ChatHeader.jsx       # 채팅 헤더 (제목, 상태, 초기화 버튼)
│   ├── LoadingScreen.jsx    # 로딩 화면
│   ├── MessageInput.jsx     # 메시지 입력 폼
│   ├── MessageItem.jsx      # 개별 메시지 컴포넌트
│   ├── MessageList.jsx      # 메시지 목록 컴포넌트
│   └── WelcomeMessage.jsx   # 환영 메시지
├── hooks/               # 커스텀 훅들 (비즈니스 로직 분리)
│   ├── useSocket.js         # 소켓 연결 관리
│   ├── useChat.js           # 채팅 로직 (메시지 전송, 스트리밍)
│   └── useUI.js             # UI 관련 로직 (스크롤, 포커스, 포맷팅)
├── App.jsx              # 메인 앱 컴포넌트
├── App.css              # 스타일 (기존과 동일)
├── ErrorBoundary.jsx    # 에러 경계 컴포넌트 (기존과 동일)
├── main.jsx             # 엔트리 포인트 (기존과 동일)
└── index.css            # 글로벌 스타일 (기존과 동일)

📁 각 폴더별 역할

components/ - UI 컴포넌트

• 단일 책임 원칙: 각 컴포넌트는 하나의 명확한 역할만 담당
• 재사용 가능: props를 통해 외부에서 데이터와 함수를 주입받음
• 상태 없음: 대부분 순수 컴포넌트로 구성

hooks/ - 비즈니스 로직

• useSocket: 소켓 연결, 재연결, 상태 관리
• useChat: 메시지 송수신, 스트리밍, 대화 관리
• useUI: 스크롤, 포커스, 시간 포맷팅 등 UI 관련 로직

🔧 추가 개선 가능한 부분

상태 관리

• Redux Toolkit이나 Zustand 도입 고려
• 복잡한 상태 로직이 추가될 경우

스타일링

• CSS 모듈이나 Styled Components 적용
• 컴포넌트별 스타일 분리