💡 PSM : 약을 부탁해

🎉 프로젝트 소개

주말이나 공휴일에 운영하는 약국을 찾을 수 있는 온라인 서비스입니다. 응급실 대란으로 응급상황에 대처가 힘든 요즘, 심야 약국정보를 제공함으로써 도움이 되고자 하였으며 심야에 급하게 약국을 방문하기 전, 지도검색을 통해 문을 연 약국을 지도 검색을 통해 미리 알아볼 수 있습니다. 또한 자주가는 약국을 즐겨찾기하고 리뷰를 남겨 다른 사용자들과 약국에 대한 정보를 공유할 수 있습니다.

🚀 배포 링크

👪 프로젝트 팀 구성 및 역할

이름	역할	담당업무
강지우	팀원	마이페이지
송혜인	팀장	상세페이지
이지영	팀원	메인페이지
최유나	팀원	로그인/회원가입
홍연주	팀원	검색페이지

⏰ 프로젝트 수행 절차 및 방법

총 개발 기간 : 2024.08.29 ~ 2024.09.03

구분	기간	활동	비고
사전 기획	24.09.12	주제선정 및 피그마를 이용한 페이지 구성	주제 : 심야약국
프로젝트 시작	24.09.13	페이지별로 브랜치를 생성해 개발 시작	세팅 : 최유나님
필수 구현 사항 완료	24.09.04~24.09.19	각자 맡은 필수 구현사항 완료	추석 : 09.16~09.18
추가 구현 사항 완료	24.09.20 ~24.09.23	스타일 적용, 추가기능 구현, 트러블슈팅

🛠️ STACK

🧾 주요 기능 소개

요구사항	선택	이유
지도 API	카카오맵	설명이 자세하게 나와있고 레퍼런스가 많았음(네이버: 정리가 안됨, 어려움 / 통계청: 지도 업데이트 중단)
약국데이터	공공심야약국목록	연마다 제공되는 최신 심야약국데이터 - db.json(생활안전정보 오픈API DATA : CORS 에러로 사용 불가)
유튜브	searchList	특정 채널에 약국 관련 데이터를 가져오기 위해서
소셜로그인	수파베이스	간지를 포기하지 말라고 하셔서 (feat.지우님)
쓰로틀링	Lodash	쓰로틀링에 아주 굿..
css	테일윈드	확장기능으로 공통폰트+컬러+그라데이션 / 웹폰트(woff)를 다운받아 깜빡임없이 가져올 수 있도록 함 (프리로드b)

1️⃣ Main Page

LNB(사이드 네비게이션)
Main banner (+ 검색 창)
Main section1 : 주변 약국 리스트
Main section2 :지금 운영중인 약국 리스트
Footer

2️⃣ Search Page

검색을 바탕으로 지도에 약국을 핀으로 표시, 왼쪽엔 리스트로 표시
약국 리스트 클릭 → 해당 핀으로 지도 중심 이동, 약국 핀 클릭 → 지도 위 커스텀 오버레이
지도에서 커스텀 오버레이 클릭 시 Detail Page로 이동
최초 10개씩 보이고 더 보기 버튼 클릭 시 10개 더 불러오기 (도전)

3️⃣ Detail Page

api 자료 (약국 이름, 위치, 전화번호, 영업시간) 불러와서 디테일 페이지 생성
좋아요 기능 (가능하면 Optimistic Update)
리뷰 작성/수정/별점 (도전)
지도가 보이도록 하기 가능하면 약국 사진으로

4️⃣ Join

아이디, 비밀번호, 이름 값 등록
프로필 이미지

5️⃣ Login

아이디, 비밀번호 입력 후 데이터가 있으면 로그인 (머니풀 사용)
아이디, 비밀번호가 틀린 경우 alert로 안내
아이디, 비밀번호가 틀린 경우 “입력하신 정보를 확인해주세요.” alert로 안내

6️⃣ My Page

내가 좋아요 누른 약국 정보를 리스트로 확인 가능 (필수)
프로필 버튼 클릭 시 user name 변경 가능 (필수)
내가 쓴 약국 리뷰를 확인 가능 (도전)

소감

이름	회고
강지우	처음 로직을 짤 때 목 데이터를 사용했었는데 나중 가서 db.json에 들어있는 데이터로 바꾸는 게 어려웠다..미리 다 짜놓은 코드 수정하거나 아예 다 갈아엎을 때 뭔가 현타 지대로 테일 윈드도 개인과제 때 듬성듬성 써서 그런가 매번 공식 문서 찾아봤는데 아직 미숙하지만 그래도! 자주 쓰는 것들은 안 찾아봐도 쓸 수 있는 정도가 돼서 다행이라고 생각한다.
송혜인	평소 파이어베이스, 슈퍼베이스를 사용하다가 내가 직접 데이터 저장소를 만들어서 관리한다는게 신기하였다. tailwind가 이미 정해진 양식에 따라서 쓰는 점이 편하기도 했지만 세부적으로 바꾸려면 따로 입력이 필요하다는 점에서 아직까지 익숙하지 않아서 그런지 사용하기 어려웠던 것 같다.
이지영	tailwind css처음 사용해보는데 main을 맡게 되면서 css가 많이 들어가다보니까 자연스레 익숙해지게 되었다. 리액트에서 제공하는 슬라이더 라이브러리를 사용하면서 리액트는 각종 편리한 라이브러리가 많다는걸 알게되었고 사용해보면서 점차 익혀갔다.
최유나	조원분들이랑 대화도 많이 하고 바로바로 피드백이 오고가니 너무 좋았다. 추석때 나만 혼자 너무 놀아서 다른 분들이 고생을 많이 하셨는데 다음부터는 열심히 해야 할 것 같다. 솔직히 너무 한게 없어서 죄송하기도 한데 다음에 만나면 더욱 잘 해드려야 할 것 같다. 소셜로그인 만지작 거리다가 등록했는데 처음 써보기에 생각보다 로직 분리도 안되고 어려웠던 것 같아서 마음이 편치는 않다. 완벽하게 하나하나 해가야되는데 이런 주먹구구식으로 하다가는 큰일나지 않을까...이번 조별 과제에서는 라이브러리도 엄청 가져다 쓰려고 시도 했는데 꽤나 만족스러웠다. 테일윈드랑, 액시오스, 제이슨, 쥬스탄드까지 써 봤긴한데 너무너무너무 유치원생..이라 괜히 말했나 싶었다(아직 나도 다 이해하지도 못한걸 조원들에게 사용해보자 했었던게 너무 후회되었다.. )
홍연주	외부 API를 선택해 사용하려 해도 서버의 문제로 마음대로 사용할 수 없었는데 다음에 배울 내용을 활용하면 충분히 가능하다 하셔서 기대되기도 하고 너무 어려울 거 같아서 무섭기도하고 카카오맵 api 설명이 자세하게 나와있는데도 생각보다 활용하는데 많이 어려웠다