[REFACTOR] 파일 구조 정리

src/features/home/index.ts

@@ -2,6 +2,8 @@ export { useGetCompany } from "./api/company";
 export { usePostRecommendPostList } from "./api/recommendation";
 export { MYPAGE_TAP, TAB_MAP } from "./consts/tab";
 export { useCompanyStore } from "./model/useCompanyStore";
+export { useHomePage } from "./model/useHomePage";
+export { useHomeSearchParams } from "./model/useHomeSearchParams";
 export { CompanyFilterList } from "./ui/CompanyFilterList";
 export { default as InterestPage } from "./ui/InterestPage";
 export { default as PostCardList } from "./ui/PostCardList";

src/features/home/model/useHomePage.ts

@@ -0,0 +1,54 @@
+import useUserStore from "@/shared/model/useUserStore";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useGetCompany } from "../api/company";
+import { usePostRecommendPostList } from "../api/recommendation";
+import { useCompanyStore } from "./useCompanyStore";
+import { useHomeSearchParams } from "./useHomeSearchParams";
+
+export const useHomePage = () => {
+  const [modal, setModal] = useState(false);
+  const { companies, toggleCompany, resetCompanies } = useCompanyStore();
+  const { user } = useUserStore();
+  const isLogin = !!user?.accessToken;
+  const navigate = useNavigate();
+  const { data: companyData } = useGetCompany();
+  const { mutate: postRecommendList, isPending: isRefreshing } =
+    usePostRecommendPostList();
+  const { searchQuery, selectedTab, isSearching, setSelectedTab } =
+    useHomeSearchParams();
+  const maxCompany = companyData?.companies.slice(0, 8) ?? [];
+
+  useEffect(() => {
+    return () => {
+      resetCompanies();
+    };
+  }, [resetCompanies]);
+
+  const handleTabChange = (tab: number) => {
+    if (tab === 1 && !isLogin) {
+      toast.info("로그인이 필요한 서비스입니다.");
+      navigate("/login");
+      return;
+    }
+
+    setSelectedTab(tab);
+  };
+
+  return {
+    modal,
+    setModal,
+    companies,
+    toggleCompany,
+    isLogin,
+    companyData,
+    maxCompany,
+    searchQuery,
+    selectedTab,
+    isSearching,
+    postRecommendList,
+    isRefreshing,
+    handleTabChange,
+  };
+};

src/features/home/model/useHomeSearchParams.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export const useHomeSearchParams = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const searchQuery = searchParams.get("search") ?? "";
+  const selectedTab = Number(searchParams.get("tab") ?? 0);
+  const isSearching = !!searchQuery.trim();
+
+  useEffect(() => {
+    if (!searchParams.get("tab") && !searchParams.get("search")) {
+      setSearchParams({ tab: "0" }, { replace: true });
+    }
+  }, [searchParams, setSearchParams]);
+
+  const setSelectedTab = (tab: number) => {
+    setSearchParams({ tab: String(tab) }, { replace: true });
+  };
+
+  return {
+    searchQuery,
+    selectedTab,
+    isSearching,
+    setSelectedTab,
+  };
+};

src/features/home/ui/CompanyFilterList.tsx

@@ -31,7 +31,6 @@ export const CompanyFilterList = ({
       ),
     [companyData.companies],
   );
-
   return (
     <>
       <div className="flex items-center gap-4 flex-wrap pb-6 font-strong">
@@ -64,15 +63,7 @@ export const CompanyFilterList = ({
             onClick={() => toggleCompany(item.company)}
           />
         ))}
