👀 welcome to

서울시 도시 데이터 공공 API 기반 정보제공형 커뮤니티

시연영상 >

👨‍👩‍👧‍👦 Our Team

정성우	장윤서	유도원	오기쁨	임효진	이지혜
@anfrosus	@Younddo	@dwon5001	@joyfive	@BLAKE198492	aksjdffg@naver.com
VL / BE	BE	BE	TL / FE	FE	DE

[👊 Front-end Github 바로가기](https://github.com/HH9C4/YGHH-FE) [👊 프로젝트 노션 바로가기](https://joyfive.notion.site/C-4-SA-9407bb7a0897420782b957a25036b092) [👊 원페이지 노션 바로가기](https://joyfive.notion.site/ee0519f495c74049ac3a7c4a7691d8d3)

프로젝트 기능

🛡 OAuth2 소셜로그인 (kakao, naver)

• Kakao와 Naver계정을 통한 간편 로그인이 가능합니다.
• Kakao Email과 Naver Email 이 동일한 경우 하나의 계정으로 통합하여 사용이 가능합니다.
• 하나의 계정에 Kakao 와 Naver 모두 연동되어있는 경우 두 곳 모두에서 연동이 해제되며 서비스에서 탈퇴처리 됩니다.
• 작성한 게시글, 댓글 등은 사라지지 않으며 탈퇴한계정으로 표시됩니다(회원 정보는 삭제됨).

미리보기

📊 서울시 open api를 활용한 실시간 정보제공 기능

• 스케쥴러를 활용하여 5분마다 데이터를 수집합니다.
• 2-1. 구 별 코로나 정보, spot 별 날씨 정보 제공 : 저장되어 있는 데이터를 실시간으로 제공합니다.
• 2-2. 전체 데이터의 누적 통계를 활용한 정보제공 기능 : 수집한 데이터를 기반으로 혼잡도 점수를 산정 하여 순위 통계를 제공합니다.
• 2-3. spot 별 누적 + 실시간 정보제공 기능 : 지난주 같은 요일의 혼잡도, 인구수를 비교하여 실시간 인구 추이를 제공합니다.

미리보기

🗨 구 별 커뮤니티 (CRUD)

• 서울시 25개 구 별 커뮤니티를 제공합니다.
• 1.게시글, 댓글 작성/수정/삭제/조회 : 다중 이미지 업로드가 가능하며 카테고리 선택과 태그추가 기능을 지원합니다.
• 2.좋아요 : 게시글, 댓글을 좋아요 할 수 있으며 이에대한 알림기능도 지원합니다.
• 3.북마크 : 내가 자주 사용하는 구를 북마크 할 수 있습니다. 북마크한 지역의 게시글이 추가되면 실시간 알림을 제공합니다.

🔍 검색 기능(내용+태그, 태그 검색기능)

• QueryDSL을 활용하여 동적 쿼리작성이 가능하도록 구현하였습니다.
• 게시글의 내용을 검색하거나 태그로 검색이 가능합니다. 작성자 검색도 가능합니다.

👨‍💻 마이페이지 기능 (내가 작성한 글, 내가 좋아요한 글, 내 게시글에 달린 댓글, 내 정보 수정)

• 마이페이지에서 내가 작성한글, 내가 좋아요한 글, 내 게시글에 달린 댓글을 확인할 수 있으며 프로필사진과 닉네임을 수정할 수 있습니다.
• 내 게시글에 새로운 댓글이 달리면 새로운 알림이 등록됩니다.

📢 신고 기능 (사용자, 닉네임, 게시글, 댓글)

• 악성 사용자, 불건전한 닉네임, 게시글, 댓글을 내용과 함께 신고할 수 있습니다.
• 본인은 본인을 신고할 수 없으며 같은 건의 신고에 대해서는 계정 하나당 1회로 제한됩니다.
• 항목별 일정 횟수가 지나게 되면 강제로 닉네임을 변경하거나, 내용을 비공개 처리하여 보여주게 됩니다.

☑ 무한스크롤

💬 WebSocket을 활용한 실시간 채팅

• 실시간 채팅이 가능합니다.
• 최근에 대화가 이루어진 순서대로 채팅방이 보여집니다.
• 상대방이 나간 후에 새로운 메세지가 등록되면 기존의 채팅이 이어집니다.
• 채팅방에서 모두 나가게 되면 채팅 내역은 삭제되며 다시 대화를 시작하면 새로운 채팅방이 생성됩니다.

🔔 SSE를 활용한 실시간 알림

• 북마크한 게시판에 새로운 글이 등록되면 실시간 알림을 제공하며 알림을 클릭하면 해당 게시글로 이동합니다.
• 내가 작성한 게시글에 좋아요 및 댓글이 달리면 실시간 알림을 제공하며 알림을 클릭하면 해당 게시글로 이동합니다.
• 실시간 채팅이 오면 실시간 알림을 제공하며 알림을 클릭하면 해당 채팅방으로 이동합니다.

⚙ Development Environment

react: ^18.2.0 recoil: ^0.7.6, react-router-dom: ^6.4.5 axios: ^1.1.3
tailwindcss: ^3.2.4

🚨 Trouble Shooting

다중 이미지 등록/수정을 위한 이미지 업로드 훅 수정 Wiki >

태그 State 관리 Wiki >

SSE-다중 connect 현상 Wiki >

:raising_hand::thought_balloon: Concern

Tailwind CSS Wiki >

Redux -> Recoil refactoring Wiki >

🌐 Architecture

📋 ERD Diagram

📝 Technologies & Tools (FE) 📝

JavaScript React.js Recoil Axios Tailwind CSS

🥳 내가 구현한 기능

기능	구현방식
react-daum-postcode UI 커스텀	팀원이 연결한 React-daum-postcode 라이브러리와 다음우편번호 서비스의 가이드 문서에 따라 서비스 디자인 시스템에 따라 커스텀 컬러 셋 세팅
마이페이지	get / post (알림, 작성한 글, 좋아요한 글) - 알림 : 유저의 게시글에 달린 댓글 리스트 get 통신 → 유저가 댓글 클릭시 post 통신을 통해 isConfirm : true 불리언값 변경 및 해당 게시글로 navigate 이벤트 - 작성한 글 : ‘유저가 작성한 게시글’ 백엔드 get 통신 - 좋아요한 글 : ‘유저가 좋아요를 누른 게시글’ 백엔드 get 통신
게시글 작성 post / 수정 put	이미지 file과 일반 json data blob 을 form data 로 묶어 post / put 통신
다중 이미지 업로드 훅	- 이미지 압축 : brower-Image-compression 라이브러리를 활용한 압축 기능, 압축 시 최대 너비/높이값 설정 가능 - state 초기화 옵션화 : 이미지 업로드 후 다시 인풋을 동작시켜도, 기존 파일 배열이 유지되어 이미지 추가 등록 가능 - 개별 이미지 삭제 기능 : 유저의 온클릭 이벤트로 preview 배열의 url 값을 활용하여 실제 파일 데이터 배열에서도 삭제
태그 기능 (검색/추가/삭제)	- 검색 : get 서버에서 1차 반환 받은 데이터를 기반으로 local state로 배열 메소드 includes() 활용한 게시글 작성 시 태그 검색 기능 구현, 검색된 리스트에서 사용자가 태그 클릭 시 태그 배열에 추가됨 - 추가 : 검색리스트에서 클릭하거나, 사용자 인풋 onChange 변화 후 onKeyUp 이벤트(,) 혹은 onClick 이벤트(추가 버튼)를 통해 배열 state에 추가 가능 - 삭제 : 등록된 태그리스트에서 클릭 시 개별 태그 배열에서 filter() 메소드로 제거
커뮤니티 리스트 조회 get	지역구, 카테고리(전체/공유/질문/맛집/일상), 정렬, 무한스크롤 페이징 4가지 정보 Axios get메소드 params 로 전달
커뮤니티 검색 기능 get - 카테고리(0,1,2)와 검색어, 정렬(최신순/좋아요순), 페이징 4가지 정보 Axios get메소드 params 로 전달 - 게시글 리스트 및 상세페이지의 태그 클릭 시 태그 검색으로 연결
무한스크롤 상태관리 리팩토링	- redux store → local state 로 변환 - 2개의 useState() 로 서버 통신 직후에 데이터를 받는 서버 state와 사용자에게 노출할 배열 state 구분
Tailwind CSS 도입	- 프로젝트 특성과 사용해보지 않은 프레임워크에 대한 기술적 호기심을 종합하여 기존 사용해본 CSS in JS 타입 뿐 아니라, 미리 만들어진 유틸리티 클래스와 커스텀 클래스를 함께 활용할 수 있는 Tailwind를 도입하는 것으로 결정
Recoil 도입 및 기존 state 리팩토링	Redux toolkit thunk를 활용하여 개발된 액션/리듀서 local state로 변환 후 전역 상태관리가 필요한 경우 Recoil의 Atom단위 사용
정보페이지 조회 get chart.js 데이터 시각화	- 백엔드 get 통신 후 chart.js 라이브러리의 Bar charts , Line charts Componenet 임포트 후 라운드 바로 커스텀 디자인 적용

👏 프로젝트 후기

짧다면 짧고, 길다면 긴 6주를 보내면서 React와 상태관리(local state / redux / recoil)에 대해 깊이 이해할 수 있게 된 것 같습니다. 불과 3달 전만 해도, javascript라고는 window.alert(’hello, JS!’) 밖에 몰랐던 제가 어엿한 하나의 서비스를 구축할 수 있는 역량을 갖게되었다는게 새삼스럽습니다.

JavaScript와 React의 DOM 객체를 다루는 방식이나 렌더링 하는 방식에 대해 이해하게 되었고, 항해99를 통해 어엿한 프론트엔드 엔지니어로서 성장하게 된 것 같습니다. 적은 인원으로 다량의 페이지, 다양한 라이브러리와 기능들을 구현하느라 숨가쁘게 달려왔지만 여전히 보완이 필요한 QA 사항들이 눈에 밟히기도 하네요.

짧은 기간동안 할 수 있는 최대치를 끌어낸 것 같아 뿌듯합니다. 첫 배포 이후 1.1.6버전까지 업데이트가 되어왔는데, 이후에는 QA사항 보완보다는 해당 프로젝트를 오롯이 혼자 재구현하는 방식으로 다시 재도전해볼 계획을 갖고 있습니다.

◻ Copyright ©2022 Hang-Hae99 9th Final : C team 4 all rights reserved.