포트폴리오로 돌아가기

Shoong!

건전한 팬 문화를 지향하는 포토 카드 교환/ 생일카페 정보 제공 플랫폼입니다.

ReactNext.jsTypeScriptTailwind CSSFigmaZustand
라이브 사이트GitHub
Shoong!

📌 주제

  • 건전한 팬 문화를 지향하는 포토 카드 교환/ 생일카페 정보 제공 플랫폼입니다.

✋🏻 역할

  • 스크럼마스터
  • 플랫폼 로고
  • 배포
  • 교환 상세 , 밋업 페이지

🤔 배경

k-pop 시장의 주 소비 타겟층이 10-20대 초반 학생들로 형성되어 있습니다. 그러나, 아이돌 팬문화 중 하나인 포토카드의 가격이 학생들은 부담하기 어려운 고가에도 교환이 되고 있는 현 상황의 심각성을 느꼈습니다. 그래서, 저희는 교환과 커뮤니티가 가능한 서비스를 제공하면서 더불어 콜렉터 북, 생일 카페 지도 등 포토카드에서 범위를 더 넓혀서 좋아하는 아이돌 팬들의 소통 창구같은 플랫폼을 만들게 되었습니다.

📝구현 사항

1. 교환 상세 페이지

  • 반응형 view

1) 교환글 CRUD

  • PocketBase SDK 사용
    • 교환글(ExchangeList) 작성, 수정, 삭제를 PocketBase 컬렉션과 연동
    • React Query를 통해 API 호출 후 캐싱/무효화 처리 → UI 자동 업데이트
    • 작성/수정 시 입력값 검증(로그인 유저 여부·비속어 검사 등) 후 서버로 전송
    • 확인 모달로 작업 결과에 대한 정보를 직관적으로 사용자에게 전달
  • 상태 변경 → UI 연동
    • 교환글이 생성/수정/삭제되면 리스트에 즉시 반영
    • “교환대기중”, 작성 시간 등 상태 값도 페이지에서 확인 가능
  • 데이터 흐름이 명확: PocketBase에서 실시간 or 단건 CRUD → 곧장 React Query 캐시 무효화 → 화면 갱신

2) 비속어 필터링

  • bad-words 라이브러리 활용
    • 영어 비속어 자동 필터링 → 작성 시 특정 단어가 포함되면 등록 불가 처리
  • 한국어 비속어 DB 추가
    • 한글 비속어 목록(Regex) + bad-words 라이브러리 결합
    • 문자열 정규화(normalize('NFC')) 후 검사하여 가장자리 공백이나 자모음 분리 형태도 정확히 차단
  • 성능 향상 및 코드 정리
    • 비속어 사전·정규식 로직을 분리
    • 필터 전용 함수(containsProfanity)로 교환글 작성, 수정 로직에 적용
    • 한글·영문 모두 대응하도록 불필요한 중복 검사 제거 및 필터링

2. 밋업 페이지

  • 반응형 view

1) 카카오 지도 API 활용

  • react-kakao-maps-sdk를 사용하여 지도 컴포넌트(MeetupMap) 구현
    • MarkerClusterer로 많은 마커를 한눈에 보이도록 클러스터링
    • 클릭 시 레벨 조정(setLevel)으로 지도 확대/이동 처리
    • 사용자 상호작용:
      • 마커/오버레이 클릭 시 특정 전역 상태(selectedCafe)를 업데이트 → 카드 목록과 동기화
      • 지도 중심 좌표 상태를 필요에 따라 전역 또는 useState로 관리
    • 지도와 목록이 동기화되어 UX 향상(카드 선택 → 지도 이동, 마커 클릭 → 카드 강조)
    • 클러스터 사용으로 마커가 많아도 지도 성능 유지

2) 반응형 뷰 & Tailwind 반응형 클래스

  • 모바일 / 데스크톱 두 레이아웃(MeetupMobile, MeetupDesktop)로 구분
    • 모바일: 가로 스크롤 목록 + 지도 아래
    • 데스크톱: 세로 목록(왼쪽) + 지도(오른쪽), 전체 높이 활용
    • 카드 목록 터치 드래그 & 데스크톱 스크롤로 각각 최적화

🧠 성과

이 프로젝트를 통해 브라우저에서의 CRUD 로직과 DB(PocketBase) 연동 과정을 체계적으로 익혔습니다.

비속어 필터링, MarkerClusterer 적용 등 성능과 UX 관점에서 다양한 트러블슈팅을 수행하며 상태 관리(Zustand)와 모듈화 기법을 한층 다듬을 수 있었습니다.

또한, 정규식(Regex)을 이용한 다국어 비속어 처리나 반응형 UI 구현을 통해 재사용성과 유지보수성을 크게 높였습니다.

전반적으로, 앱 설계에서부터 실용적인 클라이언트-DB 통신에 이르기까지 프론트엔드 워크플로우를 경험하며 역량을 확장할 수 있었습니다.