-        {/* <img
-          src={modal ? PopOn : PopOff}
-          alt="toggle modal"
-          className="mb-6 cursor-pointer "
-          onClick={e => {
-            e.stopPropagation();
-            setModal(pre => !pre);
-          }}
-        /> */}
+
         <div
           onClick={e => {
             e.stopPropagation();

src/features/mypage/consts/settings.ts

@@ -0,0 +1,59 @@
+import { FileText, Info, LockKeyhole, MessageSquare, Moon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+export interface SettingItem {
+  icon: LucideIcon;
+  label: string;
+  isArrow?: boolean;
+  isToggle?: boolean;
+  version?: string;
+  dark?: boolean;
+  onClick?: () => void;
+  onClickDark?: () => void;
+}
+
+interface GetSettingListDataParams {
+  isDark: boolean;
+  toggleTheme: () => void;
+  onAskClick: () => void;
+  onTerm: () => void;
+}
+
+export const getSettingListData = ({
+  isDark,
+  toggleTheme,
+  onAskClick,
+  onTerm,
+}: GetSettingListDataParams): SettingItem[] => {
+  return [
+    {
+      icon: Moon,
+      label: "다크 모드",
+      onClickDark: toggleTheme,
+      dark: isDark,
+      isToggle: true,
+    },
+    {
+      icon: Info,
+      label: "서비스 버전",
+      version: "1.0.0",
+    },
+    {
+      icon: FileText,
+      label: "이용 약관",
+      isArrow: true,
+      onClick: onTerm,
+    },
+    {
+      icon: LockKeyhole,
+      label: "개인정보 처리방침",
+      isArrow: true,
+    },
+    {
+      icon: MessageSquare,
+      label: "문의 하기",
+      isArrow: true,
+      onClick: onAskClick,
+    },
+  ];
+};

src/features/mypage/index.ts

@@ -1,9 +1,16 @@
 export { usePutMyInterst } from "./api/myEdit";
 export { INTERESTS_MOCK } from "./consts/interests";
 export { ASK_MAP, MYPAGE_NAV } from "./consts/mypage";
+export { getSettingListData } from "./consts/settings";
+export { useEditInterestCategoryStore } from "./model/useEditInterestCategoryStore";
+export { useAskForm } from "./model/useAskForm";
 export { useEditTagStore } from "./model/useEditTagStore";
+export { useEditInterestPage } from "./model/useEditInterestPage";
 export { useInfiniteActivityPosts } from "./model/useInfiniteActivityPosts";
 export { AskConfirmModal } from "./ui/AskConfirmModal";
+export { EditAsidePage } from "./ui/EditAsidePage";
+export { EditInterestSummary } from "./ui/EditInterestSummary";
+export { EditInterestTechSection } from "./ui/EditInterestTechSection";
 export { InterstBtn } from "./ui/IntersetBtn";
 export { LeaveModal } from "./ui/LeaveModal";
 export { ProfileEditHeader } from "./ui/ProfileEditHeader";

src/features/mypage/model/useAskForm.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState, type MouseEvent } from "react";
+
+export const useAskForm = () => {
+  const [isAsk, setIsAsk] = useState(false);
+  const [askContent, setAskContent] = useState("");
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [confirmModal, setConfirmModal] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+
+  const activeBtn =
+    title.length > 2 && content.length > 2 && askContent.length > 0;
+
+  const handleAsk = (e: MouseEvent, value: string) => {
+    e.stopPropagation();
+    setAskContent(value);
+    setIsAsk(false);
+  };
+
+  const handleSubmitForm = () => {
+    setConfirmModal(true);
+    setTitle("");
+    setAskContent("");
+    setContent("");
+  };
+
+  return {
+    isAsk,
+    askContent,
+    title,
+    content,
+    confirmModal,
+    activeBtn,
+    setIsAsk,
+    setTitle,
+    setContent,
+    setConfirmModal,
+    handleAsk,
+    handleSubmitForm,
+  };
+};

src/features/mypage/model/useEditInterestCategoryStore.ts

@@ -0,0 +1,17 @@
+import { INTERESTS_MOCK } from "@/features/mypage/consts/interests";
+import { create } from "zustand";
+
+interface EditInterestCategoryStoreProps {
+  selectedCategory: string;
+  setSelectedCategory: (categoryCode: string) => void;
+  resetSelectedCategory: () => void;
+}
+
+export const useEditInterestCategoryStore =
+  create<EditInterestCategoryStoreProps>(set => ({
+    selectedCategory: INTERESTS_MOCK.interests[0].code,
+    setSelectedCategory: categoryCode =>
+      set({ selectedCategory: categoryCode }),
+    resetSelectedCategory: () =>
+      set({ selectedCategory: INTERESTS_MOCK.interests[0].code }),
+  }));

src/features/mypage/model/useEditInterestPage.ts

@@ -0,0 +1,58 @@
+import { useGetMyInterest } from "@/shared/api/my";
+import { useEffect } from "react";
+import { usePutMyInterst } from "../api/myEdit";
+import { useEditInterestCategoryStore } from "./useEditInterestCategoryStore";
+import { useEditTagStore } from "./useEditTagStore";
+
+export const useEditInterestPage = () => {
+  const { selectedTags, setFromServer, originalTags, resetTag } =
+    useEditTagStore();
+  const { data } = useGetMyInterest();
+  const resetSelectedCategory = useEditInterestCategoryStore(
+    state => state.resetSelectedCategory,
+  );
+  const handleSaveInterest = usePutMyInterst();
+
+  useEffect(() => {
+    if (originalTags.length === 0) {
+      const serverTags = data.flatMap(item =>
+        item.keywords.map(keywordCode => `${item.category}:${keywordCode}`),
+      );
+      setFromServer(serverTags);
+    }
+  }, [data, originalTags.length, setFromServer]);
+
+  useEffect(() => {
+    return () => {
+      resetTag();
+      resetSelectedCategory();
+    };
+  }, [resetSelectedCategory, resetTag]);
+
+  const handleSave = () => {
+    const categoryMap: Record<string, string[]> = {};
+
+    selectedTags.forEach(code => {
+      const [categoryCode, keywordCode] = code.split(":");
+      if (!categoryCode || !keywordCode) return;
+
+      if (!categoryMap[categoryCode]) {
+        categoryMap[categoryCode] = [];
+      }
+
+      categoryMap[categoryCode].push(keywordCode);
+    });
+
+    handleSaveInterest.mutate({
+      interests: Object.entries(categoryMap).map(([category, keywords]) => ({
+        category,
+        keywords,
+      })),
+    });
+  };
+
+  return {
+    modalSaving: handleSaveInterest.isPending,
+    handleSave,
+  };
+};

src/features/mypage/ui/EditAsidePage.tsx

@@ -0,0 +1,58 @@
+import { INTERESTS_MOCK } from "@/features/mypage/consts/interests";
+import { useMemo, useRef } from "react";
+import { useEditInterestCategoryStore } from "../model/useEditInterestCategoryStore";
+import { useEditTagStore } from "../model/useEditTagStore";
+import { TagItem } from "./TagItem";
+
+export const EditAsidePage = () => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const selectedTags = useEditTagStore(state => state.selectedTags);
+  const selectedCategory = useEditInterestCategoryStore(
+    state => state.selectedCategory,
+  );
+  const setSelectedCategory = useEditInterestCategoryStore(
+    state => state.setSelectedCategory,
+  );
+  const myInterestMap = useMemo(
+    () =>
+      selectedTags.reduce<Record<string, number>>((acc, code) => {
+        const [categoryCode] = code.split(":");
+        if (!categoryCode) return acc;
+        acc[categoryCode] = (acc[categoryCode] ?? 0) + 1;
+        return acc;
+      }, {}),
+    [selectedTags],
+  );
+
+  const scrollToTop = () => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+
+  return (
+    <aside
+      ref={scrollRef}
+      className="w-75 border-x border-b border-bgNormal bg-sub-400 px-6 text-[#8B95A1]"
+    >
+      <h6 className="py-4 body-r-14">카테고리</h6>
+
+      <ul className="scrollbar-style flex h-150 w-65 flex-col overflow-scroll overflow-x-hidden">
+        {INTERESTS_MOCK.interests.map(item => {
+          const count = myInterestMap[item.code] ?? 0;
+
+          return (
+            <TagItem
+              key={item.code}
+              tag={item.label}
+              length={count}
+              selected={item.code === selectedCategory}
+              onClick={() => {
+                setSelectedCategory(item.code);
+                scrollToTop();
+              }}
+            />
+          );
+        })}
+      </ul>
+    </aside>
+  );
+};