Merge pull request #217 from boostcampwm-2024/Refactor/#216_에디터_컴포넌트_…

…리팩토링 Refactor/#216 에디터 컴포넌트 리팩토링
boostcampwm-2024 · Nov 27, 2024 · 37348c9 · 37348c9
2 parents 11b6650 + c7c2cb3
commit 37348c9
Show file tree

Hide file tree

Showing 15 changed files with 421 additions and 320 deletions.
diff --git a/client/src/components/sidebar/components/pageIconButton/PageIconButton.style.ts b/client/src/components/sidebar/components/pageIconButton/PageIconButton.style.ts
@@ -8,11 +8,10 @@ export const IconBox = css({
   borderRadius: "4px",
   width: "24px",
   height: "24px",
-
+  transition: "all 0.1s ease-in-out",
   cursor: "pointer",
   "&:hover": {
-    transform: "scale(1.05)",
-    opacity: 0.8,
+    transform: "translateY(-2px) scale(1.1)",
   },
 });
 

diff --git a/client/src/components/sidebar/components/pageIconButton/PageIconModal.tsx b/client/src/components/sidebar/components/pageIconButton/PageIconModal.tsx
@@ -2,13 +2,7 @@ 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";
+import { IconModal, IconModalContainer, IconModalClose, IconButton } from "./pageIconModal.style";
 
 export interface PageIconModalProps {
   isOpen: boolean;
@@ -32,11 +26,10 @@ export const PageIconModal = ({ onClose, onSelect, currentType }: PageIconModalP
                 marginBottom: "12px",
               })}
             >
-              <h3 className={IconName}>{group.title}</h3>
               <div
                 className={css({
                   display: "grid",
-                  gap: "8px",
+                  gap: "12px",
                   gridTemplateColumns: "repeat(3, 1fr)",
                 })}
               >
@@ -51,14 +44,6 @@ export const PageIconModal = ({ onClose, onSelect, currentType }: PageIconModalP
                       className={IconButton(isSelected)}
                     >
                       <IconComponent color={color} size="24px" />
-                      <span
-                        className={css({
-                          color: "gray.600",
-                          fontSize: "xs",
-                        })}
-                      >
-                        {iconType}
-                      </span>
                     </button>
                   );
                 })}

diff --git a/client/src/components/sidebar/components/pageIconButton/pageIconModal.style.ts b/client/src/components/sidebar/components/pageIconButton/pageIconModal.style.ts
@@ -4,7 +4,7 @@ export const IconModal = css({
   zIndex: 9000,
   position: "absolute",
   top: 14,
-  left: 14,
+  left: 5,
 });
 
 export const IconModalContainer = css({
@@ -13,27 +13,29 @@ export const IconModalContainer = css({
   borderRadius: "4px",
   width: "100%",
   maxHeight: "80vh",
-  padding: "16px",
+  padding: "16px 16px 0px 16px",
   backgroundColor: "white",
   boxShadow: "lg",
   overflowY: "auto",
 });
 
 export const IconModalClose = css({
   display: "flex",
+  zIndex: 1002,
   position: "absolute",
-  top: "8px",
-  right: "8px",
+  top: "-4px",
+  right: "-4px",
   justifyContent: "center",
   alignItems: "center",
   border: "none",
   borderRadius: "md",
-  width: "24px",
-  height: "24px",
+  width: "32px",
+  height: "32px",
+  opacity: 0.5,
   backgroundColor: "transparent",
   cursor: "pointer",
   _hover: {
-    backgroundColor: "gray.100",
+    opacity: 1,
   },
 });
 
@@ -52,11 +54,12 @@ export const IconButton = (isSelected: boolean) =>
     justifyContent: "space-between",
     alignItems: "center",
     border: "none",
-    borderRadius: "md",
+    borderRadius: "4px",
     padding: "8px",
-    backgroundColor: isSelected ? "gray.100" : "transparent",
+    backgroundColor: isSelected ? "rgba(220, 215, 255, 0.35)" : "transparent",
+    transition: "all 0.1s ease-in-out",
     cursor: "pointer",
     _hover: {
-      backgroundColor: isSelected ? "gray.100" : "gray.50",
+      transform: "translateY(-2px) scale(1.1)",
     },
   });
