Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-Nocta …

…into Feature/#196_페이지_title_서버인스턴스에_저장

- 병합하며 iconType interface 일치화
- build 에러 수정

#196

@noctaCrdt/Interfaces.ts

@@ -20,6 +20,32 @@ export type BackgroundColorType =
   | "brown"
   | "transparent";
 
+export type PageIconType =
+  // 기본 문서 타입
+  | "Docs" // 일반 문서
+  | "Note" // 필기/메모
+  | "Wiki" // 지식 베이스/위키
+
+  // 업무 관련
+  | "Project" // 프로젝트 관련
+  | "Meeting" // 회의록
+  | "Task" // 할일/작업
+
+  // 개인 활동
+  | "Diary" // 일기/저널
+  | "Blog" // 블로그 포스트
+  | "Entertain" // 유튜브, 넷플릭스 등
+
+  // 학습 관련
+  | "Study" // 학습 자료
+  | "Research" // 연구/조사
+  | "Book" // 독서 노트
+
+  // 협업 관련
+  | "Team" // 팀 문서
+  | "Shared" // 공유 문서
+  | "Feedback"; // 피드백/리뷰
+
 export type TextColorType = Exclude<BackgroundColorType, "transparent">;
 
 export interface InsertOperation {
@@ -125,7 +151,7 @@ export interface RemotePageUpdateOperation {
   pageId: string;
   clientId: number;
   title?: string;
-  icon?: string;
+  icon?: PageIconType;
 }
 export interface WorkSpaceSerializedProps {
   id: string;

@noctaCrdt/Page.ts

@@ -1,24 +1,24 @@
 import { EditorCRDT } from "./Crdt";
 import { Block } from "./Node";
-import { CRDTSerializedProps } from "./Interfaces";
+import { CRDTSerializedProps, PageIconType } from "./Interfaces";
 
 export interface PageSerializedProps {
   id: string;
   title: string;
-  icon: string;
+  icon: PageIconType;
   crdt: CRDTSerializedProps<Block>; // EditorCRDT의 직렬화된 데이터 타입
 }
 
 export class Page {
   id: string;
   title: string;
-  icon: string;
+  icon: PageIconType;
   crdt: EditorCRDT;
 
   constructor(
     id: string = crypto.randomUUID(), // 고유한 ID 생성
     title: string = "Untitled",
-    icon: string = "📄",
+    icon: PageIconType = "Docs",
     editorCRDT: EditorCRDT = new EditorCRDT(0),
   ) {
     this.id = id;
@@ -33,7 +33,7 @@ export class Page {
   }
 
   // 아이콘 업데이트
-  updateIcon(newIcon: string): void {
+  updateIcon(newIcon: PageIconType): void {
     this.icon = newIcon;
   }
 

client/package.json

@@ -22,6 +22,7 @@
     "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "socket.io-client": "^4.8.1",
     "vite-plugin-svgr": "^4.3.0",
     "zustand": "^5.0.1"

client/src/components/button/IconButton.tsx

@@ -1,16 +1,19 @@
-import { iconButtonContainer, iconBox } from "./IconButton.style";
+import { PageIconType } from "@noctaCrdt/Interfaces";
+import { iconComponents, IconConfig } from "@src/constants/PageIconButton.config";
+import { iconButtonContainer } from "./IconButton.style";
 
 interface IconButtonProps {
-  icon: string;
+  icon: PageIconType | "plus";
   size: "sm" | "md";
   onClick?: () => void;
 }
 
 export const IconButton = ({ icon, size, onClick }: IconButtonProps) => {
-  // TODO 추후 svg 파일을 받아올 수 있도록 수정 (사이드바 - 페이지 추가 버튼)
+  const { icon: IconComponent, color: defaultColor }: IconConfig = iconComponents[icon];
+
   return (
     <button className={iconButtonContainer({ size })} onClick={onClick}>
-      <span className={iconBox({ size })}>{icon}</span>
+      <IconComponent color={defaultColor} size="24px" />
     </button>
   );
 };

client/src/components/sidebar/Sidebar.tsx

@@ -8,8 +8,6 @@ import { AuthButton } from "@src/features/auth/AuthButton";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { Page } from "@src/types/page";
 import { useIsSidebarOpen, useSidebarActions } from "@stores/useSidebarStore";
-import { MenuButton } from "./MenuButton";
-import { PageItem } from "./PageItem";
 import { animation, contentVariants, sidebarVariants } from "./Sidebar.animation";
 import {
   sidebarContainer,
@@ -18,6 +16,8 @@ import {
   sidebarToggleButton,
   placeholderMessage,
 } from "./Sidebar.style";
+import { MenuButton } from "./components/menuButton/MenuButton";
+import { PageItem } from "./components/pageItem/PageItem";
 
 export const Sidebar = ({
   pages,
@@ -106,7 +106,7 @@ export const Sidebar = ({
         )}
       </motion.nav>
       <motion.div className={plusIconBox} variants={contentVariants}>
-        <IconButton icon="➕" onClick={handleAddPageButtonClick} size="sm" />
+        <IconButton icon="plus" onClick={handleAddPageButtonClick} size="sm" />
         <AuthButton />
       </motion.div>
 

client/src/components/sidebar/components/pageIconButton/PageIconButton.style.ts

@@ -0,0 +1,33 @@
+import { css } from "@styled-system/css";
+
+export const IconBox = css({
+  display: "flex",
+  position: "relative",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "4px",
+  width: "24px",
+  height: "24px",
+
+  cursor: "pointer",
+  "&:hover": {
+    transform: "scale(1.05)",
+    opacity: 0.8,
+  },
+});
+
+export const IconModal = css({
+  zIndex: 1001,
+  borderRadius: "4px",
+  minWidth: "120px", // 3x3 그리드를 위한 최소 너비
+  padding: "4px",
+  backgroundColor: "white",
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+});
+
+export const IconModalContainer = css({
+  display: "grid",
+  gap: "4px",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  width: "100%",
+});

client/src/components/sidebar/components/pageIconButton/PageIconButton.tsx

@@ -0,0 +1,20 @@
+import { PageIconType } from "@noctaCrdt/Interfaces";
+import { iconComponents, IconConfig } from "@constants/PageIconButton.config";
+import { IconBox } from "./PageIconButton.style";
+
+interface PageIconButtonProps {
+  type: PageIconType;
+  onClick: (e: React.MouseEvent) => void;
+}
+
+export const PageIconButton = ({ type, onClick }: PageIconButtonProps) => {
+  const { icon: IconComponent, color: defaultColor }: IconConfig = iconComponents[type];
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div className={IconBox} onClick={(e) => onClick(e)}>
+        <IconComponent color={defaultColor} size="24px" />
+      </div>
+    </div>
+  );
+};

client/src/components/sidebar/components/pageIconButton/PageIconModal.tsx

@@ -0,0 +1,72 @@
+import { PageIconType } from "@noctaCrdt/Interfaces";
+import { RiCloseLine } from "react-icons/ri";
+import { iconGroups, iconComponents } from "@constants/PageIconButton.config";
+import { css } from "@styled-system/css";
+import {
+  IconModal,
+  IconModalContainer,
+  IconModalClose,
+  IconName,
+  IconButton,
+} from "./pageIconModal.style";
+
+export interface PageIconModalProps {
+  isOpen: boolean;
+  onClose: (e: React.MouseEvent) => void;
+  onSelect: (e: React.MouseEvent, type: PageIconType) => void;
+  currentType: PageIconType;
+}
+
+export const PageIconModal = ({ onClose, onSelect, currentType }: PageIconModalProps) => {
+  return (
+    <div className={IconModal} onClick={onClose}>
+      <div className={IconModalContainer} onClick={onClose}>
+        <button onClick={onClose} className={IconModalClose}>
+          <RiCloseLine width={16} height={16} />
+        </button>
+        <div>
+          {iconGroups.map((group) => (
+            <div
+              key={group.title}
+              className={css({
+                marginBottom: "12px",
+              })}
+            >
+              <h3 className={IconName}>{group.title}</h3>
+              <div
+                className={css({
+                  display: "grid",
+                  gap: "8px",
+                  gridTemplateColumns: "repeat(3, 1fr)",
+                })}
+              >
+                {group.icons.map((iconType) => {
+                  const { icon: IconComponent, color } = iconComponents[iconType];
+                  const isSelected = currentType === iconType;
+
+                  return (
+                    <button
+                      key={iconType}
+                      onClick={(e) => onSelect(e, iconType)}
+                      className={IconButton(isSelected)}
+                    >
+                      <IconComponent color={color} size="24px" />
+                      <span
+                        className={css({
+                          color: "gray.600",
+                          fontSize: "xs",
+                        })}
+                      >
+                        {iconType}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/sidebar/components/pageIconButton/pageIconModal.style.ts

@@ -0,0 +1,62 @@
+import { css } from "@styled-system/css";
+
+export const IconModal = css({
+  zIndex: 9000,
+  position: "absolute",
+  top: 14,
+  left: 14,
+});
+
+export const IconModalContainer = css({
+  zIndex: 1001,
+  position: "relative",
+  borderRadius: "4px",
+  width: "100%",
+  maxHeight: "80vh",
+  padding: "16px",
+  backgroundColor: "white",
+  boxShadow: "lg",
+  overflowY: "auto",
+});
+
+export const IconModalClose = css({
+  display: "flex",
+  position: "absolute",
+  top: "8px",
+  right: "8px",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "none",
+  borderRadius: "md",
+  width: "24px",
+  height: "24px",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  _hover: {
+    backgroundColor: "gray.100",
+  },
+});
+
+export const IconName = css({
+  marginBottom: "8px",
+  color: "gray.600",
+  fontSize: "sm",
+  fontWeight: "medium",
+});
+
+export const IconButton = (isSelected: boolean) =>
+  css({
+    display: "flex",
+    gap: "4px",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    border: "none",
+    borderRadius: "md",
+    padding: "8px",
+    backgroundColor: isSelected ? "gray.100" : "transparent",
+    cursor: "pointer",
+    _hover: {
+      backgroundColor: isSelected ? "gray.100" : "gray.50",
+    },
+  });

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

@@ -2,6 +2,7 @@ import { css } from "@styled-system/css";
 
 export const pageItemContainer = css({
   display: "flex",
+  position: "relative",
   gap: "sm",
   alignItems: "center",
   width: "100%",
@@ -42,7 +43,6 @@ export const iconBox = css({
   width: "44px",
   height: "44px",
   fontSize: "24px",
-  background: "white",
 });
 
 export const textBox = css({