딱톡 (TtakTok)
초간단 소개팅 플랫폼. '딱! 한 번의 승인'으로 외부 메신저로 바로 연결되는 소셜 데이팅 서비스. 포스트 기반 매칭, AES-256 암호화 링크, 실시간 공개 채팅을 갖춘 풀스택 웹앱입니다.
프로젝트 개요
딱톡은 복잡한 매칭 과정을 제거하고, 사용자가 10분 이내에 실제 대화를 시작할 수 있도록 설계된 소셜 데이팅 플랫폼입니다. 포스트를 올리면 관심 있는 상대가 링크를 신청하고, 승인 즉시 AES-256-GCM으로 암호화된 메신저 링크가 30분간 제공됩니다. 남성/여성/단체 카테고리와 17개 시·도 지역 필터로 원하는 상대를 찾고, 부스팅으로 상단 노출을 확보합니다. Socket.io 기반 실시간 공개 채팅에서 커뮤니티 분위기를 확인할 수 있으며, 3단계 안전 시스템(신고·차단·관리자 검토)으로 건전한 환경을 보장합니다. Supabase Auth(Google OAuth) 인증, PostgreSQL 데이터베이스, Supabase Storage 파일 관리까지 서버리스 아키텍처로 구성했습니다.
주요 기능
메인 피드 & 포스트 시스템
카테고리(전체/남성/여성/단체/즐겨찾기)와 지역(서울·경기·부산 등 17개 시·도) 필터로 원하는 상대를 탐색하는 메인 피드입니다. 포스트 카드에는 프로필 사진, 제목, 한줄 소개, 닉네임, 나이·키·지역·MBTI 정보가 표시됩니다.
부스팅 중인 포스트는 상단에 'BOOST' 배지와 남은 시간이 표시되며, 하트 아이콘으로 즐겨찾기를 추가하고, '링크신청' 버튼으로 바로 매칭을 요청할 수 있습니다. 사용자당 활성 포스트 1개 제한으로 신중한 참여를 유도합니다.
소셜 로그인 & 인증 시스템
Supabase Auth 기반의 다중 소셜 로그인을 지원합니다. Google OAuth로 30초 만에 가입이 완료되며, 카카오 로그인과 이메일/비밀번호 로그인도 제공합니다.
쿠키 기반 httpOnly 세션으로 보안을 강화하고, middleware.ts에서 자동 세션 갱신을 처리합니다. 비회원도 포스트 열람과 공개 채팅 읽기가 가능하여 진입 장벽을 낮췄습니다.
마이페이지 & 활동 대시보드
사용자의 활동 현황을 한눈에 보여주는 대시보드입니다. 작성 글 수(OPEN 상태 표시), 받은 신청 수(수락 건수), 매칭 성공률이 색상 코딩된 카드로 표시됩니다.
프로필 완성도 배지(80% 완료 등)와 활성 사용자 상태가 표시되며, '내 글', '즐겨찾기', '신청함', '설정' 4개 탭으로 모든 활동을 관리합니다. 프로필 편집 버튼으로 즉시 정보를 수정할 수 있습니다.
매칭 요청함 — 받은 신청
다른 사용자가 보낸 링크 신청을 관리하는 받은 신청함입니다. 각 신청에는 신청자 닉네임, 신청 시간, 첨부 메시지가 표시되며, '수락' 또는 '거절' 버튼으로 즉시 응답합니다.
수락 시 메신저 선택(카카오톡/텔레그램) 후 링크를 입력하면 AES-256-GCM으로 암호화되어 상대에게 전달됩니다. 대기중인 신청 수가 배지로 표시되어 놓치지 않습니다.
매칭 요청함 — 보낸 신청 & 링크 확인
내가 보낸 링크 신청의 상태를 추적하는 보낸 신청함입니다. 각 신청은 '수락됨'(초록), '대기중'(노랑), '거절됨'(회색) 상태 배지로 구분됩니다.
수락된 신청은 '링크 확인' 버튼이 활성화되어 암호화된 메신저 링크를 확인할 수 있으며, 최초 확인 시점부터 30분 만료 카운트다운이 시작됩니다. 대기중인 신청은 '신청 철회' 버튼으로 취소 가능하고, 7일 이상 된 거절/취소 신청은 자동 정리됩니다.
프로필 편집 & 이미지 관리
최대 6장의 프로필 사진과 상세 정보를 관리하는 프로필 편집 다이얼로그입니다. 첫 번째 사진이 자동으로 대표 사진으로 설정되며, 드래그 앤 드롭 또는 클릭으로 JPG/PNG 이미지를 업로드합니다.
닉네임, 이메일, 성별, 출생연도, 지역, 키, 체형, MBTI, 직업, 취미 등 상세 프로필 필드를 제공합니다. Supabase Storage에 이미지가 저장되어 빠른 로딩과 안정적인 관리가 가능합니다.
AES-256-GCM 링크 암호화
매칭 수락 시 입력된 메신저 링크를 AES-256-GCM으로 암호화하여 전달합니다. 암호화 키는 32바이트 환경변수로 관리되며, 최초 확인 시점부터 30분 후 자동 만료됩니다. 링크 뷰어 다이얼로그에서 카운트다운과 원클릭 복사를 지원합니다.
실시간 공개 채팅
Socket.io 기반 실시간 공개 채팅으로 커뮤니티 분위기를 확인합니다. 이모지 리액션(6종), 비속어 필터, 속도 제한(초당 5개), 스팸 방지가 적용되며, 비회원도 읽기 전용으로 참여 가능합니다. 최근 100개 메시지를 인메모리로 관리합니다.
부스팅 시스템
포스트를 메인 피드 최상단에 노출하는 부스팅 기능입니다. 6시간(3,900원), 24시간(9,900원), 72시간(19,900원) 3가지 플랜을 제공하며, 'BOOST' 배지와 남은 시간이 실시간으로 표시됩니다.
3단계 안전 시스템
신고(3회 누적 시 포스트 자동 마감), 사용자 차단(양방향 즉시 숨김), 관리자 검토(채팅 차단·포스트 관리)의 3단계 안전 장치를 갖췄습니다. 스팸, 부적절한 내용, 괴롭힘, 사칭 등 5가지 신고 사유를 지원합니다.
즐겨찾기 & 재오픈 알림
관심 있는 포스트를 즐겨찾기에 추가하고, 마감된 포스트의 재오픈 알림을 구독합니다. 포스트 재오픈 시 구독자에게 자동 알림이 발송되며, 신청함 내 알림 탭에서 통합 관리됩니다.
관리자 대시보드 & CMS
실시간 통계, 사용자 관리(검색/필터/차단), 포스트 관리(숨김/삭제), 신고 관리(워크플로), 매칭 분석, 채팅 관제(일시정지/사용자 차단/메시지 삭제)를 제공하는 종합 관리자 시스템입니다. 환경변수 기반 슈퍼 관리자 권한으로 접근을 제어합니다.
Tech Stack
Highlights
- 포스트 기반 매칭 → 10분 내 메신저 연결
- AES-256-GCM 암호화 링크 & 3단계 안전 시스템
- Socket.io 실시간 공개 채팅 & 관리자 CMS
Architecture
Next.js 15 App Router / React 19 / TypeScript 5 (strict) / Supabase Auth (Google OAuth) + 쿠키 세션 / Supabase PostgreSQL (RLS) / Supabase Storage (프로필·포스트 이미지) / Socket.io 실시간 채팅 (Pages API) / AES-256-GCM 링크 암호화 / TailwindCSS + shadcn/ui 핑크 테마 / Framer Motion 애니메이션 / React Hook Form + Zod 검증 / Winston 로깅 / Vercel 배포