[feat] 채팅 수정사항 반영

src/routes/rooms/components/ChatRoomHeader.tsx → src/components/common/NavigationHeader.tsx

@@ -1,14 +1,11 @@
-
 type Props = {
-  title: string;
-  subtitle: string;
-  subTitleClass?: string;
-  onBack?: () => void;
+  title: string; // 텍스트
+  onBack?: () => void; //onBack={() => history.back()} 뒤로가기
 };
 
-export default function ChatRoomHeader({ title, subtitle, subTitleClass, onBack }: Props) {
+export default function NavigationHeader({ title, onBack }: Props) {
   return (
-    <div className="h-[60px] flex items-center px-4 py-[10px] bg-[#F6F6FF]">
+    <div className="h-[60px] flex items-center px-4 py-[10px] bg-[#FFFFFF]">
       <button
         type="button"
         onClick={onBack}
@@ -28,9 +25,6 @@ export default function ChatRoomHeader({ title, subtitle, subTitleClass, onBack
 
       <div className="flex-1 text-center">
         <div className="text-Title1 text-black text-4">{title}</div>
-        {subtitle ? (
-          <div className={["text-Semibold text-[12px] text", subTitleClass ?? "text-[#9B9BA1]"].join(" ")}>{subtitle}</div>
-        ) : null}
       </div>
 
       {/* 오른쪽 여백 맞추기 */}

src/data/chat-room.ts

@@ -1,4 +1,4 @@
-import { type ChatRoom } from "../routes/_main/chat/types/ChatRoom";
+import { type ChatRoom } from "../routes/_main/chat/ChatList";
 
 export const rooms: ChatRoom[] = [
   {
@@ -7,19 +7,19 @@ export const rooms: ChatRoom[] = [
     lastMessage: "안녕하세요! 제안 확인 부탁드립니다.안녕하세요 제안 확인 부탁드립니다 안녕하세요 제안 확인 부탁드립니다 안녕하세요 제안 확인 부탁드립니다",
     updatedAt: new Date().toISOString(),
     unreadCount: 2,
-    status: "matching",
     logoUrl: "",
     type: "sent",
+    isCollaborating: true,
   },
   {
     id: "2",
     brandName: "라운드랩",
     lastMessage: "검토 중입니다!",
     updatedAt: "2025-01-05T10:00:00",
     unreadCount: 0,
-    status: "reviewing",
     logoUrl: "",
-    type: "received",
+    type: "sent",
+    isCollaborating: false,
   },
 ];
 

src/routes/_main/mypage/_components/ConfirmModal.tsx → src/routes/_main/_mypage/components/ConfirmModal.tsx

@@ -39,7 +39,7 @@ export default function ConfirmModal({
           ) : null}
         </div>
 
-        {/* buttons – 맨 아래 고정 */}
+        {/* buttons */}
         <div className="mt-auto px-5 pb-4">
           <div className="flex gap-3">
             <button

src/routes/_main/_mypage/components/profileCard.tsx/MatchingResult.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_main/_mypage/components/profileCard/tsx/MatchingResult',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>Hello "/_main/mypage/components/profileCard/tsx/MatchingResult"!</div>
+  )
+}

src/routes/_main/_mypage/components/profileCard.tsx/MyCampaigns.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_main/_mypage/components/profileCard/tsx/MyCampaigns',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>Hello "/_main/mypage/components/profileCard/tsx/MyCampaigns"!</div>
+  )
+}

src/routes/_main/_mypage/components/profileCard.tsx/MyTraits.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_main/_mypage/components/profileCard/tsx/MyTraits',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_main/mypage/components/profileCard/tsx/MyTraits"!</div>
+}

src/routes/_main/_mypage/components/profileCard.tsx/ProfileSummary.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_main/_mypage/components/profileCard/tsx/ProfileSummary',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>Hello "/_main/mypage/components/profileCard/tsx/ProfileSummary"!</div>
+  )
+}

src/routes/_main/_mypage/components/profileCard.tsx/SnsCard.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_main/_mypage/components/profileCard/tsx/SnsCard',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_main/mypage/components/profileCard/tsx/SnsCard"!</div>
+}

