📌 SSAPIN[싸핀]

목차

1. 웹 서비스 소개

2. 버전 기록

3. 기술 스택

4. 주요 기능

5. 프로젝트 구성도

6. 데모 영상

7. 특이사항

8. 구글 애널리틱스 통계

9. 개발 팀 소개

10. 개발 기간 및 일정

11. 실행 방법

    ---

📌 웹 서비스 소개

싸피생들이 함께 만들어가는 지도 큐레이팅 서비스, SSAPIN ✈️

취향부터 장소, 시간까지 너무 많은 것을 고려하다가 결국 같은 곳을 찾아가시나요? 🚶🏻‍♀️🚶🏻

오프라인을 통해 새로운 지역을 탐험해야하나요?

이제는 SSAPIN, 싸핀에서 쉽고 빠르게 장소를 찾고 추천해보세요 ! 📌

📌 버전 기록

버전	업데이트 내용	업데이트 날짜
v1.3.1	robot.txt, sitemap.xml 추가 웹 접근성 개선을 위한 utton tag aria-label 추가 중복 코드 제거 (navigator, header, footer)	22.11.24
v1.3.0	메인페이지 코드 리팩토링 스켈레톤 UI 적용 intersectionObserver API 적용으로 view에 보이지 않는 컴포넌트 데이터 요청 x 지도찾기 스켈레톤 UI 적용 모여지도 장소 수정 시 기존의 장소가 지도에서 보이던 버그 맵랭킹을 장소가 많이 찍힌 지도순이 아니라 찜이 많이 된 지도 순으로 변경	22.11.20
v1.2.0	웹 접근성 개선 프론트엔드 메인페이지 리렌더 이슈 로딩 컴포넌트 video tag로 변경 로고 width, height 고정 닉네임 글자제한 추가	22.11.18
v1.1.0	닉네임 중복확인 시 특수문자가 포함 되지 않은 채 검사를 하는 현상을 해결 지도에 찍힌 장소의 위치가 미세하게 오차가 있는 문제점을 해결 추천지도 카드에 참여자수 대신 찜 개수로 변경	22.11.16
v1.0.1	부울경 캠퍼스 장소 추가 시 지명 부울경으로 인해 검색이 되지 않는 문제 해결 싸피 캠퍼스 마커 오버레이 색상 및 이미지 변경 비로그인일 때 장소추가 버튼을 누르면 로그인창과 장소추가 모달이 함께 뜨는 이슈 장소 수정 시 장소 추가 권한 가능하도록 변경 지도 추가 모달 및 페이지 이모지 입력란에 한글 입력시 밸리데이션 통과 에러 지도 오버레이 글꼴 지정 탑버튼 스크롤 이벤트 (스크롤 내릴때만 나타남) 마이페이지 유효성 검사 마이페이지 userdetailCard 글씨크기 작게 + 왼쪽정렬(pc 포함) PlaceCard 제목이 길 때 삭제 버튼 사라지는 버그 수정 북마크시 계속해서 mapRefetch 되는 버그 수정	22.11.15
v1.0.0	ssapin.com 서비스 오픈	22.11.14

🛠 기술 스택

Front-end 기술 스택
Back-end 기술 스택
Server 기술 스택
배포	📌 SSAPIN[싸핀]
이용가이드	⚙️ 이용가이드
노션	👉 노션 바로가기

💡 주요 기능

웹 화면	모바일 화면	기능
		메인 운영진이 제공하는 미션, 상위 유저, 핫 플레이스, 추천 지도, 모여지도를 확인할 수 있습니다.
		회원가입 및 로그인 카카오 소셜 로그인을 통해 서비스에 가입할 수 있습니다. 회원가입 후 마이페이지로 이동하며 이모지, 별명, 소속 캠퍼스를 변경할 수 있습니다.
		모여지도 지정된 주제에 따라 사용자가 자신만의 베스트 장소, 딱 한 곳만 찍는 지도입니다.
		추천지도 만들기 사용자가 원하는 테마의 지도를 직접 제작하여 공유하고 설정에 따라 혼자 찍거나 다른 사용자들과 함께 찍을 수 있습니다.
		추천지도 사용자가 또는 다른 사람과 함께 찍은 장소들이 나타납니다. 장소 추가하기 버튼을 통해 장소를 추가할 수 있습니다. 장소 추가하기 카카오 지도 API를 활용하여 사용자 캠퍼스 주변의 장소를 검색하고, 지도에 추가할 수 있습니다.
		리뷰 추가 장소 상세 모달에서 해당 장소에 대한 한줄평리뷰를 확인 또는 작성할 수 있습니다.
		공유 하기 추천지도 또는 특정 장소를 카카오톡 또는 URL 복사를 통해 다른 사용자와 공유할 수 있습니다.
		북마크 추천지도나 장소를 저장할 수 있습니다.
		검색 검색어 또는 지도 만들기에서 추가한 다양한 키워드 필터링으로 지도를 검색할 수 있습니다.
		마이페이지 본인이 작성한 지도, 추가한 장소 또는 참여한 지도, 북마크 지도와 장소를 확인할 수 있습니다.
		메인페이지 캠퍼스 변경 캠퍼스를 변경하여 다른 캠퍼스의 지도와 게시물을 확인할 수 있습니다.

📂 프로젝트 구성도

아키텍쳐(Architecture)
개체-관계 모델 (ERD)

