♻️ refactor: RSS 피드 등록 시 플랫폼별 URL 자동 구성 기능 구현

[junyeokk]

🔨 테스크

Issue

• close [FE] RSS 피드 등록 시 플랫폼별 URL 자동 구성 기능 구현 #301

RSS URL 입력 방식 개선

• 기존 단일 입력 방식에서 사용자 경험을 개선하기 위해 플랫폼 선택 방식으로 변경
• 사용자가 전체 URL을 직접 입력하는 대신 플랫폼 선택 후 아이디만 입력하도록 개선
• 잘못된 URL 형식 입력 가능성을 원천적으로 차단

컴포넌트 구조 개선

• 관심사 분리를 위해 플랫폼 선택(PlatformSelector)과 URL 입력(RssUrlInput) 컴포넌트 분리
• 폼 로직을 커스텀 훅(useRssRegistrationForm)으로 분리해 재사용성과 유지보수성 향상
• (before) 기존 코드는 여러 상태와 핸들러를 개별적으로 가져와 사용해 약간 복잡했음

   const {
     rssUrl,
     bloggerName,
     userName,
     email,
     setRssUrl,
     setBloggerName,
     setUserName,
     setEmail,
     setRssUrlValid,
     setBloggerNameValid,
     setUserNameValid,
     setEmailValid,
     resetInputs,
     handleInputChange,
     isFormValid,
   } = useRegisterModalStore();
  

• (after) 커스텀 훅으로 분리해 platform, values, handlers, formState로 그룹화하고 관련 로직을 캡슐화

    const { platform, values, handlers, formState } = useRssRegistrationForm();
  

• 컴포넌트는 필요한 값과 핸들러만 가져와 사용하므로 코드가 더 간결해짐
• 폼 로직 재사용이 필요한 경우 훅만 가져와 사용할 수 있음
• 상수와 타입을 별도 파일로 분리

📋 작업 내용

• RSS 플랫폼 상수 및 타입 정의 (constants/rss.ts)
• 플랫폼 선택 탭 UI 구현 (PlatformSelector)
• 플랫폼별 URL 입력 필드 구현 (RssUrlInput)
• FormInput 컴포넌트 스타일 개선 (밑줄 애니메이션 추가)
• 폼 로직을 커스텀 훅으로 분리 (useRssRegistrationForm)
• RSS 등록 모달 컴포넌트 구조 개선

📷 스크린 샷

2024-12-27.2.06.50.mov

[jungmyunggi]

👍