🎨 프롬프트 마켓 UI/UX 개선: 좋아요, 삭제, 그리고 디테일

✨ 작은 디테일이 명품을 만듭니다. 오늘은 프롬프트 마켓의 완성도를 높이는 날입니다.

🚀 오늘의 작업 요약

기존 Bitdak 커뮤니티 기능을 '프롬프트 마켓'이라는 새로운 정체성에 맞춰 완전히 전환했습니다. 단순한 기능 구현을 넘어, 좋아요 버튼의 시각적 피드백, 직관적인 라우팅, 그리고 작성자 경험을 위한 삭제 기능까지 디테일을 다듬었습니다.

🛠️ 주요 변경 사항 (Key Changes)

1. 네비게이션 및 라우팅 대통합

• URL 구조 변경: /community → /prompt
• 헤더 네비게이션 직관화: 'Dashboard' → '홈', 'Community' → '프롬프트', 'Scripts' → '커뮤니티'로 변경하여 유저 혼동을 줄였습니다.

2. 좋아요 기능 고도화 (Visual & Logic)

단순히 숫자가 올라가는 것을 넘어, 사용자가 '내가 이 글을 좋아했다'는 것을 확실히 느낄 수 있도록 시각적 피드백을 강화했습니다. 또한 백엔드 로직을 통해 중복 좋아요를 방지했습니다.

// UI: 눌렀을 때만 빨간색으로 확실한 피드백
<Heart className={`h-5 w-5 ${post.isLiked ? "fill-red-500 text-red-500" : "text-[var(--brand-primary)]"}`} />

// Logic: 음수 방지 및 Optimistic UI 업데이트
const newCount = Math.max(0, post.likes + (newStatus ? 1 : -1));

3. 게시글 삭제 및 청소

• 작성자(Author)에게만 보이는 삭제 버튼(Trash Icon) 구현.
• UI 간소화: 불필요한 '무료' 텍스트 뱃지를 제거하고, 깔끔한 가격 표시로 변경.

🐛 버그 사냥 (Troubleshooting)

• React Child Error 해결: Supabase join 쿼리에서 likes 관계명과 숫자 컬럼이 충돌하던 문제를 alias(user_likes) 처리로 해결했습니다.
• Mono-repo Transpile: Next.js 설정에 패키지 트랜스파일 옵션을 추가하여 참조 오류를 수정했습니다.

📝 소회

기능이 '작동'하는 것과 사용자가 '만족'하는 것은 다릅니다. 오늘 좋아요 버튼의 빨간 하트 하나가 사용자에게 주는 만족감은 생각보다 큽니다. 앞으로도 이런 디테일을 놓치지 않는 개발을 지향해야겠습니다.