스포츠 강좌 이용권 사용 트렌드 및 추천을 하기 위한 지도기반 스포츠강좌 정보 제공 서비스 헬로핏
개발 기간 : 2024.11.03 ~ 2024.12.04
팀원 : FE 2인, BE 1인, 디자이너 1인

https://www.hellofit.site/

공모전 경험을 해보면 좋을 거 같아서 팀원을 구해서 국민체육진흥공단에서 진행하는 공공데이터 활용 경진 대회에 참여해보았다...!
활용할 수 있는 데이터가 너무 너무 부족해서 구현 가능한 서비스도 제한적이었지만, 오랜만에 아이디어 회의도 해보고 재밌었다...
기획은 참 귀찮지만... (늘 아이디어가 있는 기획자들 진짜 대단) 기획에 기여도가 커질수록 프로젝트에 열정?이 커지는 것 같다 기분탓인가 ㅎ 아무튼 데이터 상태가 너무 안좋아서 백엔드 분이 고생 많이 하셨다... 졸작할 때 api 데이터 파싱하던 내가 떠올라서 .. 슬펐다...

디자이너, 백엔드와 협업도 거의 처음이고, 프론트 작업도 소수 인원으로 진행하는 게 처음이라서 일정을 구체적으로 세워두고 진행했다.

🤔 좋았던 점

매주 화요일 밤에 디코에서 회의를 진행하고, 작업 현황은 노션에 정리하고, 이슈나 전달 사항은 단톡방과 피그마를 통해 공유해서 소통이 정말 원활히 이루어졌다.

디자이너와 백엔드와 함께 작업을 한다는 점이 정말 재밌었다~!! 문제점을 발견해서 주고받는 과정도 (나만) 재밌었고... 각 담당자의 역할을 선명하게 느낄 수 있는 기간이었다. 이 점이 프로젝트를 진행하면서 제일 좋았던 점! 새로운 경험을 하면서 그 과정에 내 장점?을 발견해 나가는 게 너무 즐겁다 ㅋㅋ

🤔 안 좋았던 점

첫 번째! 음성 회의는 제한이 많은 것 같다.... 하고 싶은 말도 제대로 못 하게 되고 내가 뭐라고 하는 건지도 잘 모르겠고, 누가 말하려는 건지 모르니까 오디오 계속 겹치고.. 원활한 진행을 위해서는 대면 회의가 베스트고.. 어려우면 최소한 화상 회의를 진행해야 하는 거 같다...
두 번째! 이건 해야 할 일이 생기면 그걸 제일 우선 해치워야 일상생활이 가능한 내 성격 문제 같다... 내가 팀원한테 요청한 사항이 바로 피드백이 안 오면 답답하고.. 난 빨리 작업해서 이 컴포넌트, 페이지, 프로젝트를 끝내고 싶은데 뭐 하나 만들고 다음 디자인 하염없이 기다리고.. 컴포넌트 기다리고... 리뷰 기다리고... 이 과정이 힘들었다... 당연한 과정인데... 혼자 스트레스 제법 받았다.. 후비적 현업에서 어떻게 일하려고....;; 해야 할 일(프로젝트 끝내기)이 안 끝나니까 진짜 다른 생활이 잘 안된다... 그래서 밤을 새워서라도 최대한 해놓게 되니까 혼자 속도가 너무 빠르고, 작업물이 많아지는 악순환이었다... 내 워라밸은 망했다!!!!!!

---

🪐 서비스 기능

• 사용자 현재 위치 기반으로 지도에 스포츠 이용권 강좌를 운영하는 시설을 출력합니다.
• 원하는 스포츠 종목에 필터를 적용하여 해당하는 강좌를 볼 수 있습니다.
• 누적 신청 인원 수 기반으로 지역별 인기 강좌를 추천합니다.
• 각 스포츠 시설을 찜하는 기능을 추가하여 찜 목록에서 조회가 가능합니다.
• 일반 강좌와 장애인용 강좌를 구분하여 사용자 편의성을 높였습니다.
• 카카오 간편 로그인을 통해 쉽게 이용이 가능합니다.
• 장애 유형별 필터 제공하여 해당하는 장애 유형에 따른 이용 가능 시설을 확인할 수 있습니다.
• PC와 모바일에서 일관된 디자인으로 이용이 가능합니다.
  
  ㄴ이게 pc화면이다!! pc에서는 width를 600px로 고정하여 모바일과 같은 디자인으로 구현하였다.

🪐 내가 개발한 부분

