👨‍👩‍👧‍👦 와글와글 (Wagle Wagle)

About Project 🚋

소프티어 부트캠프 3기 - 워밍업 프로젝트 소프티5, 모빌2팀

개발 기간

ver.1: 2024.01.04 ~ 2024.01.10
ver.2: 2024.01.11 ~ 2024.02.13

지루한 지하철.. 내 옆 사람은 무슨 생각하지? 🤔💭

지하철을 타고있는 사람들의 공감대를 바탕으로 콘텐츠를 공유/탐색하며 지하철 이동 중의 지루함을 해소하는 웹서비스

1. 지금 내 생각은❗️

역 별로 소소한 글을 올려 당장의 나의 기분을 표현하고 다른 사람에게 정보를 공유한다.

2. 지금 다른 사람들은❓

비슷한 시간대에 지하철을 타는 사람들의 글을 통해 공감대를 형성하고 지루한 지하철에서의 시간을 달랜다.
(지하철 이용의 지루함 공감, 재밌는 짤 업로드 등)

3. 와글와글 지하철 ⁉️

정서를 표현하는 캐릭터와 공감성을 담은 재치있는 랜덤 닉네임을 통해 소소한 재미를 부여한다.
(ex. 닉네임: 출근하기 싫은 박명수)

Sangmin's Contribution 😎

0. 서비스 설계

• User interaction에 따라 View를 업데이트 하도록 프로젝트를 설계하여 데이터 흐름을 제어
• Vanilla JS를 사용해 React처럼 JS에서 HTML을 삽입하도록 하여 컴포넌트 단위로 UI를 재활용
• 이벤트 위임을 활용하여 최상위에서 이벤트를 제어, 이벤트 map 객체를 활용해 가독성 향상

1. 노선도 화면

• geolocationAPI와 element.scrollIntoView를 활용해 현재 위치 정보를 바탕으로 가까운 역으로 화면 이동

• SCSS의 반복문을 활용해 게시글 수가 많은 역의 pin이 커지도록 애니메이션 적용

• CSS Grid를 활용해 지하철 노선도 표현

  

2. 게시글 화면

• History API를 활용한 SPA Router를 구현해 Vanilla JS 환경에서 새로고침 없는 페이지 전환 제공

• 게시글 로딩중 스켈레톤 UI 적용

  

• 태그별 게시글 모아보기 제공

  

• 부적절한 게시글 신고 기능 제공 / localStorage를 활용해 신고 시 즉시 가리기, 누적 5회 이상 신고 게시글은 DB에서 삭제

  

3. 게시글 작성 화면

• 글 또는 사진은 적어도 1개 이상 필수로 선택

• 문자열 Escape를 활용해 HTML 태그를 엔티티로 변경하여 XSS 공격 방지

  

Video 📺

• 와글와글 시연영상 (아래의 이미지를 클릭하시면 유튜브 링크로 연결됩니다.)

  

Our Team 🌿

우리 팀의 협업

👩🏻‍💻 모빌2팀의 그라운드 룰

📁 API 문서(Swagger)

🧑‍🏫 용어 사전

📎 트러블 슈팅

팀원 소개

기획	디자인	개발(FE)	개발(FE,BE)	개발(FE,BE)	개발(BE)
@yunnamkyeong	Naeun Kim	@Sang-minKIM	@insiderhj	@SuHyeon00	@h-sooah
윤남경	김나은	김상민	김희진	오수현	한수아

Stacks 🐈

Environment

FrontEnd

BackEnd

CI/CD

Deploy

Communication