Feature/#127 탭 브라우징 피드백 반영

client/package.json

@@ -17,6 +17,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "socket.io-client": "^4.8.1",
+    "vite-plugin-svgr": "^4.3.0",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

client/src/components/bottomNavigator/BottomNavigator.tsx

@@ -1,12 +1,12 @@
-import { Page } from "@src/types/page";
 import { motion } from "framer-motion";
 import { IconButton } from "@components/button/IconButton";
+import { Page } from "@src/types/page";
 import { animation } from "./BottomNavigator.animation";
 import { bottomNavigatorContainer } from "./BottomNavigator.style";
 
 interface BottomNavigatorProps {
   pages: Page[];
-  handlePageSelect: (pageId: number) => void;
+  handlePageSelect: ({ pageId, isSidebar }: { pageId: number; isSidebar?: boolean }) => void;
 }
 
 export const BottomNavigator = ({ pages, handlePageSelect }: BottomNavigatorProps) => {
@@ -25,7 +25,9 @@ export const BottomNavigator = ({ pages, handlePageSelect }: BottomNavigatorProp
             icon={page.icon}
             size="md"
             onClick={() => {
-              handlePageSelect(page.id);
+              handlePageSelect({
+                pageId: page.id,
+              });
             }}
           />
         </motion.div>

client/src/components/modal/modal.animation.ts

@@ -11,19 +11,7 @@ export const overlayAnimation = {
 };
 
 export const modalContainerAnimation = {
-  initial: {
-    scale: 0.7,
-    opacity: 0,
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-  },
-  animate: {
-    scale: 1,
-    opacity: 1,
-  },
-  exit: {
-    scale: 0.7,
-    opacity: 0,
-  },
+  initial: { opacity: 0, y: 50, scale: 0.3 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, scale: 0.5, transition: { duration: 0.2 } },
 };

client/src/components/modal/modal.style.ts

@@ -27,8 +27,6 @@ export const modalContainer = cx(
     display: "flex",
     zIndex: 10001,
     position: "absolute",
-    top: "50%",
-    left: "50%",
     transform: "translate(-50%, -50%)",
     flexDirection: "column",
     width: "400px",

client/src/components/sidebar/MenuButton.style.ts

@@ -14,6 +14,7 @@ export const imageBox = css({
   borderRadius: "sm",
   width: "50px",
   height: "50px",
+  background: "white",
   overflow: "hidden",
 });
 

client/src/components/sidebar/MenuButton.tsx

@@ -3,9 +3,7 @@ import { menuItemWrapper, imageBox, textBox } from "./MenuButton.style";
 export const MenuButton = () => {
   return (
     <div className={menuItemWrapper}>
-      <div className={imageBox}>
-        <img src="https://via.placeholder.com/50" />
-      </div>
+      <div className={imageBox}></div>
       <p className={textBox}>Noctturn</p>
     </div>
   );

client/src/components/sidebar/PageItem.style.ts

@@ -5,6 +5,7 @@ export const pageItemContainer = css({
   gap: "sm",
   alignItems: "center",
   width: "100%",
+  height: "56px",
   paddingInline: "md",
   "&:hover": {
     background: "white/50",
@@ -14,6 +15,7 @@ export const pageItemContainer = css({
 
 export const iconBox = css({
   display: "flex",
+  flexShrink: 0,
   justifyContent: "center",
   alignItems: "center",
   borderRadius: "xs",
@@ -26,4 +28,7 @@ export const iconBox = css({
 export const textBox = css({
   textStyle: "display-medium20",
   color: "gray.700",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
 });

client/src/components/sidebar/Sidebar.style.ts

@@ -16,11 +16,14 @@ export const navWrapper = css({
   gap: "md",
   flexDirection: "column",
   width: "100%",
+  overflowX: "hidden",
+  overflowY: "scroll",
 });
 
 export const plusIconBox = css({
   display: "flex",
   justifyContent: "start",
+  marginBlock: "10px",
   paddingInline: "md",
 });
 

client/src/components/sidebar/Sidebar.tsx

@@ -1,7 +1,10 @@
-import { useIsSidebarOpen, useSidebarActions } from "@src/stores/useSidebarStore";
-import { Page } from "@src/types/page";
 import { motion } from "framer-motion";
 import { IconButton } from "@components/button/IconButton";
+import { Modal } from "@components/modal/modal";
+import { useModal } from "@components/modal/useModal";
+import { MAX_VISIBLE_PAGE } from "@src/constants/page";
+import { useIsSidebarOpen, useSidebarActions } from "@src/stores/useSidebarStore";
+import { Page } from "@src/types/page";
 import { MenuButton } from "./MenuButton";
 import { PageItem } from "./PageItem";
 import { animation, contentVariants, sidebarVariants } from "./Sidebar.animation";
@@ -14,10 +17,30 @@ export const Sidebar = ({
 }: {
   pages: Page[];
   handlePageAdd: () => void;
-  handlePageSelect: (pageId: number, isSidebar: boolean) => void;
+  handlePageSelect: ({ pageId }: { pageId: number }) => void;
 }) => {
+  const visiblePages = pages.filter((page) => page.isVisible);
+  const isMaxVisiblePage = visiblePages.length >= MAX_VISIBLE_PAGE;
+
   const isSidebarOpen = useIsSidebarOpen();
   const { toggleSidebar } = useSidebarActions();
+  const { isOpen, openModal, closeModal } = useModal();
+
+  const handlePageItemClick = (id: number) => {
+    if (isMaxVisiblePage) {
+      openModal();
+      return;
+    }
+    handlePageSelect({ pageId: id });
+  };
+
+  const handleAddPageButtonClick = () => {
+    if (isMaxVisiblePage) {
+      openModal();
+      return;
+    }
+    handlePageAdd();
+  };
 
   return (
     <motion.aside
@@ -29,23 +52,31 @@ export const Sidebar = ({
       <div className={sidebarToggleButton} onClick={toggleSidebar}>
         {isSidebarOpen ? "«" : "»"}
       </div>
-
-      <motion.nav className={navWrapper} variants={contentVariants}>
+      <motion.div variants={contentVariants}>
         <MenuButton />
+      </motion.div>
+      <motion.nav className={navWrapper} variants={contentVariants}>
         {pages?.map((item) => (
           <motion.div
             key={item.id}
             initial={animation.initial}
             animate={animation.animate}
             transition={animation.transition}
           >
-            <PageItem {...item} onClick={() => handlePageSelect(item.id, true)} />
+            <PageItem {...item} onClick={() => handlePageItemClick(item.id)} />
           </motion.div>
         ))}
-        <div className={plusIconBox}>
-          <IconButton icon="➕" size="sm" onClick={handlePageAdd} />
-        </div>
       </motion.nav>
+      <motion.div className={plusIconBox} variants={contentVariants}>
+        <IconButton icon="➕" onClick={handleAddPageButtonClick} size="sm" />
+      </motion.div>
+      <Modal isOpen={isOpen} primaryButtonLabel="확인" primaryButtonOnClick={closeModal}>
+        <p>
+          최대 {MAX_VISIBLE_PAGE}개의 페이지만 표시할 수 있습니다
+          <br />
+          사용하지 않는 페이지는 닫아주세요.
+        </p>
+      </Modal>
     </motion.aside>
   );
 };

client/src/constants/page.ts

@@ -0,0 +1 @@
+export const MAX_VISIBLE_PAGE = 10;

client/src/features/page/Page.animation.ts

@@ -1,6 +1,6 @@
 export const pageAnimation = {
   initial: {
-    x: -300,
+    x: 0,
     y: 0,
     opacity: 0,
     scale: 0.8,
@@ -12,7 +12,9 @@ export const pageAnimation = {
     scale: 1,
     boxShadow: isActive ? "0 8px 30px rgba(0,0,0,0.15)" : "0 2px 10px rgba(0,0,0,0.1)",
     transition: {
-      boxShadow: { duration: 0.2 },
+      x: { type: "tween", duration: 0.03, ease: "linear" },
+      y: { type: "tween", duration: 0.03, ease: "linear" },
+      scale: { type: "spring", stiffness: 300, damping: 15 },
     },
   }),
 };

client/src/features/page/Page.style.ts

@@ -4,7 +4,9 @@ import { glassContainer } from "@styled-system/recipes";
 export const pageContainer = cx(
   glassContainer({ border: "lg" }),
   css({
+    display: "flex",
     position: "absolute",
+    flexDirection: "column",
     width: "450px",
     height: "400px",
   }),
@@ -24,11 +26,6 @@ export const pageHeader = css({
   },
 });
 
-export const pageTitle = css({
-  textStyle: "display-medium24",
-  color: "gray.500",
-});
-
 export const resizeHandle = css({
   position: "absolute",
   right: "-10px",

client/src/features/page/Page.tsx

@@ -1,7 +1,6 @@
-import { Page as PageType } from "@src/types/page";
 import { motion, AnimatePresence } from "framer-motion";
-import { useRef } from "react";
 import { Editor } from "@features/editor/Editor";
+import { Page as PageType } from "@src/types/page";
 import { pageAnimation, resizeHandleAnimation } from "./Page.animation";
 import { pageContainer, pageHeader, resizeHandle } from "./Page.style";
 
@@ -10,7 +9,7 @@ import { PageTitle } from "./components/PageTitle/PageTitle";
 import { usePage } from "./hooks/usePage";
 
 interface PageProps extends PageType {
-  handlePageSelect: (pageId: number) => void;
+  handlePageSelect: ({ pageId, isSidebar }: { pageId: number; isSidebar?: boolean }) => void;
   handlePageClose: (pageId: number) => void;
   handleTitleChange: (pageId: number, newTitle: string) => void;
 }
@@ -26,7 +25,6 @@ export const Page = ({
   handlePageClose,
   handleTitleChange,
 }: PageProps) => {
-  const pageRef = useRef<HTMLDivElement>(null);
   const { position, size, pageDrag, pageResize, pageMinimize, pageMaximize } = usePage({ x, y });
 
   const onTitleChange = (newTitle: string) => {
@@ -36,7 +34,6 @@ export const Page = ({
   return (
     <AnimatePresence>
       <motion.div
-        ref={pageRef}
         className={pageContainer}
         initial={pageAnimation.initial}
         animate={pageAnimation.animate({
@@ -49,7 +46,11 @@ export const Page = ({
           height: `${size.height}px`,
           zIndex,
         }}
-        onPointerDown={() => handlePageSelect(id)}
+        onPointerDown={() =>
+          handlePageSelect({
+            pageId: id,
+          })
+        }
       >
         <div className={pageHeader} onPointerDown={pageDrag}>
           <PageTitle title={title} />

client/src/features/page/components/PageControlButton/PageControlButton.style.ts

@@ -3,6 +3,12 @@ import { css, cva } from "@styled-system/css";
 export const pageControlContainer = css({
   display: "flex",
   gap: "sm",
+  _hover: {
+    "& svg": {
+      transform: "scale(1)", // 추가 효과
+      opacity: 1,
+    },
+  },
 });
 
 export const pageControlButton = cva({
@@ -20,3 +26,11 @@ export const pageControlButton = cva({
     },
   },
 });
+
+export const iconBox = css({
+  transform: "scale(0.8)",
+  strokeWidth: "2.5px",
+  color: "white/90",
+  opacity: 0,
+  transition: "all 0.1s ease",
+});

client/src/features/page/components/PageControlButton/PageControlButton.tsx

@@ -1,4 +1,7 @@
-import { pageControlContainer, pageControlButton } from "./PageControlButton.style";
+import CloseIcon from "@assets/icons/close.svg?react";
+import ExpandIcon from "@assets/icons/expand.svg?react";
+import MinusIcon from "@assets/icons/minus.svg?react";
+import { pageControlContainer, pageControlButton, iconBox } from "./PageControlButton.style";
 
 interface PageControlButtonProps {
   onPageMinimize?: () => void;
@@ -13,11 +16,15 @@ export const PageControlButton = ({
 }: PageControlButtonProps) => {
   return (
     <div className={pageControlContainer}>
-      <button className={pageControlButton({ color: "yellow" })} onClick={onPageMinimize} />
-
-      <button className={pageControlButton({ color: "red" })} onClick={onPageClose} />
-
-      <button className={pageControlButton({ color: "green" })} onClick={onPageMaximize} />
+      <button className={pageControlButton({ color: "yellow" })} onClick={onPageMinimize}>
+        <MinusIcon className={iconBox} />
+      </button>
+      <button className={pageControlButton({ color: "green" })} onClick={onPageMaximize}>
+        <ExpandIcon className={iconBox} />
+      </button>
+      <button className={pageControlButton({ color: "red" })} onClick={onPageClose}>
+        <CloseIcon className={iconBox} />
+      </button>
     </div>
   );
 };

client/src/features/page/components/PageTitle/PageTitle.style.ts

@@ -3,4 +3,7 @@ import { css } from "@styled-system/css";
 export const pageTitle = css({
   textStyle: "display-medium24",
   color: "gray.500",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
 });

client/src/features/page/hooks/usePage.ts

@@ -1,8 +1,8 @@
-import { useIsSidebarOpen } from "@src/stores/useSidebarStore";
-import { Position, Size } from "@src/types/page";
 import { useEffect, useState } from "react";
 import { PAGE, SIDE_BAR } from "@constants/size";
 import { SPACING } from "@constants/spacing";
+import { useIsSidebarOpen } from "@src/stores/useSidebarStore";
+import { Position, Size } from "@src/types/page";
 
 const PADDING = SPACING.MEDIUM * 2;