main 최신화

.husky/pre-commit

@@ -4,4 +4,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 echo "✅ Lint-staged 시작..."
-yarn lint-staged
+npx lint-staged

package.json

@@ -14,6 +14,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
+    "ignore": ["src/legacy-components/**"],
     "src/**/*.{js,jsx,ts,tsx}": [
       "eslint --fix --cache",
       "prettier --write"

src/amplitude.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface Window {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      amplitude: any;
+    }
+  }
+
+  export {};

src/common/CheckList.tsx

@@ -10,6 +10,8 @@ import { useDeleteTodoMutation } from '@hook/todo/useDeleteTodoMutation';
 import { ReactTagManager } from 'react-gtm-ts';
 import { useAddTodoMutation } from '@hook/todo/useAddTodoMutation.ts';
 import Plus from '@assets/icons/plus.svg?react';
+import AddIcon from '@assets/icons/AddIcon.svg?react';
+import BookMarkIcon from '@assets/icons/bookmark.svg?react';
 import { useUpdateTodoMutation } from '@hook/todo/useUpdateTodoMutation.ts';
 
 type ChecklistItem = string | { id?: number; text: string };
@@ -72,6 +74,17 @@ const CheckList = ({
     if (!trimmedText) return;
 
     if (isAddingNew) {
+      // Amplitude 이벤트 - 할일 추가 시도 (inpage)
+      if (window.amplitude) {
+        window.amplitude.track('todo_create', {
+          source_method: 'inpage',
+          source_page: window.location.pathname,
+          todo_length: trimmedText.length,
+          timestamp: new Date().toISOString(),
+        });
+        console.log('Amplitude event sent: todo_create_attempt (inpage)');
+      }
+
       mutate(
         { todoTitle: trimmedText },
         {
@@ -222,7 +235,7 @@ const CheckList = ({
 
             <div className="ml-auto flex min-w-fit items-center gap-[5px]">
               {isMyToPage && (
-                <div className="flex flex-row gap-[5px] opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                <div className="flex flex-row gap-[5px]">
                   {isEditing ? (
                     <>
                       <button
@@ -250,6 +263,14 @@ const CheckList = ({
                     </>
                   ) : (
                     <>
+                      <div className="mr-3 flex items-center gap-1 text-gray-500">
+                        <AddIcon className="h-[18px] w-[18px]" />
+                        <span className="text-sm font-B03-SB">3</span>
+                      </div>
+                      <div className="mr-3 flex items-center gap-1 text-gray-500">
+                        <BookMarkIcon className="h-[18px] w-[18px]" />
+                        <span className="text-sm font-B03-SB">999</span>
+                      </div>
                       <button
                         onClick={() => handleEdit(idx)}
                         className="flex items-center gap-[6px] rounded-[10px] bg-gray-100 px-3 py-2 text-gray-500 font-B03-SB"

src/common/Divider.tsx

@@ -3,7 +3,7 @@ interface DividerProps {
 }
 
 const Divider = ({ className }: DividerProps) => {
-  return <div className={`h-px w-full bg-gray-300 ${className ?? ''}`} />;
+  return <div className={`h-px w-full ${className ?? ''}`} />;
 };
 
 export default Divider;

src/common/FloatingButton.tsx

@@ -18,11 +18,25 @@ const FloatingButton = () => {
     }, 2500);
   };
 
+  const handleFloatingButtonClick = () => {
+    // Amplitude 이벤트 - 플로팅 버튼 클릭
+    if (typeof window !== 'undefined' && 'amplitude' in window && window.amplitude) {
+      (window as any).amplitude.track('todo_create', {
+        source_method: 'floating',
+        source_page: window.location.pathname,
+        timestamp: new Date().toISOString(),
+      });
+      console.log('Amplitude event sent: todo_create_start (floating)');
+    }
+
+    setIsModal(true);
+  };
+
   return (
     <div>
       <button
         className="fixed bottom-[50px] right-[80px] flex h-[102px] items-center gap-[10px] rounded-[28px] bg-purple-500 px-[30px] shadow-shadow4 transition-colors hover:bg-purple-600"
-        onClick={() => setIsModal(true)}
+        onClick={handleFloatingButtonClick}
       >
         <div
           className="cursor-pointer text-white font-T02-B"

src/common/Header.tsx

@@ -14,7 +14,8 @@ const NavItems = [
     label: '직업 정보',
     path: '/jobfound',
     match: (pathname: string) =>
-      pathname.startsWith('/jobfound') && pathname !== '/jobsearch',
+      pathname.startsWith('/jobfound') ||
+      (pathname.startsWith('/jobinfo') && pathname !== '/jobsearch'),
   },
   //배움터 찾기
   { label: '학원 정보', path: '/learning' },
@@ -28,11 +29,15 @@ const NavItems = [
       pathname.startsWith('/others') || pathname.startsWith('/community'),
   },
 
+  {
+    label: '스크랩',
+    path: '/mytodo/scrap',
+  },
+
   //마이드림
   {
     label: '나의 할일',
     path: '/mytodo/list',
-    match: (pathname: string) => pathname.startsWith('/mytodo'),
   },
 ];
 

src/common/Tag.tsx

@@ -0,0 +1,23 @@
+interface TagProps {
+  context: string;
+  fontClass?: string;
+  width?: string;
+  height?: string;
+}
+
+const Tag = ({
+  context,
+  fontClass = 'font-T05-SB',
+  width = 'w-auto',
+  height = 'h-auto',
+}: TagProps) => {
+  return (
+    <div
+      className={`flex items-center justify-center rounded-[10px] bg-purple-100 p-2 text-purple-500 ${fontClass} ${width} ${height}`}
+    >
+      {context}
+    </div>
+  );
+};
+
+export default Tag;

src/common/modal/FloatingModal.tsx

@@ -8,6 +8,10 @@ import { ReactTagManager } from 'react-gtm-ts';
 import { useAddTodoMutation } from '@hook/todo/useAddTodoMutation';
 import Fire from '@assets/icons/fire.svg?react';
 import Reset from '@assets/icons/reset.svg?react';
+import {
+  useFloatingPopular,
+  useNoLoginFloatingPopular,
+} from '@hook/floating/useFloatingPopular';
 
 interface FloatingModalProps {
   onClose: () => void;
@@ -22,6 +26,27 @@ const FloatingModal = ({ onClose, onAddTask }: FloatingModalProps) => {
 
   const { mutate } = useAddTodoMutation();
   const { data: hasJob, isLoading } = useMdTodoQuery();
+  const {
+    data: hot,
+    isLoading: loadingLogin,
+    refetch: refetchLogin,
+  } = useFloatingPopular({
+    enabled: isLoggedIn,
+    queryKey: [],
+  });
+
+  const {
+    data: hotGuest,
+    isLoading: loadingGuest,
+    refetch: refetchGuest,
+  } = useNoLoginFloatingPopular({
+    enabled: !isLoggedIn,
+    queryKey: [],
+  });
+
+  const hotList = isLoggedIn ? hot : hotGuest;
+  const isHotLoading = isLoggedIn ? loadingLogin : loadingGuest;
+  const refreshHot = isLoggedIn ? refetchLogin : refetchGuest;
 
   const hasNoJob =
     isLoggedIn &&
@@ -34,6 +59,17 @@ const FloatingModal = ({ onClose, onAddTask }: FloatingModalProps) => {
   const handleSubmit = () => {
     if (!isLoggedIn || !taskText.trim() || hasNoJob) return;
 
+    // Amplitude 이벤트 - 할일 추가 시도
+    if (window.amplitude) {
+      window.amplitude.track('todo_create', {
+        source_method: 'floating',
+        source_page: location.pathname,
+        todo_length: taskText.trim().length,
+        timestamp: new Date().toISOString(),
+      });
+      console.log('Amplitude event sent: todo_create_attempt');
+    }
+
     mutate(
       {
         todoTitle: taskText,
@@ -61,20 +97,29 @@ const FloatingModal = ({ onClose, onAddTask }: FloatingModalProps) => {
           <div className="text-black font-T03-B">바로 할일 추가</div>
         </div>
 
-        <div className="mt-[22px] flex w-full flex-row items-center rounded-[8px] bg-gray-100 p-3">
-          <div className="flex flex-row items-center gap-[6px]">
-            <Fire />
-            <div className="text-gray-900 font-B03-SB"> 인기</div>
-          </div>
+        <div className="mt-[22px] w-full rounded-[8px] bg-gray-100 p-3">
+          <div className="flex items-center">
+            <div className="flex shrink-0 items-center gap-[6px]">
+              <Fire />
+              <span className="text-gray-900 font-B03-SB">인기</span>
+            </div>
 
-          <div className="mx-[10px] h-4 w-[1px] bg-gray-400" />
+            <div className="mx-[10px] h-4 w-[1px] shrink-0 bg-gray-400" />
 
-          <div className="text-gray-600 font-B03-M">
-            요양보호사 카페 주소 검색하고 가입하기
-          </div>
+            <div className="min-w-0 flex-1">
+              <span className="block truncate text-gray-600 font-B03-M">
+                {isHotLoading
+                  ? '인기 목록을 불러오는 중입니다...'
+                  : (hotList?.title ?? '인기데이터가 없습니다')}
+              </span>
+            </div>
 
-          <div className="ml-[83px] cursor-pointer">
-            <Reset />
+            <div
+              className="shrink-0 cursor-pointer"
+              onClick={() => refreshHot()}
+            >
+              <Reset />
+            </div>
           </div>
         </div>
 

src/hook/community/query/useCommunityGetTodo.ts

@@ -0,0 +1,79 @@
+import api from '@hook/api';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+export interface CommunityItem {
+  id: number;
+  name: string;
+  level: string;
+  imageUrl?: string;
+  dDay?: string;
+  description: string;
+  saveCount: number;
+  isSaved: boolean;
+}
+
+export interface CommunityGetTodoResponse {
+  content: CommunityItem[];
+  number: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+  numberOfElements: number;
+  pageable: {
+    pageNumber: number;
+  };
+  sort: { empty: boolean; sorted: boolean; unsorted: boolean };
+}
+
+type BaseParams = {
+  jobName: string;
+  level: string;
+  sort: string;
+  size: number;
+};
+
+const fetchCommunityPage = async ({
+  jobName,
+  level,
+  sort,
+  page,
+  size,
+}: BaseParams & { page: number }): Promise<CommunityGetTodoResponse> => {
+  const token =
+    typeof window !== 'undefined' ? localStorage.getItem('accessToken') : null;
+
+  const res = await api.get('/v1/community/todos', {
+    params: { jobName, level, sort, page, size },
+    ...(token ? { headers: { Authorization: `Bearer ${token}` } } : {}),
+  });
+  const result = res.data?.data;
+
+  return {
+    content: result.content,
+    number: result.number,
+    size: result.size,
+    first: result.first,
+    last: result.last,
+    empty: result.empty,
+    numberOfElements: result.numberOfElements,
+    pageable: { pageNumber: result.pageable?.pageNumber ?? page },
+    sort: result.sort,
+  };
+};
+
+export const useCommunityGetTodo = (params: BaseParams) => {
+  return useInfiniteQuery({
+    queryKey: ['CommunityGetTodo', params],
+    initialPageParam: 0,
+    queryFn: ({ pageParam }) =>
+      fetchCommunityPage({ ...params, page: pageParam as number }),
+
+    getNextPageParam: (lastPage) => {
+      if (lastPage.last) return undefined;
+      return lastPage.number + 1;
+    },
+
+    retry: 0,
+  });
+};

src/hook/community/query/useGetCommunityQuery.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import api from '@hook/api';
+
+export const useGetCommunityQuery = () => {
+  const isLoggedIn =
+    typeof window !== 'undefined' && !!localStorage.getItem('accessToken');
+
+  return useQuery({
+    queryKey: ['community', isLoggedIn],
+    queryFn: async () => {
+      const token =
+        typeof window !== 'undefined'
+          ? localStorage.getItem('accessToken')
+          : null;
+
+      const res = await api.get(
+        '/v1/community/job',
+        token ? { headers: { Authorization: `Bearer ${token}` } } : undefined
+      );
+
+      return res.data;
+    },
+    staleTime: 1000 * 60 * 5,
+    refetchOnWindowFocus: false,
+  });
+};