refactor: 웹에 맞게 Toast.style 수정 (#84)

* design: `StyledToastWrapper` `StyledToast` 스타일 수정 * docs: Toast.stories.tsx 수정 * docs: `HookTest` 스토리 수정 - args를 내부에서 정의하지 않고 외부에서 전달하도록 함 * feat: `width` props 추가 및 문서 수정 * chore: css 속성 순서 정리 - 관련 있는 것끼리 묶고 중간에 개행 추가함 * docs: 스토리 순서 변경 - ToastHook 스토리를 Primary로 취급하게끔 정의 순서를 변경함 - 버튼 텍스트 height 수정 - 불필요한 Docs block 삭제 * fix: (ts -> tsx) HookSource md file extension --------- Co-authored-by: Hanna922 <[email protected]>
yourssu · May 8, 2024 · a20c795 · a20c795
1 parent 4f4b461
commit a20c795
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 52 deletions.
diff --git a/src/components/Toast/HookSource.md b/src/components/Toast/HookSource.md
@@ -1,4 +1,4 @@
-```typescript
+```tsx
 import { ToastDuration, useToast, Toast } from '@yourssu/design-system-react';
 
 const ToastWrapper = () => {
@@ -11,7 +11,14 @@ const ToastWrapper = () => {
 
   return (
     <div>
-      <button onClick={() => { showToast(toastProps.duration); }}> 버튼 </button>
+      <button
+        onClick={() => {
+          showToast(toastProps.duration);
+        }}
+      >
+        {' '}
+        버튼{' '}
+      </button>
       {isShowToast && <Toast {...toastProps} />}
     </div>
   );

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -1,11 +1,10 @@
-import { Stories, Primary as PrimaryBlock, Controls, Title, Markdown } from '@storybook/blocks';
+import { Primary as PrimaryBlock, Controls, Title, Markdown } from '@storybook/blocks';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { useToast } from '@/hooks/useToast';
 
 import HookSource from './HookSource.md?raw';
 import { Toast } from './Toast';
-import { ToastDuration } from './Toast.type';
 
 const meta: Meta<typeof Toast> = {
   title: 'Component/Toast',
@@ -20,18 +19,12 @@ const meta: Meta<typeof Toast> = {
           <Controls />
           <h2> 주의사항 </h2>
           <ol>
-            <li>Toast의 width는 Toast 를 감싸는 컴포넌트의 width에 영향을 받습니다.</li>
-            <li>
-              Toast의 위치는 position: relative 속성이 설정된 가장 가까운 부모 컴포넌트에 의해
-              결정됩니다.
-            </li>
+            <li>width props 값이 fit-content보다 작을 경우 적용되지 않습니다.</li>
           </ol>
           <br />
           <Title>useToast</Title>
           <span>Toast 컴포넌트를 사용하기 위한 Custom Hook입니다.</span>
           <Markdown>{HookSource}</Markdown>
-          <br />
-          <Stories />
         </>
       ),
     },
@@ -41,67 +34,62 @@ export default meta;
 
 const ToastStory = ({ ...toastProps }) => {
   return (
-    <div style={{ display: 'flex', gap: '10px', width: '780px', height: '300px' }}>
-      <div
-        style={{
-          backgroundColor: '#c4c4c4',
-          width: '50%',
-          position: 'relative',
-        }}
-      >
-        short duration toast (1.5s)
-        <Toast {...toastProps} />
-      </div>
-      <div
-        style={{
-          backgroundColor: '#c4c4c4',
-          width: '50%',
-          position: 'relative',
-        }}
-      >
-        long duration toast (3s)
-        <Toast duration="long" {...toastProps} />
-      </div>
+    <div
+      style={{
+        width: '500px',
+        height: '150px',
+      }}
+    >
+      <Toast {...toastProps} />
     </div>
   );
 };
 
-const HookTest = () => {
-  const toastProps = {
-    children: 'useToast를 사용한 토스트 메시지',
-    duration: 'long' as ToastDuration,
-  };
+const HookTest = ({ ...toastProps }) => {
   const { showToast, isShowToast } = useToast();
 
   return (
     <div
-      style={{ backgroundColor: '#c4c4c4', width: '390px', height: '300px', position: 'relative' }}
+      style={{
+        width: '500px',
+        height: '200px',
+        display: 'flex',
+        justifyContent: 'center',
+      }}
     >
       <button
         onClick={() => {
           showToast(toastProps.duration);
         }}
+        style={{ height: 'fit-content' }}
       >
-        버튼을 누르면 토스트가 발생합니다
+        Show Toast
       </button>
       {isShowToast && <Toast {...toastProps} />}
     </div>
   );
 };
 
 type Story = StoryObj<typeof Toast>;
+export const ToastHook: Story = {
+  render: HookTest,
+  args: {
+    children: 'useToast를 사용한 토스트 메시지',
+    duration: 'long',
+  },
+};
 export const SingleLine: Story = {
   args: {
     children: '토스트 메시지',
+    duration: 'short',
+    width: '300px',
   },
   render: ToastStory,
 };
 export const MultiLine: Story = {
   args: {
-    children: '줄 수가 두 줄 이상이 되는 토스트 메시지입니다. 좌측 정렬을 해주세요.',
+    children: '줄 수가 두 줄 이상이 되는 토스트 메시지입니다.\n좌측 정렬을 해주세요.',
+    duration: 'short',
   },
   render: ToastStory,
 };
-export const ToastHook: Story = {
-  render: HookTest,
-};
diff --git a/src/components/Toast/Toast.style.ts b/src/components/Toast/Toast.style.ts
@@ -1,9 +1,10 @@
 import { css, keyframes, styled } from 'styled-components';
 
-import { ToastDuration } from './Toast.type';
+import { ToastDuration, ToastProps } from './Toast.type';
 
 interface StyledToastProps {
   $duration: ToastDuration;
+  $width: ToastProps['width'];
 }
 
 const SHORT_DURATION = 1.5;
@@ -40,22 +41,35 @@ const setToastAnimation = ($duration: ToastDuration) => {
 };
 
 export const StyledToastWrapper = styled.div`
-  position: absolute;
-  bottom: 66px;
+  position: fixed;
+  inset: 0px;
   width: 100%;
+  height: 100%;
   padding: 0px 8px;
+
+  display: flex;
+  justify-content: center;
+
+  pointer-events: none;
 `;
 
 export const StyledToast = styled.div<StyledToastProps>`
-  opacity: 0;
-  border-radius: 8px;
-  width: 100%;
-  padding: 16px 24px;
+  position: absolute;
+  bottom: 66px;
+  min-width: fit-content;
+  width: ${({ $width }) => $width};
+  max-width: 100%;
+
   display: flex;
   justify-content: center;
+  padding: 16px 24px;
+  opacity: 0;
+
   background-color: ${({ theme }) => theme.color.toastBG};
+  border-radius: 8px;
   color: ${({ theme }) => theme.color.textBright};
   ${({ theme }) => theme.typo.body2};
+  white-space: pre-line;
 
   ${({ $duration }) => setToastAnimation($duration)};
 `;
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -1,12 +1,12 @@
 import { StyledToast, StyledToastWrapper } from './Toast.style';
 import { ToastProps } from './Toast.type';
 
-export const Toast = ({ children, duration = 'short', ...props }: ToastProps) => {
+export const Toast = ({ children, duration = 'short', width, ...props }: ToastProps) => {
   if (!children) return;
 
   return (
     <StyledToastWrapper>
-      <StyledToast $duration={duration} {...props}>
+      <StyledToast $duration={duration} $width={width} {...props}>
         {children}
       </StyledToast>
     </StyledToastWrapper>

diff --git a/src/components/Toast/Toast.type.ts b/src/components/Toast/Toast.type.ts
@@ -5,4 +5,6 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** 지속 시간 (1.5s | 3s)*/
   duration?: ToastDuration;
+  /** Toast의 width */
+  width?: string;
 }