From a77ffb5790edef247a74a68f5efc76eeb49ddfa0 Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Thu, 21 Nov 2024 20:46:17 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8Design:=20NotificationModal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/typescriptreact.code-snippets | 4 +- src/components/Button/PrevButton/styles.ts | 1 + src/components/NotificationItem/index.tsx | 18 +++ src/components/NotificationItem/styles.ts | 17 +++ src/components/NotificationList/index.tsx | 134 +++++++++++++++++++++ src/components/NotificationList/styles.ts | 3 + src/constants/layout.ts | 1 + src/modals/NotificationModal/index.tsx | 18 +++ src/modals/NotificationModal/styles.ts | 20 +++ 9 files changed, 214 insertions(+), 2 deletions(-) create mode 100644 src/components/NotificationItem/index.tsx create mode 100644 src/components/NotificationItem/styles.ts create mode 100644 src/components/NotificationList/index.tsx create mode 100644 src/components/NotificationList/styles.ts create mode 100644 src/constants/layout.ts create mode 100644 src/modals/NotificationModal/index.tsx create mode 100644 src/modals/NotificationModal/styles.ts diff --git a/.vscode/typescriptreact.code-snippets b/.vscode/typescriptreact.code-snippets index 7d8a478..bdfe6f0 100644 --- a/.vscode/typescriptreact.code-snippets +++ b/.vscode/typescriptreact.code-snippets @@ -11,7 +11,7 @@ "", "export default function ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}Props ) {", " return (", - " ", + " ", " ${4:${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}}", " ", " )", @@ -47,7 +47,7 @@ "", "export default function ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}Props ) {", " return (", - " ", + " ", " ${4:${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}}", " ", " )", diff --git a/src/components/Button/PrevButton/styles.ts b/src/components/Button/PrevButton/styles.ts index 835a6f3..5d8cdb9 100644 --- a/src/components/Button/PrevButton/styles.ts +++ b/src/components/Button/PrevButton/styles.ts @@ -7,4 +7,5 @@ export const PrevButton = styled(GrPrevious)` top: 14px; width: 28px; height: 28px; + z-index: 5; ` diff --git a/src/components/NotificationItem/index.tsx b/src/components/NotificationItem/index.tsx new file mode 100644 index 0000000..6057976 --- /dev/null +++ b/src/components/NotificationItem/index.tsx @@ -0,0 +1,18 @@ +import { Typo13, Typo15 } from '~components/Typo' +import * as S from './styles' +type NotificationItemProps = { + content: string + date: Date +} + +export default function NotificationItem({ content, date }: NotificationItemProps) { + return ( + + + + {content} + {date.toISOString().slice(0, 10)} + + + ) +} diff --git a/src/components/NotificationItem/styles.ts b/src/components/NotificationItem/styles.ts new file mode 100644 index 0000000..6b81b1e --- /dev/null +++ b/src/components/NotificationItem/styles.ts @@ -0,0 +1,17 @@ +import { styled } from 'styled-components' + +export const NotificationItem = styled.div` + display: flex; + align-items: center; + gap: 8px; + padding: 16px 20px; + border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.gc_1}; +` + +export const Dot = styled.div` + border-radius: 50%; + width: 3px; + height: 3px; + background-color: ${({ theme }) => theme.colors.brand.sub}; +` +export const TypoArea = styled.div`` diff --git a/src/components/NotificationList/index.tsx b/src/components/NotificationList/index.tsx new file mode 100644 index 0000000..8ae8fa0 --- /dev/null +++ b/src/components/NotificationList/index.tsx @@ -0,0 +1,134 @@ +import NotificationItem from '~components/NotificationItem' +import * as S from './styles' + +const notificationList = [ + { + content: '엄마 산책 시켜주세요!', + date: new Date('2024-11-21 09:38:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 07:13:04'), + }, + { + content: '다 함께 즐거운 순간!', + date: new Date('2024-11-21 01:32:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 11:51:04'), + }, + { + content: '다 함께 즐거운 순간!', + date: new Date('2024-11-21 06:26:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 18:00:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 04:24:04'), + }, + { + content: '오늘의 미션을 완료했어요!', + date: new Date('2024-11-21 16:10:04'), + }, + { + content: '내일 날씨가 좋으면 산책해요!', + date: new Date('2024-11-21 13:44:04'), + }, + { + content: '엄마 산책 시켜주세요!', + date: new Date('2024-11-21 18:35:04'), + }, + { + content: '다 함께 즐거운 순간!', + date: new Date('2024-11-21 20:32:04'), + }, + { + content: '내일 날씨가 좋으면 산책해요!', + date: new Date('2024-11-21 20:29:04'), + }, + { + content: '이번 주 미션을 완료할 거예요!', + date: new Date('2024-11-21 16:24:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 04:00:04'), + }, + { + content: '다 함께 즐거운 순간!', + date: new Date('2024-11-21 20:15:04'), + }, + { + content: '오늘 기분이 어때요?', + date: new Date('2024-11-21 13:07:04'), + }, + { + content: '엄마 나와 함께 놀아요!', + date: new Date('2024-11-21 12:04:04'), + }, + { + content: '산책이 너무 좋아요!', + date: new Date('2024-11-21 07:04:04'), + }, + { + content: '엄마 나와 함께 놀아요!', + date: new Date('2024-11-21 07:22:04'), + }, + { + content: '오늘 기분이 어때요?', + date: new Date('2024-11-21 09:32:04'), + }, + { + content: '오늘 빼먹지 말고 산책!', + date: new Date('2024-11-21 14:29:04'), + }, + { + content: '엄마 나와 함께 놀아요!', + date: new Date('2024-11-21 11:32:04'), + }, + { + content: '밥은 언제 먹어?', + date: new Date('2024-11-21 23:44:04'), + }, + { + content: '내일 날씨가 좋으면 산책해요!', + date: new Date('2024-11-21 01:33:04'), + }, + { + content: '다 함께 즐거운 순간!', + date: new Date('2024-11-21 19:34:04'), + }, + { + content: '엄마 나와 함께 놀아요!', + date: new Date('2024-11-21 13:40:04'), + }, + { + content: '이번 주 미션을 완료할 거예요!', + date: new Date('2024-11-21 14:05:04'), + }, + { + content: '밥은 언제 먹어?', + date: new Date('2024-11-21 01:02:04'), + }, + { + content: '이번 주 미션을 완료할 거예요!', + date: new Date('2024-11-21 04:02:04'), + }, + { + content: '엄마 산책 시켜주세요!', + date: new Date('2024-11-21 22:11:04'), + }, +] +export default function NotificationList() { + return ( + + {notificationList.map((notification, index) => ( + + ))} + + ) +} diff --git a/src/components/NotificationList/styles.ts b/src/components/NotificationList/styles.ts new file mode 100644 index 0000000..6b68eab --- /dev/null +++ b/src/components/NotificationList/styles.ts @@ -0,0 +1,3 @@ +import { styled } from 'styled-components' + +export const NotificationList = styled.div`` diff --git a/src/constants/layout.ts b/src/constants/layout.ts new file mode 100644 index 0000000..53a63b2 --- /dev/null +++ b/src/constants/layout.ts @@ -0,0 +1 @@ +export const HEADER_HEIGHT = 56 diff --git a/src/modals/NotificationModal/index.tsx b/src/modals/NotificationModal/index.tsx new file mode 100644 index 0000000..b8fe639 --- /dev/null +++ b/src/modals/NotificationModal/index.tsx @@ -0,0 +1,18 @@ +import PrevButton from '~components/Button/PrevButton' +import * as S from './styles' +import { Typo17 } from '~components/Typo' +import NotificationList from '~components/NotificationList' +import { useModalStore } from '~stores/modalStore' + +export default function NotificationModal() { + const { popModal } = useModalStore() + return ( + + + + 알림 + + + + ) +} diff --git a/src/modals/NotificationModal/styles.ts b/src/modals/NotificationModal/styles.ts new file mode 100644 index 0000000..5ea7831 --- /dev/null +++ b/src/modals/NotificationModal/styles.ts @@ -0,0 +1,20 @@ +import { styled } from 'styled-components' +import { HEADER_HEIGHT } from '~constants/layout' + +export const NotificationModal = styled.div` + height: 100dvh; + background-color: ${({ theme }) => theme.colors.grayscale.gc_4}; + overflow: auto; + padding-top: ${HEADER_HEIGHT}px; +` +export const Header = styled.header` + position: fixed; + background-color: ${({ theme }) => theme.colors.grayscale.gc_4}; + z-index: 3; + width: 100%; + top: 0; + height: ${HEADER_HEIGHT}px; + display: flex; + justify-content: center; + align-items: center; +`