From be3ead49f3f51106fc1c3aba51443a4c6c6e0eb8 Mon Sep 17 00:00:00 2001 From: DaeWon9 Date: Sun, 25 Aug 2024 11:51:02 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20PinContainer=EC=9D=98=20Opacity=EB=A5=BC?= =?UTF-8?q?=20=EC=A1=B0=EC=A0=95=ED=95=98=EB=8A=94=20handleOnTouchEnd=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../partsCollection/PinContainer/PinContainer.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx b/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx index 90e909af..84ea724f 100644 --- a/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx +++ b/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx @@ -34,12 +34,18 @@ export const PinContainer = ({ setPerspectiveOpacity(0); }; + const handleOnTouchEnd = () => { + if (perspectiveOpacity === 1) onMouseLeave(); + else onMouseEnter(); + }; + return (
From c7641612ad07003898ec7ceb0c30e0d8a70591f1 Mon Sep 17 00:00:00 2001 From: DaeWon9 Date: Sun, 25 Aug 2024 12:39:00 +0900 Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=EB=AF=B8=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/service/src/apis/partsEvent/apiPatchMyParts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/service/src/apis/partsEvent/apiPatchMyParts.ts b/packages/service/src/apis/partsEvent/apiPatchMyParts.ts index f2a8cd32..ab818071 100644 --- a/packages/service/src/apis/partsEvent/apiPatchMyParts.ts +++ b/packages/service/src/apis/partsEvent/apiPatchMyParts.ts @@ -9,5 +9,5 @@ export const apiPatchMyParts = (token: string, partsId: number) => { Authorization: `Bearer ${token}`, }, }, - ).then(() => console.log(partsId)); + ); }; From b041ab68668f5d86d69feb9441c0ed9f84ccd89e Mon Sep 17 00:00:00 2001 From: DaeWon9 Date: Sun, 25 Aug 2024 12:39:57 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EB=B7=B0=EC=97=90=EC=84=9C=20PinContainer=EB=A5=BC=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20=ED=84=B0=EC=B9=98=ED=95=98=EB=A9=B4=20Opactity?= =?UTF-8?q?=EC=83=81=ED=83=9C=EA=B0=80=20=EB=B0=94=EB=80=8C=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PinContainer/Pin/Pin.css.ts | 10 +++++- .../partsCollection/PinContainer/Pin/Pin.tsx | 33 +++++++++++++------ .../PinContainer/PinContainer.tsx | 15 +++++++-- 3 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.css.ts b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.css.ts index 35990cd4..43364927 100644 --- a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.css.ts +++ b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.css.ts @@ -78,12 +78,20 @@ export const pinItemBottom = css` z-index: 22; `; -export const pinLine = css` +export const pinLineContainer = css` position: absolute; + width: 100px; + height: 100%; +`; + +export const pinLine = css` + position: relative; background: linear-gradient(to bottom, transparent, ${theme.color.white}); transform: translateY(14px); width: 1px; height: 100%; z-index: 9; + left: 50px; + filter: blur(0.5px); `; diff --git a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx index 271b6238..c7b8cb88 100644 --- a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx +++ b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx @@ -8,22 +8,30 @@ import { IParts } from "@watermelon-clap/core/src/types"; interface PinMarkerProps { parts?: IParts; opacity: number; + handleOnTouchEnd: (event: React.TouchEvent) => void; customCss?: SerializedStyles; imgCss?: SerializedStyles; } -export const Pin = ({ parts, opacity, customCss, imgCss }: PinMarkerProps) => { +export const Pin = ({ + parts, + opacity, + handleOnTouchEnd, + customCss, + imgCss, +}: PinMarkerProps) => { const { openModal } = useModal(); const handleDescriptionButtonClick = () => { - openModal({ - type: "description", - props: { - src: parts?.thumbnailImgSrc, - name: parts?.name, - description: parts?.description, - }, - }); + opacity === 1 && + openModal({ + type: "description", + props: { + src: parts?.thumbnailImgSrc, + name: parts?.name, + description: parts?.description, + }, + }); }; return ( @@ -48,7 +56,12 @@ export const Pin = ({ parts, opacity, customCss, imgCss }: PinMarkerProps) => {
{/* Line */} - + handleOnTouchEnd(event)} + > + + {/* Circle */} diff --git a/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx b/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx index 84ea724f..07ab4a3e 100644 --- a/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx +++ b/packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx @@ -34,7 +34,10 @@ export const PinContainer = ({ setPerspectiveOpacity(0); }; - const handleOnTouchEnd = () => { + const handleOnTouchEnd = (event: React.TouchEvent) => { + event.stopPropagation(); + event.preventDefault(); + if (perspectiveOpacity === 1) onMouseLeave(); else onMouseEnter(); }; @@ -45,9 +48,11 @@ export const PinContainer = ({ css={styles.pivotContainer} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} - onTouchEnd={handleOnTouchEnd} > -
+
handleOnTouchEnd(event)} + >
{children}
@@ -58,6 +63,7 @@ export const PinContainer = ({ @@ -67,6 +73,7 @@ export const PinContainer = ({ @@ -76,6 +83,7 @@ export const PinContainer = ({ @@ -85,6 +93,7 @@ export const PinContainer = ({ From e6995cf36c3653f2e20c00697c5974db8727dd72 Mon Sep 17 00:00:00 2001 From: DaeWon9 Date: Sun, 25 Aug 2024 12:47:38 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20WaveCircle=20=EC=A3=BC=EB=B3=80?= =?UTF-8?q?=EC=9D=84=20=ED=84=B0=EC=B9=98=ED=95=B4=EB=8F=84=20handleOnTouc?= =?UTF-8?q?hEnd=EA=B0=80=20=EC=9E=91=EB=8F=99=ED=95=98=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/partsCollection/PinContainer/Pin/Pin.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx index c7b8cb88..6c8c4ba1 100644 --- a/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx +++ b/packages/service/src/components/partsCollection/PinContainer/Pin/Pin.tsx @@ -63,7 +63,9 @@ export const Pin = ({ {/* Circle */} - + handleOnTouchEnd(event)}> + + ); };