From 920467ec2da9b9dd0669f2da41120bfbb843e022 Mon Sep 17 00:00:00 2001 From: nijuy Date: Fri, 20 Oct 2023 00:40:18 +0900 Subject: [PATCH 01/11] =?UTF-8?q?fix:=20textBright=20=EC=BB=AC=EB=9F=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * SemanticTextColor 타입에 textBright를 추가했습니다. --- src/style/foundation/color/semanticColor/semanticColor.type.ts | 1 + .../foundation/color/semanticColor/semanticColorPalette.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/style/foundation/color/semanticColor/semanticColor.type.ts b/src/style/foundation/color/semanticColor/semanticColor.type.ts index 830b0c1..594931b 100644 --- a/src/style/foundation/color/semanticColor/semanticColor.type.ts +++ b/src/style/foundation/color/semanticColor/semanticColor.type.ts @@ -15,6 +15,7 @@ export type SemanticTextColor = | 'textSecondary' | 'textTertiary' | 'textDisabled' + | 'textBright' | 'textPointed' | 'textWarned'; diff --git a/src/style/foundation/color/semanticColor/semanticColorPalette.ts b/src/style/foundation/color/semanticColor/semanticColorPalette.ts index 2770563..02e9a69 100644 --- a/src/style/foundation/color/semanticColor/semanticColorPalette.ts +++ b/src/style/foundation/color/semanticColor/semanticColorPalette.ts @@ -21,6 +21,7 @@ const lightSemanticColorPalette: SemanticColorPalette = { textSecondary: baseColorPalettes.light.gray900, textTertiary: baseColorPalettes.light.gray600, textDisabled: baseColorPalettes.light.gray500, + textBright: baseColorPalettes.light.white000, textPointed: baseColorPalettes.light.pointColor400, textWarned: baseColorPalettes.light.warningRed400, @@ -141,6 +142,7 @@ const darkSemanticColorPalette: SemanticColorPalette = { textSecondary: baseColorPalettes.dark.gray800, textTertiary: baseColorPalettes.dark.gray600, textDisabled: baseColorPalettes.dark.gray400, + textBright: baseColorPalettes.dark.white000, textPointed: baseColorPalettes.dark.pointColor400, textWarned: baseColorPalettes.dark.warningRed400, From 3df6ee3db795c5188065d641bed2f030bf830315 Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 17:47:54 +0900 Subject: [PATCH 02/11] =?UTF-8?q?feat(component):=20Toast.type.ts=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Toast/Toast.type.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/components/Toast/Toast.type.ts diff --git a/src/components/Toast/Toast.type.ts b/src/components/Toast/Toast.type.ts new file mode 100644 index 0000000..0fcd8e2 --- /dev/null +++ b/src/components/Toast/Toast.type.ts @@ -0,0 +1,6 @@ +export type ToastDuration = 'short' | 'long'; + +export interface ToastProps extends React.HTMLAttributes { + children?: React.ReactNode; + duration?: ToastDuration; +} From d08355109912f0f9dfde27dbb61a162bf73e2e2e Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 17:48:23 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat(component):=20Toast.style.ts=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Toast/Toast.style.ts | 59 +++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/Toast/Toast.style.ts diff --git a/src/components/Toast/Toast.style.ts b/src/components/Toast/Toast.style.ts new file mode 100644 index 0000000..83dc09f --- /dev/null +++ b/src/components/Toast/Toast.style.ts @@ -0,0 +1,59 @@ +import { css, keyframes, styled } from 'styled-components'; + +import { ToastDuration } from './Toast.type'; + +interface StyledToastProps { + $duration: ToastDuration; +} + +const SHORT_DURATION = 1.5; +const LONG_DURATION = 3; +const FADE_DURATION = 0.25; + +export const ToastFadeIn = keyframes` +to { + opacity: 1; +} +`; + +export const ToastFadeOut = keyframes` +to { + opacity: 0; +} +`; + +const setToastAnimation = ($duration: ToastDuration) => { + switch ($duration) { + case 'short': + return css` + ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards, + ${ToastFadeOut} ${FADE_DURATION}s ${SHORT_DURATION + FADE_DURATION}s ease-out forwards + `; + case 'long': + return css` + ${ToastFadeIn} 0.25s ease-in forwards, + ${ToastFadeOut} 0.25s ${LONG_DURATION + FADE_DURATION}s ease-out forwards + `; + } +}; + +export const StyledToastWrapper = styled.div` + position: absolute; + bottom: 66px; + width: 100%; + padding: 0px 8px; +`; + +export const StyledToast = styled.div` + opacity: 0; + border-radius: 8px; + width: 100%; + padding: 16px 24px; + display: flex; + justify-content: center; + background-color: ${({ theme }) => theme.color.toastBG}; + color: ${({ theme }) => theme.color.textBright}; + ${({ theme }) => theme.typo.body2}; + + animation: ${({ $duration }) => setToastAnimation($duration)}; +`; From 71ff8826529271a05256b76f451cfecd65c76155 Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 17:50:57 +0900 Subject: [PATCH 04/11] =?UTF-8?q?feat(component):=20Toast=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Toast/Toast.tsx | 16 ++++++++++++++++ src/components/Toast/index.ts | 2 ++ 2 files changed, 18 insertions(+) create mode 100644 src/components/Toast/Toast.tsx create mode 100644 src/components/Toast/index.ts diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx new file mode 100644 index 0000000..2157c00 --- /dev/null +++ b/src/components/Toast/Toast.tsx @@ -0,0 +1,16 @@ +import { StyledToast, StyledToastWrapper } from './Toast.style'; +import { ToastProps } from './Toast.type'; + +const Toast = ({ children, duration = 'short', ...props }: ToastProps) => { + if (!children) return; + + return ( + + + {children} + + + ); +}; + +export { Toast }; diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts new file mode 100644 index 0000000..9a40e05 --- /dev/null +++ b/src/components/Toast/index.ts @@ -0,0 +1,2 @@ +export { Toast } from './Toast'; +export type { ToastProps } from './Toast.type'; From dd3865618560d2f3b7225e7b5bf79e7c455b4f66 Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 17:51:19 +0900 Subject: [PATCH 05/11] =?UTF-8?q?docs(component):=20Toast.stories.tsx=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Toast/Toast.stories.tsx | 53 ++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/components/Toast/Toast.stories.tsx diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx new file mode 100644 index 0000000..9309933 --- /dev/null +++ b/src/components/Toast/Toast.stories.tsx @@ -0,0 +1,53 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { Toast } from './Toast'; + +const meta: Meta = { + title: 'Component/Toast', + component: Toast, + parameters: { + layout: 'centered', + }, +}; +export default meta; + +const ToastStory = ({ ...toastProps }) => { + return ( +
+
+ short duration toast (1.5s) + +
+
+ long duration toast (3s) + +
+
+ ); +}; + +type Story = StoryObj; +export const SingleLine: Story = { + args: { + children: '토스트 메시지', + }, + render: ToastStory, +}; +export const MultiLine: Story = { + args: { + children: '줄 수가 두 줄 이상이 되는 토스트 메시지입니다. 좌측 정렬을 해주세요.', + }, + render: ToastStory, +}; From e185d6c80fac1c5b2b6226d8fc0e130b3105ae97 Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 19:16:59 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat(hook):=20useToast=20hook=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useToast/index.ts | 1 + src/hooks/useToast/useToast.ts | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 src/hooks/useToast/index.ts create mode 100644 src/hooks/useToast/useToast.ts diff --git a/src/hooks/useToast/index.ts b/src/hooks/useToast/index.ts new file mode 100644 index 0000000..2c4979c --- /dev/null +++ b/src/hooks/useToast/index.ts @@ -0,0 +1 @@ +export { useToast } from './useToast'; diff --git a/src/hooks/useToast/useToast.ts b/src/hooks/useToast/useToast.ts new file mode 100644 index 0000000..e8035a5 --- /dev/null +++ b/src/hooks/useToast/useToast.ts @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +import { ToastProps } from '@/components/Toast'; +import { ToastDuration } from '@/components/Toast/Toast.type'; + +export interface UseToastProps extends ToastProps {} + +export const useToast = () => { + const removeTime = { + short: 2000, + long: 3500, + }; + + const [isShowToast, setIsShowToast] = useState(false); + + const showToast = (duration: ToastDuration) => { + setIsShowToast(true); + removeToast(duration); + }; + + const removeToast = (duration: ToastDuration) => { + const timer = setTimeout(() => { + setIsShowToast(false); + }, removeTime[duration]); + + return () => { + clearTimeout(timer); + }; + }; + + return { isShowToast, showToast }; +}; From 543211325e15897397fb801de6002e9ae6353b3a Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 19:18:10 +0900 Subject: [PATCH 07/11] =?UTF-8?q?docs(component):=20useToast=20hook?= =?UTF-8?q?=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20story=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Toast/Toast.stories.tsx | 29 ++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx index 9309933..5721217 100644 --- a/src/components/Toast/Toast.stories.tsx +++ b/src/components/Toast/Toast.stories.tsx @@ -1,6 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; +import { useToast } from '@/hooks/useToast'; + import { Toast } from './Toast'; +import { ToastDuration } from './Toast.type'; const meta: Meta = { title: 'Component/Toast', @@ -38,6 +41,29 @@ const ToastStory = ({ ...toastProps }) => { ); }; +const HookTest = () => { + const toastProps = { + children: 'useToast를 사용한 토스트 메시지', + duration: 'long' as ToastDuration, + }; + const { showToast, isShowToast } = useToast(); + + return ( +
+ + {isShowToast && } +
+ ); +}; + type Story = StoryObj; export const SingleLine: Story = { args: { @@ -51,3 +77,6 @@ export const MultiLine: Story = { }, render: ToastStory, }; +export const ToastHook: Story = { + render: HookTest, +}; From 1b0e500a7986be612ce6dd58499f933f42b05814 Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 19:18:57 +0900 Subject: [PATCH 08/11] =?UTF-8?q?fix(component):=20Toast=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20export=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - export const ~ 형식으로 수정했습니다. --- src/components/Toast/Toast.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 2157c00..3f7a519 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -1,7 +1,7 @@ import { StyledToast, StyledToastWrapper } from './Toast.style'; import { ToastProps } from './Toast.type'; -const Toast = ({ children, duration = 'short', ...props }: ToastProps) => { +export const Toast = ({ children, duration = 'short', ...props }: ToastProps) => { if (!children) return; return ( @@ -12,5 +12,3 @@ const Toast = ({ children, duration = 'short', ...props }: ToastProps) => { ); }; - -export { Toast }; From 8b376140df8d078695b72e4ff71a098a9912ebbe Mon Sep 17 00:00:00 2001 From: nijuy Date: Tue, 31 Oct 2023 19:40:57 +0900 Subject: [PATCH 09/11] =?UTF-8?q?feat(component):=20components/index.ts?= =?UTF-8?q?=EC=97=90=20Toast=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/index.ts b/src/components/index.ts index 049f4e0..2016b4e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -18,3 +18,6 @@ export type { PlainButtonProps } from './PlainButton'; export { Toggle } from './Toggle'; export type { ToggleProps } from './Toggle'; + +export { Toast } from './Toast'; +export type { ToastProps } from './Toast'; From d21b5083fe36e199265c029836ba172282087699 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 6 Nov 2023 01:08:34 +0900 Subject: [PATCH 10/11] =?UTF-8?q?chore(hook):=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useToast에서 사용되지 않는 UseToastProps 타입과 관련 import문을 삭제했습니ㅏㄷ --- src/hooks/useToast/useToast.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/hooks/useToast/useToast.ts b/src/hooks/useToast/useToast.ts index e8035a5..459492f 100644 --- a/src/hooks/useToast/useToast.ts +++ b/src/hooks/useToast/useToast.ts @@ -1,10 +1,7 @@ import { useState } from 'react'; -import { ToastProps } from '@/components/Toast'; import { ToastDuration } from '@/components/Toast/Toast.type'; -export interface UseToastProps extends ToastProps {} - export const useToast = () => { const removeTime = { short: 2000, From 37383398d53f70d2e15a723968a4065bd2d8f362 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 6 Nov 2023 01:09:38 +0900 Subject: [PATCH 11/11] =?UTF-8?q?fix(component):=20setToastAnimation()=20?= =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - long Toast에서 FADE_DURATION을 사용하도록 수정했습니다 --- src/components/Toast/Toast.style.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Toast/Toast.style.ts b/src/components/Toast/Toast.style.ts index 83dc09f..15a0433 100644 --- a/src/components/Toast/Toast.style.ts +++ b/src/components/Toast/Toast.style.ts @@ -31,8 +31,8 @@ const setToastAnimation = ($duration: ToastDuration) => { `; case 'long': return css` - ${ToastFadeIn} 0.25s ease-in forwards, - ${ToastFadeOut} 0.25s ${LONG_DURATION + FADE_DURATION}s ease-out forwards + ${ToastFadeIn} ${FADE_DURATION}s ease-in forwards, + ${ToastFadeOut} ${FADE_DURATION}s ${LONG_DURATION + FADE_DURATION}s ease-out forwards `; } };