soponion

음악에 대한 감상을 나누는 서비스

개발자 기술 부스트 캠프에서 팀으로 만든 음악 커뮤니티입니다. 사용자가 음악을 등록하고 별점·리뷰를 남기거나, 댓글·답글·좋아요로 다른 사람의 감상에 반응할 수 있습니다.

주요 기능

• 곡 제목, 여러 아티스트, 장르, 앨범, 발매일, YouTube 링크 등록
• 제목 검색과 장르·아티스트 필터, YouTube 재생
• 0.5~5점 사이의 별점을 0.5점 단위로 입력하고 평균 별점·리뷰 수 표시
• 리뷰의 댓글과 한 단계 답글, 좋아요
• 댓글을 남긴 곡의 장르 빈도와 평균 별점·리뷰 수·발매일을 반영한 음악 추천
• 회원가입·로그인, 닉네임·자기소개·5MB 이하 프로필 이미지 관리
• 모바일·데스크톱 화면과 테마 전환

맡은 역할

Supabase 기반 백엔드와 데이터베이스 설계·구현에 참여했습니다. 음악·리뷰·댓글·프로필 데이터를 화면에 연결하고, 테이블 관계와 트리거, 평균 별점 뷰를 구성했습니다. RLS 정책과 Storage 버킷을 구성하고, 로그인 상태와 데이터 소유자에 따라 접근을 제한했습니다.

데이터 설계

원본 이미지 보기 ↗

그림에 표시되지 않은 song_artists 연결 테이블과 song_rating_stats 뷰는 아래 표에서 함께 설명합니다.

WORK NOTES

트러블슈팅

02 CASES

1. 01

   리뷰 작성자 이름이 표시되지 않았습니다.

   이전 조회

   작성자 프로필 관계가 모호해 닉네임 누락

   현재 조회

   reviews.user_id로 작성자 프로필 지정

   해결 과정과 코드 보기

   원인

   리뷰 작성자와 좋아요 사용자가 모두 profiles를 참조해, 조회할 작성자 관계가 모호했습니다.

   해결 방법

   리뷰 조회의 select에서 profiles!reviews_user_id_fkey를 지정해 reviews.user_id가 가리키는 프로필만 가져왔습니다.

   결과

   리뷰 작성자의 닉네임과 프로필 이미지를 조회할 수 있습니다. 좋아요 사용자 조회는 그대로 유지합니다.

   실제 코드와 출처

   리뷰 작성자 쪽 외래 키를 지정한 실제 조회 구문입니다.

   const select = '*, profiles!reviews_user_id_fkey(id,nickname,profile_image_url), review_likes(user_id)'
   

   리뷰 조회 코드

2. 02

   한 곡에 여러 아티스트를 연결하기 어려웠습니다.

   이전 구조

   한 곡 → artist_id 한 명

   현재 구조

   한 곡 → song_artists에 여러 명

   해결 과정과 코드 보기

   원인

   기존 songs.artist_id 필드에는 곡마다 아티스트 한 명만 저장할 수 있었습니다.

   해결 방법

   song_artists(song_id, artist_id, position) 연결 테이블을 만들고 기존 값을 옮겼습니다. 연결 행이 없는 곡은 이전 필드를 읽도록 했습니다.

   결과

   한 곡에 여러 아티스트와 표시 순서를 기록할 수 있습니다. 기존 대표 아티스트도 계속 읽을 수 있습니다.

   실제 코드와 출처

   곡과 아티스트를 연결하는 실제 테이블 정의입니다.

   create table if not exists public.song_artists (
     song_id    bigint not null references public.songs(id) on delete cascade,
     artist_id  bigint not null references public.artists(id) on delete cascade,
     position   integer not null default 1,
     created_at timestamptz not null default now(),
     primary key (song_id, artist_id)
   );
   

   위 테이블 관계도와 연결 테이블 설계에서 확인할 수 있습니다.

기술 구성

React 19·Vite·React Router로 화면과 인증 상태, 보호 라우트를 구성했습니다. UI에는 Tailwind CSS·Radix UI를, 백엔드에는 Supabase Auth·Storage·PostgREST와 PostgreSQL을 사용했습니다. Vercel에는 Vite 빌드와 SPA 경로 처리를 설정했습니다.

점검 기록

2026년 9월 1일 로컬 프로덕션 빌드와 ESLint 검사를 통과했습니다. 당시 의존성 감사 경고 5건이 확인되어, 배포 전 패키지 업데이트와 영향 검토가 남아 있었습니다.