[FE} feat: add feature to toggle post visibility on issue registration(…

…#121)

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@tanstack/react-query": "^5.59.15",
     "@types/dom-speech-recognition": "^0.0.4",

src/components/Conversation/Save/Header.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { usePreviouseRoomPatchMutate } from "@/hooks/Conversation/usePreviousRoomQuery";
 import { usePreviousRoomStore } from "@/stores/previousRoom.store";
+import { Switch } from "@/components/ui/switch";
 import { fromUint8Array } from "js-base64";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import * as Y from "yjs";
@@ -16,6 +17,12 @@ const ydocToBase64 = (ydoc: Y.Doc) => {
   return base64Encoded;
 };
 
+interface BodyType {
+  note: { data: string; isShared: boolean };
+  drawBoard: { data: string; isShared: boolean };
+  canShared: boolean;
+}
+
 const ConversationSaveHeader = ({
   initialTitle,
 }: ConversationSaveHeaderProps) => {
@@ -24,13 +31,16 @@ const ConversationSaveHeader = ({
   const { mutate: patchRoom } = usePreviouseRoomPatchMutate(postId);
   const noteYDoc = usePreviousRoomStore((state) => state.noteYdoc);
   const drawBoardYDoc = usePreviousRoomStore((state) => state.drawBoardYdoc);
+  const canShared = usePreviousRoomStore((state) => state.canShared);
+  const setCanShared = usePreviousRoomStore((state) => state.setCanShared);
   const navigate = useNavigate();
 
   const onPatchRoom = () => {
-    const body: Record<string, { data?: string; isShared?: boolean }> = {};
-    body["note"] = { data: ydocToBase64(noteYDoc) };
-    body["drawBoard"] = { data: ydocToBase64(drawBoardYDoc) };
-
+    const body: BodyType = {
+      note: { data: ydocToBase64(noteYDoc), isShared: true },
+      drawBoard: { data: ydocToBase64(drawBoardYDoc), isShared: true },
+      canShared: canShared,
+    };
     patchRoom(body, {
       onError: () => {
         alert("저장에 실패했습니다.");
@@ -51,6 +61,14 @@ const ConversationSaveHeader = ({
         <Input defaultValue={initialTitle} />
       </div>
       <div className="flex gap-4">
+        <div className="my-2 text-sm font-light">
+          {canShared ? "공개" : "비공개"}
+        </div>
+        <Switch
+          className="my-2"
+          checked={canShared}
+          onCheckedChange={setCanShared}
+        />
         <Button variant="secondary" asChild>
           <Link to="/room">목록으로</Link>
         </Button>

src/components/Conversation/Save/Tabs.tsx

@@ -18,6 +18,7 @@ const ConversationSaveTabs = () => {
   const setDrawBoardYdoc = usePreviousRoomStore(
     (state) => state.setDrawBoardYdoc,
   );
+  const setCanShared = usePreviousRoomStore((state) => state.setCanShared);
   const [drawBoardData, noteData, chatData, voiceData] = useFetchers([
     roomData.drawBoard.url,
     roomData.note.url,
@@ -28,8 +29,9 @@ const ConversationSaveTabs = () => {
   useEffect(() => {
     setNoteYdoc(new Y.Doc());
     setDrawBoardYdoc(new Y.Doc());
+    setCanShared(roomData.canShared);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [postId]);
 
   return (
     <>

src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

src/stores/previousRoom.store.ts

@@ -11,6 +11,8 @@ interface PreviousRoomStore {
   setNoteYdoc: (noteYdoc: Y.Doc) => void,
   voice: string,
   setVoice: (voice: string) => void,
+  canShared: boolean,
+  setCanShared: (canShared: boolean) => void,
 }
 
 export const usePreviousRoomStore = create<PreviousRoomStore>()((set) => ({
@@ -24,4 +26,6 @@ export const usePreviousRoomStore = create<PreviousRoomStore>()((set) => ({
   setNoteYdoc: (noteYdoc) => set({ noteYdoc }),
   voice: "",
   setVoice: (voice) => set({ voice }),
+  canShared: false,
+  setCanShared: (canShared) => set({ canShared }),
 }));