[Refactor] SideNavBar qa 해결

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': {
@@ -42,11 +42,22 @@ 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,
+  });
+
+export const profileImgStyle = css({
+  objectFit: 'cover',
+});

apps/client/src/shared/component/SideNavBar/Item/Item.tsx

@@ -1,14 +1,15 @@
 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, useState } from 'react';
+import { HTMLAttributes } from 'react';
 
 import {
   firstSpellStyle,
   indicatorStyle,
   itemStyle,
   pageIndicatorStyle,
+  profileImgStyle,
 } from '@/shared/component/SideNavBar/Item/Item.style';
 
 interface ItemProps extends HTMLAttributes<HTMLDivElement> {
@@ -40,25 +41,17 @@ const getItemsInfo = (variant: Required<ItemProps['variant']>) => {
     }
     case 'team': {
       return variant.logoUrl ? (
-        <img src={variant.logoUrl} alt="팀 프로필 이미지" />
+        <img src={variant.logoUrl} alt="팀 프로필 이미지" css={profileImgStyle} />
       ) : (
-        <span css={firstSpellStyle}>{variant.hoverMessage[0]}</span>
+        <Text tag="body6" css={firstSpellStyle}>
+          {variant.hoverMessage[0]}
+        </Text>
       );
     }
   }
 };
 
 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<HTMLDivElement>) => {
     if (e.key === 'Enter') {
       onLogoClick();
@@ -67,18 +60,14 @@ const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => {
 
   return (
     <Flex tag="li" styles={{ align: 'center', justify: 'center', padding: '2rem' }} {...props}>
-      {isClicked && (
-        <motion.div layoutId="snb_indicator" css={[pageIndicatorStyle(isClicked, isHover), indicatorStyle]} />
-      )}
+      {isClicked && <motion.div layoutId="snb_indicator" css={[pageIndicatorStyle, indicatorStyle]} />}
       <ToolTip message={variant.hoverMessage} position="right" gap={0.8}>
         <div
           role="button"
           tabIndex={0}
-          css={itemStyle(isClicked)}
+          css={itemStyle(isClicked, variant.type === 'add')}
           onClick={onLogoClick}
-          onKeyDown={handleEnterKeyDown}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}>
+          onKeyDown={handleEnterKeyDown}>
           {getItemsInfo(variant)}
         </div>
       </ToolTip>

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';
@@ -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';
@@ -20,6 +21,7 @@ const SideNavBar = () => {
   const { setTeamId } = useTeamIdAction();
   const navigate = useNavigate();
   const openModal = useOpenModal();
+  const { createToast } = useToastAction();
 
   const { data } = $api.useQuery('get', '/api/v1/members/teams');
 
@@ -41,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');
   };
 
@@ -51,7 +57,7 @@ const SideNavBar = () => {
         <Item
           variant={{ type: 'dashboard', hoverMessage: 'showcase' }}
           isClicked={isInShowcase}
-          onLogoClick={() => handleItemClick(null, PATH.SHOWCASE)}
+          onLogoClick={() => createToast('현재 준비중인 기능입니다.', 'default')}
         />
         <Divider type="horizontal" size={56.78} color={theme.colors.gray_300} />
         {data?.data?.belongTeamGetResponses.map((data) => {
@@ -74,12 +80,8 @@ const SideNavBar = () => {
             <div
               role="button"
               tabIndex={0}
-              onClick={() => {
-                alert('현재 준비중인 기능입니다.');
-              }}
-              onKeyDown={() => {
-                alert('현재 준비중인 기능입니다.');
-              }}>
+              onClick={() => createToast('현재 준비중인 기능입니다.', 'default')}
+              onKeyDown={() => createToast('현재 준비중인 기능입니다.', 'default')}>
               <IcAvatar width={32} height={32} />
             </div>
           </ToolTip>

apps/client/src/shared/constant/index.ts

@@ -103,3 +103,5 @@ export const IMAGE_MODAL = {
     INFO_TEXT: '파일을 업로드 중입니다',
   },
 };
+
+export const MAX_TEAM_COUNT = 8;

packages/ui/src/ToolTip/ToolTip.style.ts

@@ -1,86 +1,70 @@
-import { css } from "@emotion/react";
+import { css } from '@emotion/react';
 
-import { ToolTipProps } from "@/ToolTip/ToolTip";
-import { theme } from "@/theme";
+import { ToolTipProps } from '@/ToolTip/ToolTip';
+import { theme } from '@/theme';
 
 export const containerStyle = css({
-  display: "inline-block",
-  position: "relative",
+  display: 'inline-block',
+  position: 'relative',
 });
 
 export const messageStyle = (isVisible: boolean) =>
   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<ToolTipProps>["position"], gap: number) => {
+export const positionStyle = (
+  position: Required<ToolTipProps>['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<ToolTipProps>["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];
-};

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<HTMLSpanElement> {
-  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}
-      <span role="tooltip" css={[messageStyle(isVisible), positionStyle(position, gap)]} {...props}>
-        <IcTooltipArrow css={[arrowStyle, arrowPositionStyle(position)]} />
+      <span
+        role="tooltip"
+        css={[messageStyle(isVisible), positionStyle(position, gap)]}
+        {...props}
+      >
         {message}
       </span>
     </div>