From cb19ce9ef89b76b901d0ccefe38bf2b60fc6f0f1 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 30 Jan 2025 22:18:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20tooltip=20=EC=A0=95=EC=83=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/SideNavBar/Item/Item.style.ts | 17 +++- .../shared/component/SideNavBar/Item/Item.tsx | 6 +- packages/ui/src/ToolTip/ToolTip.style.ts | 90 ++++++++----------- packages/ui/src/ToolTip/ToolTip.tsx | 28 ++++-- 4 files changed, 73 insertions(+), 68 deletions(-) diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts index 331054578..5c8a82765 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts @@ -17,7 +17,9 @@ export const itemStyle = (isClicked: boolean) => border: isClicked ? `1px solid ${theme.colors.key_500}` : 'transparent', '&:hover': { - border: `1px solid ${theme.colors.key_500}`, + // border: `1px solid ${theme.colors.key_500}`, + backgroundColor: theme.colors.key_100, + border: 'none', }, '& > img': { @@ -42,11 +44,18 @@ export const firstSpellStyle = css({ color: theme.colors.gray_500, }); -export const pageIndicatorStyle = (isClicked: boolean, isHover: boolean) => +export const pageIndicatorStyle = () => css({ width: '0.4rem', - height: isClicked ? '2.4rem' : isHover ? '1.6rem' : 0, + height: '2.4rem', borderRadius: '0 100px 100px 0', - backgroundColor: isClicked ? theme.colors.key_500 : isHover ? theme.colors.key_300 : theme.colors.white, + backgroundColor: theme.colors.key_500, + }); + +export const pageIndicatorHoverStyle = () => + css({ + height: '1.6rem', + + backgroundColor: theme.colors.key_300, }); diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx index 37d8785ee..edc737138 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx @@ -8,6 +8,7 @@ import { firstSpellStyle, indicatorStyle, itemStyle, + pageIndicatorHoverStyle, pageIndicatorStyle, } from '@/shared/component/SideNavBar/Item/Item.style'; @@ -67,9 +68,8 @@ const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => { return ( - {isClicked && ( - - )} + {isClicked && } +
css({ - position: "absolute", - - width: "max-content", - padding: "1rem", - borderRadius: "8px", + position: 'absolute', + width: 'max-content', + padding: '0.9rem', + borderRadius: '8px', + border: `1px solid ${theme.colors.gray_900}`, backgroundColor: `${theme.colors.gray_900}`, font: `${theme.text.body08}`, color: `${theme.colors.white}`, - visibility: isVisible ? "visible" : "hidden", + visibility: isVisible ? 'visible' : 'hidden', + + transitionDelay: isVisible ? '0.2s' : '0', + + pointerEvents: 'none', - transitionDelay: isVisible ? "0.2s" : "0", + '&::after': { + content: '""', + position: 'absolute', - pointerEvents: "none", + right: '100%', + transform: `translateY(-50%) translateX(calc(0 - 6px))`, + + borderWidth: '6px', + borderStyle: 'solid', + borderColor: `transparent ${theme.colors.gray_900} transparent transparent`, + }, }); -export const positionStyle = (position: Required["position"], gap: number) => { +export const positionStyle = ( + position: Required['position'], + gap: number, +) => { const style = { top: css({ - left: "50%", - bottom: "100%", + left: '50%', + bottom: '100%', transform: `translateX(-50%) translateY(calc(-${gap}rem - 8px) )`, }), bottom: css({ - left: "50%", - up: "100%", + left: '50%', + up: '100%', transform: `translateX(-50%) translateY(calc(${gap}rem + 8px))`, }), left: css({ - top: "50%", - right: "100%", + top: '50%', + right: '100%', transform: `translateY(-50%) translateX(calc(-${gap}rem - 8px))`, }), right: css({ - top: "50%", - left: "100%", + top: '50%', + left: '100%', transform: `translateY(-50%) translateX(calc(${gap}rem + 8px))`, }), }; return style[position]; }; - -export const arrowStyle = css({ - position: "absolute", -}); - -export const arrowPositionStyle = (position: Required["position"]) => { - const style = { - top: css({ - left: "50%", - top: "calc(100%)", - transform: `translateX(-50%) translateY(-1px) rotate(270deg)`, - }), - bottom: css({ - left: "50%", - bottom: "calc(100%)", - transform: `translateX(-50%) translateY(1px) rotate(90deg)`, - }), - left: css({ - top: "50%", - left: "calc(100%)", - transform: `translateY(-50%) translateX(-1px) rotate(180deg)`, - }), - right: css({ - top: "50%", - right: "calc(100%)", - transform: `translateY(-50%) translateX(1px)`, - }), - }; - - return style[position]; -}; diff --git a/packages/ui/src/ToolTip/ToolTip.tsx b/packages/ui/src/ToolTip/ToolTip.tsx index 152dd026a..f68452cad 100644 --- a/packages/ui/src/ToolTip/ToolTip.tsx +++ b/packages/ui/src/ToolTip/ToolTip.tsx @@ -1,15 +1,24 @@ -import { HTMLAttributes, useState } from "react"; +import { HTMLAttributes, useState } from 'react'; -import { arrowPositionStyle, arrowStyle, containerStyle, messageStyle, positionStyle } from "@/ToolTip/ToolTip.style"; -import { IcTooltipArrow } from "@tiki/icon"; +import { + containerStyle, + messageStyle, + positionStyle, +} from '@/ToolTip/ToolTip.style'; export interface ToolTipProps extends HTMLAttributes { - position?: "top" | "right" | "bottom" | "left"; + position?: 'top' | 'right' | 'bottom' | 'left'; message: string; gap?: number; } -const ToolTip = ({ position = "right", message, gap = 0, children, ...props }: ToolTipProps) => { +const ToolTip = ({ + position = 'right', + message, + gap = 0, + children, + ...props +}: ToolTipProps) => { const [isVisible, setIsVisible] = useState(false); const handleToolTipVisible = () => { @@ -19,7 +28,7 @@ const ToolTip = ({ position = "right", message, gap = 0, children, ...props }: T setIsVisible(false); }; const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === "Escape") { + if (event.key === 'Escape') { handleToolTipHidden(); } }; @@ -37,8 +46,11 @@ const ToolTip = ({ position = "right", message, gap = 0, children, ...props }: T onBlur={handleToolTipHidden} > {children} - - + {message}
From f3f9dcead957434a35ca8624476c78a620997811 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 30 Jan 2025 22:45:06 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EC=87=BC=EC=BC=80=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=ED=81=B4=EB=A6=AD=20=EB=A7=89=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/SideNavBar/Item/Item.style.ts | 4 +--- .../shared/component/SideNavBar/Item/Item.tsx | 23 ++----------------- .../component/SideNavBar/SideNavBar.tsx | 13 ++++------- 3 files changed, 8 insertions(+), 32 deletions(-) diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts index 5c8a82765..45f980a1d 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts @@ -17,9 +17,7 @@ export const itemStyle = (isClicked: boolean) => border: isClicked ? `1px solid ${theme.colors.key_500}` : 'transparent', '&:hover': { - // border: `1px solid ${theme.colors.key_500}`, - backgroundColor: theme.colors.key_100, - border: 'none', + border: `1px solid ${theme.colors.key_500}`, }, '& > img': { diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx index edc737138..b5ace7034 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx @@ -2,13 +2,12 @@ import { IcAdd, IcGlobal } from '@tiki/icon'; import { Flex, ToolTip } from '@tiki/ui'; import { motion } from 'framer-motion'; -import { HTMLAttributes, useState } from 'react'; +import { HTMLAttributes } from 'react'; import { firstSpellStyle, indicatorStyle, itemStyle, - pageIndicatorHoverStyle, pageIndicatorStyle, } from '@/shared/component/SideNavBar/Item/Item.style'; @@ -50,16 +49,6 @@ const getItemsInfo = (variant: Required) => { }; const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => { - const [isHover, setIsHover] = useState(false); - - const handleMouseEnter = () => { - setIsHover(true); - }; - - const handleMouseLeave = () => { - setIsHover(false); - }; - const handleEnterKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { onLogoClick(); @@ -69,16 +58,8 @@ const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => { return ( {isClicked && } - -
+
{getItemsInfo(variant)}
diff --git a/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx b/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx index 4609ce340..b70922b34 100644 --- a/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx +++ b/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx @@ -1,5 +1,5 @@ import { IcAvatar, IcTikiLogo } from '@tiki/icon'; -import { Divider, Flex, ToolTip, theme } from '@tiki/ui'; +import { Divider, Flex, ToolTip, theme, useToastAction } from '@tiki/ui'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -20,6 +20,7 @@ const SideNavBar = () => { const { setTeamId } = useTeamIdAction(); const navigate = useNavigate(); const openModal = useOpenModal(); + const { createToast } = useToastAction(); const { data } = $api.useQuery('get', '/api/v1/members/teams'); @@ -51,7 +52,7 @@ const SideNavBar = () => { handleItemClick(null, PATH.SHOWCASE)} + onLogoClick={() => createToast('현재 준비중인 기능입니다.', 'default')} /> {data?.data?.belongTeamGetResponses.map((data) => { @@ -74,12 +75,8 @@ const SideNavBar = () => {
{ - alert('현재 준비중인 기능입니다.'); - }} - onKeyDown={() => { - alert('현재 준비중인 기능입니다.'); - }}> + onClick={() => createToast('현재 준비중인 기능입니다.', 'default')} + onKeyDown={() => createToast('현재 준비중인 기능입니다.', 'default')}>
From c802f64f3614ba60f1bbba6074786aeb705a3695 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 30 Jan 2025 23:51:40 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20+=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/SideNavBar/Item/Item.style.ts | 10 +++++++--- .../shared/component/SideNavBar/Item/Item.tsx | 16 ++++++++++++---- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts index 45f980a1d..7dc04186d 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.style.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { theme } from '@tiki/ui'; -export const itemStyle = (isClicked: boolean) => +export const itemStyle = (isClicked: boolean, isAddButton: boolean) => css({ display: 'flex', alignItems: 'center', @@ -11,13 +11,13 @@ export const itemStyle = (isClicked: boolean) => height: '3.6rem', padding: '0.1rem', - backgroundColor: theme.colors.gray_100, + backgroundColor: isAddButton ? 'inherit' : theme.colors.gray_100, borderRadius: '10px', border: isClicked ? `1px solid ${theme.colors.key_500}` : 'transparent', '&:hover': { - border: `1px solid ${theme.colors.key_500}`, + border: isAddButton ? 'none' : `1px solid ${theme.colors.key_500}`, }, '& > img': { @@ -57,3 +57,7 @@ export const pageIndicatorHoverStyle = () => backgroundColor: theme.colors.key_300, }); + +export const profileImgStyle = css({ + objectFit: 'cover', +}); diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx index b5ace7034..11013aeea 100644 --- a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx +++ b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx @@ -1,5 +1,5 @@ import { IcAdd, IcGlobal } from '@tiki/icon'; -import { Flex, ToolTip } from '@tiki/ui'; +import { Flex, Text, ToolTip } from '@tiki/ui'; import { motion } from 'framer-motion'; import { HTMLAttributes } from 'react'; @@ -9,6 +9,7 @@ import { indicatorStyle, itemStyle, pageIndicatorStyle, + profileImgStyle, } from '@/shared/component/SideNavBar/Item/Item.style'; interface ItemProps extends HTMLAttributes { @@ -40,9 +41,11 @@ const getItemsInfo = (variant: Required) => { } case 'team': { return variant.logoUrl ? ( - 팀 프로필 이미지 + 팀 프로필 이미지 ) : ( - {variant.hoverMessage[0]} + + {variant.hoverMessage[0]} + ); } } @@ -59,7 +62,12 @@ const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => { {isClicked && } -
+
{getItemsInfo(variant)}
From 317ec435f581428f5125835042dbaea482464252 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Sat, 1 Feb 2025 21:50:47 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=208=EA=B0=9C=20=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/shared/component/SideNavBar/SideNavBar.tsx | 5 +++++ apps/client/src/shared/constant/index.ts | 2 ++ 2 files changed, 7 insertions(+) diff --git a/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx b/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx index b70922b34..d815006e6 100644 --- a/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx +++ b/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx @@ -8,6 +8,7 @@ import { components } from '@/shared/__generated__/schema'; import { $api } from '@/shared/api/client'; import Item from '@/shared/component/SideNavBar/Item/Item'; import { containerStyle, settingStyle, tikiLogoStyle } from '@/shared/component/SideNavBar/SideNavBar.style'; +import { MAX_TEAM_COUNT } from '@/shared/constant'; import { STORAGE_KEY } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import { useOpenModal } from '@/shared/store/modal'; @@ -42,6 +43,10 @@ const SideNavBar = () => { }; const handleWorkspaceClick = () => { + if (data && data?.data && data?.data?.belongTeamGetResponses.length >= MAX_TEAM_COUNT) { + createToast(`워크스페이스는 최대 ${MAX_TEAM_COUNT}개까지 생성 가능합니다.`, 'error'); + return; + } openModal('create-workspace'); }; diff --git a/apps/client/src/shared/constant/index.ts b/apps/client/src/shared/constant/index.ts index 70d6bf3c0..642ae51a2 100644 --- a/apps/client/src/shared/constant/index.ts +++ b/apps/client/src/shared/constant/index.ts @@ -103,3 +103,5 @@ export const IMAGE_MODAL = { INFO_TEXT: '파일을 업로드 중입니다', }, }; + +export const MAX_TEAM_COUNT = 8;