### 커밋 개발내역 이번 커밋 묶음은 서비스가 성장하며 비대해진 프론트엔드 아키텍처를 대대적으로 수술하고, 사용자 경험(UX)과 검색엔진 최적화(SEO)를 세밀하게 다듬은 핵심 업데이트입니다. 가장 두드러지는 변화는 `5c92943` 커밋에서의 대규모 리팩토링입니다. 무려 1,300줄에 달하던 `CreateRoomModal.tsx`와 거대한 `AuctionBoard.tsx`를 기능적 최소 단위로 쪼개어 수십 개의 하위 컴포넌트와 비즈니스 로직 훅(`useCreateRoom.ts` 등)으로 분리했습니다. 이후 이어진 커밋들에서는 경매방([id]) 페이지의 동적 메타데이터를 분리하여 SEO 중복 문제를 해결하고, 픽셀 아트 테마에 걸맞은 UI 디테일(그림자, 로고 교체, 채팅 하이라이팅 등)을 완성했습니다. **핵심 한 줄 요약:** 10KB 이상의 거대 컴포넌트를 해체하여 시스템의 유지보수성을 확보하고, 정교한 UI/UX 폴리싱과 메타데이터 최적화로 플랫폼의 완성도를 끌어올렸습니다. ### 작업 순서 이번 작업은 '구조적 안정성 확보 → 시스템 설정 고도화 → 시각적 완성도 증대'라는 매우 정석적인 순서로 진행되었습니다. 1. **`5c92943` (아키텍처 대공사 및 비즈니스 로직 분리):** 가장 먼저 기술 부채를 청산했습니다. 거대한 UI 컴포넌트 안에 혼재되어 있던 상태 관리, API 호출, 렌더링 로직을 분리했습니다. 이 과정에서 `doc/LESSONS_LEARNED.md`에 기록되었듯, 스크립트 기반 코드 생성 시의 변수 보간 이슈 등 시행착오를 겪으며 시스템을 안정화했습니다. 2. **`132e667` (SEO 구조화 및 UI 레이아웃 조정):** 코드가 깔끔해진 바탕 위에서 `layout.tsx`에 JSON-LD 구조화 데이터를 삽입하고, 동적 라우팅 페이지의 메타데이터 중복 노출 문제를 해결했습니다. 3. **`abaa178` ~ `b245cd6` (에셋 파이프라인 정리):** 썸네일 이미지 파일들의 네이밍 규칙을 통일하여 배포 환경에서의 정적 파일 참조 오류를 방지했습니다. 4. **`9ccc4c8` (UI/UX 디테일 및 텍스트 현지화):** 마지막으로 사용자가 직접 체감하는 영역을 다듬었습니다. 단순 텍스트 로고를 이미지로 교체하여 브랜딩을 강화하고, 시스템 메시지에 정규식을 적용해 가시성을 높였으며, 영문 위주의 컨트롤 패널 명칭을 한국어(예: GM CONTROL PANEL → [주최자] 컨트롤 박스)로 직관적으로 변경했습니다. ### 핵심 기능 #### 1. 거대 컴포넌트 해체와 SRP(단일 책임 원칙) 적용 기존의 방 생성 모달은 UI와 로직이 뒤섞여 유지보수가 불가능한 상태로 진화하고 있었습니다. 이를 뷰(View)와 로직(Logic)으로 분리하고, 뷰를 다시 단계별 컴포넌트로 나누었습니다. ```tsx // src/components/CreateRoomModal.tsx (리팩토링 요약) // Before: 1,300줄짜리 단일 파일 내에서 모든 상태와 UI를 관리 // After: 메인 컴포넌트는 오직 '조합(Composition)'과 '흐름 제어' 역할만 수행 import { BasicInfoStep } from "./create-room/BasicInfoStep"; import { CaptainRegistrationStep } from "./create-room/CaptainRegistrationStep"; import { PlayerRegistrationStep } from "./create-room/PlayerRegistrationStep"; import { LinksStep } from "./create-room/LinksStep"; import { useCreateRoom } from "@/features/auction/hooks/useCreateRoom"; export function CreateRoomModal() { // 상태 관리와 비즈니스 로직은 커스텀 훅으로 완전 분리하여 응집도 향상 const { step, basicInfo, captains, players, links, ...actions } = useCreateRoom(); return (

