[REFACTOR] 오류 해결 및 추가 요구사항 반영 (토스트, 툴팁, 경로별 할일 제한)

frontend/src/components/FavoriteTab/FavoriteTab.styled.ts

@@ -1,5 +1,47 @@
+import { Link } from 'react-router';
 import styled from 'styled-components';
 
+export const SloganWrapper = styled.div`
+  padding: 1.6rem 2.4rem;
+  border-bottom: 0.15rem solid ${({ theme }) => theme.colors.gray100};
+`;
+
+export const Slogan = styled.p`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 1.2rem 0;
+  border-radius: 0.8rem;
+
+  background-color: ${({ theme }) => theme.colors.gray50};
+  white-space: pre-wrap;
+  text-align: center;
+
+  ${({ theme }) => theme.fonts.label14Med};
+  color: ${({ theme }) => theme.colors.gray900};
+`;
+
+export const WatchMoreLinkWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 1.2rem;
+`;
+
+export const WatchMoreLink = styled(Link)`
+  display: flex;
+  justify-content: center;
+  ${({ theme }) => theme.fonts.body15Med};
+  color: ${({ theme }) => theme.colors.gray700};
+
+  padding: 1.3rem 2.4rem;
+  border-radius: 3.2rem;
+
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+`;
+
 export const FavoriteTabLayout = styled.ul`
   background-color: ${({ theme }) => theme.colors.white};
   display: flex;

frontend/src/components/FavoriteTab/index.tsx

@@ -1,25 +1,30 @@
 import * as S from './FavoriteTab.styled';
 import TodoEditItem from '../TodoEditItem';
 import useFavoriteTodoListQuery from './hooks/useFavoriteListQuery';
+import useRouteTodoQuery from '../TodoTab/hooks/useRouteTodoQuery';
 
 import IconButton from '@/components/Button/IconButton';
 import Icon from '@/components/Icon';
 import IntersectionObserverScroll from '@/components/IntersectionObserverScroll';
-import { TODO_TYPE } from '@/constants/config';
+import { MAX_TODO_ITEM_LENGTH_MAP, TODO_TYPE } from '@/constants/config';
 import { TODO_TOAST_MESSAGE } from '@/constants/message';
 import useAddTodoBottomSheet from '@/hooks/todo/useAddTodoBottomSheet';
 import useAddTodoFromArchivedMutation from '@/hooks/todo/useAddTodoFromArchivedMutation';
 import useDeleteTodoMutation from '@/hooks/todo/useDeleteTodoMutation';
 import useEditTodoBottomSheet from '@/hooks/todo/useEditTodoBottomSheet';
+import useTodoListQuery from '@/hooks/todo/useTodoListQuery';
+import useQueryParamsDate from '@/hooks/useQueryParamsDate';
 import useToast from '@/hooks/useToast';
 import { TodoType } from '@/types/todo';