유저가 필요한가...로 의견이 나왔지만 찜 목록 담는데 필요할 거 같아서 가볍게... 카카오 로그인을 넣었다. 근데 추가 기능으로 후기를 추가하게 되어서 로그인 기능 넣길 잘한 거 같다. 유저정보는 recoil로 상태관리했고... 상태에 따라서 찜, 알림 페이지 접근을 불가하게 처리했다! 찜, 알림 기능 필요없다면 [서비스 둘러보기]로 조회는 가능하도록!
사용자 편의를 위해 랜딩페이지는 처음 접근 시에만 보이고 로고 클릭이나 우회 처리도 다 /map 페이지로 이동되도록 했다. 지도 페이지는 다른 프론트엔드 분이 작업하셨고, 저 페이지에는 지역필터 컴포넌트만 내가 작업했다!
그리고 헤더의 일반/특수 토글이 이 서비스의 주요 기능이다! 스포츠 시설 이용권이 일반 이용권과 장애인 이용권이 아예 분리되어있어서, 해당 이용권을 사용할 수 있는 시설만을 보여주기 위해 완전히 분리하고 토글 상태를 전역으로 관리하여 상태에 따라서 시설 데이터를 가져오고, 색상 스타일링을 하였다.

단순해 보이지만 참 복잡하다... 한 달이 전부 이 페이지에 담겨있다... 지역필터, 종목필터, 특수필터가 있으며 시설 추천이 반영되어야 해서... 전체 페이지와 인기 페이지로 구분된다... 필터링 되는 조건이 너무 많아서 api 연결이 복잡하다... 이 페이지를 온전히 혼자 작업해서 오히려 다행이었다!!.. 협업했으면 진짜 꼬였을 듯.....

스포츠 종목 필터는 그나마 수월했는데 지역 필터가 진짜 너무 복잡했다.... 광역시는 시,구로 나뉘고 나머지 지역은 도,시(군)로 나뉘어서 바텀시트에서 선택한 버튼에 지역 코드를 연결하는 게 참... 디자인 시안이 광역시, 도를 선택 후 다음 페이지에서 시군구를 선택하게 되어있어서 연결하는 과정과... 1차 선택 후 2차 목록을 끌고 오는 과정과... 선택완료 버튼을 누르면 최종 지역코드를 api에 전달하는 부분이 나를 힘들게했다...
선택한 지역코드를 또 placeholder에 지명으로 변환해서 보여줘야 했고........ 그리고 저 지역 필터 컴포넌트가 지도 페이지에서도 쓰고..(스타일도 다름)... 원래는 전체 페이지와 인기 페이지가 완전히 분리되어있어서 그나마 나았는데 TabNav로 합치게 되면서 선택한 지역을 전역으로 관리해서 양 페이지에서 사용되게 하는 게..참... 아이고 아무튼 이 컴포넌트가 작업 시간이 제일 오래 걸렸다...

두 필터로 이미 버거웠는데.... 특수 상태에서는 아예 다른 디자인의 특수 필터가 존재했다..... 이거 만들즈음 인성 파탄났었음.... 하
api 상 장애유형이 하나만 선택되도록 해야 했고...(복수 선택으로 구현했다가 다시 작업함....) 편의 시설은 목업데이터라서 필터링에 반영은 되지 않되, 필터에 저장이 되어야 하는.... 하지만 내가 해냄

복잡한 필터하다가 검색 작업하니까 진짜 기분이 너무 좋았다~^^
지명, 종목, 상호로 검색이 되도록 하였다~~~우하하

지도 페이지, 전체 페이지, 인기 페이지, 찜, 알림 그냥 모든 곳과 연결되는 시설 상세 페이지!!!
카카오맵을 사용해서 시설의 위치를 보여주고 주소를 클릭하면 사용자의 현재 위치와 시설의 위치를 핀으로 구분해서 보여주게 하였다!
아래로는 시설 정보와 개설 강좌 목록이 있다... 이건 그냥 api에서 가져오는 것... 찜 버튼을 누르면 찜 목록에 담긴다(당연함)
그리고 데이터의 한계로 [신청하러가기] 버튼을 누르면 그냥 '스포츠 강좌 이용권 사이트'로 연결된다... 공익을 위해 만들어진 사이트면서 너무 대충 만드신 듯... 쿼리가 없고 모든 페이지가 한 url을 쓰고 있어서 사용자가 선택한 시설에 해당하는 신청 페이지로 연결을 할 수가 없었다... 개선되길.......