diff --git a/client/src/components/sidebar/components/pageItem/PageItem.style.ts b/client/src/components/sidebar/components/pageItem/PageItem.style.ts
@@ -3,7 +3,7 @@ import { css } from "@styled-system/css";
 export const pageItemContainer = css({
   display: "flex",
   position: "relative",
-  gap: "sm",
+  gap: "lg",
   alignItems: "center",
   width: "100%",
   height: "56px",

diff --git a/client/src/components/sidebar/components/pageItem/PageItem.tsx b/client/src/components/sidebar/components/pageItem/PageItem.tsx
@@ -44,8 +44,9 @@ export const PageItem = ({
     }
   };
 
-  const handleCloseModal = () => {
+  const handleCloseModal = (e: React.MouseEvent) => {
     closeModal();
+    e.stopPropagation();
   };
 
   const handleSelectIcon = (e: React.MouseEvent, type: PageIconType) => {

diff --git a/client/src/constants/PageIconButton.config.ts b/client/src/constants/PageIconButton.config.ts
@@ -1,5 +1,7 @@
 import { PageIconType } from "@noctaCrdt/Interfaces";
 import { IconType } from "react-icons";
+import { CgGym } from "react-icons/cg";
+import { MdOutlinePlace } from "react-icons/md";
 import {
   // 기본 문서 타입
   RiFileTextLine, // docs: 일반 문서
@@ -14,16 +16,14 @@ import {
   // 개인 활동
   RiBookMarkedLine, // diary: 일기/저널
   RiQuillPenLine, // blog: 블로그
-  RiYoutubeLine, // entertain: 엔터테인먼트
 
   // 학습 관련
   RiBookOpenLine, // study: 학습
   RiSearchLine, // research: 연구/조사
-  RiBookLine, // book: 독서
+  RiBookmarkLine,
 
   // 협업 관련
   RiGroupLine, // team: 팀 문서
-  RiShareLine, // shared: 공유 문서
   RiDiscussLine, // feedback: 피드백
   RiAddFill, // plus: 추가
 } from "react-icons/ri";
@@ -41,67 +41,67 @@ export const iconComponents: Record<PageIconType | "plus", IconConfig> = {
   },
   Note: {
     icon: RiStickyNoteLine,
-    color: "#FEA642", // YELLOW - 메모는 노란색
+    color: "#FEA642",
   },
   Wiki: {
     icon: RiBookReadLine,
-    color: "#A142FE", // PURPLE - 위키는 보라색
+    color: "#A142FE",
   },
 
   // 업무 관련
   Project: {
     icon: RiProjectorLine,
-    color: "#1BBF44", // GREEN - 프로젝트는 초록색
+    color: "#1BBF44",
   },
   Meeting: {
     icon: RiTeamLine,
-    color: "#4E637C", // GRAY_700 - 회의는 진중한 느낌의 회색
+    color: "#4E637C",
   },
   Task: {
     icon: RiTaskLine,
-    color: "#F24150", // RED - 태스크는 주목성 높은 빨간색
+    color: "#F24150",
   },
 
   // 개인 활동
   Diary: {
     icon: RiBookMarkedLine,
-    color: "#FF69B4", // 연한 분홍색 - 개인적/감성적인 느낌
+    color: "#FF69B4",
   },
   Blog: {
     icon: RiQuillPenLine,
-    color: "#99AFCA", // GRAY_300 - 글쓰기는 차분한 회색
+    color: "#99AFCA",
   },
   Entertain: {
-    icon: RiYoutubeLine,
-    color: "#F24150", // RED - 엔터테인먼트는 활동적인 빨간색
+    icon: CgGym,
+    color: "#9ACD32",
   },
 
   // 학습 관련
   Study: {
     icon: RiBookOpenLine,
-    color: "#4285F4", // BLUE - 학습은 신뢰감 있는 파란색
+    color: "#4285F4",
   },
   Research: {
     icon: RiSearchLine,
-    color: "#2B4158", // GRAY_900 - 연구는 깊이 있는 진한 회색
+    color: "#2B4158",
   },
   Book: {
-    icon: RiBookLine,
-    color: "#8B4513", // BROWN - 독서는 책을 연상시키는 갈색
+    icon: RiBookmarkLine,
+    color: "#8B4513",
   },
 
   // 협업 관련
   Team: {
     icon: RiGroupLine,
-    color: "#1BBF44", // GREEN - 팀워크는 긍정적인 초록색
+    color: "#FF8C00",
   },
   Shared: {
-    icon: RiShareLine,
-    color: "#4285F4", // BLUE - 공유는 소통을 의미하는 파란색
+    icon: MdOutlinePlace,
+    color: "#4285F4",
   },
   Feedback: {
     icon: RiDiscussLine,
-    color: "#A142FE", // PURPLE - 피드백은 창의적인 보라색
+    color: "#A142FE",
   },
 
   plus: {