개요
팝업스토어는 짧은 기간 동안 독특한 경험과 제품을 제공하며 소비자와 브랜드를 연결하는 중요한 마케팅 방식 중 하나로 자리잡았습니다. 하지만 팝업스토어와 관련된 정보가 여러 곳에 흩어져 있어 이용자들이 적합한 팝업스토어를 찾거나 예약하는 과정에서 불편함을 겪고 있습니다. 팝핀은 팝업스토어 이용자와 운영 매니저 모두의 불편함을 해소하고, 팝업스토어와 관련된 모든 과정을 통합적으로 관리할 수 있는 서비스를 구축하는 것을 목표로 합니다. 팝핀은 개인 맞춤형 추천과 실시간 정보 공유, 예약 기능을 제공하여 사용자 경험을 극대화하고, 운영 매니저에게는 효율적인 관리 도구를 제공합니다.
개발 기간
2024.07 ~ 2024.08 (6주)
참여 인원
6명 (프론트엔드 2명, 백엔드 4명)
주요 기능
개인 맞춤형 팝업스토어 추천
조회수, 좋아요, 별점, 예약 건수 등 다양한 조건 기반 팝업스토어 랭킹 산정
채팅을 통한 팝업스토어 운영 매니저 및 관심있는 사람들과 실시간 소통
팝업스토어 온라인 사전 예약 및 현장 예약
시스템 아키텍쳐
Frontend
React
Typescript
Javascript
CSS3
Web Socket
Firebase
PWA
Vite
Backend
Java
Spring Boot
JPA
MySQL
MongoDB
Redis
Kafka
Fast API
CI/CD
Docker
Jenkins
Nginx
Ubuntu
Collaboration
Gitlab
Jira
Mattermost
Figma
Notion
담당 역할
로그인 및 회원가입
스프링 시큐리티를 기반으로 처리된 토큰을 서버에서 가져와 SNS 로그인을 진행한다
메인 페이지 제작
서비스의 주요 서비스를 시각화하고, 개인 맞춤형 팝업 스토어를 추천한다
팝업 스토어 조회
랭킹순, 오픈 예정, 지도, 캘린더를 통해 팝업 스토어를 빠르게 조회한다
React-Quil을 활용한 게시물 작성
이미지 핸들러를 통해 이미지 첨부가 가능한 블로그 형식의 후기를 작성한다
팝업 스토어 예약
사용자는 자신의 정보를 입력하여 팝업 스토어를 사전 및 현장 예약한다
전역 상태 관리
Zustand를 통해 토큰을 상태 관리한다
서비스 화면
서비스 메인
카테고리별, 랭킹, 오픈 예정 등 다양한 기준으로 팝업 스토어를 조회할 수 있습니다. 하단에는 개인 맞춤형 팝업 스토어를 추천합니다.
팝업 스토어 상세
팝업 스토어에 대한 다양한 정보를 얻을 수 있습니다. 채팅을 통해 실시간으로 팝업 운영 매니저와 소통이 가능합니다.
팝업 스토어 예약
자신의 정보를 입력하면 팝업 스토어를 사전 및 현장 예약할 수 있습니다.
팝업 스토어 후기 작성
팝업 스토어에 다녀온 기록이 남아있다면, 해당 팝업 스토어를 다녀온 후기를 블로그 형식으로 자유롭게 작성할 수 있습니다.
팝업 스토어 등록
팝업 스토어 운영 매니저로 인증을 받으면 팝업 스토어를 등록할 수 있습니다.
성과 및 배운 점
Typescript의 기초 이해
Typescript의 기초적인 개념을 이해하고, Javascript와 비교했을 때 Typescript가 왜 유용한지 대해서도 알게 되었습니다. Typescript는 정적 타입 검사 기능을 제공하여 코드의 안정성을 높이고, 오류를 사전에 방지할 수 있다는 점이 매우 유용함을 경험했습니다. 이를 통해 코드 작성 시 타입 오류 등 발생할 수 있는 잠재적인 오류를 줄일 수 있었습니다.
React의 기초 이해
React의 기초적인 개념과 사용 방식에 대해 이해할 수 있었습니다. 컴포넌트 기반 개발 방식이 UI를 효율적으로 관리하는 데 큰 도움이 된다는 것을 경험할 수 있었습니다. useState를 사용하여 상태를 관리하고, useEffect를 활용해 상태가 변경될 때마다 필요한 작업을 처리하는 구조로 애플리케이션을 구성할 수 있었습니다. React의 기본적인 패턴을 이해하여 컴포넌트의 로직을 명확하게 구성하고 재사용 가능한 방식으로 작업을 진행할 수 있었습니다.
React 라이브러리 활용
React-Quill, React-Slick, Phosphor-Icons 등 다양한 라이브러리를 활용하여 서비스의 품질을 향상시킬 수 있었습니다. React-Quill을 사용해 텍스트 편집 기능을 구현하고, React-Slick을 통해 매끄러운 이미지 슬라이더 기능을 추가하여 사용자 경험을 개선했습니다. 또한, Phosphor-Icons 라이브러리를 활용하여 직관적인 아이콘을 제공함으로써 UI의 시각적 완성도를 높일 수 있었습니다.
Zustand를 이용한 상태 관리
Zustand를 활용하여 전역 상태 관리를 효율적으로 구현할 수 있었습니다. 특히, 사용자 인증에 필요한 토큰을 전역적으로 관리함으로써, 애플리케이션의 여러 컴포넌트에서 토큰에 포함된 사용자 정보를 빠르게 접근하고 활용할 수 있었습니다. 이를 통해 각 컴포넌트가 필요할 때마다 상태를 갱신하거나 전달하는 복잡한 작업을 줄이고, 보다 직관적이고 간결한 코드 구조를 유지할 수 있었습니다.