Merge pull request #367 from boostcampwm-2024/feature/fe/#359-add-mar…

…ker-color [FE][Feat] #359 : 마커, 발자국 경로 색상 변경 로직 추가
boostcampwm-2024 · Dec 3, 2024 · 0e3eeb8 · 0e3eeb8
2 parents d22f63e + c9ac8ad
commit 0e3eeb8
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -1,60 +1,136 @@
 <div align="center">
-    <img width="600" alt="image" src="https://github.com/user-attachments/assets/f7973fe3-dd8a-4643-9536-53e63db1f6fe">
-   <h3 align="center">🧭 선따라 길따라 🧭</h2>
-    <h4 align="center">중장년층을 위한 접근성을 바탕으로 한 위치 기반 서비스</h2>
-</div>
+<h1>🕶️ 팀 소개 🕶️</h1>
+
+<img width="20%" alt="image" src="https://github.com/user-attachments/assets/820e58bf-81a7-41c4-a50a-62c474739ad0" />
 
 
-<div align="center">
+### 안녕하세요, 팀 "따라따라" 입니다!
+
 <br />
-
-## 👩‍💻 팀 소개
 
-<img width="200" src="https://github.com/user-attachments/assets/ab367ecb-be89-4076-abdf-bf00bdc29a4f" />
-<div>(따라핑)</div>
+저희는 6주간 ⚒ **"기술적 도전"** ⚒을 목표로 삼았습니다.
 
-### 안녕하세요, 팀 "따라따라" 입니다!
+<br />
+
+저희는 단순히 api나 라이브러리를 **"가져다 써서" 구현 하는 것이 아닌**,
+
+**모든 것을 "직접 구현"** 해보고, 그 과정에서 깊이 있는 기술적인 도전을 해 나갑니다.
+
+
+<br /><br /><br /><br />
+
+<div align="center" style="display: flex">
+  <a href="https://ddara.kro.kr/"><img width="60%" alt="image" src="https://github.com/user-attachments/assets/0eaf0bac-01bc-44ae-ab02-56c2c9951ce1" /></a>
+</div>
 
 <br />
 
-## 🗝 링크 안내
-
-<p>  
-  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
-  <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
-  <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
-  <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
-<!--   <br />
-  <a href="https://www.notion.so/127b1b2b6491805b9055d480ab56e432?v=ee8c766f016148d7bfd6c6f49d782b10&pvs=4">회의록</a>   |  
-  <a href="https://www.notion.so/129b1b2b649180ef8ad6f356251f2dec?pvs=4">그라운드 룰</a>   |   
-  <a href="https://www.notion.so/812667c55af84dba8d18f4902b56a85e?pvs=4">기능 명세</a> -->
-</p>
+<img width="20%" alt="image" src="https://github.com/user-attachments/assets/32d30ab1-7d87-4e86-bcca-9f30d1150f3c" />
+
+(모바일에서 위 QR 코드로 접속하실 수 있습니다.)
+
 
+<br /><br />
+<div align="center" style="display: flex">
+<a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897"><img width="18%" alt="image" src="https://github.com/user-attachments/assets/eff4141f-bd7f-4791-8789-ae1c8c2c9602" /></a>
+<a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929"><img width="18%" alt="image" src="https://github.com/user-attachments/assets/74606b44-04a2-4b06-9f52-b12e453bc882" /></a>
+<a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4"><img width="18%" alt="image" src="https://github.com/user-attachments/assets/a8108a13-e48b-4c9e-b840-a446b3f54f6c" /></a>
 </div>
 