🎥 데모 영상

UCC 영상	시연 영상

📍 특이사항

검색 엔진 최적화(SEO) 및 웹 접근성(Accessibility)

점수	작업 내역
	- Meta Data 설정 - 체계화된 Heading 처리 - 시멘틱 마크업 사용 - Document title 설정 - img 태그의 alt 속성 설정 - HTTPS 적용 - robots.txt, sitemap.xml 설정
	- 시멘틱 마크업 사용 - 버튼 태그 aria attribute 적용 - img 태그 alt 속성 설정 - 저시력자를 위한 색상 대비  체계화된 Heading 처리

구글에 'ssapin' 검색 시 나타나는 페이지

네이버에 'ssapin' 검색 시 나타나는 페이지

웹 성능 최적화

웹 성능 최적화 전	웹 성능 최적화 후 (2022.11.24 기준)

• '코드 분할(Code Splitting)' 적용

• 불필요한 JS 파일 제거

• gif 파일을 mp4 video로 교체

• 이미지 파일 최적화

  • 브라우저에 따른 webp, png 파일로 교체

위 작업을 통해 Performace Score 46점 -> 77점으로 개선, Speed Index 속도 4.6초 -> 1.3초로 개선, CLS 0.034 -> 0.004로 개선

📈 구글 애널리틱스 통계

구글 애널리틱스를 세팅하고 배포를 통해 11월 14일부터 현재까지 실서비스를 운영하고 있습니다.

실제 서비스 배포후 11월 14일 부터 11월 18일까지 집중적으로 사용자들이 이용해주고 있으며, 현재도지속적으로 유지하며, 사용자를 확보하고 있습니다.

11월 14일 ~ 11월 18일동안 최고치 DAU 394 명, WAU 773명을 기록하였습니다.

👨‍👩‍👧‍👦 개발 팀 소개

유지연(팀장) (Front-end & Back-end)	남은열 (Front-end)	임상빈 (Front-end)	박지원 (Back-end)	이현규 (Back-end)	허설 (Back-end)

이름	역할	개발 내용
유지연	Back-end Front-end 팀장	Back-end - Place API 작성 - Junit을 이용한 테스트 코드 작성 Front-end - storybook을 활용한 UI컴포넌트 테스트 - emoji-picker-react를 사용하여 이모지 키보드 적용 - Recoil, React-Query를 이용한 상태관리 - ‘Emotion’을 이용한 CSS-in-JS 방식으로 스타일링 구현 - 정규식을 사용하여 input validation 제어 - 장소 등록 기능 연결 - 리뷰 작성 기능 연결 - 장소,지도 찜 기능 연결 - 와이어프레임 및 프로토타입 설계 (반응형) - 모바일, PC 반응형 웹 디자인 CICD - Jenkins, Docker를 통한 자동배포환경 구축
남은열	Front-end	Front-end - 서비스 메인 홈 페이지 - kakaomap API 활용 지도 기능   - 서비스 모여지도, 추천지도 렌더링   - 카카오 지도 검색 기능 및 장소 추가   - 핀 및 오버레이 커스텀 제작 - 지도 및 장소 카카오톡 공유 - 카카오톡 로그인 기능 - 404 Not Found 페이지 - 'Recoil', 'React-Query'를 이용한 상태 관리 - ‘Emotion’을 이용한 CSS-in-JS 방식으로 스타일링 구현 - 검색 엔진 최적화(SEO) 작업 (Lighthouse 기준, SEO Score 100점 달성) - 웹 성능 최적화 작업 (Performance Score 46점 → 80점으로 개선, Speed Index 속도 4.6초 → 1.3초로 개선) - storybook을 통한 UI 테스트
임상빈	Front-end	Front-end - 버튼 컴포넌트 작성 - 마이페이지 레이아웃 및 기능 연결 - 로고 및 로딩 디자인
박지원	Back-end	Back-end - DB 설계 - Map, TogetherMap API 작성 Front-end - 카드/기타 컴포넌트 작성 - 메인페이지/지도검색페이지 레이아웃 및 기능 연결 - 장소 상세 모달 기능 연결
이현규	Back-end	Back-end - DB 설계 - User, Auth API 작성 - Server to Server 카카오 로그인 - JWT 인증 방식 구현
허설	Back-end	Back-end - DB 설계 - Review API 작성 - 맡은 API Junit 테스트 코드 작성 - 유저랭킹, 맵 랭킹 배치 스케줄러 작성 Front-end - 기타 컴포넌트 작성 - 헤더/사이드바 레이아웃 작성 - 장소 상세 모달 레이아웃 작성 - 지도 검색 모달 레이아웃 작성

📅 개발 기간

22.10.06. ~ 운영 관리 중

💻 실행 방법

Client 실행

1. 원격 저장소 복제

$ git clone https://lab.ssafy.com/s07-final/S07P31A307.git

2. 프로젝트 폴더로 이동

$ cd frontend

3. 필요한 node_modules 설치

$ yarn install

4. env 파일 설정

VITE_KAKAO_API_KEY=
VITE_KAKAO_JAVASCRIPT_KEY=
VITE_BASE_URL=http://localhost:3000
VITE_BASE_SERVER_URL=http://localhost:8000

5. 개발 서버 실행

$ yarn start

🦊 git convention

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
🔧	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
💄	:lipstick:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포

git flow