Merge branch 'release/0.1.7'

@noctaCrdt/Crdt.ts

@@ -294,12 +294,12 @@ export class BlockCRDT extends CRDT<Char> {
       });
     }
 
-    if (operation.color) {
-      newNode.color = operation.color;
+    if (operation.node.color) {
+      newNode.color = operation.node.color;
     }
 
-    if (operation.backgroundColor) {
-      newNode.backgroundColor = operation.backgroundColor;
+    if (operation.node.backgroundColor) {
+      newNode.backgroundColor = operation.node.backgroundColor;
     }
 
     this.LinkedList.insertById(newNode);

@noctaCrdt/Interfaces.ts

@@ -113,6 +113,13 @@ export interface RemoteBlockDeleteOperation {
   pageId: string;
 }
 
+export interface RemoteBlockCheckboxOperation {
+  type: "blockCheckbox";
+  blockId: BlockId;
+  isChecked: boolean;
+  pageId: string;
+}
+
 export interface RemoteCharDeleteOperation {
   type: "charDelete";
   targetId: CharId;

@noctaCrdt/Node.ts

@@ -51,6 +51,7 @@ export class Block extends Node<BlockId> {
   icon: string;
   crdt: BlockCRDT;
   listIndex?: number;
+  isChecked?: boolean;
 
   constructor(value: string, id: BlockId) {
     super(value, id);
@@ -72,6 +73,7 @@ export class Block extends Node<BlockId> {
       icon: this.icon,
       crdt: this.crdt.serialize(),
       listIndex: this.listIndex ? this.listIndex : null,
+      isChecked: this.isChecked ? this.isChecked : null,
     };
   }
 
@@ -87,6 +89,7 @@ export class Block extends Node<BlockId> {
     block.icon = data.icon;
     block.crdt = BlockCRDT.deserialize(data.crdt);
     block.listIndex = data.listIndex ? data.listIndex : null;
+    block.isChecked = data.isChecked ? data.isChecked : null;
     return block;
   }
 }

README.md

@@ -4,7 +4,9 @@
 
   <br>
 
-  ![image](https://github.com/user-attachments/assets/dba641b3-417d-4bb6-9c87-4cfc78d8324c)
+ ![ezgif com-crop](https://github.com/user-attachments/assets/df92040b-a3fd-4bef-8b45-b5ad9e813fca)
+
+
   <br>
 
 
@@ -102,7 +104,7 @@ Nocta에서 단순한 기록을 넘어, 새로운 글쓰기 경험을 시작하
 
 ## 시스템 아키텍처 다이어그램
 
-![image](https://github.com/user-attachments/assets/ab96462b-5f38-4dd9-9c72-984829fa873d)
+![제목 없음-2024-07-18-1129_2](https://github.com/user-attachments/assets/91c6477b-4acd-4dd5-bc93-9e204347bc10)
 
 
 ## 📅 프로젝트 기간

client/src/apis/auth.ts

@@ -1,13 +1,21 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 import { useUserActions } from "@stores/useUserStore";
 import { unAuthorizationFetch, fetch } from "./axios";
 
 const authKey = {
   all: ["auth"] as const,
   refresh: () => [...authKey.all, "refresh"] as const,
 };
+export interface ApiErrorResponse {
+  message: string;
+  code?: string;
+}
 
-export const useSignupMutation = (onSuccess: () => void) => {
+interface MutationOptions {
+  onError?: (error: AxiosError<ApiErrorResponse>) => void;
+}
+export const useSignupMutation = (onSuccess: () => void, options?: MutationOptions) => {
   const fetcher = ({ name, email, password }: { name: string; email: string; password: string }) =>
     unAuthorizationFetch.post("/auth/register", { name, email, password });
 
@@ -16,10 +24,10 @@ export const useSignupMutation = (onSuccess: () => void) => {
     onSuccess: () => {
       onSuccess();
     },
+    onError: options?.onError,
   });
 };
-
-export const useLoginMutation = (onSuccess: () => void) => {
+export const useLoginMutation = (onSuccess: () => void, options?: MutationOptions) => {
   const { setUserInfo } = useUserActions();
 
   const fetcher = ({ email, password }: { email: string; password: string }) =>
@@ -33,6 +41,7 @@ export const useLoginMutation = (onSuccess: () => void) => {
       setUserInfo(id, name, accessToken);
       onSuccess();
     },
+    onError: options?.onError,
   });
 };
 

client/src/components/inputField/InputField.style.ts

@@ -6,6 +6,7 @@ export const formGroup = css({
 
 export const inputContainer = css({
   position: "relative",
+  border: "1px solid white",
   borderRadius: "md",
   padding: "1",
   background: "white/30",

client/src/components/inputField/InputField.tsx

@@ -7,11 +7,25 @@ interface InputFieldProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  isError?: boolean;
 }
 
-export const InputField = ({ type, name, value, onChange, placeholder, Icon }: InputFieldProps) => (
+export const InputField = ({
+  type,
+  name,
+  value,
+  onChange,
+  placeholder,
+  Icon,
+  isError,
+}: InputFieldProps) => (
   <div className={formGroup}>
-    <div className={inputContainer}>
+    <div
+      className={inputContainer}
+      style={{
+        border: isError ? "1px solid #EF4444" : "none", // Using Tailwind's red-500 color
+      }}
+    >
       <input
         type={type}
         name={name}
@@ -22,6 +36,6 @@ export const InputField = ({ type, name, value, onChange, placeholder, Icon }: I
         required
       />
     </div>
-    {Icon && <Icon className={iconBox} />}
+    {Icon && <Icon className={`${iconBox} ${isError ? "c_red" : ""}`} />}
   </div>
 );

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

@@ -0,0 +1,29 @@
+import { css } from "@styled-system/css";
+
+export const container = css({
+  display: "flex",
+  gap: "4",
+  flexDirection: "column",
+});
+
+export const title = css({
+  color: "gray.700",
+  fontSize: "lg",
+  fontWeight: "medium",
+});
+
+export const input = css({
+  borderColor: "gray.200",
+  borderRadius: "md",
+  borderWidth: "1px",
+  width: "full",
+  paddingY: "2",
+  paddingX: "3",
+  _focus: {
+    outline: "none",
+    borderColor: "blue.500",
+  },
+  _hover: {
+    borderColor: "gray.300",
+  },
+});

client/src/components/modal/RenameModal.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { container, title, input } from "./RenameModal.style";
+import { Modal } from "./modal";
+
+interface RenameModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onRename: (newName: string) => void;
+  currentName: string;
+}
+
+export const RenameModal = ({ isOpen, onClose, onRename, currentName }: RenameModalProps) => {
+  const [name, setName] = useState(currentName);
+
+  const handleRename = () => {
+    if (name.trim()) {
+      onRename(name);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      primaryButtonLabel="변경하기"
+      primaryButtonOnClick={handleRename}
+      secondaryButtonLabel="취소"
+      secondaryButtonOnClick={onClose}
+    >
+      <div className={container}>
+        <h2 className={title}>워크스페이스 이름 변경</h2>
+        <input
+          className={input}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="새로운 워크스페이스 이름"
+        />
+      </div>
+    </Modal>
+  );
+};

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

@@ -2,7 +2,7 @@ import { css } from "@styled-system/css";
 
 export const menuItemWrapper = css({
   display: "flex",
-  gap: "md",
+  gap: "32px",
   alignItems: "center",
   width: "250px",
   padding: "md",
@@ -15,6 +15,7 @@ export const menuItemWrapper = css({
 export const textBox = css({
   color: "gray.700",
   fontSize: "md",
+  fontWeight: "medium",
 });
 
 export const menuButtonContainer = css({
@@ -24,7 +25,48 @@ export const menuButtonContainer = css({
     top: "100%",
     left: 0,
     width: "100%",
-    height: "4px", // top: calc(100% + 4px)와 동일한 값
+    height: "4px",
     content: '""',
   },
 });
+
+export const nameWrapper = css({
+  display: "flex",
+  gap: "1",
+  flexDirection: "column",
+  borderColor: "gray.200",
+  borderRadius: "md",
+  borderWidth: "1px",
+  padding: "sm",
+  borderStyle: "solid",
+  _hover: {
+    borderColor: "gray.300", // hover 시 테두리 색상 변경
+  },
+});
+export const workspaceInfo = css({
+  display: "flex",
+  gap: "0.5",
+  flexDirection: "column",
+});
+
+export const workspaceHeader = css({
+  display: "flex",
+  gap: "2",
+  alignItems: "center",
+});
+
+export const currentWorkspaceNameBox = css({
+  color: "gray.600",
+  fontSize: "sm",
+  fontWeight: "medium",
+});
+
+export const workspaceRole = css({
+  color: "gray.500",
+  fontSize: "xs",
+});
+
+export const userCount = css({
+  color: "gray.500",
+  fontSize: "xs",
+});