프로젝트명
Kicks - P2P 스니커 거래 플랫폼
제작기간
2022.04.16 - 2022.05.30
개발스택
•
프론트엔드 : Typescript / React / Recoil
•
백엔드 : Spring Boot, Security, Data JPA / QueryDSL / Mysql
프로젝트 기획
1. 팀 빌딩
디자이너, 프론트엔드, 백엔드 개발자들과 팀을 이루어 프로젝트 기획부터 배포까지 경험해볼 수 있는 [숏폼 영상 서비스 디자인-개발 챌린지]에 참여하게 되면서 프로젝트를 시작하게 되었습니다.
숏폼 영상 서비스 디자인-개발 챌린지]에 참여하게 되면서 프로젝트를 시작하게 되었습니다.2. 주제 선정
기존에 대중적으로 사용하는 ‘Youtube, ‘Tiktok’과 같은 영상 서비스가 있기 때문에 다양한 컨텐츠를 담는 서비스보다는 아이덴티티를 명확하게 정하자는 쪽으로 의견이 모아졌습니다.
다양한 주제 토론끝에 ‘착용샷을 다각도로 보고싶을 때’가 있다는 의견이 나와 중고거래라는 큰 틀을 정하고 그 중에서도 마니아층이 뚜렷하고 한정판 거래, 리셀테크 등 중고거래 성향이 두드러진 ‘스니커즈 중고거래’로 범위를 좁혀 주제를 선정하게 되었습니다.
3. 기능 명세서 제작
디자인 설계와 개발 시작에 앞서 실제 사용자를 가정하고 서비스를 어떻게 이용할지, 무슨 기능이 필요한지에 대한 시나리오를 작성하였습니다.
프로젝트 소개
About Kicks
•
기존 중고시장 상품 판매글의 부족한 상품 정보를 영상으로 해소.
•
단순한 상품 판매글을 넘어 이커머스3.0 시대의 영상 콘텐츠로서의 역할을 기대.
•
서비스 고도화 시 유저 간 콘텐츠 생산-소비 선순환이 이루어져 운영에 대한 인력 소모가 줄어듬
•
간단한 스와이프로 서비스의 모든 주요 기능 조작이 가능 (준비중)
◦
좋아요(콘텐츠 저장) | 채팅(상품 구매) | 전,후 콘텐츠로 넘기기Business Model
•
판매 콘텐츠 n회 스와이프 당 광고 콘텐츠 1회 노출
•
광고 시청 시 리워드(서비스 내 거래 시 사용 가능한 포인트) 제공. 거래(포인트 사용) 유도
주요 기능
1.
카카오 로그인
2.
영상 스와이프 기능 (가로/세로)
3.
키워드로 영상 검색
4.
영상을 binary 형태로 서버 업로드
5.
socket 통신 실시간 채팅
6.
좋아요 / 팔로우 / 팔로워 기능
프로젝트 구현 사항
1. 회원가입
카카오 및 구글계정으로 회원가입을 할 수 있으며 최초 1회에 한해 관심 카테고리를 설정할 수 있습니다.
1.
카카오 계정 로그인
2.
관심 카테고리 설정
3.
프로필 설정
•
Google Authentication
Firebase의 인증 provider로 구글 계정 인증을 하고 인증된 로그인 유저의 정보는 sessionStorage에 저장
•
코드 미리보기
// components/Login/GoogleLogin.tsx
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import { auth } from 'server/firebase';
import * as S from './styles';
export const GoogleLogin = () => {
const navigate = useNavigate();
const login = async () => {
try {
const provider = new GoogleAuthProvider();
const res = await signInWithPopup(auth, provider);
if (res) {
const profile = {
name: res.user.displayName,
photoURL: res.user.photoURL
};
navigate('/');
sessionStorage.setItem('kicks-user', JSON.stringify(profile));
}
} catch (error) {
console.log(error);
}
};
return <S.GoogleButton onClick={login}>...</S.GoogleButton>;
};
JavaScript
복사
2. 숏폼 플랫폼 형식 메인페이지 구성
•
Swiper라는 React 라이브러를 활용해서 2가지 형태의 슬라이더를 만들었습니다. (메인페이지 : 상하 / 검색페이지 : 좌우)
•
코드 미리보기
// pages/MainPage.tsx
<Swiper direction="vertical">
{videoList?.map(video => (
<SwiperSlide key={video.id}>
<ContentsWrap videoData={video} />
</SwiperSlide>
))}
</Swiper>
TypeScript
복사
3. 채팅 기능
•
메인 화면 비디오 컴포넌트의 채팅 아이콘을 클릭하면 채팅방이 개설됩니다.
•
특정 포맷으로 날짜 변환을 해주는 함수dateConverter 와 날짜별로 채팅을 나누는 dividedByDate 유틸함수를 만들어 활용했습니다.
•
코드 미리보기
// utils/dateConverter.tsx
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const dateConverter = (date: Date) => {
const recieved = dayjs(date).format('YYYY-MM-DD');
const today = dayjs(new Date()).format('YYYY-MM-DD');
return recieved === today
? dayjs(date).format('h:mm A')
: dayjs(date).fromNow();
};
TypeScript
복사
4. 그 외 페이지
업로드페이지
프로필페이지
어드민페이지•
전체 유저 현황
•
특정 유저 정보 확인 (대쉬보드)
•
전체 영상 현황
•
특정 영상 정보 확인
