Skip to content

Commit 67ed996

Browse files
shlee9999shlee9999
authored
Merge pull request #65 from prgrms-web-devcourse-final-project/36-design/notification-modal
[Design] #36 NotificationModal
2 parents 0627a3a + a77ffb5 commit 67ed996

File tree

9 files changed

+214
-2
lines changed

9 files changed

+214
-2
lines changed

‎.vscode/typescriptreact.code-snippets

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"",
1212
"export default function ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}Props ) {",
1313
" return (",
14-
" <S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}} className=\"\">",
14+
" <S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}>",
1515
" ${4:${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}}",
1616
" </S.${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}>",
1717
" )",
@@ -47,7 +47,7 @@
4747
"",
4848
"export default function ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}Props ) {",
4949
" return (",
50-
" <S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}} className=\"\">",
50+
" <S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}>",
5151
" ${4:${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}}",
5252
" </S.${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}>",
5353
" )",

‎src/components/Button/PrevButton/styles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export const PrevButton = styled(GrPrevious)`
77
top: 14px;
88
width: 28px;
99
height: 28px;
10+
z-index: 5;
1011
`

‎src/components/NotificationItem/index.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Typo13, Typo15 } from '~components/Typo'
2+
import * as S from './styles'
3+
type NotificationItemProps = {
4+
content: string
5+
date: Date
6+
}
7+
8+
export default function NotificationItem({ content, date }: NotificationItemProps) {
9+
return (
10+
<S.NotificationItem>
11+
<S.Dot />
12+
<S.TypoArea>
13+
<Typo15 weight='700'>{content}</Typo15>
14+
<Typo13 color='font_3'>{date.toISOString().slice(0, 10)}</Typo13>
15+
</S.TypoArea>
16+
</S.NotificationItem>
17+
)
18+
}

‎src/components/NotificationItem/styles.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { styled } from 'styled-components'
2+
3+
export const NotificationItem = styled.div`
4+
display: flex;
5+
align-items: center;
6+
gap: 8px;
7+
padding: 16px 20px;
8+
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.gc_1};
9+
`
10+
11+
export const Dot = styled.div`
12+
border-radius: 50%;
13+
width: 3px;
14+
height: 3px;
15+
background-color: ${({ theme }) => theme.colors.brand.sub};
16+
`
17+
export const TypoArea = styled.div``

