Merge pull request #80 from SOPT-36-NINEDOT/feat/#78/editBtn

[Feat/#78] 수정하기 버튼

Author: Leeyoonji23

public/svg/ic_pencil.svg

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcPencil = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" {...props}>
+    <path
+      stroke="#E3E4E5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m25.387 8.72 5.892 5.893M27.888 6.22a4.167 4.167 0 1 1 5.892 5.893L10.833 35.059H5v-5.952z"
+    />
+  </svg>
+);
+export default SvgIcPencil;

src/assets/svg/IcPencil.tsx

@@ -4,10 +4,11 @@ export { default as IcCheckboxDefault } from './IcCheckboxDefault';
 export { default as IcDropdown } from './IcDropdown';
 export { default as IcLock } from './IcLock';
 export { default as IcModalDelete } from './IcModalDelete';
-export { default as IcSmallTextdelete } from './IcSmallTextdelete';
-export { default as IcTextdelete } from './IcTextdelete';
+export { default as IcPencil } from './IcPencil';
 export { default as IcRadioChecked } from './IcRadioChecked';
 export { default as IcRadioDefault } from './IcRadioDefault';
+export { default as IcSmallTextdelete } from './IcSmallTextdelete';
+export { default as IcTextdelete } from './IcTextdelete';
 export { default as IcTooltipDelete } from './IcTooltipDelete';
 export { default as IcTriangle } from './IcTriangle';
 export { default as Vite } from './Vite';

src/assets/svg/index.ts

@@ -0,0 +1,5 @@
+const Edit = () => {
+  return <div>수정하기 뷰</div>;
+};
+
+export default Edit;

src/page/edit/Edit.tsx

@@ -2,3 +2,4 @@ export { default as Home } from './home/Home';
 export { default as Todo } from './todo/entireTodo/Todo';
 export { default as Mandal } from './mandal/Mandal';
 export { default as History } from './history/History';
+export { default as Edit } from './edit/Edit';

src/page/index.ts

@@ -0,0 +1,60 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token';
+import { fonts } from '@/style/token/typography.css';
+
+export const editBtnWrapper = style({
+  position: 'relative',
+  display: 'flex',
+  width: '17.5rem',
+  height: '6.4rem',
+  padding: '0',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '1rem',
+  flexShrink: 0,
+  borderRadius: '50px',
+  backgroundColor: colors.grey3,
+  cursor: 'pointer',
+  clipPath: 'circle(3.2rem at 14.3rem 3.2rem)',
+  transition: 'clip-path 0.3s ease',
+  ':hover': {
+    backgroundImage: colors.gradient05,
+    clipPath: 'circle(100% at center)',
+  },
+});
+
+export const iconSvg = style({
+  width: '4rem',
+  height: '4rem',
+});
+
+export const editIcon = style({
+  position: 'absolute',
+  right: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '6.4rem',
+  height: '6.4rem',
+  borderRadius: '50%',
+  backgroundColor: colors.grey3,
+  color: colors.white01,
+  zIndex: 1,
+});
+
+export const editText = style([
+  fonts.subtitle05,
+  {
+    position: 'absolute',
+    left: '2.4rem',
+    visibility: 'hidden',
+    color: colors.white01,
+    whiteSpace: 'nowrap',
+    selectors: {
+      [`${editBtnWrapper}:hover &`]: {
+        visibility: 'visible',
+      },
+    },
+  },
+]);

src/page/mandal/component/EditBtn/EditBtn.css.ts

@@ -0,0 +1,40 @@
+import { BrowserRouter } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import EditBtn from './EditBtn';
+
+const meta = {
+  title: 'Mandal/EditBtn',
+  component: EditBtn,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+} satisfies Meta<typeof EditBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: '기본',
+};
+
+export const Hover: Story = {
+  name: '호버 시',
+  parameters: {
+    pseudo: { hover: true },
+  },
+};

src/page/mandal/component/EditBtn/EditBtn.stories.tsx

@@ -0,0 +1,30 @@
+import { useNavigate } from 'react-router-dom';
+
+import * as styles from './EditBtn.css';
+
+import { IcPencil } from '@/assets/svg';
+import { PATH } from '@/route/path';
+
+interface EditBtnProps {
+  onClick?: () => void;
+}
+
+const EditBtn = ({ onClick }: EditBtnProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    onClick?.();
+    navigate(PATH.EDIT);
+  };
+
+  return (
+    <button type="button" className={styles.editBtnWrapper} onClick={handleClick}>
+      <span className={styles.editText}>수정하기</span>
+      <div className={styles.editIcon}>
+        <IcPencil className={styles.iconSvg} />
+      </div>
+    </button>
+  );
+};
+
+export default EditBtn;

src/page/mandal/component/EditBtn/EditBtn.tsx

@@ -2,7 +2,7 @@ import type { RouteObject } from 'react-router-dom';
 
 import { PATH } from './path';
 
-import { Home, Todo, Mandal, History } from '@/page';
+import { Home, Todo, Mandal, History, Edit } from '@/page';
 import { UpperGoal, LowerGoal } from '@/page/todo';
 import { Layout } from '@/shared/component/Layout';
 
@@ -34,6 +34,10 @@ export const mainRoutes: RouteObject[] = [
         path: PATH.HISTORY,
         element: <History />,
       },
+      {
+        path: PATH.EDIT,
+        element: <Edit />,
+      },
     ],
   },
 ];