-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749
Changes from all commits
7a9a4a4
7f841f3
efc71a3
b69cf4b
de57115
962d1ae
5b1f7f9
6118863
94de948
3c60fa1
4795a40
98375d0
4000618
bb9881b
0f730f9
9ce18cd
41aec0a
284b2e1
60464df
fd69f50
4d83d1a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { MOCK_TRANSFORM_NOTICE } from '@mocks/mockData/notice'; | ||
|
||
import NoticeDetail from '.'; | ||
|
||
const meta: Meta<typeof NoticeDetail> = { | ||
component: NoticeDetail, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof NoticeDetail>; | ||
|
||
export const Default: Story = { | ||
render: () => <NoticeDetail notice={MOCK_TRANSFORM_NOTICE} />, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import { Notice } from '@type/notice'; | ||
|
||
import SquareButton from '@components/common/SquareButton'; | ||
|
||
import { PATH } from '@constants/path'; | ||
|
||
import * as S from './style'; | ||
|
||
interface NoticeDetailProps { | ||
notice: Notice; | ||
} | ||
|
||
export default function NoticeDetail({ notice: { title, content, createdAt } }: NoticeDetailProps) { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<S.Container> | ||
<S.Category tabIndex={0}>VoTogether 공지사항</S.Category> | ||
<S.Title tabIndex={0}>{title}</S.Title> | ||
<S.CreatedAt tabIndex={0}>작성일 : {createdAt}</S.CreatedAt> | ||
<S.Content tabIndex={0}>{content}</S.Content> | ||
<S.ButtonContainer> | ||
<S.ButtonWrapper> | ||
<SquareButton | ||
theme="fill" | ||
onClick={() => { | ||
navigate(PATH.HOME); | ||
}} | ||
> | ||
홈으로 가기 | ||
</SquareButton> | ||
</S.ButtonWrapper> | ||
<S.ButtonWrapper> | ||
<SquareButton | ||
theme="blank" | ||
onClick={() => { | ||
navigate(PATH.NOTICES); | ||
}} | ||
> | ||
{`공지사항\n목록으로 가기`} | ||
</SquareButton> | ||
</S.ButtonWrapper> | ||
</S.ButtonContainer> | ||
</S.Container> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import { styled } from 'styled-components'; | ||
|
||
import { theme } from '@styles/theme'; | ||
|
||
export const Container = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
|
||
width: 100%; | ||
max-width: 600px; | ||
padding-top: 48px; | ||
|
||
@media (min-width: ${theme.breakpoint.sm}) { | ||
padding-top: 30px; | ||
} | ||
`; | ||
|
||
export const Category = styled.span` | ||
font: var(--text-body); | ||
`; | ||
|
||
export const Title = styled.h1` | ||
margin-top: 20px; | ||
|
||
font: var(--text-title); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이거 조금 작은거 같은데 제가 알림 PR에다가 이거보다 큰 --text-page-title인가,, 만들었는데 나중에 그걸로 바꿔도 좋을 것 같아요. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 좋아요! |
||
`; | ||
|
||
export const CreatedAt = styled.span` | ||
margin: 20px 0; | ||
|
||
font: var(--text-body); | ||
font-size: 1.4rem; | ||
text-align: right; | ||
|
||
color: var(--text-dark-gray); | ||
`; | ||
|
||
export const Content = styled.p` | ||
font: var(--text-body); | ||
|
||
white-space: pre-wrap; | ||
`; | ||
|
||
export const ButtonContainer = styled.div` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 데스크탑에서는 하단에 홈으로 가기 버튼이 없어도 괜찮을 것 같아요!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
gap: 20px; | ||
|
||
margin-top: 50px; | ||
|
||
@media (min-width: ${theme.breakpoint.sm}) { | ||
flex-direction: row; | ||
justify-content: center; | ||
gap: 80px; | ||
|
||
padding: 0 100px; | ||
} | ||
`; | ||
|
||
export const ButtonWrapper = styled.div` | ||
display: flex; | ||
width: 100%; | ||
height: 40px; | ||
|
||
@media (min-width: ${theme.breakpoint.sm}) { | ||
width: 140px; | ||
height: 60px; | ||
|
||
white-space: pre-wrap; | ||
|
||
&:first-child { | ||
display: none; | ||
} | ||
} | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { MOCK_TRANSFORM_NOTICE } from '@mocks/mockData/notice'; | ||
|
||
import NoticeItem from '.'; | ||
|
||
const meta: Meta<typeof NoticeItem> = { | ||
component: NoticeItem, | ||
decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>], | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof NoticeItem>; | ||
|
||
export const Default: Story = { | ||
render: () => <NoticeItem notice={MOCK_TRANSFORM_NOTICE} />, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { Notice } from '@type/notice'; | ||
|
||
import { PATH } from '@constants/path'; | ||
|
||
import * as S from './style'; | ||
|
||
interface NoticeItemProps { | ||
notice: Notice; | ||
} | ||
export default function NoticeItem({ notice: { id, title, createdAt } }: NoticeItemProps) { | ||
return ( | ||
<S.Container> | ||
<S.DetailLink to={`${PATH.NOTICES}/${id}`}> | ||
<S.Title>{title}</S.Title> | ||
<S.CreatedAt>{createdAt}</S.CreatedAt> | ||
</S.DetailLink> | ||
</S.Container> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { Link } from 'react-router-dom'; | ||
|
||
import { styled } from 'styled-components'; | ||
|
||
import { theme } from '@styles/theme'; | ||
|
||
export const Container = styled.li``; | ||
|
||
export const DetailLink = styled(Link)` | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
|
||
padding: 10px 15px; | ||
|
||
@media (min-width: ${theme.breakpoint.sm}) { | ||
flex-direction: row; | ||
justify-content: space-between; | ||
|
||
padding: 16px 20px; | ||
} | ||
`; | ||
|
||
export const Title = styled.span` | ||
width: 100%; | ||
display: -webkit-box; | ||
|
||
text-overflow: ellipsis; | ||
word-break: break-word; | ||
|
||
overflow: hidden; | ||
|
||
-webkit-line-clamp: 1; | ||
-webkit-box-orient: vertical; | ||
|
||
font: var(--text-body); | ||
|
||
transition: color 0.2s ease-in-out; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 옹 hover를 위한 애니메이션인가요???
여기 안에 넣지 않으신 이유가 있나요?? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. hover안에 transition을 두면 마우스를 치웠을 때는 transition 속성이 작동하지 않아서 hover 밖에 위치시켜주었어요 |
||
|
||
&:hover { | ||
color: rgba(51, 122, 183, 1); | ||
} | ||
`; | ||
|
||
export const CreatedAt = styled.span` | ||
font: var(--text-body); | ||
font-size: 1.4rem; | ||
|
||
text-align: right; | ||
|
||
color: var(--text-dark-gray); | ||
|
||
@media (min-width: ${theme.breakpoint.sm}) { | ||
width: 90px; | ||
} | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { MOCK_TRANSFORM_NOTICE_LIST } from '@mocks/mockData/notice'; | ||
|
||
import NoticeList from '.'; | ||
|
||
const meta: Meta<typeof NoticeList> = { | ||
component: NoticeList, | ||
decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>], | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof NoticeList>; | ||
|
||
export const Default: Story = { | ||
render: () => ( | ||
<div style={{ width: '100vw', padding: '15px' }}> | ||
<NoticeList noticeList={MOCK_TRANSFORM_NOTICE_LIST.noticeList} /> | ||
</div> | ||
), | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PATH.NOTICE 어떠신가요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
좋은 제안 감사합니다