From 83c8b6f01b50df5281625a563799147eb5f8ab44 Mon Sep 17 00:00:00 2001 From: jieunsse Date: Fri, 6 Feb 2026 18:29:46 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=ED=95=A0=EC=9D=BC=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/domain/AddTodoList.module.css | 113 ++++++++++++++++++ src/components/Modal/domain/AddTodoList.tsx | 52 ++++++++ src/components/Modal/types/types.ts | 1 + 3 files changed, 166 insertions(+) create mode 100644 src/components/Modal/domain/AddTodoList.module.css create mode 100644 src/components/Modal/domain/AddTodoList.tsx diff --git a/src/components/Modal/domain/AddTodoList.module.css b/src/components/Modal/domain/AddTodoList.module.css new file mode 100644 index 0000000..5d1d989 --- /dev/null +++ b/src/components/Modal/domain/AddTodoList.module.css @@ -0,0 +1,113 @@ +.container { + --dialog-max-width-mobile: 375px; + --dialog-padding: 16px 16px 32px; + --dialog-gap: 10px; + --control-height: 48px; + --close-button-size: 24px; + --input-max-width: 288px; + --button-max-width: 280px; + + display: flex; + padding: var(--dialog-padding); + flex-direction: column; + gap: var(--dialog-gap); + align-items: stretch; + box-sizing: border-box; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.title { + color: var(--Text-Primary, #1e293b); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 19px; + margin: 0; +} + +.form { + display: flex; + flex-direction: column; + gap: 24px; +} + +.input.input { + padding: 14px 16px; + width: 100%; + max-width: var(--input-max-width); + height: var(--control-height); + box-sizing: border-box; + align-self: center; + text-align: center; +} + +.input.input::placeholder { + color: var(--Text-Default, #64748b); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} + +.footer { + display: flex; + justify-content: center; +} + +.button { + display: flex; + width: 100%; + max-width: var(--button-max-width); + height: var(--control-height); + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-radius: 12px; + background: var(--Color-Brand-Primary, #5189fa); + border: none; + color: var(--color-text-inverse, #ffffff); + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 19px; +} + +.closeButton { + width: var(--close-button-size); + height: var(--close-button-size); + padding: 0; + border: none; + background: transparent; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.modalContent.modalContent { + --dialog-radius-desktop: 24px; + --dialog-radius-mobile: 24px 24px 0 0; + border-radius: var(--dialog-radius-desktop); +} + +@media (max-width: 480px) { + .container { + width: 100%; + max-width: var(--dialog-max-width-mobile); + } + + .modalContent.modalContent { + border-radius: var(--dialog-radius-mobile); + } +} diff --git a/src/components/Modal/domain/AddTodoList.tsx b/src/components/Modal/domain/AddTodoList.tsx new file mode 100644 index 0000000..99ed38a --- /dev/null +++ b/src/components/Modal/domain/AddTodoList.tsx @@ -0,0 +1,52 @@ +'use client'; + +import Image from 'next/image'; +import type { FormEvent } from 'react'; +import { Input } from '@/components/input'; +import Modal from '../Modal'; +import styles from './AddTodoList.module.css'; +import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg'; + +const TITLE_ID = 'add-todo-list-title'; + +export interface AddTodoListProps { + isOpen: boolean; + onClose: () => void; + onCreate: () => void; +} + +export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) { + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + onCreate(); + }; + + return ( + +
+
+

+ 할 일 목록 +

+ +
+ +
+ +
+ +
+
+
+ + ); +} diff --git a/src/components/Modal/types/types.ts b/src/components/Modal/types/types.ts index 6c53d07..98b4c1c 100644 --- a/src/components/Modal/types/types.ts +++ b/src/components/Modal/types/types.ts @@ -6,6 +6,7 @@ interface BaseModalProps { children?: ReactNode; ariaDescribedby?: string; className?: string; + contentClassName?: string; closeOnOverlayClick?: boolean; closeOnEscape?: boolean; } From 35f8a93b6ddb280b2e57a5372e2b8940eab195a1 Mon Sep 17 00:00:00 2001 From: jieunsse Date: Fri, 6 Feb 2026 18:37:59 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=A9=A4=EB=B2=84=EC=B4=88?= =?UTF-8?q?=EB=8C=80=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/domain/MemberInvite.module.css | 90 +++++++++++++++++++ src/components/Modal/domain/MemberInvite.tsx | 48 ++++++++++ 2 files changed, 138 insertions(+) create mode 100644 src/components/Modal/domain/MemberInvite.module.css create mode 100644 src/components/Modal/domain/MemberInvite.tsx diff --git a/src/components/Modal/domain/MemberInvite.module.css b/src/components/Modal/domain/MemberInvite.module.css new file mode 100644 index 0000000..a196476 --- /dev/null +++ b/src/components/Modal/domain/MemberInvite.module.css @@ -0,0 +1,90 @@ +@import '@shared/styles/color.css'; + +.container { + position: relative; + width: 384px; + height: 211px; + padding: 40px 24px 32px; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + text-align: center; +} + +.modalContent { + border-radius: 24px; +} + +.closeButton { + position: absolute; + top: 16px; + right: 16px; + width: 24px; + height: 24px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + cursor: pointer; +} + +.title { + margin: 8px 0 0; + color: var(--Text-Primary, #1e293b); + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 19px; +} + +.description { + margin: 4px 0 16px; + color: var(--Text-Secondary, #334155); + font-family: Pretendard, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 17px; +} + +.copyButton { + display: flex; + width: 280px; + height: 48px; + padding: 14px 24px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 16px; + border: none; + background: var(--color-brand-primary); + color: var(--Text-inverse, #fff); + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 19px; + cursor: pointer; +} + +.copyButton:disabled { + background: var(--color-interaction-inactive); + cursor: not-allowed; +} + +@media (max-width: 480px) { + .modalContent { + border-radius: 24px 24px 0 0; + } + + .container { + width: 100%; + max-width: 375px; + height: 195px; + flex-shrink: 0; + border-radius: 24px 24px 0 0; + background: var(--Background-Primary, #fff); + box-sizing: border-box; + } +} diff --git a/src/components/Modal/domain/MemberInvite.tsx b/src/components/Modal/domain/MemberInvite.tsx new file mode 100644 index 0000000..82f3e66 --- /dev/null +++ b/src/components/Modal/domain/MemberInvite.tsx @@ -0,0 +1,48 @@ +'use client'; + +import Image from 'next/image'; +import Modal from '../Modal'; +import styles from './MemberInvite.module.css'; +import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg'; + +export type MemberInviteProps = { + isOpen: boolean; + onClose: () => void; + inviteLink: string; + onCopy?: (link: string) => void; +}; + +export default function MemberInvite({ isOpen, onClose, inviteLink, onCopy }: MemberInviteProps) { + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(inviteLink); + } finally { + onCopy?.(inviteLink); + } + }; + + return ( + +
+ +

+ 멤버 초대 +

+

+ 그룹에 참여할 수 있는 링크를 복사합니다. +

+ +
+ + ); +} From ca842310bc54586409d7e0ea8b38d0c8236bdc26 Mon Sep 17 00:00:00 2001 From: Jieunsse Date: Fri, 6 Feb 2026 19:17:38 +0900 Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0=20=EC=8B=9C=EC=A0=90=20=EC=B0=A8=EC=9D=B4?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=A4=91=EB=B3=B5=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/domain/AddTodoList.module.css | 113 ------------------ 1 file changed, 113 deletions(-) delete mode 100644 src/components/Modal/domain/AddTodoList.module.css diff --git a/src/components/Modal/domain/AddTodoList.module.css b/src/components/Modal/domain/AddTodoList.module.css deleted file mode 100644 index 5d1d989..0000000 --- a/src/components/Modal/domain/AddTodoList.module.css +++ /dev/null @@ -1,113 +0,0 @@ -.container { - --dialog-max-width-mobile: 375px; - --dialog-padding: 16px 16px 32px; - --dialog-gap: 10px; - --control-height: 48px; - --close-button-size: 24px; - --input-max-width: 288px; - --button-max-width: 280px; - - display: flex; - padding: var(--dialog-padding); - flex-direction: column; - gap: var(--dialog-gap); - align-items: stretch; - box-sizing: border-box; -} - -.header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.title { - color: var(--Text-Primary, #1e293b); - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 19px; - margin: 0; -} - -.form { - display: flex; - flex-direction: column; - gap: 24px; -} - -.input.input { - padding: 14px 16px; - width: 100%; - max-width: var(--input-max-width); - height: var(--control-height); - box-sizing: border-box; - align-self: center; - text-align: center; -} - -.input.input::placeholder { - color: var(--Text-Default, #64748b); - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 19px; -} - -.footer { - display: flex; - justify-content: center; -} - -.button { - display: flex; - width: 100%; - max-width: var(--button-max-width); - height: var(--control-height); - justify-content: center; - align-items: center; - gap: 10px; - flex-shrink: 0; - border-radius: 12px; - background: var(--Color-Brand-Primary, #5189fa); - border: none; - color: var(--color-text-inverse, #ffffff); - text-align: center; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 19px; -} - -.closeButton { - width: var(--close-button-size); - height: var(--close-button-size); - padding: 0; - border: none; - background: transparent; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.modalContent.modalContent { - --dialog-radius-desktop: 24px; - --dialog-radius-mobile: 24px 24px 0 0; - border-radius: var(--dialog-radius-desktop); -} - -@media (max-width: 480px) { - .container { - width: 100%; - max-width: var(--dialog-max-width-mobile); - } - - .modalContent.modalContent { - border-radius: var(--dialog-radius-mobile); - } -} From 8a828b3b0e0c48b169bb0baf5af9f78489fdd772 Mon Sep 17 00:00:00 2001 From: Jieunsse Date: Fri, 6 Feb 2026 19:17:54 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0=20=EC=8B=9C=EC=A0=90=20=EC=B0=A8=EC=9D=B4?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=A4=91=EB=B3=B5=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/domain/AddTodoList.tsx | 52 --------------------- 1 file changed, 52 deletions(-) delete mode 100644 src/components/Modal/domain/AddTodoList.tsx diff --git a/src/components/Modal/domain/AddTodoList.tsx b/src/components/Modal/domain/AddTodoList.tsx deleted file mode 100644 index 99ed38a..0000000 --- a/src/components/Modal/domain/AddTodoList.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client'; - -import Image from 'next/image'; -import type { FormEvent } from 'react'; -import { Input } from '@/components/input'; -import Modal from '../Modal'; -import styles from './AddTodoList.module.css'; -import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg'; - -const TITLE_ID = 'add-todo-list-title'; - -export interface AddTodoListProps { - isOpen: boolean; - onClose: () => void; - onCreate: () => void; -} - -export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) { - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); - onCreate(); - }; - - return ( - -
-
-

- 할 일 목록 -

- -
- -
- - -
-
- - ); -}