feat: 프로필 수정 기능 추가

Author: djk01281

apps/frontend/package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query": "^5.59.19",
     "@tiptap/extension-collaboration": "^2.9.1",
     "@tiptap/extension-collaboration-cursor": "^2.9.1",
+    "@uiw/react-color": "^2.3.2",
     "@xyflow/react": "^12.3.4",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",

apps/frontend/src/components/LogoBtn.tsx

@@ -1,9 +1,12 @@
 import logo from "/logo.png?url";
 
-export default function LogoBtn() {
+interface LogoBtnProps {
+  onClick?: () => void;
+}
+export default function LogoBtn({ onClick }: LogoBtnProps) {
   return (
-    <div className="h-8 w-8 overflow-clip rounded-md">
+    <button className="h-8 w-8 overflow-clip rounded-md" onClick={onClick}>
       <img src={logo} />
-    </div>
+    </button>
   );
 }

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

@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import Button from "../commons/button";
+import { Dialog } from "../commons/dialog";
+import { Compact } from "@uiw/react-color";
+import useUserStore from "@/store/useUserStore";
+
+type RemoveNoteModalProps = {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCloseModal: () => void;
+};
+
+export default function ProfileModal({
+  isOpen,
+  onConfirm,
+  onCloseModal,
+}: RemoveNoteModalProps) {
+  const { currentUser, setCurrentUser, provider } = useUserStore();
+  const [hex, setHex] = useState(currentUser.color);
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [nickname, setNickname] = useState(currentUser.clientId);
+
+  useEffect(() => {
+    setNickname(currentUser.clientId);
+    setHex(currentUser.color);
+  }, [currentUser]);
+
+  return (
+    <Dialog isOpen={isOpen} onCloseModal={onCloseModal}>
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <Dialog.Title>프로필 수정</Dialog.Title>
+        </div>
+        <div className="flex flex-row items-center gap-3">
+          <button
+            className="h-12 w-12 rounded-full border-[1px] border-black"
+            style={{ backgroundColor: hex }}
+            onClick={() => setIsColorPickerOpen(!isColorPickerOpen)}
+          />
+
+          <input
+            className={
+              "h-10 rounded-md border-[1px] border-[#eaeaea] p-2 text-sm text-[#141414] outline-none"
+            }
+            placeholder="닉네임을 입력하세요"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+          />
+        </div>
+        <div className="">
+          {isColorPickerOpen && (
+            <Compact color={hex} onChange={(color) => setHex(color.hex)} />
+          )}
+        </div>
+
+        <div className="flex w-full flex-row justify-between gap-2">
+          <Button
+            className="w-full rounded-lg bg-[#171717] text-neutral-100 hover:bg-slate-800"
+            onClick={() => {
+              provider.awareness.setLocalStateField("color", hex);
+              provider.awareness.setLocalStateField("clientId", nickname);
+
+              setCurrentUser({
+                ...currentUser,
+                color: hex,
+                clientId: nickname,
+              });
+
+              onConfirm();
+            }}
+          >
+            확인
+          </Button>
+          <Button
+            className="w-full rounded-lg bg-[#f4f4f5] text-neutral-700 hover:bg-neutral-200"
+            onClick={onCloseModal}
+          >
+            취소
+          </Button>
+        </div>
+      </div>
+      <Dialog.CloseButton onCloseModal={onCloseModal} />
+    </Dialog>
+  );
+}

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

@@ -1,13 +1,29 @@
 import VerticalDivider from "@/components/commons/divider/VerticalDivider";
 import WorkspaceNav from "@/components/WorkspaceNav";
 import LogoBtn from "@/components/LogoBtn";
-
+import ProfileModal from "./ProfileModal";
 import workspaceLogo from "@/../public/workspace-logo.svg?url";
+import { useState } from "react";
 
 export default function TopNav() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <div className="flex items-center gap-2">
-      <LogoBtn />
+      <LogoBtn
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      />
+      <ProfileModal
+        isOpen={isModalOpen}
+        onCloseModal={() => {
+          setIsModalOpen(false);
+        }}
+        onConfirm={() => {
+          setIsModalOpen(false);
+        }}
+      />
       <VerticalDivider className="h-3" />
       <WorkspaceNav imageUrl={workspaceLogo} workspaceTitle="프로젝트 Web15" />
     </div>