From 9096fadeeb7ddf0ceb58e4ccfc9a0bb05ce861e9 Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Wed, 3 Sep 2025 20:26:40 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tailwind.config.js b/tailwind.config.js index 3c901662..a32beb13 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -81,6 +81,7 @@ export default { 'disabled/hover': '#D6D7D9', neutral: '#A3A3A3', dim: '#222222', + dim2: '#F2F2F2', border: '#79747E', timeout: '#4F4F4F', white: '#FFFFFF', From 20a88ae2a0295a2c8b2cf0bfa0d91e3b13b51105 Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Wed, 3 Sep 2025 20:27:24 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=EB=B0=B0?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NotificationBadge.stories.tsx | 33 +++++++++++++++++++ .../NotificationBadge/NotificationBadge.tsx | 28 ++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 src/components/NotificationBadge/NotificationBadge.stories.tsx create mode 100644 src/components/NotificationBadge/NotificationBadge.tsx diff --git a/src/components/NotificationBadge/NotificationBadge.stories.tsx b/src/components/NotificationBadge/NotificationBadge.stories.tsx new file mode 100644 index 00000000..f2938371 --- /dev/null +++ b/src/components/NotificationBadge/NotificationBadge.stories.tsx @@ -0,0 +1,33 @@ +import { Meta, StoryObj } from '@storybook/react'; +import NotificationBadge from './NotificationBadge'; + +const meta: Meta = { + title: 'Components/NotificationBadge', + component: NotificationBadge, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const WhenNoNotification: Story = { + args: { + count: 0, + }, +}; +export const When1Notification: Story = { + args: { + count: 1, + }, +}; +export const WhenMoreThan99Notification: Story = { + args: { + count: 100, + }, +}; +export const Default: Story = { + args: { + count: 14, + }, +}; diff --git a/src/components/NotificationBadge/NotificationBadge.tsx b/src/components/NotificationBadge/NotificationBadge.tsx new file mode 100644 index 00000000..79e00d74 --- /dev/null +++ b/src/components/NotificationBadge/NotificationBadge.tsx @@ -0,0 +1,28 @@ +import clsx from 'clsx'; + +interface NotificationBadgeProps { + count: number; + className?: string; +} + +export default function NotificationBadge({ + count, + className = '', +}: NotificationBadgeProps) { + if (count === 0) { + return null; + } + + const displayCount = count > 99 ? '99+' : count; + + return ( + + {displayCount} + + ); +} From 312513c20234a1e0235d0df967ccbb3970a7c60f Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Wed, 3 Sep 2025 20:27:38 +0900 Subject: [PATCH 3/9] =?UTF-8?q?design:=20=EC=A2=85=EC=86=8C=EB=A6=AC=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=EC=97=90=20=EC=95=84=EC=BD=94=EB=94=94?= =?UTF-8?q?=EC=96=B8=20UI=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimerCreationContent.tsx | 252 ++++++++++-------- 1 file changed, 142 insertions(+), 110 deletions(-) diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx index 2bf3f69d..41c3c03e 100644 --- a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx +++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx @@ -24,6 +24,8 @@ import clsx from 'clsx'; import TimeInputGroup from './TimeInputGroup'; import DTBell from '../../../../components/icons/Bell'; import DTAdd from '../../../../components/icons/Add'; +import NotificationBadge from '../../../../components/NotificationBadge/NotificationBadge'; +import DTExpand from '../../../../components/icons/Expand'; type TimerCreationOption = | 'TIMER_TYPE' @@ -146,6 +148,9 @@ export default function TimerCreationContent({ `# initSpeech: ${initSpeechType} / currentSpeech: ${currentSpeechType}`, ); + // 종소리 영역 확장 여부 + const [isBellExpanded, setIsBellExpanded] = useState(false); + // 발언 시간 const { minutes: initMinutes, seconds: initSeconds } = Formatting.formatSecondsToMinutes( @@ -427,6 +432,10 @@ export default function TimerCreationContent({ [currentSpeechType], ); + const handleBellExpandButtonClick = useCallback(() => { + setIsBellExpanded(!isBellExpanded); + }, [isBellExpanded]); + return (
{/* 헤더 */} @@ -647,127 +656,150 @@ export default function TimerCreationContent({ case 'BELL': return (
- {/* 제목 */} -

- 종소리 설정 -

- - {/* 입력부 */} - - {/* 벨 유형 */} - { - setBellInput((prev) => ({ - ...prev, - type: value, - })); - }} - /> - - - {/* 분, 초, 타종 횟수 */} - - setBellInput((prev) => ({ - ...prev, - min: Math.max( - 0, - Math.min(59, Number(e.target.value)), - ), - })) - } - placeholder="분" - /> - 분 - - - setBellInput((prev) => ({ - ...prev, - sec: Math.max( - 0, - Math.min(59, Number(e.target.value)), - ), - })) - } - placeholder="초" - /> - 초 - - - -

x

- { - const value = Number(e.target.value) % 10; - setBellInput((prev) => ({ - ...prev, - count: Math.max(1, Math.min(3, Number(value))), - })); - }} - placeholder="횟수" - /> - + {/* 제목 및 종소리 횟수 배지 */} +
+
+

+ 종소리 설정 +

+ + +
- - - {/* 벨 리스트 */} - - {bells.map((bell, idx) => ( - -
-

- {BellTypeToString[bell.type]} -

-

- {bell.min}분 {bell.sec}초 -

- - - - x {bell.count} -
+
+ + {/* 종소리 설정 영역 */} + {isBellExpanded && ( +
+ {/* 입력부 */} + + {/* 벨 유형 */} + { + setBellInput((prev) => ({ + ...prev, + type: value, + })); + }} + /> + + + {/* 분, 초, 타종 횟수 */} + + setBellInput((prev) => ({ + ...prev, + min: Math.max( + 0, + Math.min(59, Number(e.target.value)), + ), + })) + } + placeholder="분" + /> + 분 + + + setBellInput((prev) => ({ + ...prev, + sec: Math.max( + 0, + Math.min(59, Number(e.target.value)), + ), + })) + } + placeholder="초" + /> + 초 + + + +

x

+ { + const value = Number(e.target.value) % 10; + setBellInput((prev) => ({ + ...prev, + count: Math.max(1, Math.min(3, Number(value))), + })); + }} + placeholder="횟수" + /> + - ))} - + + {/* 벨 리스트 */} + + {bells.map((bell, idx) => ( + +
+

+ {BellTypeToString[bell.type]} +

+

+ {bell.min}분 {bell.sec}초 +

+ + + + + x {bell.count} + +
+ + + + ))} + +
+ )}
); default: From 90b21c1fc94ec54aa32356c6e33d29ea19ac4dc8 Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Wed, 3 Sep 2025 23:30:43 +0900 Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20NotificationBadge=EA=B0=80=20Na?= =?UTF-8?q?N=20=EB=98=90=EB=8A=94=20=EC=9D=8C=EC=88=98=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=EC=9D=91=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NotificationBadge/NotificationBadge.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/NotificationBadge/NotificationBadge.tsx b/src/components/NotificationBadge/NotificationBadge.tsx index 79e00d74..3e2307fb 100644 --- a/src/components/NotificationBadge/NotificationBadge.tsx +++ b/src/components/NotificationBadge/NotificationBadge.tsx @@ -9,16 +9,20 @@ export default function NotificationBadge({ count, className = '', }: NotificationBadgeProps) { - if (count === 0) { + // 음수, NaN 등 의도하지 않은 값 확인 + const safeCount = Number.isFinite(count) ? Math.max(0, count) : 0; + if (safeCount === 0) { return null; } - const displayCount = count > 99 ? '99+' : count; + const displayCount = safeCount > 99 ? '99+' : safeCount; return ( From c6ebffc763facd748f24977a7e701824d451a7ff Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Wed, 3 Sep 2025 23:31:34 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EC=95=84=EC=BD=94=EB=94=94?= =?UTF-8?q?=EC=96=B8=20=EB=B2=84=ED=8A=BC=EC=97=90=20aria=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimerCreationContent/TimerCreationContent.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx index 41c3c03e..a1ce3989 100644 --- a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx +++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx @@ -674,6 +674,12 @@ export default function TimerCreationContent({
From c7597a7680cd776c3d0117aad897ab92d84e0fdc Mon Sep 17 00:00:00 2001 From: Shawn Kang Date: Fri, 5 Sep 2025 20:32:27 +0900 Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TimerCreationContent/TimerCreationContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx index c3d7741b..a45fa7a4 100644 --- a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx +++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx @@ -680,7 +680,7 @@ export default function TimerCreationContent({ ? '종소리 설정 접기' : '종소리 설정 펼치기' } - onClick={() => handleBellExpandButtonClick()} + onClick={handleBellExpandButtonClick} > Date: Fri, 5 Sep 2025 20:32:35 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20className=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TimerCreationContent/TimerCreationContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx index a45fa7a4..78f97fb3 100644 --- a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx +++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx @@ -701,7 +701,6 @@ export default function TimerCreationContent({ {/* 벨 유형 */} {