fix: 라우팅 문제 해결

app/routes/rooms/components/ChatRoomHeader.tsx → app/components/common/NavigateHeader.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>
 
       {/* 오른쪽 여백 맞추기 */}

app/data/chat-room.ts

@@ -1,4 +1,4 @@
-import { type ChatRoom } from "../routes/chat/types/ChatRoom";
+import { type ChatRoom } from "../routes/chat/ChatList";
 
 export const rooms: ChatRoom[] = [
   {
@@ -7,7 +7,6 @@ export const rooms: ChatRoom[] = [
     lastMessage: "안녕하세요! 제안 확인 부탁드립니다.안녕하세요 제안 확인 부탁드립니다 안녕하세요 제안 확인 부탁드립니다 안녕하세요 제안 확인 부탁드립니다",
     updatedAt: new Date().toISOString(),
     unreadCount: 2,
-    status: "matching",
     logoUrl: "",
     type: "sent",
     isCollaborating: true,
@@ -18,11 +17,8 @@ export const rooms: ChatRoom[] = [
     lastMessage: "검토 중입니다!",
     updatedAt: "2025-01-05T10:00:00",
     unreadCount: 0,
-    status: "reviewing",
     logoUrl: "",
-    type: "received",
+    type: "sent",
     isCollaborating: false,
   },
 ];
-
-// TODO: API 연결 전 임시 더미 데이터

app/hooks/useHideHeader.ts

@@ -0,0 +1,16 @@
+import { useContext, useLayoutEffect } from "react";
+import { LayoutContext } from "../routes/layout-context";
+
+export function useHideHeader(hide: boolean) {
+  const layout = useContext(LayoutContext);
+
+  useLayoutEffect(() => {
+    if (!layout) return;
+
+    layout.setHideHeader(hide);
+
+    return () => {
+      layout.setHideHeader(false);
+    };
+  }, [hide, layout]);
+}

app/routes.ts

@@ -52,7 +52,15 @@ export default [
       route(":chatId", "routes/rooms/$chatId.tsx"),
     ]),
 
-    route("mypage", "routes/mypage/route.tsx"),
+    route("mypage", "routes/mypage/route.tsx", [
+      index("routes/mypage/mypage/route.tsx"),
+      route("profileCard", "routes/mypage/profileCard/route.tsx"),
+      route("edit", "routes/mypage/edit/route.tsx"),
+      route("likes", "routes/mypage/likes/route.tsx"),
+      route("privacy", "routes/mypage/privacy/route.tsx"),
+      route("terms", "routes/mypage/terms/route.tsx")
+    ]),
+
 
     route("brand", "routes/brand/route.tsx"),
   ]),

app/routes/chat/ChatList.tsx

@@ -7,7 +7,7 @@ export type ChatRoom = {
   lastMessage: string;
   updatedAt: string;
   unreadCount: number;
-  logoUrl: string;
+  logoUrl: string; 
   type: "sent" | "received";
   isCollaborating: boolean;
 };
@@ -99,4 +99,4 @@ export function ChatListItem({ room }: { room: ChatRoom }) {
   );
 }
 
-export default ChatList;
+export default ChatList;

app/routes/chat/chat-content.tsx

@@ -1,22 +1,22 @@
 import { useState, useMemo } from "react";
 import { SORT_LABEL, type SortOption } from "./components/SortingSheetConstant";
 import { rooms } from "../../data/chat-room";
-import ChatListHeader from "./components/ChatListHeader";
+import { ChatListHeader } from "./components/ChatListHeader";
 import SortFilterSheet from "./components/SortingSheet";
 import ChatList from "./ChatList";
 import { EmptyChatState } from "./components/EmptyState";
 import { useHideBottomTab } from "../../hooks/useHideBottomTab";
 
 function ChatPage() {
   const [activeTab, setActiveTab] = useState<"sent" | "received">("sent"); // 보낸 제안 / 받은 제안 탭
-  const [isSortOpen, setIsSortOpen] = useState(false);    // 정렬 바텀시트
-  const [sort, setSort] = useState<SortOption>("latest"); // 현재 선택된 정렬 옵션
+  const [isSortOpen, setIsSortOpen] = useState(false); // 정렬 바텀시트
+  const [sort, setSort] = useState<SortOption>("latest"); // 최신순 / 협업중만
   const [pendingSort, setPendingSort] = useState<SortOption>(sort); // 바텀시트에서 고른 값
 
   // 바텀탭 숨기기 (바텀시트 열렸을 때)
   useHideBottomTab(isSortOpen);
 
-  // 받은제안/보낸제안 필터
+  // 받은/보낸 필터
   const filteredRooms = useMemo(() => {
     return rooms.filter((room) => room.type === activeTab);
   }, [activeTab]);
@@ -39,18 +39,17 @@ function ChatPage() {
   }, [filteredRooms, sort]);
 
   const openSortSheet = () => {
-    setPendingSort(sort); // 열 때 현재 적용값으로
+    setPendingSort(sort);
     setIsSortOpen(true);
   };
 
   const applySort = () => {
-    setSort(pendingSort); // 기준 적용
+    setSort(pendingSort);
     setIsSortOpen(false);
   };
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-[#F6F6FF] via-[#F3F3FA] to-[#E8E8FB]">
-
       <main className="p-4 pb-16">
         <ChatListHeader
           activeTab={activeTab}
@@ -60,11 +59,7 @@ function ChatPage() {
           sortOpen={isSortOpen}
         />
 
-        {sortedRooms.length === 0 ? (
-          <EmptyChatState />
-        ) : (
-          <ChatList rooms={sortedRooms} />
-        )}
+        {sortedRooms.length === 0 ? <EmptyChatState /> : <ChatList rooms={sortedRooms} />}
       </main>
 
       <SortFilterSheet

app/routes/chat/components/ChatListHeader.tsx

@@ -1,5 +1,5 @@
 import searchIcon from "../../../assets/search2.svg";
-import closeIcon from "../../../assets/cancel.svg";
+import closeIcon from "../../../assets/cancel.svg"; 
 import { useState } from "react";
 
 export function ChatListHeader({
@@ -11,7 +11,7 @@ export function ChatListHeader({
   sortLabel: string;
   onClickSort: () => void;
   sortOpen: boolean;
-
+  
 }) {
   const [query, setQuery] = useState("");
 
@@ -22,15 +22,15 @@ export function ChatListHeader({
       {/* 검색 입력창 */}
       <div className="flex items-center w-full relative bg-bg-w border border-core-2 rounded-[8px] px-3 py-2">
         <img src={searchIcon} alt="search" className="w-4 h-4 opacity-40" />
-
+        
         <input
           className="flex-1 bg-transparent mx-2 outline-none text-body1 text-center placeholder:text-text-gray3"
           placeholder="검색어 입력"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
         />
 
-        <button
+        <button 
           onClick={() => setQuery("")}
           className="flex-shrink-0"
         >

app/routes/chat/components/SortingSheet.tsx

@@ -29,7 +29,7 @@ export function SortFilterSheet({
 
       {/* 시트 */}
       <div className="fixed left-1/2 -translate-x-1/2 top-[235px] w-full max-w-[375px] h-[530px] bg-white rounded-t-[12px] pt-[20px] px-4 flex flex-col">
-        <div className="w-full max-w-[375px] h-[70px] fixed left-1/2 -translate-x-1/2">
+        <div className="w-full max-w-[375px] h-[70px] fixed left-1/2 -translate-x-1/2"> 
           <div className="px-4 text-Medium text-text-black mb-3">정렬 필터</div>
 
           <div className="bg-[#F3F4F8] px-4 py-3">