:bulb: PSM : 약을 부탁해
:tada: 프로젝트 소개
주말이나 공휴일에 운영하는 약국을 찾을 수 있는 온라인 서비스입니다. 응급실 대란으로 응급상황에 대처가 힘든 요즘, 심야 약국정보를 제공함으로써 도움이 되고자 하였으며 심야에 급하게 약국을 방문하기 전, 지도검색을 통해 문을 연 약국을 지도 검색을 통해 미리 알아볼 수 있습니다. 또한 자주가는 약국을 즐겨찾기하고 리뷰를 남겨 다른 사용자들과 약국에 대한 정보를 공유할 수 있습니다.
:rocket: 배포 링크
-
:family: 프로젝트 팀 구성 및 역할
| 이름 | 역할 | 담당업무 |
|---|---|---|
| 강지우 | 팀원 | 마이페이지 |
| 송혜인 | 팀장 | 상세페이지 |
| 이지영 | 팀원 | 메인페이지 |
| 최유나 | 팀원 | 로그인/회원가입 |
| 홍연주 | 팀원 | 검색페이지 |
:alarm_clock: 프로젝트 수행 절차 및 방법
총 개발 기간 : 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 |
스타일 적용, 추가기능 구현, 트러블슈팅 |
:hammer_and_wrench: STACK
:receipt: 주요 기능 소개
| 요구사항 | 선택 | 이유 |
|---|---|---|
| 지도 API | 카카오맵 | 설명이 자세하게 나와있고 레퍼런스가 많았음 (네이버: 정리가 안됨, 어려움 / 통계청: 지도 업데이트 중단) |
| 약국데이터 | 공공심야약국목록 | 연마다 제공되는 최신 심야약국데이터 - db.json (생활안전정보 오픈API DATA : CORS 에러로 사용 불가) |
| 유튜브 | searchList | 특정 채널에 약국 관련 데이터를 가져오기 위해서 |
| 소셜로그인 | 수파베이스 | 간지를 포기하지 말라고 하셔서 (feat.지우님) |
| 쓰로틀링 | Lodash | 쓰로틀링에 아주 굿.. |
| css | 테일윈드 | 확장기능으로 공통폰트+컬러+그라데이션 / 웹폰트(woff)를 다운받아 깜빡임없이 가져올 수 있도록 함 (프리로드b) |
:one: Main Page
- LNB(사이드 네비게이션)
- Main banner (+ 검색 창)
- Main section1 : 주변 약국 리스트
- Main section2 :지금 운영중인 약국 리스트
- Footer
:two: Search Page
- 검색을 바탕으로 지도에 약국을 핀으로 표시, 왼쪽엔 리스트로 표시
- 약국 리스트 클릭 → 해당 핀으로 지도 중심 이동, 약국 핀 클릭 → 지도 위 커스텀 오버레이
- 지도에서 커스텀 오버레이 클릭 시 Detail Page로 이동
- 최초 10개씩 보이고 더 보기 버튼 클릭 시 10개 더 불러오기 (도전)
:three: Detail Page
- api 자료 (약국 이름, 위치, 전화번호, 영업시간) 불러와서 디테일 페이지 생성
- 좋아요 기능 (가능하면 Optimistic Update)
- 리뷰 작성/수정/별점 (도전)
- 지도가 보이도록 하기 가능하면 약국 사진으로
:four: Join
- 아이디, 비밀번호, 이름 값 등록
- 프로필 이미지
:five: Login
- 아이디, 비밀번호 입력 후 데이터가 있으면 로그인 (머니풀 사용)
- 아이디, 비밀번호가 틀린 경우 alert로 안내
- 아이디, 비밀번호가 틀린 경우 “입력하신 정보를 확인해주세요.” alert로 안내
:six: My Page
- 내가 좋아요 누른 약국 정보를 리스트로 확인 가능 (필수)
- 프로필 버튼 클릭 시 user name 변경 가능 (필수)
- 내가 쓴 약국 리뷰를 확인 가능 (도전)
소감
| 이름 | 회고 |
|---|---|
| 강지우 | 처음 로직을 짤 때 목 데이터를 사용했었는데 나중 가서 db.json에 들어있는 데이터로 바꾸는 게 어려웠다.. |
| 송혜인 | 평소 파이어베이스, 슈퍼베이스를 사용하다가 내가 직접 데이터 저장소를 만들어서 관리한다는게 신기하였다. tailwind가 이미 정해진 양식에 따라서 쓰는 점이 편하기도 했지만 세부적으로 바꾸려면 따로 입력이 필요하다는 점에서 아직까지 익숙하지 않아서 그런지 사용하기 어려웠던 것 같다. |
| 이지영 | tailwind css처음 사용해보는데 main을 맡게 되면서 css가 많이 들어가다보니까 자연스레 익숙해지게 되었다. 리액트에서 제공하는 슬라이더 라이브러리를 사용하면서 리액트는 각종 편리한 라이브러리가 많다는걸 알게되었고 사용해보면서 점차 익혀갔다. |
| 최유나 | 조원분들이랑 대화도 많이 하고 바로바로 피드백이 오고가니 너무 좋았다. 추석때 나만 혼자 너무 놀아서 다른 분들이 고생을 많이 하셨는데 다음부터는 열심히 해야 할 것 같다. 솔직히 너무 한게 없어서 죄송하기도 한데 다음에 만나면 더욱 잘 해드려야 할 것 같다. 소셜로그인 만지작 거리다가 등록했는데 처음 써보기에 생각보다 로직 분리도 안되고 어려웠던 것 같아서 마음이 편치는 않다. 완벽하게 하나하나 해가야되는데 이런 주먹구구식으로 하다가는 큰일나지 않을까... 이번 조별 과제에서는 라이브러리도 엄청 가져다 쓰려고 시도 했는데 꽤나 만족스러웠다. 테일윈드랑, 액시오스, 제이슨, 쥬스탄드까지 써 봤긴한데 너무너무너무 유치원생..이라 괜히 말했나 싶었다(아직 나도 다 이해하지도 못한걸 조원들에게 사용해보자 했었던게 너무 후회되었다.. ) |
| 홍연주 | 외부 API를 선택해 사용하려 해도 서버의 문제로 마음대로 사용할 수 없었는데 다음에 배울 내용을 활용하면 충분히 가능하다 하셔서 기대되기도 하고 너무 어려울 거 같아서 무섭기도하고 카카오맵 api 설명이 자세하게 나와있는데도 생각보다 활용하는데 많이 어려웠다 |