Group page 채팅방 입니다

api/generated/motimo/Api.ts

@@ -291,6 +291,10 @@ export interface TodoResultRs {
   content?: string;
   /** 투두 기록 파일 url */
   fileUrl?: string;
+  /** 투두 기록 파일 이름 */
+  fileName?: string;
+  /** 투두 기록 파일 데이터 종류 */
+  fileMimeType?: string;
 }
 
 export interface TodoRs {
@@ -421,6 +425,12 @@ export interface GroupMemberRs {
   isActivePoke?: boolean;
 }
 
+export type GoalTitleUpdatedContent = GroupMessageContent & {
+  /** @format uuid */
+  goalId?: string;
+  goalTitle?: string;
+};
+
 /** 그룹 메시지 응답 */
 export interface GroupChatRs {
   /** 메시지 목록 */
@@ -493,6 +503,12 @@ export interface GroupMessageItemRs {
   sendAt: string;
 }
 
+export type MessageReactionContent = GroupMessageContent & {
+  /** @format uuid */
+  referenceMessageId?: string;
+  reactionType?: MessageReactionContentReactionTypeEnum;
+};
+
 export type TodoCompletedContent = GroupMessageContent & {
   /** @format uuid */
   todoId?: string;
@@ -508,6 +524,8 @@ export type TodoResultSubmittedContent = GroupMessageContent & {
   emotion?: TodoResultSubmittedContentEmotionEnum;
   content?: string;
   fileUrl?: string;
+  fileName?: string;
+  mimeType?: string;
 };
 
 export interface JoinedGroupRs {
@@ -811,6 +829,8 @@ export enum GroupMessageContentTypeEnum {
   LEAVE = "LEAVE",
   TODO_COMPLETE = "TODO_COMPLETE",
   TODO_RESULT_SUBMIT = "TODO_RESULT_SUBMIT",
+  GOAL_TITLE_UPDATE = "GOAL_TITLE_UPDATE",
+  MESSAGE_REACTION = "MESSAGE_REACTION",
 }
 
 /**
@@ -823,8 +843,10 @@ export enum GroupMessageContentTypeEnum {
 interface BaseGroupMessageContentRs {
   /** 메시지 내용 */
   content:
+    | GoalTitleUpdatedContent
     | GroupJoinContent
     | GroupLeaveContent
+    | MessageReactionContent
     | TodoCompletedContent
     | TodoResultSubmittedContent;
 }
@@ -833,6 +855,14 @@ type BaseGroupMessageContentRsTypeMapping<Key, Type> = {
   type: Key;
 } & Type;
 
+export enum MessageReactionContentReactionTypeEnum {
+  GOOD = "GOOD",
+  COOL = "COOL",
+  CHEER_UP = "CHEER_UP",
+  BEST = "BEST",
+  LIKE = "LIKE",
+}
+
 export enum TodoResultSubmittedContentEmotionEnum {
   PROUD = "PROUD",
   REGRETFUL = "REGRETFUL",
@@ -1950,7 +1980,7 @@ export class Api<SecurityDataType extends unknown> {
      * @summary 그룹 나가기 API
      * @request DELETE:/v1/groups/{groupId}/members/me
      * @secure
-     * @response `200` `void` OK
+     * @response `204` `void` No Content
      */
     exitGroup: (groupId: string, params: RequestParams = {}) =>
       this.http.request<void, any>({

app/details/[goal_id]/_components/DetailsBody/DetailBody.tsx

@@ -125,7 +125,7 @@ const DetailBody = ({ goalId }: DetailBodyProps) => {
                   type="button"
                   className="w-6 h-6 relative overflow-hidden text-label-assistive"
                 >
-                  <Link href={`/group/${groupId}`}>
+                  <Link href={`/group/${groupId}?from=details`}>
                     <RightArrowSvg />
                   </Link>
                 </button>

app/group/[id]/page.tsx

@@ -1,102 +1,34 @@
 "use client";
 
-import { use } from "react";
-import { AppBar } from "@/components/shared/AppBar/AppBar";
-import { GroupChat, SystemMessage } from "@/components/group";
-import { UsersGroupIcon } from "@/components/icons";
-import { useSafeRouter } from "@/hooks/useSafeRouter";
 import {
-  useGroupChat,
-  useGroupDetail,
-  useJoinedGroups,
-  useMyProfile,
-} from "@/api/hooks";
-import { GetGroupChatParamsDirectionEnum } from "@/api/generated/motimo/Api";
-interface GroupDetailPageProps {
-  params: Promise<{
-    id: string;
-  }>;
-}
-
-export default function GroupDetailPage({ params }: GroupDetailPageProps) {
-  const { id } = use(params);
-  const { data: { name: title } = {}, error } = useGroupDetail(id);
-
-  const { data: groupChat } = useGroupChat(
-    id,
-    "0",
-    "0",
-    GetGroupChatParamsDirectionEnum.AFTER,
-  );
-  const router = useSafeRouter();
-
-  const handleBackClick = () => {
-    router.push("/group");
-  };
-
-  const handleReactionClick = (messageId: string) => {
-    console.log("Reaction clicked for message:", messageId);
-    // TODO: Implement reaction functionality
-  };
-
-  const handleMemberClick = () => {
-    router.push(`/group/${id}/member`);
-  };
-
-  const { data: { nickname } = {} } = useMyProfile();
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
+import GroupChatRoom from "@/components/group/groupRoom/GroupChatRoom/GroupChatRoom";
+import GroupRoomHeader from "@/components/group/groupRoom/GroupRoomHeader/GroupRoomHeader";
+import { useGroupDetail } from "@/api/hooks";
+
+export default function GroupRoom() {
+  const { id: groupId } = useParams<{ id: string }>();
+  const { data } = useGroupDetail(groupId);
+  const router = useRouter();
+  const fromPath = useSearchParams().get("from");
 
   return (
-    <div className="flex flex-col h-screen bg-white">
-      {/* Status Bar Placeholder - 무시 */}
-
-      {/* AppBar */}
-      <div className="flex items-center justify-between px-3 py-2 h-14 bg-white">
-        <button
-          onClick={handleBackClick}
-          className="flex items-center justify-center w-6 h-6"
-          aria-label="뒤로 가기"
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path
-              d="M15 18L9 12L15 6"
-              stroke="#33363D"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-
-        <h1 className="flex-1 ml-5 font-SUIT_Variable font-bold text-xl leading-[1.2] tracking-[-0.01em] text-black truncate">
-          {title}
-        </h1>
-
-        <button
-          onClick={handleMemberClick}
-          className="flex items-center justify-center w-10 h-10 rounded-full"
-          aria-label="그룹 멤버 보기"
-        >
-          <UsersGroupIcon width={24} height={24} color="#464C53" />
-        </button>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 overflow-y-auto">
-        {/* System Message */}
-        <div className="px-4 py-4">
-          <SystemMessage message={`${nickname}님이 그룹에 입장했습니다.`} />
-        </div>
-
-        {/* Chat Messages */}
-        <div className="px-4 pb-4">
-          <GroupChat
-            messages={groupChat?.messages ?? []}
-            onReactionClick={handleReactionClick}
-          />
-        </div>
-      </div>
-
-      {/* Bottom Gesture Bar Placeholder - 무시 */}
-    </div>
+    <main className="flex flex-col gap-4 bg-background-alternative min-h-screen pb-4 relative">
+      <GroupRoomHeader
+        groupRoomName={data?.name ?? ""}
+        onBackClick={() => {
+          if (fromPath && fromPath === "details") {
+            router.back();
+          }
+          router.push("/group");
+        }}
+        routeToMember={() => router.push(`/group/${groupId}/member`)}
+      />
+      <GroupChatRoom groupId={groupId} />
+    </main>
   );
 }

components/group/GroupChat.tsx

@@ -4,6 +4,7 @@ import {
   GroupMessageItemRs,
   TodoResultSubmittedContent,
 } from "@/api/generated/motimo/Api";
+import { useMyProfile } from "@/api/hooks";
 
 interface GroupChatProps {
   messages: GroupMessageItemRs[];
@@ -16,18 +17,21 @@ export const GroupChat = ({
   className,
   onReactionClick,
 }: GroupChatProps) => {
+  const { data } = useMyProfile();
+
   return (
     <div className={cn("flex flex-col gap-4 w-full", className)}>
       {messages.map((m) => (
         <GroupChatItem
           key={m.messageId}
           id={m.messageId}
-          userId={m.userId}
+          // userId={m.userId}
+          type={m.userId === data?.id ? "me" : "member"}
           style={"todo"}
           hasUserReacted={m.hasUserReacted}
           reactionCount={m.reactionCount}
           userName={m.userName}
-          mainText={m.message as TodoResultSubmittedContent}
+          mainText={(m.message as TodoResultSubmittedContent).content ?? ""}
           checkboxLabel={"checkboxLabel"}
           isChecked={true}
           diaryText={"다이어리 텍스트"}

components/group/GroupChatItem.tsx

@@ -17,15 +17,18 @@ import {
 } from "@/api/generated/motimo/Api";
 
 interface GroupChatItemProps {
-  style: "todo" | "photo" | "diary" | "reaction";
+  type: "me" | "member";
+  style: "todo" | "reaction";
   hasUserReacted?: boolean;
   reactionCount?: number;
   userName: string;
-  userId: string;
-  mainText: TodoResultSubmittedContent;
+  // userId: string;
+  mainText: string;
   checkboxLabel?: string;
   isChecked?: boolean;
   diaryText?: string;
+  // fileUrl?: string;
+  fileName?: string;
   photoUrl?: string;
   reactionType?: ReactionTypes;
   className?: string;
@@ -104,14 +107,17 @@ export const GroupChatItem = ({
   isChecked = true,
   diaryText,
   photoUrl,
+  fileName,
   reactionType = "best",
   className,
   onReactionClick,
   id,
-  userId: senderId,
+  type,
+  // userId: senderId,
 }: GroupChatItemProps) => {
   const { data: myProfile } = useMyProfile();
-  const isMe = myProfile?.id === senderId;
+  // const isMe = myProfile?.id === senderId;
+  const isMe = type === "me";
 
   return (
     <div
@@ -165,9 +171,10 @@ export const GroupChatItem = ({
         <div
           className={cn(
             "bg-[#F7F7F8] rounded-lg",
-            style === "todo" && "py-3 px-4",
-            style === "photo" && "p-3 w-[248px]",
-            style === "diary" && "p-3 w-[248px]",
+            style === "todo" &&
+              `py-3 px-4 ${diaryText || photoUrl ? "w-[248px]" : ""}`,
+            // style === "photo" && "p-3 w-[248px]",
+            // style === "diary" && "p-3 w-[248px]",
             style === "reaction" && "py-3 px-4 w-[248px]",
           )}
         >
@@ -177,36 +184,53 @@ export const GroupChatItem = ({
             <div className="flex flex-col gap-1">
               {/* Main text */}
               <span className="font-SUIT_Variable font-bold text-sm leading-[1.4] tracking-[-0.01em] text-[#33363D]">
-                {mainText.content}
+                {mainText}
               </span>
 
               {/* Checkbox for todo, photo, and diary styles */}
-              {(style === "todo" || style === "photo" || style === "diary") &&
-                checkboxLabel && (
-                  <ChatCheckbox checked={isChecked} label={checkboxLabel} />
-                )}
+              {/* {(style === "todo" || style === "photo" || style === "diary") && */}
+              {style === "todo" && checkboxLabel && (
+                <ChatCheckbox checked={isChecked} label={checkboxLabel} />
+              )}
             </div>
 
             {/* Photo for photo style */}
-            {style === "photo" && photoUrl && (
+            {/* {style === "photo" && photoUrl && ( */}
+            {style === "todo" && photoUrl && (
               <div className="w-[116px] h-[116px] rounded-lg border border-[#CDD1D5] overflow-hidden">
-                <Image
-                  src={photoUrl}
-                  alt="첨부 이미지"
-                  width={116}
-                  height={116}
-                  className="w-full h-full object-cover"
-                />
+                {photoUrl.startsWith("http") ? (
+                  <Image
+                    src={photoUrl}
+                    alt="첨부 이미지"
+                    width={116}
+                    height={116}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <p className="font-['SUIT_Variable']"> Invalid URL path</p>
+                )}
               </div>
             )}
 
             {/* Diary text for diary style */}
-            {style === "diary" && diaryText && (
+            {/* {style === "diary" && diaryText && ( */}
+            {style === "todo" && diaryText && (
               <p className="font-SUIT_Variable font-medium text-sm leading-[1.4] tracking-[-0.01em] text-[#464C53]">
                 {diaryText}
               </p>
             )}
 
+            {style === "todo" && fileName && (
+              <div
+                className="pl-4 pr-3 py-2 relative bg-background-assistive rounded-lg inline-flex flex-col justify-center items-start gap-2 overflow
+            -hidden"
+              >
+                <p className="justify-start text-label-normal text-sm font-bold font-['SUIT_Variable'] leading-tight">
+                  {fileName}
+                </p>
+              </div>
+            )}
+
             {/* Reaction illustration for reaction style */}
             {style === "reaction" && (
               <ReactionIllustration type={reactionType} />

components/group/ReactionModal.tsx

@@ -27,7 +27,11 @@ const ReactionModal = ({ onLeaveReaction, onClose }: ReactionModalProps) => {
               <p className="justify-start text-label-strong text-base font-bold font-['SUIT_Variable'] leading-tight">
                 리액션
               </p>
-              <button className="w-6 h-6 relative overflow-hidden">
+              <button
+                onClick={() => onClose()}
+                type="button"
+                className="w-6 h-6 relative overflow-hidden"
+              >
                 <CloseSvg />
               </button>
             </div>