Feat/65 mypage refactor

app/components/common/FilterBottomSheet.tsx

@@ -44,7 +44,7 @@ export default function FilterBottomSheet({ isOpen, onClose, children, className
             <div
                 onAnimationEnd={handleAnimationEnd}
                 className={cn(
-                    "relative w-full max-w-[375px] bg-white rounded-t-3xl",
+                    "relative w-full max-w-[430px] bg-white rounded-t-3xl",
                     "flex flex-col",
                     animateClass,
                     className || "h-[60%]"

app/routes.ts

@@ -55,6 +55,11 @@ export default [
     route("mypage", "routes/mypage/route.tsx", [
       index("routes/mypage/mypage/route.tsx"),
       route("profileCard", "routes/mypage/profileCard/route.tsx"),
+      route("traits", "routes/mypage/traits/route.tsx"),
+      route("notification", "routes/mypage/notification/route.tsx", [
+        index("routes/mypage/notification/index.tsx"),
+        route("marketing", "routes/mypage/notification/marketing/route.tsx"),
+      ]),
       route("edit", "routes/mypage/edit/route.tsx"),
       route("likes", "routes/mypage/likes/route.tsx"),
       route("privacy", "routes/mypage/privacy/route.tsx"),
@@ -70,4 +75,4 @@ export default [
 
   // 404 Catch-all
   route("*", "routes/not-found.tsx"),
-] satisfies RouteConfig;
+] satisfies RouteConfig;

app/routes/business/components/FilterBottomSheet.tsx

@@ -5,17 +5,22 @@ interface FilterBottomSheetProps {
   onClose: () => void;
   onApply: (filter: string) => void;
   currentFilter: string;
+  filters?: string[];
+  title?: string;
 }
 
-const FILTERS = ["전체", "검토 중", "매칭", "거절"];
+const DEFAULT_FILTERS = ["전체", "검토 중", "매칭", "거절"];
 
 export default function FilterBottomSheet({
   isOpen,
   onClose,
   onApply,
   currentFilter,
+  filters,
+  title = "정렬 필터",
 }: FilterBottomSheetProps) {
   const [selected, setSelected] = useState(currentFilter);
+  const filterOptions = filters ?? DEFAULT_FILTERS;
 
   if (!isOpen) return null;
 
@@ -36,14 +41,14 @@ export default function FilterBottomSheet({
         {/* 1. 헤더 영역 */}
         <div className="px-4 pt-8 pb-4">
           <div className="inline-block border-b-2 border-[var(--color-core-1)] pb-1">
-            <span className="text-title7 text-[var(--color-text-black)]">정렬 필터</span>
+            <span className="text-title7 text-[var(--color-text-black)]">{title}</span>
           </div>
         </div>
 
         {/* 2. 필터 옵션 영역 */}
         <div className="w-full bg-[var(--color-bluegray-1)] py-4">
           <div className="flex items-center justify-start gap-8 px-4">
-            {FILTERS.map((filter) => (
+            {filterOptions.map((filter) => (
               <button
                 key={filter}
                 onClick={() => setSelected(filter)}
@@ -74,4 +79,4 @@ export default function FilterBottomSheet({
       </div>
     </div>
   );
-}
+}

app/routes/chat/chat-content.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { SORT_LABEL, type SortOption } from "./components/SortingSheetConstant";
 import { useEffect } from "react";
 import { ChatListHeader } from "./components/ChatListHeader";
@@ -19,7 +19,7 @@ function ChatPage() {
   // 바텀탭 숨기기
   useHideBottomTab(isSortOpen);
 
-  const fetchRooms = async () => {
+  const fetchRooms = useCallback(async () => {
     setLoading(true);
     try {
       const data = await getChatRooms({
@@ -34,11 +34,11 @@ function ChatPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [sort]);
 
   useEffect(() => {
     fetchRooms();
-  }, [sort]);
+  }, [fetchRooms]);
 
   const openSortSheet = () => {
     setPendingSort(sort);
@@ -77,4 +77,4 @@ function ChatPage() {
   );
 }
 
-export default ChatPage;
+export default ChatPage;

app/routes/chat/components/SortingSheet.tsx

@@ -1,22 +1,40 @@
-import { type SortOption } from "./SortingSheetConstant";
+import { SORT_LABEL, type SortOption } from "./SortingSheetConstant";
 
 // 정렬, 필터 옵션 (최신순/협업 중)
 
-export function SortFilterSheet({
+type SortOptionItem<T extends string> = {
+  label: string;
+  value: T;
+};
+
+const DEFAULT_OPTIONS: SortOptionItem<SortOption>[] = [
+  { label: SORT_LABEL.latest, value: "latest" },
+  { label: SORT_LABEL.collaborating, value: "collaborating" },
+];
+
+export function SortFilterSheet<T extends string = SortOption>({
   open,
   value,
   onChange,
   onClose,
   onApply,
+  options,
+  title = "정렬 필터",
+  applyLabel = "적용하기",
 }: {
   open: boolean;
-  value: SortOption;
-  onChange: (v: SortOption) => void;
+  value: T;
+  onChange: (v: T) => void;
   onClose: () => void;
   onApply: () => void;
+  options?: SortOptionItem<T>[];
+  title?: string;
+  applyLabel?: string;
 }) {
   if (!open) return null;
 
+  const sheetOptions = (options ?? DEFAULT_OPTIONS) as SortOptionItem<T>[];
+
   return (
     <div className="fixed inset-0 z-50">
       {/* 딤(배경) */}
@@ -29,21 +47,19 @@ export function SortFilterSheet({
 
       {/* 시트 */}
       <div className="fixed left-1/2 -translate-x-1/2 top-[235px] w-full max-w-[430px] h-[530px] bg-white rounded-t-[12px] pt-[20px] px-4 flex flex-col">
-        <div className="w-full max-w-[430px] h-[70px] fixed left-1/2 -translate-x-1/2"> 
-          <div className="px-4 text-Medium text-text-black mb-3">정렬 필터</div>
+        <div className="w-full max-w-[430px] h-[70px] fixed left-1/2 -translate-x-1/2">
+          <div className="px-4 text-Medium text-text-black mb-3">{title}</div>
 
           <div className="bg-[#F3F4F8] px-4 py-3">
             <div className="flex gap-6">
-              <SortOptionButton
-                label="최신순"
-                active={value === "latest"}
-                onClick={() => onChange("latest")}
-              />
-              <SortOptionButton
-                label="협업 중"
-                active={value === "collaborating"}
-                onClick={() => onChange("collaborating")}
-              />
+              {sheetOptions.map((option) => (
+                <SortOptionButton
+                  key={option.value}
+                  label={option.label}
+                  active={value === option.value}
+                  onClick={() => onChange(option.value)}
+                />
+              ))}
             </div>
           </div>
         </div>
@@ -54,7 +70,7 @@ export function SortFilterSheet({
             onClick={onApply}
             className="w-full max-w-[327px] h-11 rounded-[12px] bg-[#6666E5] text-white text-SemiBold"
           >
-            적용하기
+            {applyLabel}
           </button>
         </div>
       </div>
@@ -81,4 +97,4 @@ function SortOptionButton({
   );
 }
 
-export default SortFilterSheet;
+export default SortFilterSheet;

app/routes/mypage/components/MyPageHome.tsx

@@ -4,7 +4,7 @@ import GateModal from "./mypage/GateModal";
 import MenuButton from "./mypage/MenuButton";
 
 type Props = {
-  hasMatchingTest: boolean;
+  hasMatchingTest: boolean | null;
   user: {
     name: string;
     roleText?: string;
@@ -16,7 +16,6 @@ type Props = {
   onOpenLikes: () => void;
   onOpenEditProfile: () => void;
   onOpenNotifications: () => void;
-  onOpenInquiry: () => void;
   onOpenTerms: () => void;
   onOpenPrivacy: () => void;
   onLogout: () => void;
@@ -31,17 +30,16 @@ export default function MyPageHome({
   onOpenLikes,
   onOpenEditProfile,
   onOpenNotifications,
-  onOpenInquiry,
   onOpenTerms,
   onOpenPrivacy,
   onLogout,
   onWithdraw,
 }: Props) {
-  const [openGate, setOpenGate] = useState(!hasMatchingTest);
+  const [gateDismissed, setGateDismissed] = useState(false);
   const [openLogout, setOpenLogout] = useState(false);
   const [openWithdraw, setOpenWithdraw] = useState(false);
 
-  //const actionsDisabled = useMemo(() => !hasMatchingTest, [hasMatchingTest]); 매칭검사 안했을 시
+  const openGate = hasMatchingTest === false && !gateDismissed;
 
   return (
     <div className="min-h-screen bg-white">
@@ -155,7 +153,13 @@ export default function MyPageHome({
         <MenuButton
           title="고객센터"
           label="문의하기"
-          onClick={onOpenInquiry}
+          onClick={() =>
+            window.open(
+              "https://open.kakao.com/o/sPvvelfi",
+              "_blank",
+              "noopener,noreferrer",
+            )
+          }
           py={11}
         />
         <Divider />
@@ -202,7 +206,7 @@ export default function MyPageHome({
       {/* gate modal */}
       {openGate ? (
         <GateModal
-          onClose={() => setOpenGate(false)}
+          onClose={() => setGateDismissed(true)}
           onGoTest={onGoMatchingTest}
         />
       ) : null}