+<br />
+
+<div align="center" style="display: flex; gap: 10px">
+<a href="https://github.com/orgs/boostcampwm-2024/projects/196"><img width="18%" alt="image" src="https://github.com/user-attachments/assets/5507e684-7628-46a5-b317-761aa9483bec" /></a>
+<a href="https://ddara.kro.kr/api-docs"><img width="18%" alt="image" src="https://github.com/user-attachments/assets/457b1e76-71a8-4a2d-8cd7-f60378b0bbe2" /></a>
+<a href=""><img width="18%" alt="image" src="https://github.com/user-attachments/assets/6500d674-d951-4cc0-ae71-5502c1dedea9" /></a>
+</div>
+
+
+
+
+</div>
+
+<br /><br /><br /><br />
+
+![image](https://github.com/user-attachments/assets/7251fa39-1c7c-4005-9187-a2b560c2405f)
+
+
+
+
+
+
+<br /><br />
+
+## 💡 핵심 기능
+
+### 1. 지도 위 캔버스에 출발지/도착지 마커, 경로 그리기
+
+- 캔버스 위에 그려둔 그림은 지도(캔버스)를 이동하거나 확대/축소하더라도 그린 위치(지도 기준)에 그대로 존재해야 함
+
 <div align="center">
-<br /><br /><br />
+<img width="500" alt="image" src="https://github.com/user-attachments/assets/a1cc5824-f30f-4e11-9cfc-b9279fc13e0d" />
+<img width="500" alt="image" src="https://github.com/user-attachments/assets/63590a47-7b52-4413-8732-313a8dac58ff" />
+</div>
+
+<br /><br />
+
+### 2. 실시간 위치 파악
+
+- 호스트(손자)는 게스트들(할머니, 할아버지)의 위치 실시간으로 확인 가능해야 함
+- 게스트(할머니)는 본인의 위치와 호스트(손자)가 설정해둔 출발지, 도착지, 경로만을 확인할 수 있어야 함
+
+
+<div align="center">
+<img width="800" alt="image" src="https://github.com/user-attachments/assets/19a1efb6-1317-4d5d-aeb6-130f9e377f3e" />
+</div>
+
+<br /><br />
+
+## 📃 우리의 기술적 도전
+
+###  by. J060_김주원
+
+- [[FE] 🎨 지도의 기능들 canvas에서 구현하기](https://velog.io/@jackson5272/%EC%A7%80%EB%8F%84%EC%9D%98-%EA%B8%B0%EB%8A%A5%EB%93%A4-canvas%EC%97%90%EC%84%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)
+
+###  by. J174_이동율
+
+- [[FE] 💾 초보 개발자의 데이터 관리 시행착오](https://misty-thread-f6e.notion.site/FE-14f87662ce1380b39c90d38e24a2dad8?pvs=4)
 
+###  by. J210_임재도
+
+- [[FE] 🧬 캔버스와 네이버 지도 API를 연동하기 위한 과정](https://fantasmith.com/dev-lab/challenge/boostcamp/ddara/canvas-and-map-linking)
+
+
+###  by. J234_정혜인
+
+- [[FE] 🗺️ 지도와 함께 움직이는 캔버스 설계/구현 시행착오 스토리](https://velog.io/@happyhyep/%EC%A7%80%EB%8F%84%EC%99%80-%ED%95%A8%EA%BB%98-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EC%BA%94%EB%B2%84%EC%8A%A4-%EA%B5%AC%ED%98%84-%EC%8A%A4%ED%86%A0%EB%A6%AC)
+
+- [[BE] 🔌 실시간 소켓 통신의 도전기: 다양한 조건이 존재하는 통신 feat. 클라이언트와 서버 각각에서의 고민과 설계 과정](https://velog.io/@happyhyep/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%86%8C%EC%BC%93-%ED%86%B5%EC%8B%A0%EC%9D%98-%EB%8F%84%EC%A0%84%EA%B8%B0-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%A1%B0%EA%B1%B4%EC%9D%B4-%EC%A1%B4%EC%9E%AC%ED%95%98%EB%8A%94-%ED%86%B5%EC%8B%A0)
+
+
+
+<br /><br />
+
+## ⛏ 서비스 아키텍처
+
+<img width="1300" alt="image" src="https://github.com/user-attachments/assets/ab20d1eb-dab9-4373-b32b-7e455debb5c5">
+
+
+</div>
+
+<br /><br />
 
 
 ## 🌱 팀원 소개
 
 |J060_김주원|J174_이동율|J210_임재도|J234_정혜인|
 |:--:|:--:|:--:|:--:|
-|<a href="https://github.com/juwon5272"><img src="https://github.com/user-attachments/assets/f774ff48-8831-490f-b0fe-b18b024f7916" width="150px;" alt=""/></a>|<a href="https://github.com/leedongyull"><img src="https://github.com/user-attachments/assets/4d682b1f-0f91-4547-8a7d-1f6b00bee674" width="150px;" alt=""/></a>|<a href="https://github.com/effozen"><img src="https://github.com/user-attachments/assets/92bddae1-19ce-4b06-811e-52df15ac726c" width="150px;" alt=""/></a>|<a href="https://github.com/happyhyep"><img src="https://github.com/user-attachments/assets/40ac933c-3e19-4884-a5e9-da2f2298dd72" width="150px;" alt=""/></a>|
+|<a href="https://github.com/juwon5272"><img src="https://github.com/user-attachments/assets/f774ff48-8831-490f-b0fe-b18b024f7916" width="150px;" alt=""/></a>|<a href="https://github.com/leedongyull"><img src="https://github.com/user-attachments/assets/178c1cd6-b296-498e-adb1-60534eec2713" width="150px;" alt=""/></a>|<a href="https://github.com/effozen"><img src="https://github.com/user-attachments/assets/92bddae1-19ce-4b06-811e-52df15ac726c" width="150px;" alt=""/></a>|<a href="https://github.com/happyhyep"><img src="https://github.com/user-attachments/assets/40ac933c-3e19-4884-a5e9-da2f2298dd72" width="150px;" alt=""/></a>|
 |FE|FE|FE|Full Stack (FE + BE)|
 |<a href="https://github.com/juwon5272">@juwon5272</a>|<a href="https://github.com/leedongyull">@leedongyull</a>|<a href="https://github.com/effozen">@effozen</a>|<a href="https://github.com/happyhyep">@happyhyep</a>|
 
-<br />
-
-## ⛏ 기술 스택
 
-추후 추가 예정입니다.
+<br /><br />
 
-<!--
-## 👨‍👨‍👧‍👦 협업 전략
 
-## 👂 그라운드 룰
 
--->
-</div>
diff --git a/frontend/src/assets/endmarker.svg b/frontend/src/assets/endmarker.svg
diff --git a/frontend/src/assets/mylocation.svg b/frontend/src/assets/mylocation.svg
diff --git a/frontend/src/assets/startmarker.svg b/frontend/src/assets/startmarker.svg
diff --git a/frontend/src/component/IconGuide/GuestMarker.tsx b/frontend/src/component/IconGuide/GuestMarker.tsx
@@ -1,6 +1,8 @@
-import { MdAssistantNavigation, MdFlag, MdLocationOn } from 'react-icons/md';
+import { MdFlag, MdLocationOn } from 'react-icons/md';
 import { IconContext } from 'react-icons';
 import { ReactNode, useMemo } from 'react';
+import { START_MARKER_COLOR, END_MARKER_COLOR, PATH_COLOR } from '@/lib/constants/canvasConstants';
+import { IoFootsteps } from 'react-icons/io5';
 
 interface IMarkerData {
   name: string;
@@ -11,14 +13,14 @@ interface IGuestMarkerProps {
   markerColor: string;
 }
 
-export const GusetMarker = (props: IGuestMarkerProps) => {
+export const GuestMarker = (props: IGuestMarkerProps) => {
   const markerData: IMarkerData[] = [
     {
-      name: '내 위치',
-      icon: <MdAssistantNavigation color={props.markerColor && '#333C4A'} />,
+      name: '경로',
+      icon: <IoFootsteps color={props.markerColor && PATH_COLOR} />,
     },
-    { name: '도착지', icon: <MdFlag color={props.markerColor && '#333C4A'} /> },
-    { name: '출발지', icon: <MdLocationOn color={props.markerColor && '#333C4A'} /> },
+    { name: '도착지', icon: <MdFlag color={props.markerColor && END_MARKER_COLOR} /> },
+    { name: '출발지', icon: <MdLocationOn color={props.markerColor && START_MARKER_COLOR} /> },
   ];
 
   const iconContextValue = useMemo(() => ({ color: 'purple', className: 'size-5' }), []);
@@ -28,7 +30,7 @@ export const GusetMarker = (props: IGuestMarkerProps) => {
       <ul className="flex flex-col gap-1">
         <IconContext.Provider value={iconContextValue}>
           {markerData.map(data => (
-            <li className="flex items-center justify-between gap-2">
+            <li className="flex items-center justify-between gap-2" key={data.name}>
               {data.icon}
               <span>{data.name}</span>
             </li>