Merge pull request #65 from prgrms-web-devcourse-final-project/36-des…

…ign/notification-modal

[Design] #36 NotificationModal

.vscode/typescriptreact.code-snippets

@@ -11,7 +11,7 @@
       "",
       "export default function ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}Props ) {",
       "  return (",
-      "    <S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}} className=\"\">",
+      "    <S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}>",
       "      ${4:${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}}",
       "    </S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}>",
       "  )",
@@ -47,7 +47,7 @@
       "",
       "export default function ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}Props ) {",
       "  return (",
-      "    <S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}} className=\"\">",
+      "    <S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}>",
       "      ${4:${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}}",
       "    </S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}>",
       "  )",

src/components/Button/PrevButton/styles.ts

@@ -7,4 +7,5 @@ export const PrevButton = styled(GrPrevious)`
   top: 14px;
   width: 28px;
   height: 28px;
+  z-index: 5;
 `

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 (
+    <S.NotificationItem>
+      <S.Dot />
+      <S.TypoArea>
+        <Typo15 weight='700'>{content}</Typo15>
+        <Typo13 color='font_3'>{date.toISOString().slice(0, 10)}</Typo13>
+      </S.TypoArea>
+    </S.NotificationItem>
+  )
+}

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``

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 (
+    <S.NotificationList>
+      {notificationList.map((notification, index) => (
+        <NotificationItem content={notification.content} date={notification.date} key={index} />
+      ))}
+    </S.NotificationList>
+  )
+}

src/components/NotificationList/styles.ts

@@ -0,0 +1,3 @@
+import { styled } from 'styled-components'
+
+export const NotificationList = styled.div``

src/constants/layout.ts

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 56

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 (
+    <S.NotificationModal>
+      <PrevButton onClick={popModal} />
+      <S.Header>
+        <Typo17 weight='700'>알림</Typo17>
+      </S.Header>
+      <NotificationList />
+    </S.NotificationModal>
+  )
+}

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;
+`