${\small\texttt{\color{#a9a9a9} last 23.04.11}}$

pintogether-logo-horizontal



목차

  1. 소개
  2. 프로젝트 진행 기간
  3. 제공하는 기능
  4. 팀원 소개
  5. 서비스 화면
  6. 사용 기술
  7. 아키텍쳐
  8. API
  9. ERD

📌 소개 Introduction

pintogether.co.kr
좋아하는 장소에 핀을 찍고, 컬렉션을 만들어 친구들과 공유해보세요!


Pintogether는 지도를 기반으로 한 장소 공유 웹 서비스 프로젝트입니다.

타인이 알고있는 맛집과 장소들을 한눈에 확인하고 손쉽게 탐색하기 어렵다는 일상의 불편함에서 출발했습니다.
이를 해소하기 위해 웹 기반의 장소 목록 서비스를 구상하게 되었습니다.
사용자들이 맛집리스트를 발견하고 공유하는 즐거움을 쉽고 편리하게 누릴수 있는 서비스를 추구합니다.


📌 프로젝트 진행 기간

설계 및 주요 기능 구현 : 24.01.15 ~ 03.31

실제 서비스 배포를 위한 리펙토링 : 24.04.01 ~ 개발중


📌 제공하는 기능

  • 소셜로그인
  • 장소 검색
    • 현재 LOCALDATA(지방행정 인허가 데이터 개방)에서 가져온 음식점 데이터 약 25만건을 기반으로, 장소 검색기능을 제공하고 있습니다.
    • 장소 검색 기록 조회
  • 지도
  • 프로필 조회, 수정
    • 유저 팔로우
  • 컬렉션(장소목록)
    • 컬렉션 조회, 수정
    • 컬렉션 좋아요, 스크랩
  • 핀(장소저장)
    • 핀 조회, 수정
    • 핀 좋아요
  • 장소 찜
    • 찜한 장소 컬렉션에 핀으로 저장
  • 알림
  • 신고
  • 인기 컬렉션 추천
  • 컬렉션 공유

📌 팀원 소개

😶 😎 😶 🥰
이지우(팀장) 전재영 김태형 이은지
프론트엔드, 기획, 디자인 프론트엔드 백엔드, 인프라(클라우드), CI/CD 백엔드, 인프라(클라우드)
- 프로필, 컬렉션, 핀 조회 및 수정 페이지, API연결
- 로그인, 검색, 장소, 알림, 신고 페이지, API연결
- 재사용 가능한 컴포넌트 구현
(컬렉션, 핀, 장소 카드)
(input, textarea, 카드슬라이더)
- Redux 활용 로그인 상태관리
- Presigned-url 활용 이미지 업로드
- 활용 가능한 api 및 데이터 서치
- 네이버 지도, 외부 api 적용
- 지도 이용하는 기능 구현
- 페이지 기본 레이아웃, 사이드바, 지도 오버레이 구현
- 각 페이지와 지도 연동
- 메인페이지, 프로필, 설정, 컬렉션 생성 페이지 담당
- 스켈레톤 ui
- ERD/API
- 로그인 (JWT, OAuth(google, kakao, naver)
- 검색엔진
- 지도 데이터 관리
- Elastic Stack (ING)
- CI/CD 깃헙액션
- Github Submodule
- AWS (Amplify, ElasticBeanstalk, RDS, S3, ACM, IAM, Route53...)
- DB설계 및 엔티티 매핑
- API설계
- 멤버, 컬렉션, 알림, 검색 API 구현
- web socket 기반 알림 구현

📌 서비스 화면

프레젠테이션으로 보기

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

📌 사용 기술

Backend

  • Java 17
  • Spring Boot 3.2.2
  • Spring Security(OAuth2)
  • Spring Data JPA (Jpa Auditing,
  • Spring Cloud-aws 2.2.6
  • Spring Websocket
  • Gradle 8.5
  • Slf4j
  • Jwt

Frontend

  • HTML5/CSS3
  • React 18
  • Typescript 5.0
  • Next.js 14.1.0
  • Redux 5.0.1
  • Redux Toolkit
  • SCSS 0.2.4
  • ESLint

DB

  • MariaDB 10.11.6
  • Elastic Stack(Beats, Logstash, ElasticSearch, Kibana) 접목중

Open API

데이터

AWS

  • Elastic Beanstalk(EC2, Application LoadBalencer, CloudWatch)
  • Amplify
  • S3(presgined-url)
  • Route53
  • RDS
  • ACM

CI/CD

  • Github Action
  • Git Submodule

도구

  • VScode
  • IntelliJ IDEA
  • MySQLWorkbench
  • Postman
  • Vercel (프론트 페이지 테스트 용도)

협업

  • Notion
  • Slack

디자인

  • Figma

📌 아키텍쳐 Architecture

pintogether-architecture

📌 Api

pintogether-api

📌 ERD

pintogether-erd