Feat: SlideTitle 컴포넌트 구현

[nyewon]

📌 Summary

• Closes [Feat] SlideTitle 컴포넌트 구현 #54

SlideTitle 화면 UI 및 슬라이드 preview 관련 기능을 구현했습니다.

📚 Tasks

• SlideTitleViewer 컴포넌트 구현
• SlidePreviewList 컴포넌트 구현
• SlidePreviewCard 컴포넌트 구현
• SlideTitleInput 컴포넌트 구현
• 슬라이드 이미지 매핑
• msw mock 데이터 추가 및 테스트

🔍 Describe

SlideTitle 영역 UI와 preview 렌더링 구조를 구현했습니다.

• SlideTitleViewer를 기준으로 title input과 preview list를 조합하는 구조로 구현했습니다.
• Content 영역과 구현 방식 및 레이아웃 흐름을 최대한 맞추기 위해 충영님 SlideContentViewer 구조를 참고해 동일한 형태로 구성했습니다.
• preview 이미지는 SLIDE_IMAGE_MAP 상수를 통해 관리하도록 분리했고, 서버 데이터의 imageName 값을 기반으로 대응되는 preview SVG가 자동 매핑되도록 구현했습니다.
• SlidePreviewList에서 가로 스크롤을 처리하도록 구현해 preview 개수가 많아져도 자연스럽게 overflow 되도록 구성했습니다.
• SlideTitleInput은 controlled input 형태로 구현하고 onBlur를 props로 분리해 상위에서 저장 로직 등을 연결할 수 있도록 구성했습니다.
• msw mock 데이터를 연결해 title 및 preview 렌더링을 함께 테스트했습니다.

사용 예시

useEffect(() => {
  const fetchSlides = async () => {
    const response = await fetch("/api/content/slides");
    const data = await response.json();

    setSlides(data.result);

    if (data.result.length > 0) {
      setTitle(data.result[0].title);
    }
  };

  fetchSlides();
}, []);

<SlideTitleViewer
  labelId="slide-title"
  title={title}
  slides={slides}
  onTitleChange={setTitle}
  onTitleBlur={handleTitleBlur}
/>

현재 img_apple, img_gpt 이미지는 border, rounded가 아직 포함된 상태의 이미지입니다! 추후 피그마에 border, rounded 제거된 원본 이미지가 올라오면 교체 예정이라 해당 부분 감안해서 봐주시면 감사하겠습니다 🙇🏻‍♀️

📸 Screenshot