시연영상: https://www.youtube.com/watch?v=HM2lbkQlCRA
- 텍스트 에디터를 사용해 사용자에게 XSS 공격이 일어날 수 있는 문제가 있어 DOMPurify로 XSS 공격을 방지하였습니다.
- 텍스트 에디터 사용 시, 이미지의 base64 URL로 인해 데이터가 비대해지는 문제를 Firebase Storage를 활용해 최적화했습니다. 이미지 선택 시 Firebase에 업로드하여 URL을 받아 적용하는 방식으로 개선했습니다.
- 웹소켓을 이용한 통신을 통해 실시간 채팅 기능을 개발하였고 이 과정에서 백엔드와 긴밀하게 협업을 하여 커뮤니케이션 능력을 길렀습니다.
- 회원, 비회원, 관리자 등급에 따른 기능 분기 처리를 하였습니다
- 다른 프론트엔드 팀원들과 지속적으로 커뮤니케이션을 하며 팀원들이 힘들어하는 부분을 지속적인 도움을 줬습니다. 결과적으로 팀원들이 NextJs에 적응하는데 기여를했습니다.
- 게시판 둘러보기 페이지 둘러보기 페이지에서 게시판 카테고리와 해당 카테고리의 게시물을 최신 순으로 10개씩 볼 수 있도록 구현했습니다. 게시글을 클릭하면 해당 게시판의 게시물로 이동하도록 했습니다.
- 게시판 해당 카테고리에 맞는 API 요청을 통해 해당 게시판의 글 목록을 조회할 수 있도록 했습니다. 회원의 경우 글 작성 버튼이 활성화되어 클릭 시 해당 카테고리의 글 작성 페이지로 이동되도록 구현했습니다.
- 상세 보기
게시물의 상세 정보를 확인할 수 있도록 했고, 회원의 경우 여기서도 글 작성이 가능하며 글 작성자, 댓글 작성자 중 원하는 사람의 닉네임을 클릭해 친구 요청을 보낼 수 있도록 구현했습니다. 글 작성자와 관리자는 게시물 수정, 삭제가 가능하도록 했습니다. 또한 본문의 경우
DOMPurify라이브러리를 이용해 XSS 공격을 방지했습니다. 게시물을 신고할 수 있도록 했고, 병렬 라우팅을 이용해 상세보기 페이지에서 다른 글로 이동이 가능하도록 구현했습니다.
- 글 작성, 수정 제목과 본문을 작성해야 작성 및 수정 요청을 보낼 수 있도록 구현했습니다. 텍스트 에디터는 ReactQuill 라이브러리를 사용했습니다. 이미지를 선택할 경우 파이어베이스에 이미지를 올리고 URL을 가져와서 src 속성에 적용되도록 했고, 이미지의 사이즈를 조절할 수 있도록 구현했습니다.
- 댓글 작성 회원의 경우 댓글을 작성, 수정, 삭제가 가능하도록 했고 작성자와 관리자만이 수정 삭제가 가능하도록 구현했습니다. 비회원의 경우 보이지 않도록 했습니다.
- 관리자 신고 접수 페이지 관리자만 접근이 가능하도록 했고 관리자 권한이 없는 유저가 접근하면 404 페이지로 이동시키도록 구현했습니다. 관리자는 게시물들의 신고사유와 제목 등의 정보를 확인할 수 있고 해당 게시글을 삭제하거나 신고 리스트에서 삭제시킬 수 있도록 했습니다.
- 관리자/유저 채팅 관리자는 유저 채팅방 목록을 볼 수 있고 채팅방을 선택하면 해당 유저와 웹소켓을 이용해 통신을 시작해 실시간으로 채팅을 주고 받을 수 있도록 구현했습니다. 유저는 회원가입한 유저만 채팅을 사용할 수 있도록 했고 화면의 오른쪽 하단에서 관리자와 채팅 아이콘을 클릭하면 채팅을 시작할 수 있도록 구현했습니다.
팀명 : 2팀 두가자
팀원 : 이희재(팀장), 이수엽, 박주호, 한지수, 김선규
프로젝트 주제 : 공공 데이터를 활용한 웹 플랫폼
프로젝트 기간 : 2024년 12월 16일 ~ 2025년 1월 8일
프로젝트 인원 : 5명
프로젝트 소개 : 서울의 핫플레이스 109곳을 중점으로 주변 맛집과 날씨 및 혼잡도, 행사 및 축제 등의 정보를 실시간으로 얻고 그 정보를 기반으로 일정을 계획할 수 있는 플랫폼
| 팀원 | 역할 |
|---|---|
| 박주호 (Front) | 게시판, 일정관리 리스트, 관리자, 댓글 CRUD, 채팅, 공용 버튼 |
| 한지수 (Front) | Nav & SideBar, 메인페이지, Modal 전체, 주소록(친구), 알림 |
| 김선규 (Front) | 로그인 & 회원가입, 비밀번호, 장소 정보 페이지, 마이페이지, 공용 Input |
| 이수엽 (Back) | Nginx, Docker, Logger, 게시판/댓글 API, 일정 API, 찜 API, 신고 API, 검색/Open API |
| 이희재 (Back) | 로그인/회원가입 API, 유저 정보 수정 API, 친구 API, 알림 API, 채팅 API |
- 로그인 : 사용자의 입력 값을 유효성 검사(front/back) 후 토큰 저장
- 회원가입 : 필수 입력사항 유효성 검사(front) 후 데이터를 DB에 전송
- 비밀번호 재설정 : 이메일 유효성 검사(front) 및 인증(back) 후 이메일로 재설정 링크 전송
- 사이드바 : 각 페이지로 이동 -> 로그인하지 않은 유저는 마이페이지 아이콘 비활성화
- 상단바 : 주소록과 알림버튼, 유저의 닉네임이 뜨고 알림이 오면 알림(종 버튼) 활성화
- 검색 목록: 검색 또는 목록에 있는 장소를 선택하면 dashBoard페이지에 장소를 띄워줌
- 지도 : 장소 검색을 하지 않으면 현재 위치, 장소를 검색하면 해당 장소로 핀 고정
- 주변 맛집 : 장소를 검색하면 주변의 맛집을 추천
- 날씨 : 장소를 검색하면 장소의 날씨와 혼잡도 등을 보여줌
- 주변 행사 및 축제 : 장소를 검색하면 장소 근처에서 진행되는 행사, 공연, 축제 등을 보여줌
- 인적사항 수정 : 닉네임과 비밀번호를 수정
- 내가 작성한 글 : 게시글에서 작성한 글의 목록을 보여줌
- 찜 목록 : 장소 검색 후 추천 맛집을 찜하고 찜 목록을 보여줌
- 친구 목록 : 친구를 맺은 목록을 보여줌
- 요청 확인 : 친구 요청이 온 목록을 보여줌 수락/거절
- 친구 추가 : 닉네임을 검색하면 목록이 나오고, 추가 버튼을 누르면 친구 요청이 전송
- 알림 활성화 : 알림이 있으면 버튼이 활성화 모드로 변하고, 알림의 개수만큼 숫자를 띄워줌
- 친구 요청 : 친구 요청이 오면 알림
- 초대 알림 : 상대방이 일정을 생성할 때 동행자로 추가하면 초대 알림
- 친구 구함, 문의, 후기, 동행 4개의 게시판 조회
- 로그인 한 유저만 글 작성 및 댓글 작성
- 댓글에서 닉네임을 클릭하면 친구 요청 전송
- 로그인 한 유저가 일정을 조회, 생성, 수정, 삭제할 수 있음
- 일정을 생성하고나면 dashBoard페이지에서 장소를 일정에 추가할 수 있음
- 친구를 일정에 초대하면 함께 일정을 공유할 수 있음
- 관리자는 게시판 글의 신고 내용과 게시글의 일정 조치가 가능
- 1대 1 실시간 문의 채팅
- ui가 너무 단순하고 밋밋해서 조금 더 예쁘게 꾸미고싶은 욕심..!
- 코드 가독성이 별로 좋지 않아서 코드 가독성을 더 높일 수 있도록 보완
- 지역을 서울뿐 아니라, 전국의 장소 정보를 가져와 더욱 많은 사람과 많은 여행에 도움이 되고싶음