feat: clear icon 클릭시 동작 함수 적용

uoslife · Jan 29, 2024 · e8ce1dc · e8ce1dc
1 parent aa752a7
commit e8ce1dc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/src/components/molecules/Timelines/Timelines.tsx b/src/components/molecules/Timelines/Timelines.tsx
@@ -2,6 +2,9 @@ import styled from '@emotion/styled';
 import TimelineBar from '../../atoms/timelineBar';
 import { useEffect, useMemo, useState } from 'react';
 import { TimelineOrder } from '../../templates/TimelineView';
+import Icon from '../../atoms/Icon';
+import { css } from '@emotion/react';
+import useHandleClearIcon from '../../../hooks/useHandleClearIcon';
 
 export type TimelineBarStatus = 'DISPLAYED' | 'DISPLAYING' | 'UNDISPLAYED';
 type TimelineBarStatusType = Array<{
@@ -14,6 +17,7 @@ type Props = {
 };
 
 const Timelines = ({ currentOrder }: Props) => {
+  const handleClickClearIcon = useHandleClearIcon();
   const initTimelineBarStatus: TimelineBarStatusType = useMemo(
     () =>
       Array(5)
@@ -45,6 +49,18 @@ const Timelines = ({ currentOrder }: Props) => {
           <TimelineBar key={item.index} status={item.status} />
         ))}
       </S.TimelinesWrapper>
+      <Icon
+        name={'clear'}
+        css={css`
+          position: absolute;
+          top: 50px;
+          right: 12px;
+          cursor: pointer;
+          z-index: 10;
+          padding: 4px;
+        `}
+        onClick={handleClickClearIcon}
+      />
     </S.Container>
   );
 };

diff --git a/src/components/pages/MainPage/MainPage.tsx b/src/components/pages/MainPage/MainPage.tsx
@@ -2,13 +2,28 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Txt, colors } from '@uoslife/design-system/web';
 import useUserStore from '../../../store/user';
+import Icon from '../../atoms/Icon';
+import useHandleClearIcon from '../../../hooks/useHandleClearIcon';
 
 type Props = { setTimelineView: () => void };
 
 const MainPage = ({ setTimelineView }: Props) => {
   const { user } = useUserStore();
+
+  const handleClickClearIcon = useHandleClearIcon();
+
   return (
     <S.Container>
+      <Icon
+        name={'clear'}
+        css={css`
+          position: absolute;
+          top: 12px;
+          right: 16px;
+          cursor: pointer;
+        `}
+        onClick={handleClickClearIcon}
+      />
       <img
         css={css`
           width: 316px;