시설 상세 맨 아래에는 기능이 부족한 거 같아서 후기를 추가했다! 로그인한 회원에게만 [후기작성] 버튼이 보이며 내가 쓴 후기에만 미트볼 버튼을 띄워서 수정 및 삭제가 가능하도록 했다. 후기를 작성하거나 수정하면 팝업이 뜨도록 하였고, 삭제 시 모달이 뜨도록 하였다.

이건 특수 상태의 시설 상세 페이지이다! 일반 상태와 나머지는 다 일치하고, 장애 지원 정보 카드가 추가로 있다.. 특수 이용자에게는 큰 도움이 될 것 같다고 생각한다!

돌고 돌아 다시 강좌 탭의 인기페이지!
인기 시설 TOP5는 누적 수강생 수를 기준으로 띄우며 슬라이드 라이브러리를 사용하여 스윽스윽 슬라이드가 된다!
여기도 마찬가지로 지역 필터링과 종목 필터링이 가능하며, "인기"페이지라서 누적 수강생이 아예 없는 시설은 안 보이도록 백엔드에서 처리해주셨다! 그래서 시설 수가 적다...
누적 수강생 수, 별점, 후기 개수, 찜 개수에 따라서 정렬이 가능하다
어떻게 정렬이 되는 건지 직관적이었으면 좋겠어서 임의로 상호 옆에 찜 개수와 별점, 후기 개수가 뜨도록 추가했는데 디자이너님의 컨펌을 받아서 유지하게 되었다 기분 좋았다 ㅋ

모든 페이지에서 햄버거 버튼을 누르면 나오는 설정 페이지이다!
사용자 편의를 위해 회원 탈퇴와 로그아웃을 클릭하면 모달이 뜨도록 추가하였다..

내가 작성한 후기를 누르면 나오는 페이지이다... 페이지네이션을 넣고 싶었는데 디자이너님의 불허로... 그냥 나열된다.. 슬프다...
상호를 클릭하면 시설 상세 페이지로 이동되고, 여기서도 수정삭제가 가능하다!

api에서 받아서 나열하는 게 다지만.. 그래도 찜 페이지와 알림 페이지이다
유저 DB에서 상태를 구분하고 있지 않기에 여기엔 일반 시설과 특수 시설이 같이 보인다! 그래서 시설 정보에 따라서 색으로 구분되도록 해보았다 ㅎ
알림은 읽음처리, 개별 삭제, 전체 삭제가 가능하다...

---

🪐 트러블 슈팅

개발하던 중 데이터 구조의 차이로 문제가 발생했다... 일반 상태의 모든 페이지를 만든 상태에서 특수 상태를 개발하면서 ... 생겼다...

일반 시설은 사업자번호와 SerialNumber가 필요했지만, 특수 시설은 SerialNumber 없이 데이터를 조회할 수 있어, 일반 시설 기준으로 만들어 둔 모든 컴포넌트에서 SerialNumber를 필수로 요구하면서 타입 에러와 상세 정보 보기 경로 충돌 문제가 발생했다.... 일반에는 url에 SerialNumber가 무조건 필요한데.. 조건부 렌더링으로 상태에 따라서 구분하는데 특수 상태 url에 SerialNumber 값이 없어서 오류가 쏟아졌다....

처음에는 백엔드에 특수 시설 데이터에도 임의의 SerialNumber를 추가 요청했지만, 일반과 특수 이용권을 모두 지원하는 시설일 경우 충돌 가능성이 있어 실패했다...ㅠ
겸허히... 받아들이고... 모든 컴포넌트에서 토글 상태(일반/특수)에 따라 데이터를 분기 처리하고, SerialNumber 없이도 동작하도록 타입을 수정했다... Link에서 SerialNumber가 요구되던 부분은 ${SerialNumber||''}로 undefined 처리했다!

UI는 classNames를 사용해 토글 상태에 따라 다른 스타일을 적용했고, 찜 및 알림 데이터는 API에서 일반/특수 구분 없이 받아오기 때문에 SerialNumber의 유무에 따라 상세 페이지 링크를 동적으로 처리했다.

일반/특수 시설 데이터 구조의 차이를 극복하고, 사용자 경험을 고려한 UI와 기능을 완성할 수 있었다.... 잠시 멘탈은 나갔으나 이 과정에서 데이터 구조가 달라도 같은 서비스를 구현하는 복잡한 데이터 처리 로직과 UI 상태 관리의 중요성을 경험하며, 조건부 렌더링과 효율적인 분기 처리 설계 방법을 배울 수 있었다.....고 생각한다.