+import { getIsLimitTodoType } from '@/utils/getIsLimitTodoType';
 
 interface FavoriteTabProps {
   todoType: TodoType;
   planId?: number;
 }
 
 const FavoriteTab = ({ todoType, planId }: FavoriteTabProps) => {
+  const { dateType } = useQueryParamsDate();
   const {
     data: favoriteTodoList,
     hasNextPage,
@@ -29,14 +34,29 @@ const FavoriteTab = ({ todoType, planId }: FavoriteTabProps) => {
 
   const { mutate: addTodoFromArchived } = useAddTodoFromArchivedMutation();
   const { mutate: deleteTodo } = useDeleteTodoMutation(todoType);
+  const { data: currentTodoList } = useTodoListQuery(dateType, Number(planId));
+  const { data: routeTodoList } = useRouteTodoQuery(Number(planId));
 
   const { toast } = useToast();
   const openAddBottomSheet = useAddTodoBottomSheet({ todoType, planId });
   const openEditBottomSheet = useEditTodoBottomSheet({ todoType });
 
+  const todoList = currentTodoList || routeTodoList;
   const isFavoritePage = todoType === TODO_TYPE.FAVORITE;
+  const isFavoriteTodoList = favoriteTodoList
+    ? favoriteTodoList.pages?.[0]?.data.length > 0
+    : false;
 
   const handleAddTodoFromFavorite = (todoId: number) => {
+    const isLimitType = getIsLimitTodoType(todoType);
+    const maxTodoLength = MAX_TODO_ITEM_LENGTH_MAP[todoType];
+
+    if (isLimitType && todoList && todoList.length >= maxTodoLength) {
+      toast({ message: TODO_TOAST_MESSAGE.limit(todoType) });
+
+      return;
+    }
+
     addTodoFromArchived(
       { todoType, todoId, planId: Number(planId) },
       {
@@ -60,6 +80,11 @@ const FavoriteTab = ({ todoType, planId }: FavoriteTabProps) => {
     <>
       <IntersectionObserverScroll hasNextPage={hasNextPage} onReachBottom={fetchNextPage}>
         <S.FavoriteTabLayout>
+          {!isFavoriteTodoList && (
+            <S.SloganWrapper>
+              <S.Slogan>즐겨찾기에 저장된 할 일이 없어요</S.Slogan>
+            </S.SloganWrapper>
+          )}
           {favoriteTodoList.pages.map((page) =>
             page.data.map((todo) => (
               <TodoEditItem
@@ -110,6 +135,11 @@ const FavoriteTab = ({ todoType, planId }: FavoriteTabProps) => {
 
           {isFetching && <S.LoadingBlock />}
         </S.FavoriteTabLayout>
+        <S.WatchMoreLinkWrapper>
+          <S.WatchMoreLink to="/favorite">
+            {isFavoriteTodoList ? '즐겨찾기 수정하기' : '즐겨찾기 추가하기'}
+          </S.WatchMoreLink>
+        </S.WatchMoreLinkWrapper>
       </IntersectionObserverScroll>
     </>
   );

frontend/src/components/PlanTooltip/index.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+import Tooltip from '../Tooltip';
+
+import { getItem, setItem } from '@/utils/localStorage';
+
+const TOOLTIP_STORAGE_KEY = 'HAS_SHOWN_PLAN_TOOLTIP';
+
+const PlanTooltip = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const hasShown = getItem<boolean>(TOOLTIP_STORAGE_KEY);
+
+    if (!hasShown) {
+      setIsVisible(true);
+      setItem(TOOLTIP_STORAGE_KEY, true);
+    }
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <Tooltip onClose={handleClose} title="할 일을 드래그하여 이동해보세요">
+      {`2초간 꼭 누르면 다른 이동경로에서\n할 일을 체크할 수 있어요 !`}
+    </Tooltip>
+  );
+};
+
+export default PlanTooltip;

frontend/src/components/RecommendTab/index.tsx

@@ -1,28 +1,47 @@
 import * as S from './RecommendTab.styled';
 import TodoEditItem from '../TodoEditItem';
 import useRecommendTodoListQuery from './hooks/useRecommendListQuery';
+import useRouteTodoQuery from '../TodoTab/hooks/useRouteTodoQuery';
 
 import IconButton from '@/components/Button/IconButton';
 import Icon from '@/components/Icon';
+import { MAX_TODO_ITEM_LENGTH_MAP } from '@/constants/config';
 import { TODO_TOAST_MESSAGE } from '@/constants/message';
 import useAddTodoFromArchivedMutation from '@/hooks/todo/useAddTodoFromArchivedMutation';
+import useTodoListQuery from '@/hooks/todo/useTodoListQuery';
+import useQueryParamsDate from '@/hooks/useQueryParamsDate';
 import useToast from '@/hooks/useToast';
 import { TodoType } from '@/types/todo';
+import { getIsLimitTodoType } from '@/utils/getIsLimitTodoType';
 
 interface RecommendTabProps {
   todoType: TodoType;
   planId?: number;
 }
 
 const RecommendTab = ({ todoType, planId }: RecommendTabProps) => {
+  const { dateType } = useQueryParamsDate();
   const { data: recommendTodoList } = useRecommendTodoListQuery(todoType, Number(planId));
   const { mutate: addTodoFromArchived } = useAddTodoFromArchivedMutation();
+  const { data: currentTodoList } = useTodoListQuery(dateType, Number(planId));
+  const { data: routeTodoList } = useRouteTodoQuery(Number(planId));
+
   const { toast } = useToast();
 
+  const todoList = currentTodoList || routeTodoList;
   const routeURL = planId ? `/recommend/${planId}` : '/recommend';
   const finalURL = `${routeURL}?dateType=${todoType}`;
 
   const handleAddTodoFromRecommend = (todoId: number) => {
+    const isLimitType = getIsLimitTodoType(todoType);
+    const maxTodoLength = MAX_TODO_ITEM_LENGTH_MAP[todoType];
+
+    if (isLimitType && todoList && todoList.length >= maxTodoLength) {
+      toast({ message: TODO_TOAST_MESSAGE.limit(todoType) });
+
+      return;
+    }
+
     addTodoFromArchived(
       { todoType, todoId, planId: Number(planId) },
       { onSuccess: () => toast({ message: TODO_TOAST_MESSAGE.add(todoType) }) },

frontend/src/components/Toast/Toast.styled.ts

@@ -26,9 +26,11 @@ export const ToastItem = styled.div<{ $isOpen: boolean }>`
   color: ${({ theme }) => theme.colors.gray950};
   background-color: ${({ theme }) => theme.colors.white};
   border: 0.1rem solid ${({ theme }) => theme.colors.gray300};
+
   box-shadow:
-    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+    0px 2px 8px 0px rgba(0, 0, 0, 0.12),
+    0px 1px 4px 0px rgba(0, 0, 0, 0.08),
+    0px 0px 1px 0px rgba(0, 0, 0, 0.08);
 
   animation: ${({ $isOpen }) => ($isOpen ? fadeIn : fadeOut)} 0.3s ease forwards;
   transition: opacity 0.3s ease-in-out;

frontend/src/components/TodoTab/index.tsx

@@ -5,7 +5,7 @@ import { TODO_TAB_TEXT } from './TodoTab.constants';
 
 import IconButton from '@/components/Button/IconButton';
 import Icon from '@/components/Icon';
-import { MAX_TODO_ITEM_LENGTH, TODO_TYPE } from '@/constants/config';
+import { MAX_TODO_ITEM_LENGTH_MAP } from '@/constants/config';
 import { TODO_TOAST_MESSAGE } from '@/constants/message';
 import useAddTodoBottomSheet from '@/hooks/todo/useAddTodoBottomSheet';
 import useDeleteTodoMutation from '@/hooks/todo/useDeleteTodoMutation';
@@ -14,6 +14,7 @@ import useTodoListQuery from '@/hooks/todo/useTodoListQuery';
 import useQueryParamsDate from '@/hooks/useQueryParamsDate';
 import useToast from '@/hooks/useToast';
 import { TodoType } from '@/types/todo';
+import { getIsLimitTodoType } from '@/utils/getIsLimitTodoType';
 
 interface TodoTabProps {
   todoType: TodoType;
@@ -34,10 +35,11 @@ const TodoTab = ({ todoType, planId }: TodoTabProps) => {
   const openEditBottomSheet = useEditTodoBottomSheet({ todoType });
 
   const handleClickAddTodo = () => {
-    const isLimitType = todoType === TODO_TYPE.TODAY || todoType === TODO_TYPE.TOMORROW;
+    const isLimitType = getIsLimitTodoType(todoType);
+    const maxTodoLength = MAX_TODO_ITEM_LENGTH_MAP[todoType];
 
-    if (isLimitType && currentTodoList && currentTodoList.length >= MAX_TODO_ITEM_LENGTH) {
-      toast({ message: TODO_TOAST_MESSAGE.limit(dateType) });
+    if (isLimitType && todoList && todoList.length >= maxTodoLength) {
+      toast({ message: TODO_TOAST_MESSAGE.limit(todoType) });
 
       return;
     }

frontend/src/components/Tooltip/Tooltip.styled.ts

@@ -0,0 +1,49 @@
+import { styled } from 'styled-components';
+
+export const TooltipLayout = styled.div`
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  color: ${({ theme }) => theme.colors.gray100};
+  background-color: ${({ theme }) => theme.colors.green800};
+  border-radius: 0.8rem;
+
+  display: flex;
+  min-width: 18rem;
+  padding: 0.8rem 0.6rem 0.8rem 1.2rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.4rem;
+  white-space: nowrap;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid ${({ theme }) => theme.colors.green800};
+  }
+`;
+
+export const TooltipTitle = styled.div`
+  ${({ theme }) => theme.fonts.body15Med};
+`;
+
+export const TooltipContent = styled.div`
+  ${({ theme }) => theme.fonts.label14Reg};
+  white-space: pre-wrap;
+`;
+
+export const TooltipHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: 0.4rem;
+`;

frontend/src/components/Tooltip/index.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react';
+
+import * as S from './Tooltip.styled';
+import IconButton from '../Button/IconButton';
+import Icon from '../Icon';
+
+import { colors } from '@/styles/theme';
+
+interface TooltipProps {
+  title: string;
+  onClose: () => void;
+}
+
+const Tooltip = ({ onClose, children, title }: PropsWithChildren<TooltipProps>) => {
+  return (
+    <S.TooltipLayout>
+      <S.TooltipHeader>
+        <S.TooltipTitle>{title}</S.TooltipTitle>
+        <IconButton
+          icon={
+            <Icon icon="Close" width={16} height={16} color={colors.gray200} cursor="pointer" />
+          }
+          onClick={onClose}
+        />
+      </S.TooltipHeader>
+      <S.TooltipContent>{children}</S.TooltipContent>
+    </S.TooltipLayout>
+  );
+};
+
+export default Tooltip;

frontend/src/constants/config.ts

@@ -1,5 +1,6 @@
 export const MAP_ID = 'map';
 export const MAX_TODO_ITEM_LENGTH = 5;
+export const MAX_PATH_TODO_ITEM_LENGTH = 10;
 
 export const ICON_MAPPER = {
   READING: 'Reading',
@@ -23,6 +24,13 @@ export const TODO_TYPE = {
   PATH: 'PATH',
 } as const;
 
+export const MAX_TODO_ITEM_LENGTH_MAP = {
+  [TODO_TYPE.TODAY]: MAX_TODO_ITEM_LENGTH,
+  [TODO_TYPE.TOMORROW]: MAX_TODO_ITEM_LENGTH,
+  [TODO_TYPE.PATH]: MAX_PATH_TODO_ITEM_LENGTH,
+  [TODO_TYPE.FAVORITE]: Infinity,
+};
+
 export const DATE_TYPE = {
   TODAY: 'TODAY',
   TOMORROW: 'TOMORROW',

frontend/src/constants/message.ts

@@ -1,7 +1,6 @@
-import { MAX_TODO_ITEM_LENGTH } from './config';
-
 import { ErrorCode } from '@/types/error';
 import { TodoType } from '@/types/todo';
+import { getLimitMessage } from '@/utils/getLimitMessage';
 
 const DATE_TEXT = {
   TODAY: '오늘',
@@ -13,8 +12,7 @@ const DATE_TEXT = {
 export const TODO_TOAST_MESSAGE = {
   add: (todoType: TodoType) => `${DATE_TEXT[todoType]} 할 일에 추가되었어요`,
   delete: (todoType: TodoType) => `${DATE_TEXT[todoType]} 할 일에서 삭제되었어요`,
-  limit: (dateType: 'TODAY' | 'TOMORROW') =>
-    `${DATE_TEXT[dateType]} 할 일은 최대 ${MAX_TODO_ITEM_LENGTH}개까지 추가할 수 있어요`,
+  limit: (todoType: TodoType) => getLimitMessage(todoType),
   addFavorite: '즐겨찾기에 추가되었어요',
   deleteFavorite: '즐겨찾기에서 삭제되었어요',
   location: '현재 위치를 성공적으로 불러왔습니다!',

frontend/src/pages/EditPage/EditPage.styled.ts

@@ -5,7 +5,7 @@ import { Tab } from '@/components/Tab';
 export const TabContent = styled(Tab.Content)`
   background-color: ${({ theme }) => theme.colors.gray50};
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 export const TabList = styled(Tab.List)`