src/routes/_main/_mypage/edit/edit-content.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_main/_mypage/edit/edit-content')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_main/mypage/edit"!</div>
+}

src/routes/_main/mypage/edit.tsx → src/routes/_main/_mypage/edit/route.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/_main/mypage/edit')({
+export const Route = createFileRoute('/_main/_mypage/edit')({
   component: RouteComponent,
 })
 

src/routes/_main/mypage/likes.tsx → src/routes/_main/_mypage/likes/likes-content.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/_main/mypage/likes')({
+export const Route = createFileRoute('/_main/_mypage/likes/likes-content')({
   component: RouteComponent,
 })
 

src/routes/_main/mypage/inquiry.tsx → src/routes/_main/_mypage/likes/route.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/_main/mypage/inquiry')({
+export const Route = createFileRoute('/_main/_mypage/likes')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/_main/mypage/inquiry"!</div>
+  return <div>Hello "/_main/mypage/likes"!</div>
 }

src/routes/_main/mypage/MyPageHome.tsx → src/routes/_main/_mypage/mypage/MyPageHome.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import ConfirmModal from "./_components/ConfirmModal";
+import ConfirmModal from "../components/ConfirmModal";
 
 type Props = {
   // 서버/스토어에서 내려오는 값이라고 가정
@@ -36,7 +36,6 @@ export default function MyPageHome({
   onLogout,
   onWithdraw,
 }: Props) {
-  // hasMatchingTest가 false면 gate 모달을 바로 열기 위해 초기값으로 설정
   const [openGate, setOpenGate] = useState(!hasMatchingTest);
   const [openLogout, setOpenLogout] = useState(false);
   const [openWithdraw, setOpenWithdraw] = useState(false);
@@ -80,7 +79,7 @@ export default function MyPageHome({
         </div>
 
         {/* top buttons */}
-        <div className="flex max-w-[398px] gap-[10px]">
+        <div className="flex w-full max-w-[398px] gap-[10px]">
           <button
             type="button"
             onClick={onOpenProfileCard}
@@ -108,15 +107,17 @@ export default function MyPageHome({
         </div>
       </div>
 
+      <div className="w-full max-w-[375px] h-[10px] bg-[#F3F3FA]"></div>
+
       {/* list */}
       <div >
-        <MenuButton title="내 정보" label="회원정보 변경" onClick={onOpenEditProfile} py={11} gap={6} />
+        <MenuButton title="내 정보" label="회원정보 변경" onClick={onOpenEditProfile} py={11} />
         <Divider />
 
-        <MenuButton label="알림 설정" onClick={onOpenNotifications} py={16} gap={6} />
+        <MenuButton label="알림 설정" onClick={onOpenNotifications} py={16}/>
         <Divider />
 
-        <MenuButton title="고객센터" label="문의하기" onClick={onOpenInquiry} py={11} gap={6} />
+        <MenuButton title="고객센터" label="문의하기" onClick={onOpenInquiry} py={11} />
         <Divider />
 
         <div className="px-5 pt-[11px] pb-[5px]">
@@ -140,10 +141,10 @@ export default function MyPageHome({
         </div>
         <Divider />
 
-        <MenuButton title="" label="로그아웃" onClick={() => setOpenLogout(true)} py={16} gap={6} />
+        <MenuButton title="" label="로그아웃" onClick={() => setOpenLogout(true)} py={16} />
         <Divider />
 
-        <MenuButton label="회원탈퇴" onClick={() => setOpenWithdraw(true)} muted={true} py={16} gap={6} />        
+        <MenuButton label="회원탈퇴" onClick={() => setOpenWithdraw(true)} muted={true} py={16} />        
       </div>
 
       {/* gate modal */}
@@ -162,7 +163,7 @@ export default function MyPageHome({
           onClose={() => setOpenLogout(false)}
           onPrimary={() => {
             setOpenLogout(false);
-            onLogout(); // ✅ MyPageContent에서 로그인 페이지 이동 처리
+            onLogout(); // MyPageContent에서 로그인 페이지 이동 처리
           }}
         />
       ) : null}
@@ -176,7 +177,7 @@ export default function MyPageHome({
           onClose={() => setOpenWithdraw(false)}
           onPrimary={() => {
             setOpenWithdraw(false);
-            onWithdraw(); // ✅ 탈퇴 페이지 이동 or API 호출로 연결
+            onWithdraw(); // 탈퇴 페이지 이동 or API 호출로 연결
           }}
         />
       ) : null}
@@ -186,44 +187,52 @@ export default function MyPageHome({
 }
 
 function MenuButton({
-  title, label, onClick, muted, py, gap = 6,
-}: {title?: string; label: string; onClick: () => void; muted?: boolean; py?: number; gap?: number; }) {
+  title, label, onClick, muted, py,
+}: {
+  title?: string;
+  label: string;
+  onClick: () => void;
+  muted?: boolean;
+  py?: number;
+}) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={[
-        "w-full text-left rounded-none",
-        "transition-colors active:bg-[#E6E6EB]", // 눌림 회색
-        muted ? "text-[#B7B7BF]" : "text-[#111]",
-      ].join(" ")}
-      style={{
-        paddingLeft: 20,
-        paddingRight: 20,
-        paddingTop: py,
-        paddingBottom: py,
-      }}
-    >
-      <div className="flex flex-col" style={{ gap }}>
-        {title && (
-          <div
-            className={[
-              "text-[10px] leading-[12px] style-Regular text-[#5B5D6B]",
-              muted ? "opacity-70" : "",
-            ].join(" ")}
-          >
-            {title}
-          </div>
-        )}
+    <div className="w-full">
+      {title && (
+        <div
+          className={[
+            "px-5 pt-[11px] pb-[5px]",
+            "text-[10px] leading-[12px] text-[#5B5D6B]",
+            muted ? "opacity-70" : "",
+          ].join(" ")}
+        >
+          {title}
+        </div>
+      )}
 
-        <div className="text-[14px] leading-[20px] style-Medium">
+      {/* label */}
+      <div className="px-5">
+        <button
+          type="button"
+          onClick={onClick}
+          className={[
+            "w-full text-left rounded-none",
+            "transition-colors active:bg-[#E6E6EB]",
+            muted ? "text-[#B7B7BF]" : "text-[#111]",
+            "text-[14px] leading-[20px] style-Medium",
+          ].join(" ")}
+          style={{
+            paddingTop: py,
+            paddingBottom: py,
+          }}
+        >
           {label}
-        </div>
+        </button>
       </div>
-    </button>
+    </div>
   );
 }
 
+
 function Divider() {
   return <div className="mx-5 h-px bg-[#F0F0F4]" />;
 }
@@ -241,22 +250,24 @@ function GateModal({
       <div className="absolute inset-0 bg-black/45" />
 
       {/* modal */}
-      <div className="absolute left-1/2 top-1/2 w-[320px] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5 shadow-xl">
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute left-4 top-4 text-[#9B9BA1]"
-          aria-label="닫기"
-        >
-          ✕
-        </button>
+      <div className="absolute left-1/2 top-1/2 w-[320px] h-[320px] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5 shadow-xl">
+        <div className="relative w-[270px] h-[24px]">
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute left-0 top-0 text-[#9B9BA1]"
+            aria-label="닫기"
+          >
+            ✕
+          </button>
+        </div>  
 
-        <div className="flex flex-col items-center pt-6">
-          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#5B5CEB]">
+        <div className="flex flex-col items-center pt-8">
+          <div className="flex h-[64px] w-[64px] items-center justify-center rounded-full bg-[#5B5CEB]">
             <span className="text-[28px] font-bold text-white">!</span>
           </div>
 
-          <div className="mt-5 text-center text-[18px] font-semibold text-[#111] leading-6">
+          <div className="mt-8 text-center text-[18px] font-semibold text-[#111] leading-6">
             매칭 검사를
             <br />
             먼저 진행해주세요
@@ -265,7 +276,7 @@ function GateModal({
           <button
             type="button"
             onClick={onGoTest}
-            className="mt-6 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-[#5B5CEB] text-[15px] font-semibold text-white"
+            className="mt-8 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-[#5B5CEB] text-[15px] font-semibold text-white"
           >
             <span className="inline-flex h-5 w-5 items-center justify-center">
               <svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">