{/* 각 스텝은 독립된 컴포넌트로 분리되어 자신의 렌더링에만 집중함 */} {step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && }

); } ``` #### 2. 정규식(Regex)을 활용한 동적 텍스트 하이라이팅 경매 중 시스템 메시지는 매우 중요한 정보를 담고 있습니다. 밋밋한 텍스트로 출력되던 시스템 메시지에서 특정 키워드(포인트, 팀, 선수 이름)를 동적으로 찾아 강조 처리하는 로직을 추가했습니다. ```tsx // src/features/auction/components/ChatPanel.tsx const renderFormattedSystemMessage = (content: string) => { // 포인트(P), '팀'으로 끝나는 단어, '선수' 앞의 단어, 화살표(->) 주변 단어를 매칭하는 정규식 const regex = /(\d+P|[\w가-힣]+팀|[\w가-힣]+(?=\s선수)|[\w가-힣]+(?=\s->)|(?<=->\s)[\w가-힣]+)/g; const parts = content.split(regex); return parts.map((part, i) => { if (part.match(regex)) { return ( // 매칭된 핵심 키워드는 굵고 검은색 폰트로 강조하여 사용자 인지도를 높임 {part} ); } // 매칭되지 않은 일반 조사나 서술어는 기본 스타일 유지 return part; }); }; ``` #### 3. 동적 라우팅 페이지의 SEO 및 메타데이터 최적화 초기 설계에서는 최상위 `layout.tsx`에 메타데이터가 하드코딩되어 있어, 수많은 동적 경매방(`room/[id]`)이 모두 동일한 제목과 설명을 공유하는 문제가 있었습니다. ```tsx // src/app/room/[id]/page.tsx import { Metadata } from 'next' type Params = Promise<{ id: string }> // layout.tsx의 정적 메타데이터를 덮어쓰는 동적 메타데이터 생성 함수 도입 export async function generateMetadata({ params }: { params: Params }): Promise { const resolvedParams = await params; return { // 브라우저 탭에 각 방의 고유 ID가 노출되어 사용자 혼동 방지 title: `경매방 입장 (ID: ${resolvedParams.id})`, description: `미니언즈 경매 시스템 - 실시간 경매가 진행 중인 방(${resolvedParams.id})에 참여하세요.`, // 중요: 프라이빗한 경매방 페이지가 구글 등 검색엔진에 색인되지 않도록 차단 robots: { index: false, follow: false }, }; } ``` ### 개발 스토리 **AI가 코드로부터 추론한 내용입니다.** * **요구사항:** 서비스 초기, '빠른 기능 구현'에 초점을 맞추다 보니 `CreateRoomModal.tsx` 하나에 모달 렌더링, 엑셀 파싱, API 통신, 상태 관리가 모두 들어가는 이른바 'God Component(신적 컴포넌트)'가 탄생했습니다. 코드가 1,000줄을 넘어가자 작은 UI 하나를 수정하려 해도 예기치 않은 사이드 이펙트가 발생했고, 동적 라우팅 환경에서의 SEO 이슈 등 여러 버그가 보고되기 시작했습니다. * **기획:** 더 이상의 기능 추가를 멈추고 기술 부채 탕감을 결심했습니다. 컴포넌트 크기를 10KB 단위로 제한한다는 원칙을 세웠습니다. UI는 상태를 주입받아 그리기만 하는 '멍청한(Dumb) 컴포넌트'로 만들고, 복잡한 로직은 훅(Hooks)으로 빼내는 설계를 잡았습니다. 추가로, 픽셀 아트 기반의 테마를 더 명확히 하기 위해 스크롤바와 오버레이 등 디테일한 CSS를 교정하기로 기획했습니다. * **개발:** 거대한 컴포넌트를 분해하는 작업은 예상보다 험난했습니다. 컴포넌트를 분리하면서 타입 불일치 에러가 쏟아졌고, PowerShell 스크립트를 통한 자동화 과정에서 변수 이스케이프 문제로 파일이 오염되는 사고(`LESSONS_LEARNED.md`에 기록됨)도 있었습니다. 하지만 지속적인 타입 체크와 테스트를 통해 로직 분리에 성공했습니다. 뼈대를 탄탄히 한 후, 정규식을 통한 채팅 키워드 하이라이팅, 브랜딩 이미지 적용 등 UX를 끌어올리는 작업을 여유 있게 마무리할 수 있었습니다. ### 핵심 교훈 1. **비대한 컴포넌트는 모든 악의 근원이다:** 코드가 300~500줄을 넘어가면 파일 분할을 심각하게 고민해야 합니다. 상태(`useState`)와 UI 마크업이 한 파일에 섞여 있으면 렌더링 최적화가 불가능에 가깝습니다. 이번 리팩토링처럼 비즈니스 로직은 Custom Hook으로, 화면은 작은 Component로 나누는 습관이 장기적인 생산성을 결정합니다. 2. **정적 메타데이터와 동적 메타데이터의 분리:** Next.js App Router를 사용할 때 `layout.tsx`에만 메타데이터를 정의하면 모든 하위 페이지가 이를 상속받습니다. 개별 데이터(ID, 이름 등)를 다루는 `[id]` 라우트에서는 반드시 `generateMetadata`를 활용하여 각 페이지의 고유한 컨텍스트와 크롤링 정책(`robots`)을 명시해야 합니다. 3. **정규식을 활용한 마이크로 UX 개선:** 채팅이나 알림 시스템에서 밋밋한 텍스트 렌더링 대신, 정규식을 활용해 특정 키워드만 색상이나 굵기를 다르게 처리해주면 사용자 경험이 극적으로 향상됩니다. 서버에서 복잡한 HTML을 내려주는 대신, 프론트엔드에서 렌더링 직전에 포맷팅을 수행하는 방식이 데이터 구조도 깔끔하게 유지할 수 있는 좋은 전략입니다.

비대한 컴포넌트 해체와 디테일의 완성: LoL 경매 플랫폼 리팩토링 및 UX/SEO 개선기

tuosm9390