Develop

packages/back/src/data-source.ts

@@ -1,7 +1,7 @@
 import { ConfigService } from '@nestjs/config';
 import { config } from 'dotenv';
-import { DataSource, DataSourceOptions } from 'typeorm';
-import { SeederOptions } from 'typeorm-extension';
+import { DataSource, type DataSourceOptions } from 'typeorm';
+import type { SeederOptions } from 'typeorm-extension';
 
 config({
   path: './configs/env/.dev.env',

packages/front/src/app/chat/[id]/_components/RoomVisibilityToggle.tsx

@@ -0,0 +1,23 @@
+import { ToggleButton } from "@/app/_components";
+import { chatRoomMutations } from "@/app/_queries";
+import { useMutation } from "@tanstack/react-query";
+
+interface RoomVisibilityToggleProps {
+  roomId: number;
+  defaultChecked: boolean;
+}
+export default function RoomVisibilityToggle({
+  roomId,
+  defaultChecked,
+}: RoomVisibilityToggleProps) {
+  const { mutate: patchStatus } = useMutation(
+    chatRoomMutations.patchStatus(roomId),
+  );
+  return (
+    <ToggleButton
+      defaultChecked={defaultChecked}
+      onTurnOn={() => patchStatus({ chatRoomId: roomId, isPublic: true })}
+      onTurnOff={() => patchStatus({ chatRoomId: roomId, isPublic: false })}
+    />
+  );
+}

packages/front/src/app/chat/[id]/_components/SuspenseChatRoom.tsx

@@ -37,8 +37,8 @@ export default function SuspenseChatRoom() {
       const finalAiMessage: Message = {
         author: "Gemini",
         content: fullText,
-        senderName: user.nickname,
-        senderProfileImage: user.profileUrl,
+        senderName: roomInfo.persona.name,
+        senderProfileImage: roomInfo.persona.image,
         userId: user?.userId || "",
       };
       historyUpdater(finalAiMessage);

packages/front/src/app/chat/[id]/_components/SuspenseSideBar.tsx

@@ -1,16 +1,22 @@
 "use client";
 
-import { ProfileCard } from "@/app/chat/[id]/_components/";
+import {
+  ProfileCard,
+  RoomVisibilityToggle,
+} from "@/app/chat/[id]/_components/";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { IoChatboxEllipses } from "react-icons/io5";
 import { chatRoomQueries } from "@/app/_queries";
 import { useParams } from "next/navigation";
+import { useSuspenseAuth } from "@/app/_hooks";
 
 export default function SuspenseSideBar() {
   const { id } = useParams();
   const { data: roomInfo } = useSuspenseQuery(
     chatRoomQueries.detail(Number(id)),
   );
+  const user = useSuspenseAuth();
+
   return (
     <>
       <div className="dark:bg-gray-800 dark:border dark:border-r-2 dark:border-gray-700 flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0 hidden md:flex">
@@ -25,6 +31,15 @@ export default function SuspenseSideBar() {
           name={roomInfo.persona.name}
           profileUrl={roomInfo.persona.image}
         />
+        {user.userId === roomInfo.userId && (
+          <div className="w-full flex items-center mt-3 flex-col">
+            <span>채팅방 {roomInfo.isPublic ? "공개" : "비공개"}</span>
+            <RoomVisibilityToggle
+              defaultChecked={roomInfo.isPublic}
+              roomId={roomInfo.id}
+            />
+          </div>
+        )}
       </div>
     </>
   );

packages/front/src/app/chat/[id]/_components/index.ts

@@ -3,6 +3,7 @@ export { default as ChatCard } from "./ChatCard";
 export { default as ChatSendForm } from "./ChatSendForm";
 export { default as EmptyChatCard } from "./EmptyChatCard";
 export { default as ProfileCard } from "./ProfileCard";
-export { default as SuspenseSideBar } from "./SuspenseSideBar";
+export { default as RoomVisibilityToggle } from "./RoomVisibilityToggle";
 export { default as SuspenseChatList } from "./SuspenseChatList";
 export { default as SuspenseChatRoom } from "./SuspenseChatRoom";
+export { default as SuspenseSideBar } from "./SuspenseSideBar";

packages/front/src/app/chat/[id]/_hooks/useChat.ts

@@ -54,6 +54,7 @@ export const useChat = (
 
     newSocket.on("ai-stream-done", (data: { fullText: string }) => {
       setIsAiThinking(false);
+      console.log(data);
       options?.onStreamDone?.(data.fullText);
     });