‎src/components/NotificationList/index.tsx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import NotificationItem from '~components/NotificationItem'
2+
import * as S from './styles'
3+
4+
const notificationList = [
5+
{
6+
content: '엄마 산책 시켜주세요!',
7+
date: new Date('2024-11-21 09:38:04'),
8+
},
9+
{
10+
content: '오늘 빼먹지 말고 산책!',
11+
date: new Date('2024-11-21 07:13:04'),
12+
},
13+
{
14+
content: '다 함께 즐거운 순간!',
15+
date: new Date('2024-11-21 01:32:04'),
16+
},
17+
{
18+
content: '오늘 빼먹지 말고 산책!',
19+
date: new Date('2024-11-21 11:51:04'),
20+
},
21+
{
22+
content: '다 함께 즐거운 순간!',
23+
date: new Date('2024-11-21 06:26:04'),
24+
},
25+
{
26+
content: '오늘 빼먹지 말고 산책!',
27+
date: new Date('2024-11-21 18:00:04'),
28+
},
29+
{
30+
content: '오늘 빼먹지 말고 산책!',
31+
date: new Date('2024-11-21 04:24:04'),
32+
},
33+
{
34+
content: '오늘의 미션을 완료했어요!',
35+
date: new Date('2024-11-21 16:10:04'),
36+
},
37+
{
38+
content: '내일 날씨가 좋으면 산책해요!',
39+
date: new Date('2024-11-21 13:44:04'),
40+
},
41+
{
42+
content: '엄마 산책 시켜주세요!',
43+
date: new Date('2024-11-21 18:35:04'),
44+
},
45+
{
46+
content: '다 함께 즐거운 순간!',
47+
date: new Date('2024-11-21 20:32:04'),
48+
},
49+
{
50+
content: '내일 날씨가 좋으면 산책해요!',
51+
date: new Date('2024-11-21 20:29:04'),
52+
},
53+
{
54+
content: '이번 주 미션을 완료할 거예요!',
55+
date: new Date('2024-11-21 16:24:04'),
56+
},
57+
{
58+
content: '오늘 빼먹지 말고 산책!',
59+
date: new Date('2024-11-21 04:00:04'),
60+
},
61+
{
62+
content: '다 함께 즐거운 순간!',
63+
date: new Date('2024-11-21 20:15:04'),
64+
},
65+
{
66+
content: '오늘 기분이 어때요?',
67+
date: new Date('2024-11-21 13:07:04'),
68+
},
69+
{
70+
content: '엄마 나와 함께 놀아요!',
71+
date: new Date('2024-11-21 12:04:04'),
72+
},
73+
{
74+
content: '산책이 너무 좋아요!',
75+
date: new Date('2024-11-21 07:04:04'),
76+
},
77+
{
78+
content: '엄마 나와 함께 놀아요!',
79+
date: new Date('2024-11-21 07:22:04'),
80+
},
81+
{
82+
content: '오늘 기분이 어때요?',
83+
date: new Date('2024-11-21 09:32:04'),
84+
},
85+
{
86+
content: '오늘 빼먹지 말고 산책!',
87+
date: new Date('2024-11-21 14:29:04'),
88+
},
89+
{
90+
content: '엄마 나와 함께 놀아요!',
91+
date: new Date('2024-11-21 11:32:04'),
92+
},
93+
{
94+
content: '밥은 언제 먹어?',
95+
date: new Date('2024-11-21 23:44:04'),
96+
},
97+
{
98+
content: '내일 날씨가 좋으면 산책해요!',
99+
date: new Date('2024-11-21 01:33:04'),
100+
},
101+
{
102+
content: '다 함께 즐거운 순간!',
103+
date: new Date('2024-11-21 19:34:04'),
104+
},
105+
{
106+
content: '엄마 나와 함께 놀아요!',
107+
date: new Date('2024-11-21 13:40:04'),
108+
},
109+
{
110+
content: '이번 주 미션을 완료할 거예요!',
111+
date: new Date('2024-11-21 14:05:04'),
112+
},
113+
{
114+
content: '밥은 언제 먹어?',
115+
date: new Date('2024-11-21 01:02:04'),
116+
},
117+
{
118+
content: '이번 주 미션을 완료할 거예요!',
119+
date: new Date('2024-11-21 04:02:04'),
120+
},
121+
{
122+
content: '엄마 산책 시켜주세요!',
123+
date: new Date('2024-11-21 22:11:04'),
124+
},
125+
]
126+
export default function NotificationList() {
127+
return (
128+
<S.NotificationList>
129+
{notificationList.map((notification, index) => (
130+
<NotificationItem content={notification.content} date={notification.date} key={index} />
131+
))}
132+
</S.NotificationList>
133+
)
134+
}

‎src/components/NotificationList/styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { styled } from 'styled-components'
2+
3+
export const NotificationList = styled.div``

‎src/constants/layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const HEADER_HEIGHT = 56

‎src/modals/NotificationModal/index.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import PrevButton from '~components/Button/PrevButton'
2+
import * as S from './styles'
3+
import { Typo17 } from '~components/Typo'
4+
import NotificationList from '~components/NotificationList'
5+
import { useModalStore } from '~stores/modalStore'
6+
7+
export default function NotificationModal() {
8+
const { popModal } = useModalStore()
9+
return (
10+
<S.NotificationModal>
11+
<PrevButton onClick={popModal} />
12+
<S.Header>
13+
<Typo17 weight='700'>알림</Typo17>
14+
</S.Header>
15+
<NotificationList />
16+
</S.NotificationModal>
17+
)
18+
}

‎src/modals/NotificationModal/styles.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { styled } from 'styled-components'
2+
import { HEADER_HEIGHT } from '~constants/layout'
3+
4+
export const NotificationModal = styled.div`
5+
height: 100dvh;
6+
background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
7+
overflow: auto;
8+
padding-top: ${HEADER_HEIGHT}px;
9+
`
10+
export const Header = styled.header`
11+
position: fixed;
12+
background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
13+
z-index: 3;
14+
width: 100%;
15+
top: 0;
16+
height: ${HEADER_HEIGHT}px;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
`

0 commit comments

Comments
 (0)