From f6730cd43897466b992b7ade71be2f3e62ad06cf Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 00:45:15 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20:=20#488=20-=20share=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icon/Icon.tsx | 1 + src/types/IconName.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 852f53e1..e80f3476 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -40,6 +40,7 @@ const ICON_NAME_MAP = { COPY: 'content_copy', ARROW_RIGHT: 'subdirectory_arrow_right', CANCEL: 'cancel', + SHARE: 'share', }; interface IconProps { diff --git a/src/types/IconName.ts b/src/types/IconName.ts index 226b7609..0203b284 100644 --- a/src/types/IconName.ts +++ b/src/types/IconName.ts @@ -36,4 +36,5 @@ export type IconName = | 'COPY' | 'HELP' | 'ARROW_RIGHT' - | 'CANCEL'; + | 'CANCEL' + | 'SHARE'; From f28debaa47f5536415597ab20ac85d0e49187e56 Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 00:47:50 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20?= =?UTF-8?q?=EC=B9=B4=EC=B9=B4=EC=98=A4=EB=B2=84=ED=8A=BC=20=20null=20check?= =?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/KakaoShareButton/KakaoShareButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/KakaoShareButton/KakaoShareButton.tsx b/src/components/KakaoShareButton/KakaoShareButton.tsx index 964d9db1..90004524 100644 --- a/src/components/KakaoShareButton/KakaoShareButton.tsx +++ b/src/components/KakaoShareButton/KakaoShareButton.tsx @@ -12,10 +12,10 @@ export default function KakaoShareButton({ linkURL }: KakaoShareButtonProps) { const kakao = (window as any).Kakao; useEffect(() => { - kakao.cleanup(); - kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY); + kakao?.cleanup(); + kakao?.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY); return () => { - kakao.cleanup(); + kakao?.cleanup(); }; }, [kakao]); From 8da743b94f50e513393124b41eb2b5b8da2a7ee1 Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 01:17:25 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=E2=9C=A8=20:=20#488=20-=20TooltipButton=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TooltipButton/TooltipButton.tsx | 121 ++++++++++++++++++ src/components/TooltipButton/index.scss | 66 ++++++++++ src/components/TooltipButton/index.ts | 1 + 3 files changed, 188 insertions(+) create mode 100644 src/components/TooltipButton/TooltipButton.tsx create mode 100644 src/components/TooltipButton/index.scss create mode 100644 src/components/TooltipButton/index.ts diff --git a/src/components/TooltipButton/TooltipButton.tsx b/src/components/TooltipButton/TooltipButton.tsx new file mode 100644 index 00000000..42108052 --- /dev/null +++ b/src/components/TooltipButton/TooltipButton.tsx @@ -0,0 +1,121 @@ +'use client'; + +import { useModalClose } from '@/hooks'; +import classNames from 'classnames'; +import { + ReactElement, + createContext, + useContext, + useRef, + useState, +} from 'react'; +import './index.scss'; + +const contextDefaultValue = { + isOpen: false, + handleSetIsOpen: () => {}, + handleCloseTooltip: () => {}, + optionsPosition: 'top' as Position, +}; + +type Position = 'top' | 'bottom'; + +const TooltipButtonContext = createContext<{ + isOpen: boolean; + handleSetIsOpen: () => void; + handleCloseTooltip: () => void; + optionsPosition: Position; +}>(contextDefaultValue); + +interface MainProps { + className?: string; + children: ReactElement[]; +} + +const Main = ({ children, className }: MainProps) => { + const [isOpen, setIsOpen] = useState(false); + + const optionsPosition = children[0].type === Options ? 'top' : 'bottom'; + const handleCloseTooltip = () => { + setIsOpen(false); + }; + const handleSetIsOpen = () => { + setIsOpen(!isOpen); + }; + + return ( +
+ + {children} + +
+ ); +}; + +interface TriggerProps { + children: ReactElement; + className?: string; +} + +const Trigger = ({ children, className }: TriggerProps) => { + const { handleSetIsOpen, handleCloseTooltip } = + useContext(TooltipButtonContext); + const triggerRef = useRef(null); + useModalClose(triggerRef, handleCloseTooltip); + return ( + + ); +}; + +interface OptionsProps { + className?: string; + children: ReactElement[] | ReactElement; +} + +const Options = ({ className, children }: OptionsProps) => { + const { isOpen, handleCloseTooltip, optionsPosition } = + useContext(TooltipButtonContext); + return ( +
    + {Array.isArray(children) ? ( + children.map((component, index) => ( +
  • + {component} +
    • + )) + ) : ( +
  • + {children} +
    • + )} +
+ ); +}; + +export { Main, Options, Trigger }; diff --git a/src/components/TooltipButton/index.scss b/src/components/TooltipButton/index.scss new file mode 100644 index 00000000..302bd0c9 --- /dev/null +++ b/src/components/TooltipButton/index.scss @@ -0,0 +1,66 @@ +.tooltip-button { + &__main { + overflow: visible; + position: relative; + } + + // &__trigger { + // } + + &__list { + display: flex; + flex-direction: column; + background-color: transparent; + gap: 0.75rem; + position: absolute; + transition: all 0.3s; + text-wrap: nowrap; + + &__item { + background-color: transparent; + transition: all 0.2s; + } + &.position-top { + bottom: 140%; + } + + &.position-top &__item { + &.close { + transform: translateY(100%); + opacity: 0; + visibility: hidden; + } + &.open { + transform: translateY(0); + opacity: 1; + } + } + + &.position-bottom { + top: 125%; + } + + &.position-bottom &__item { + &.close { + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + } + &.open { + transform: translateY(0); + opacity: 1; + } + } + + $n: 5; + + @for $i from 1 through $n { + &__item:nth-child(#{$i}) { + transition-delay: calc(0.1s * $i); + } + } + } + &__list.close { + visibility: hidden; + } +} diff --git a/src/components/TooltipButton/index.ts b/src/components/TooltipButton/index.ts new file mode 100644 index 00000000..f2721d3f --- /dev/null +++ b/src/components/TooltipButton/index.ts @@ -0,0 +1 @@ +export * as TooltipButton from '@components/TooltipButton/TooltipButton'; From 946b8a8f8a1a81f25198415f84ca319c37ea449b Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 01:29:10 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20plan=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20TooltipButton=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/plans/[planId]/index.scss | 4 ++-- src/app/plans/[planId]/page.tsx | 24 ++++++++++++++++++++++-- src/components/TooltipButton/index.scss | 2 +- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/app/plans/[planId]/index.scss b/src/app/plans/[planId]/index.scss index f139abb1..86685019 100644 --- a/src/app/plans/[planId]/index.scss +++ b/src/app/plans/[planId]/index.scss @@ -32,8 +32,8 @@ &--share { margin: 1rem 0; display: flex; - flex-direction: column; - gap: 0.5rem; + + justify-content: space-between; &--buttons { display: flex; gap: 1rem; diff --git a/src/app/plans/[planId]/page.tsx b/src/app/plans/[planId]/page.tsx index 6351f148..a2e4e1bd 100644 --- a/src/app/plans/[planId]/page.tsx +++ b/src/app/plans/[planId]/page.tsx @@ -7,6 +7,7 @@ import { Modal, ModalBasic, } from '@/components'; +import { TooltipButton } from '@/components/TooltipButton'; import classNames from 'classnames'; import Link from 'next/link'; import usePlanPage from './hooks/usePlanPage'; @@ -42,7 +43,26 @@ export default function PlanIdPage({ params }: { params: { planId: string } }) { {isMyPlan && (

공유하기

-
+ + + + + + + + + + {/*TODO 기존 공유버튼 삭제 예정 */} + {/*
-
+
*/}
)} diff --git a/src/components/TooltipButton/index.scss b/src/components/TooltipButton/index.scss index 302bd0c9..20c2787e 100644 --- a/src/components/TooltipButton/index.scss +++ b/src/components/TooltipButton/index.scss @@ -51,7 +51,7 @@ opacity: 1; } } - + //순차적으로 나타나고 사라지는 애니메이션을 위한 delay $n: 5; @for $i from 1 through $n { From 041a99d8364f1aa7bb770a77167a648ec26dd36b Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 01:59:57 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20index?= =?UTF-8?q?=20export=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/plans/[planId]/page.tsx | 2 +- src/components/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/plans/[planId]/page.tsx b/src/app/plans/[planId]/page.tsx index a2e4e1bd..ca5975df 100644 --- a/src/app/plans/[planId]/page.tsx +++ b/src/app/plans/[planId]/page.tsx @@ -6,8 +6,8 @@ import { KakaoShareButton, Modal, ModalBasic, + TooltipButton, } from '@/components'; -import { TooltipButton } from '@/components/TooltipButton'; import classNames from 'classnames'; import Link from 'next/link'; import usePlanPage from './hooks/usePlanPage'; diff --git a/src/components/index.ts b/src/components/index.ts index 1c60852e..8882c2f2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -35,3 +35,4 @@ export { default as ToTopFloatingButton } from '@/components/ToTopFloatingButton export { default as WritableRemindItem } from '@components/RemindItem/WritableRemindItem/WritableRemindItem'; export { default as ReadOnlyPlan } from '@components/ReadOnlyPlan/ReadOnlyPlan'; export { default as WrongApproach } from '@components/WrongApproach/WrongApproach'; +export { TooltipButton } from '@components/TooltipButton/index'; From d8d5fd1abcf3622afe2e974f1be49bd6139663a1 Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 02:21:10 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20?= =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TooltipButton/TooltipButton.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/TooltipButton/TooltipButton.tsx b/src/components/TooltipButton/TooltipButton.tsx index 42108052..5888a87c 100644 --- a/src/components/TooltipButton/TooltipButton.tsx +++ b/src/components/TooltipButton/TooltipButton.tsx @@ -11,6 +11,7 @@ import { } from 'react'; import './index.scss'; +// const contextDefaultValue = { isOpen: false, handleSetIsOpen: () => {}, @@ -84,8 +85,7 @@ interface OptionsProps { } const Options = ({ className, children }: OptionsProps) => { - const { isOpen, handleCloseTooltip, optionsPosition } = - useContext(TooltipButtonContext); + const { isOpen, optionsPosition } = useContext(TooltipButtonContext); return (
    { 'tooltip-button__list__item', isOpen ? 'open' : 'close', )} - key={index} - onClick={handleCloseTooltip}> + key={index}> {component} )) ) : ( -
  • - {children} -
    • +
  • {children}
    • )}
); From 2e55fa11330b816bdf76f40ac09b27578b90bbfa Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 9 Mar 2024 17:27:57 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=A4=EB=AA=85=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TooltipButton/TooltipButton.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/TooltipButton/TooltipButton.tsx b/src/components/TooltipButton/TooltipButton.tsx index 5888a87c..29fa53c7 100644 --- a/src/components/TooltipButton/TooltipButton.tsx +++ b/src/components/TooltipButton/TooltipButton.tsx @@ -6,17 +6,18 @@ import { ReactElement, createContext, useContext, + useEffect, useRef, useState, } from 'react'; import './index.scss'; -// +//TooltipButton컴포넌트 내에서 공유할 상태, 함수 const contextDefaultValue = { - isOpen: false, - handleSetIsOpen: () => {}, - handleCloseTooltip: () => {}, - optionsPosition: 'top' as Position, + isOpen: false, // 툴팁 열림 여부 + handleSetIsOpen: () => {}, //툴팁 상태 변경 함수 + handleCloseTooltip: () => {}, //툴팁 닫기 함수 + optionsPosition: 'top' as Position, //Options컴포넌트 위치(열림 방향을 위해서 필요) }; type Position = 'top' | 'bottom'; @@ -29,14 +30,17 @@ const TooltipButtonContext = createContext<{ }>(contextDefaultValue); interface MainProps { - className?: string; + className?: string; // 위치조정이이나, css 스탕일링을 위한 className children: ReactElement[]; } const Main = ({ children, className }: MainProps) => { const [isOpen, setIsOpen] = useState(false); + const [optionsPosition, setOptionsPosition] = useState('top'); + useEffect(() => { + setOptionsPosition(children[0]?.type !== Options ? 'bottom' : 'top'); + }, [children]); - const optionsPosition = children[0].type === Options ? 'top' : 'bottom'; const handleCloseTooltip = () => { setIsOpen(false); }; @@ -63,7 +67,7 @@ interface TriggerProps { children: ReactElement; className?: string; } - +//열고 닫힘 trigger 역할을 할 컴푸넌트 children을 넣얼줄때 외부에서 직접 스타일링 가능, 그외 부분 클릭시 Tooltip 닫힘 const Trigger = ({ children, className }: TriggerProps) => { const { handleSetIsOpen, handleCloseTooltip } = useContext(TooltipButtonContext); @@ -83,7 +87,7 @@ interface OptionsProps { className?: string; children: ReactElement[] | ReactElement; } - +//열렸을때 보여줄 아이템들 const Options = ({ className, children }: OptionsProps) => { const { isOpen, optionsPosition } = useContext(TooltipButtonContext); return ( From fe53d545a720d8917fa2795a406a80c48a30387d Mon Sep 17 00:00:00 2001 From: nocheol Date: Mon, 11 Mar 2024 01:52:11 +0900 Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=92=84=20:=20#488=20-=20trigger=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TooltipButton/index.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/TooltipButton/index.scss b/src/components/TooltipButton/index.scss index 20c2787e..8256c470 100644 --- a/src/components/TooltipButton/index.scss +++ b/src/components/TooltipButton/index.scss @@ -4,8 +4,9 @@ position: relative; } - // &__trigger { - // } + &__trigger { + background-color: transparent; + } &__list { display: flex; From 6d46c70710fb5bd9552d43e2348f54a721b0fcbd Mon Sep 17 00:00:00 2001 From: nocheol Date: Thu, 14 Mar 2024 04:40:15 +0900 Subject: [PATCH 9/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#488=20-=20options?= =?UTF-8?q?Position=20props=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/plans/[planId]/page.tsx | 2 +- src/components/TooltipButton/TooltipButton.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/plans/[planId]/page.tsx b/src/app/plans/[planId]/page.tsx index c9e37a3f..594eb3e3 100644 --- a/src/app/plans/[planId]/page.tsx +++ b/src/app/plans/[planId]/page.tsx @@ -78,7 +78,7 @@ export default function PlanIdPage({ params }: { params: { planId: string } }) { {isMyPlan && (

공유하기

- +