Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE][Feat] #370 : 마커 아이콘 수정 #371

Merged
merged 38 commits into from
Dec 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
e52d5da
Merge pull request #351 from boostcampwm-2024/development
happyhyep Nov 29, 2024
65ae6be
Update README.md
happyhyep Nov 30, 2024
494e7b6
Update README.md
happyhyep Nov 30, 2024
72b54ba
Update README.md
happyhyep Nov 30, 2024
7475b99
Update README.md
happyhyep Nov 30, 2024
52ce4ee
Update README.md
happyhyep Nov 30, 2024
6de0f42
Update README.md
happyhyep Nov 30, 2024
a852713
Update README.md
happyhyep Nov 30, 2024
8cd8b62
Update README.md
happyhyep Nov 30, 2024
a17aaa9
Update README.md
happyhyep Nov 30, 2024
addf424
Update README.md
happyhyep Nov 30, 2024
d444fea
Update README.md
happyhyep Nov 30, 2024
ccc80c9
Merge pull request #352 from boostcampwm-2024/development
effozen Dec 1, 2024
077930e
Update README.md
happyhyep Dec 1, 2024
c19b1e3
Update README.md
happyhyep Dec 1, 2024
ee912fc
Update README.md
happyhyep Dec 1, 2024
15dad6f
Update README.md
happyhyep Dec 1, 2024
f92e99d
Update README.md
happyhyep Dec 1, 2024
2e3f7f7
Update README.md
happyhyep Dec 1, 2024
4530ff5
Update README.md
happyhyep Dec 1, 2024
a9b6b3f
Update README.md
happyhyep Dec 1, 2024
605a348
Update README.md
happyhyep Dec 1, 2024
4c11307
Update README.md
happyhyep Dec 1, 2024
623c710
Merge pull request #353 from boostcampwm-2024/happyhyep-patch-1
happyhyep Dec 1, 2024
14f5307
Update README.md
happyhyep Dec 1, 2024
329bbca
Update README.md
happyhyep Dec 1, 2024
5d03ffd
Update README.md
happyhyep Dec 1, 2024
7076874
Update README.md
happyhyep Dec 1, 2024
a3d19c3
Update README.md
happyhyep Dec 1, 2024
2636801
Update README.md
happyhyep Dec 1, 2024
01d21c4
Merge pull request #354 from boostcampwm-2024/happyhyep-patch-1
happyhyep Dec 1, 2024
0f43a38
Merge pull request #365 from boostcampwm-2024/frontend
happyhyep Dec 2, 2024
15e02aa
[FE][Feat] #359 : 선 색상 추가 및 GuestMarker 수정
effozen Dec 2, 2024
9aab46d
[FE][Feat] #359 : 마커색상 수정 로직 추가
effozen Dec 2, 2024
68e0fcc
Merge remote-tracking branch 'origin/development' into development
effozen Dec 2, 2024
de0f5ef
[FE] : Development Branch 머지
effozen Dec 2, 2024
c9ac8ad
[FE][Feat] #359 : 발자국 색상 변경 로직 추가
effozen Dec 2, 2024
9b604eb
[FE][Feat] #370 : 마커 아이콘 수정
effozen Dec 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 109 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion frontend/src/assets/endmarker.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/assets/footprint.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/assets/mylocation.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/assets/startmarker.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 9 additions & 7 deletions frontend/src/component/IconGuide/GuestMarker.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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' }), []);
Expand All @@ -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>
Expand Down
Loading
Loading