feat(frontend): URL 미리보기 카드 구현

[zhwltlr]

요약

홈 페이지에서 URL을 입력하면 게시물 내용과 이미지를 미리보기 카드로 표시합니다.

목적

사용자가 소셜 미디어 게시물을 분석하기 전에 내용을 미리 확인할 수 있도록 하여, 올바른 URL을 입력했는지 검증하고 분석 정확도를 높입니다. 또한 게시물의 이미지를 함께 분석하여 텍스트만으로는 파악하기 어려운 사기 시도(스크린샷 조작, 위조 결제 증명 등)를 탐지할 수 있습니다

변경 사항

추가된 기능

• URL 자동 감지: 입력 필드에 X(Twitter) 또는 Reddit URL을 붙여넣으면 자동으로 인식
• 미리보기 : POST /trade-safety/preview를 호출하여 게시물 메타데이터(작성자, 날짜, 텍스트, 이미지)를 가져와 카드 형태로 표시
• 이미지 표시 : 게시물에 포함된 이미지를 최대 3개까지 그리드 레이아웃으로 표시

수정된 기능

• PC 입력 UI: 기존 단순 input 필드에서 텍스트 입력 시 textarea로 전환되도록 개선
• Next.js 이미지 설정 : X(Twitter) 및 Reddit 이미지 호스트(pbs.twimg.com, i.redd.it, preview.redd.it)를 허용 목록에 추가

테스트

• X(Twitter) URL(https://x.com/username/status/123)을 입력하면 미리보기 카드가 표시되는지 확인
• Reddit URL(https://reddit.com/r/subreddit/comments/abc123)을 입력하면 미리보기 카드가 표시되는지 확인
• 일반 텍스트만 입력하면 미리보기 카드가 표시되지 않는지 확인
• URL을 입력한 후 모두 삭제하면 미리보기 카드도 사라지는지 확인

---

[gemini-code-assist]

Code Review

이번 PR은 홈 페이지에 URL 미리보기 카드 기능을 구현한 점이 인상적입니다. 사용자가 URL을 입력하면 해당 게시물의 제목, 작성자, 이미지 등을 미리 볼 수 있어 사용자 경험이 크게 향상될 것으로 기대됩니다. 전체적인 코드 구조는 컴포넌트, 유틸리티 함수, 상태 관리 로직이 잘 분리되어 있으며, Storybook을 통해 다양한 UI 상태를 테스트한 점도 훌륭합니다.

리뷰에서는 몇 가지 개선점을 제안했습니다. 주요 내용으로는 ▲보안 강화를 위한 URL 도메인 검증 로직 수정 ▲데이터 정확성을 위한 날짜 처리 방식 변경 ▲다국어 지원을 위한 하드코딩된 문자열 제거 ▲접근성 향상을 위한 이미지 alt 속성 개선 등이 있습니다. 코드의 유지보수성을 높이기 위한 리팩토링 제안도 포함되어 있습니다. 전반적으로 훌륭한 기여이며, 제안된 사항들을 반영하면 더욱 완성도 높은 기능이 될 것입니다.

[ywkim]

Reddit URL 테스트해보니 platform validation에서 에러가 나요. platformSchema에 "reddit" 추가하면 될 것 같습니다.

// frontend/src/repositories/TradeSafetyRepository.ts:50
// Before
const platformSchema = z.enum(["twitter"]);

// After
const platformSchema = z.enum(["twitter", "reddit"]);

나머지는 다 좋아요 👍

[ywkim]

고생하셨어요!!! 💯

[song-eun]

체크리스트 기반으로 모두 확인하였습니다!

[github-actions]

🎉 This PR is included in version 1.13.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