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.

Sign up for GitHub

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

Feature/65 update map page #70

Merged
merged 15 commits into from
Nov 23, 2024
Merged

Feature/65 update map page #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
acf3d03
[feature] 마커 클릭시 커지는 이벤트
choihooo Nov 13, 2024
712d32b
[feature] 마커 밑에 가게명 노출
choihooo Nov 13, 2024
1c6257e
[feature] 아이콘 변경 및 가게명 폰트 변경
choihooo Nov 13, 2024
b01fdc2
[feature] 툴팁 api 임시 연결
choihooo Nov 13, 2024
696a23d
[feature] 아이콘 이미지 변경 및 프사 변경
choihooo Nov 14, 2024
d74a2d0
[feature] 가게 타입 추가
choihooo Nov 17, 2024
6218909
[feature] 바텀 드로워 3단계로 설정
choihooo Nov 17, 2024
1a3ab52
[feature] 바텀 시트 높이 변경 및 컴포넌트 분리
choihooo Nov 21, 2024
7881e7c
[feature] 현재 위치 버튼 추가
choihooo Nov 21, 2024
992d3cd
[feature] 바텀 시트 기종 별 설정
choihooo Nov 22, 2024
12585c1
[feature] 모핑 몰래보기 추가
choihooo Nov 23, 2024
f4e2e99
[feature] 빌드 오류 수정
choihooo Nov 23, 2024
652981b
Merge branch 'main' into feature/65-update-map-page
choihooo Nov 23, 2024
ca9c6ed
[feature] 빌드 오류 수정
choihooo Nov 23, 2024
1c03090
Merge branch 'feature/65-update-map-page' of https://github.com/Team-…
choihooo Nov 23, 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
194 changes: 194 additions & 0 deletions dh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdown Interaction</title>
</head>
<body>
<div
style="
width: 256px;

background: #1d1d1d;
border-radius: 4px;
padding: 12px;
"
>
<div style="margin-left: 4px; margin-right: 4px; margin-bottom: 12px">
<div
style="
color: #8e8e8e;
font-size: 12px;
display: flex;
justify-content: space-between;
"
>
<div>베이커리</div>
<div style="display: flex">더보기<img src="/svg/seeMore.svg" /></div>
</div>
<div
style="
color: white;
font-size: 16px;
width: 127px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
맛있는 빵집
</div>
</div>
<!-- 드롭다운 열리기 전 -->
<div
style="
padding: 8px;
background-color: #2d2d2d;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 12px;
"
>
<div
style="
background-color: #f73a2c;
width: 41px;
height: 24px;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
"
>
<img src="/svg/people.svg" />
3
</div>
<div
class="names-short"
style="
width: 127px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: white;
opacity: 1; /* 시작할 때 보이기 */
"
>
이어령이어령, 이어령이어령, 김규리, 김규리, 김규리
</div>
<img
src="/svg/dropdown.svg"
style="transform: rotate(180deg); cursor: pointer"
onclick="toggleDropdown()"
/>
</div>
<!-- 드롭다운 열린 후 -->
<div
id="dropdownExtended"
style="padding: 8px; background-color: #2d2d2d; display: none"
>
<div
style="
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
font-size: 14px;
width: 216px;
margin-left: 8px;
margin-bottom: 8px;
margin-right: 8px;
"
>
<div
style="
background-color: #1d1d1d;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-radius: 2px;
"
>
이어령이어령
</div>
<div
style="
background-color: #1d1d1d;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-radius: 2px;
"
>
이어령이어령
</div>
<div
style="
background-color: #1d1d1d;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-radius: 2px;
"
>
김규리
</div>
<div
style="
background-color: #1d1d1d;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-radius: 2px;
"
>
김규리
</div>
<div
style="
background-color: #1d1d1d;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-radius: 2px;
"
>
김규리
</div>
</div>
</div>
</div>

<script>
function toggleDropdown() {
var dropdown = document.getElementById("dropdownExtended");
var dropdownIcon = document.querySelector(
'img[src="/svg/dropdown.svg"]'
);
var namesShort = document.querySelector(".names-short");
if (dropdown.style.display === "none") {
dropdown.style.display = "block";
dropdownIcon.style.transform = "rotate(0deg)";
namesShort.style.opacity = 0; // 이름 목록 투명하게
} else {
dropdown.style.display = "none";
dropdownIcon.style.transform = "rotate(180deg)";
namesShort.style.opacity = 1; // 이름 목록 보이게
}
}
</script>
</body>
</html>
7 changes: 7 additions & 0 deletions fe/public/pin/.svg
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V24C0 26.2091 1.79086 28 4 28H10L14 32L18 28H24C26.2091 28 28 26.2091 28 24V4C28 1.79086 26.2091 0 24 0H4Z" fill="#3A91EA"/>
<rect x="3" y="3" width="22" height="22" rx="2" fill="#3A91EA" stroke="black" stroke-width="2"/>
<path d="M14 6.08203L15.4678 7.50201L17.49 7.21599L17.8428 9.22755L19.6469 10.1847L18.75 12.0195L19.6469 13.8543L17.8428 14.8115L17.49 16.8231L15.4678 16.5371L14 17.957L12.5322 16.5371L10.51 16.8231L10.1572 14.8115L8.3531 13.8543L9.25 12.0195L8.3531 10.1847L10.1572 9.22755L10.51 7.21599L12.5322 7.50201L14 6.08203Z" fill="black" stroke="black" stroke-width="1.58333" stroke-linejoin="bevel"/>
<path d="M16.375 16.373V21.9147L14 19.9355L11.625 21.9147V16.373" stroke="black" stroke-width="1.58333" stroke-linejoin="bevel"/>
<path d="M12.0215 14.1361V10.1777L14.0007 12.2888L15.9798 10.1777V14.1361" stroke="#3A91EA" stroke-width="1.2" stroke-linejoin="bevel"/>
</svg>
25 changes: 13 additions & 12 deletions fe/public/pin/level1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 13 additions & 12 deletions fe/public/pin/level2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 13 additions & 12 deletions fe/public/pin/level3.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 13 additions & 12 deletions fe/public/pin/level4.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading