feat: 이모지 placeholder UI 구현

Co-authored-by: 김동준 <[email protected]>

Author: yewonJin

apps/frontend/src/components/canvas/NoteNode.tsx

@@ -8,7 +8,7 @@ import useUserStore from "@/store/useUserStore";
 import Emoji from "../commons/emoji";
 import { useEffect, useState } from "react";
 
-export type NoteNodeData = { title: string; id: number; emoji?: string };
+export type NoteNodeData = { title: string; id: number; emoji: string };
 export type NoteNodeType = Node<NoteNodeData, "note">;
 
 export function NoteNode({ data }: NodeProps<NoteNodeType>) {

apps/frontend/src/components/commons/emoji/index.tsx

@@ -1,13 +1,23 @@
 import { cn } from "@/lib/utils";
+import { FileText } from "lucide-react";
 import { Tailwindest } from "tailwindest";
 
 interface EmojiProps {
-  emoji: string;
+  emoji: string | null;
   width?: Tailwindest["width"];
   height?: Tailwindest["height"];
   fontSize?: Tailwindest["fontSize"];
 }
 
 export default function Emoji({ emoji, width, height, fontSize }: EmojiProps) {
+  if (!emoji)
+    return (
+      <FileText
+        className={cn("", width, height)}
+        strokeWidth="1.5px"
+        color="#91918e"
+      />
+    );
+
   return <div className={cn("", width, height, fontSize)}>{emoji}</div>;
 }

apps/frontend/src/components/editor/EditorTitle.tsx

@@ -7,6 +7,7 @@ import Emoji from "@/components/commons/emoji";
 import useYDocStore from "@/store/useYDocStore";
 import { useYText } from "@/hooks/useYText";
 import { useOptimisticUpdatePage } from "@/hooks/usePages";
+import { cn } from "@/lib/utils";
 
 interface EditorTitleProps {
   currentPage: number;
@@ -44,11 +45,11 @@ export default function EditorTitle({
     });
   };
 
-  const handleEmojiClick = (emoji: Emoji) => {
-    setYEmoji(emoji.native);
+  const handleEmojiClick = ({ native }: Emoji) => {
+    setYEmoji(native);
 
     optimisticUpdatePageMutation.mutate({
-      pageData: { title, content: pageContent, emoji: emoji.native },
+      pageData: { title, content: pageContent, emoji: native },
     });
 
     setIsEmojiPickerOpen(false);
@@ -64,21 +65,46 @@ export default function EditorTitle({
     setIsEmojiPickerOpen(false);
   };
 
+  const handleRemoveIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    setYEmoji("");
+
+    optimisticUpdatePageMutation.mutate({
+      pageData: { title, content: pageContent, emoji: "" },
+    });
+
+    setIsEmojiPickerOpen(false);
+  };
+
   return (
     <div className="flex flex-col gap-3">
-      <div className="relative">
-        <button onClick={handleTitleEmojiClick}>
-          <Emoji emoji={emoji} width="w-10" height="h-10" fontSize="text-6xl" />
-        </button>
-        <div
-          className={`top-18 absolute z-50 ${isEmojiPickerOpen ? "block" : "hidden"}`}
-        >
-          <Picker
-            theme="light"
-            previewPosition="none"
-            onEmojiSelect={handleEmojiClick}
-            onClickOutside={handleEmojiOutsideClick}
-          />
+      <div className="group">
+        <div className={cn("relative duration-200")}>
+          <button onClick={handleTitleEmojiClick}>
+            <Emoji
+              emoji={emoji}
+              width="w-16"
+              height="h-16"
+              fontSize="text-6xl"
+            />
+          </button>
+          <div
+            className={`top-18 absolute z-50 ${isEmojiPickerOpen ? "block" : "hidden"}`}
+          >
+            <button
+              onClick={handleRemoveIconClick}
+              className="absolute -top-8 right-0 z-10 rounded-md bg-neutral-50 p-1 px-2 text-sm hover:bg-neutral-200"
+            >
+              Remove
+            </button>
+            <Picker
+              theme="light"
+              previewPosition="none"
+              onEmojiSelect={handleEmojiClick}
+              onClickOutside={handleEmojiOutsideClick}
+            />
+          </div>
         </div>
       </div>
       <input

apps/frontend/src/components/sidebar/NoteList.tsx

@@ -36,18 +36,18 @@ export default function NoteList({ className }: NoteListProps) {
         <Button
           onClick={() => handleNoteClick(id)}
           key={id}
-          className="group flex flex-row justify-between gap-1 rounded-sm px-3 py-1 hover:bg-neutral-100"
+          className="group flex flex-row items-center justify-between gap-1 rounded-sm px-3 py-1 hover:bg-neutral-100"
         >
-          {emoji && <Emoji emoji={emoji} />}
-          <div className="w-full truncate text-start">{title}</div>
+          <Emoji emoji={emoji} width="w-5" height="h-5" />
+          <div className="flex-1 truncate text-start">{title}</div>
           <span
             className="hidden text-neutral-400 transition-colors group-hover:block hover:text-red-500"
             onClick={(e) => {
               e.stopPropagation();
               openModal(id);
             }}
           >
-            <Trash2 width={20} height={20} />
+            <Trash2 width={18} height={18} />
           </span>
         </Button>
       ))}