-
Notifications
You must be signed in to change notification settings - Fork 2
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
[FE] 공지 스레드 컴포넌트 구현 #244
The head ref may contain hidden characters: "feat/fe/\uACF5\uC9C0-\uC2A4\uB808\uB4DC-\uCEF4\uD3EC\uB10C\uD2B8-\uAD6C\uD604-2\uD68C\uCC28"
[FE] 공지 스레드 컴포넌트 구현 #244
Changes from 24 commits
7a6e7db
e6ae45d
fd4afe6
5a9c86e
90f7b0c
9118a2a
4e948bd
1d1a8bb
da140a6
0fcf957
0a46a6d
7a97883
2e7077a
8c94fff
9c27775
ddfdb0a
1c02795
c0f1f08
2784ddb
ca5c4e8
5b581e6
10d7f0e
6e36054
2c7fc51
dae4640
e30acb2
82e9c96
1393921
593f057
dd05e9f
ac3690a
67fb669
946c1bf
1be9b3a
ef1fcef
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 @@ | ||
export { default as noticeThreadBackground } from './notice-thread-background.png'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import ExpandButton from './ExpandButton'; | ||
|
||
/** | ||
* `ExpandButton` 은 스레드 및 공지 스레드에서의 펼치기/접기 기능을 사용하기 위한 버튼입니다. | ||
* 기본적으로 `position: absolute` 가 적용되어 있으며 부모 요소의 최하단에 배치됩니다. | ||
*/ | ||
const meta = { | ||
title: 'Feed/ExpandButton', | ||
component: ExpandButton, | ||
tags: ['autodocs'], | ||
decorators: [ | ||
(Story) => { | ||
return ( | ||
<div | ||
style={{ | ||
position: 'relative', | ||
padding: '120px', | ||
backgroundColor: '#404040', | ||
border: '1px solid #000', | ||
}} | ||
> | ||
<Story /> | ||
</div> | ||
); | ||
}, | ||
], | ||
} satisfies Meta<typeof ExpandButton>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
/** | ||
* 검은 배경은 단지 컴포넌트의 랜더링 결과 잘 보이게 하기 위함이며, 실제로는 컴포넌트에 포함되지 않습니다. | ||
*/ | ||
export const NotExpanded: Story = { | ||
args: { | ||
isExpanded: false, | ||
}, | ||
}; | ||
|
||
export const Expanded: Story = { | ||
args: { | ||
isExpanded: true, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { styled, css } from 'styled-components'; | ||
|
||
export const Container = styled.div` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
|
||
width: 100%; | ||
height: 100%; | ||
padding-top: 40px; | ||
`; | ||
|
||
export const expandButton = css` | ||
position: absolute; | ||
bottom: 0; | ||
right: 0; | ||
|
||
width: 100%; | ||
height: 100px; | ||
padding: 10px; | ||
|
||
background: linear-gradient( | ||
to top, | ||
${({ theme }) => theme.color.WHITE} 50%, | ||
transparent | ||
); | ||
|
||
color: ${({ theme }) => theme.color.BLACK}; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as S from './ExpandButton.styled'; | ||
import Button from '~/components/common/Button/Button'; | ||
import Text from '~/components/common/Text/Text'; | ||
import { ArrowExpandMoreIcon, ArrowExpandLessIcon } from '~/assets/svg'; | ||
|
||
interface ExpandButtonProps { | ||
isExpanded: boolean; | ||
onClick?: () => void; | ||
} | ||
|
||
const ExpandButton = (props: ExpandButtonProps) => { | ||
const { isExpanded, onClick } = props; | ||
|
||
return ( | ||
<Button | ||
type="button" | ||
variant="plain" | ||
css={S.expandButton} | ||
onClick={onClick} | ||
> | ||
<S.Container> | ||
{isExpanded ? ( | ||
<> | ||
<Text weight="bold" size="lg"> | ||
접기 | ||
</Text> | ||
<ArrowExpandLessIcon /> | ||
</> | ||
) : ( | ||
<> | ||
<Text weight="bold" size="lg"> | ||
펼치기 | ||
</Text> | ||
<ArrowExpandMoreIcon /> | ||
</> | ||
)} | ||
</S.Container> | ||
</Button> | ||
); | ||
}; | ||
|
||
export default ExpandButton; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import NoticeTag from './NoticeTag'; | ||
|
||
/** | ||
* `NoticeTag` 는 공지 여부임을 표시하는 카테고리 컴포넌트입니다. | ||
*/ | ||
const meta = { | ||
title: 'Feed/NoticeTag', | ||
component: NoticeTag, | ||
tags: ['autodocs'], | ||
} satisfies Meta<typeof NoticeTag>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
args: { | ||
size: 'md', | ||
}, | ||
}; | ||
|
||
/** | ||
* 이 사이즈는 모아보기 페이지에서 사용될 사이즈입니다. | ||
*/ | ||
export const Small: Story = { | ||
args: { | ||
size: 'sm', | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { styled, css } from 'styled-components'; | ||
import type { NoticeTagProps } from './NoticeTag'; | ||
|
||
export const TagContainer = styled.div<NoticeTagProps>` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
column-gap: 8px; | ||
|
||
width: ${({ size = 'md' }) => (size === 'md' ? '150px' : '42px')}; | ||
height: 42px; | ||
|
||
border-radius: 18px; | ||
background-color: ${({ theme }) => theme.color.PRIMARY}; | ||
|
||
box-shadow: 0 0 10px ${({ theme }) => theme.color.GRAY400}; | ||
|
||
${({ css }) => css} | ||
`; | ||
|
||
export const tagLabel = css` | ||
color: ${({ theme }) => theme.color.WHITE}; | ||
`; |
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. 얘 NoticeThread 하위에 있어도 될 것 같아 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. 오 태그의 역할이 줄어들어서 그렇구나 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import * as S from './NoticeTag.styled'; | ||
import { MegaphoneIcon } from '~/assets/svg'; | ||
import type { CSSProp } from 'styled-components'; | ||
import Text from '~/components/common/Text/Text'; | ||
import type { NoticeTagSize } from '~/types/size'; | ||
|
||
export interface NoticeTagProps { | ||
size?: NoticeTagSize; | ||
css?: CSSProp; | ||
} | ||
|
||
const NoticeTag = (props: NoticeTagProps) => { | ||
const { size, css } = props; | ||
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. size에 기본값을 줘야할 것 같아 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 TagContainer = styled.div<NoticeTagProps>`
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
width: ${({ size = 'md' }) => (size === 'md' ? '150px' : '42px')}; // <--
height: 42px;
{/* 중략 */} 컴포넌트 파일에는 없지만, 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. 처음에 undefined로 들어가고, 스타일드 컴포넌트에 들어가서 기본값을 확인해야하니까 난 미리 명시해두는게 좋아보여 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. |
||
|
||
return ( | ||
<S.TagContainer size={size} css={css}> | ||
<MegaphoneIcon /> | ||
{size === 'md' && ( | ||
<Text size="lg" weight="bold" css={S.tagLabel}> | ||
중요 공지 | ||
</Text> | ||
)} | ||
</S.TagContainer> | ||
); | ||
}; | ||
|
||
export default NoticeTag; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import NoticeThread from './NoticeThread'; | ||
|
||
/** | ||
* `NoticeThread` 는 피드 메뉴에서 사용될 공지 스레드 컴포넌트입니다. | ||
* 피드 메뉴와 모아보기 페이지에서의 두 UI를 모두 제공합니다. | ||
*/ | ||
const meta = { | ||
title: 'Feed/NoticeThread', | ||
component: NoticeThread, | ||
tags: ['autodocs'], | ||
decorators: [ | ||
(Story) => { | ||
return ( | ||
<div | ||
style={{ | ||
padding: '50px', | ||
backgroundColor: '#eee', | ||
}} | ||
> | ||
<Story /> | ||
</div> | ||
); | ||
}, | ||
], | ||
} satisfies Meta<typeof NoticeThread>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
children: '안녕하세요! 잘 부탁드립니다.', | ||
}, | ||
}; | ||
|
||
export const TooLongContent: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
children: | ||
'The Enigmatic Nature of Quantum Entanglement: Unraveling the Mysteries of Nonlocality\n\nIntroduction\n\nQuantum entanglement, a cornerstone phenomenon in quantum mechanics, has baffled physicists and philosophers alike since its discovery in the early 20th century. This essay delves into the intricacies of quantum entanglement, exploring its counterintuitive properties and profound implications on our understanding of reality. We shall embark on a journey through the mysterious realm of nonlocality, where seemingly disconnected particles share an inexplicable, instantaneous connection, defying classical notions of causality and locality.\n\nI. Historical Background and Quantum Entanglement Basics\n\nThe concept of quantum entanglement first emerged in 1935, as Erwin Schrödinger famously described it as "spooky action at a distance." The basic idea involves the entangling of two or more quantum particles, such as photons or electrons, in a way that their quantum states become inextricably linked. Once entangled, the particles exhibit a peculiar behavior - any change to the state of one particle instantaneously affects the state of its entangled partner, regardless of the spatial separation between them.\n\nII. Nonlocality and Bells Inequality\n\nThe nonlocality inherent in quantum entanglement challenges the classical principles of locality and causality. John Bells groundbreaking work in the 1960s led to the formulation of Bells inequality, a mathematical criterion to test whether quantum mechanics adheres to local realism or if it must embrace nonlocality.\n\nIII. Entanglement and the Measurement Problem\n\nThe measurement problem, a central conundrum in quantum mechanics, becomes even more enigmatic in the context of quantum entanglement. When we observe one of the entangled particles, it collapses into a definite state, instantaneously determining the state of its entangled partner, regardless of the distance between them. This raises philosophical questions about the nature of reality, the role of the observer, and the existence of multiple realities or parallel universes.\n\nIV. Quantum Entanglement and Quantum Computing\n\nThe mind-boggling implications of quantum entanglement extend far beyond philosophical debates. The field of quantum computing exploits the phenomenon of entanglement to perform computations exponentially faster than classical computers. Quantum bits, or qubits, in a superposition of states can be entangled to enhance information processing capabilities, revolutionizing various industries, including cryptography, optimization, and drug discovery.\n\nV. Entanglement and Spacetime\n\nQuantum entanglement also intertwines with the fabric of spacetime, as suggested by recent theoretical research. Some physicists propose that entanglement may have a crucial role in understanding quantum gravity, reconciling the macroscopic world of general relativity with the microscopic world of quantum mechanics. The entanglement entropy is believed to be linked to the holographic principle, providing a deeper understanding of the fundamental nature of our universe.\n\nConclusion\n\nIn conclusion, quantum entanglement stands as one of the most profound and bewildering phenomena in modern physics. Its inherent nonlocality challenges the very fabric of reality, forcing us to reconsider our classical intuitions about causality and locality. From philosophical dilemmas to groundbreaking technological applications, quantum entanglement continues to push the boundaries of our knowledge, enticing us with the promise of unraveling the deepest secrets of the cosmos. The enigma of entanglement reminds us that there are still uncharted territories in the universe, waiting for the curious minds of future generations to explore and understand fully.', | ||
}, | ||
}; | ||
|
||
/** | ||
* 이 사이즈는 모아보기 페이지에서 쓰일 사이즈입니다. 글 내용과 공지 아이콘을 제외한 나머지 정보가 생략됩니다. | ||
*/ | ||
export const Small: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
size: 'sm', | ||
children: | ||
'모아보기 페이지에서는 최소한의 정보만 표시합니다. 이 글 내용을 제외한 나머지 정보가 보이지 않죠?', | ||
}, | ||
}; | ||
|
||
export const SmallWithTooLongContent: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
size: 'sm', | ||
children: | ||
'The Enigmatic Nature of Quantum Entanglement: Unraveling the Mysteries of Nonlocality\n\nIntroduction\n\nQuantum entanglement, a cornerstone phenomenon in quantum mechanics, has baffled physicists and philosophers alike since its discovery in the early 20th century. This essay delves into the intricacies of quantum entanglement, exploring its counterintuitive properties and profound implications on our understanding of reality. We shall embark on a journey through the mysterious realm of nonlocality, where seemingly disconnected particles share an inexplicable, instantaneous connection, defying classical notions of causality and locality.\n\nI. Historical Background and Quantum Entanglement Basics\n\nThe concept of quantum entanglement first emerged in 1935, as Erwin Schrödinger famously described it as "spooky action at a distance." The basic idea involves the entangling of two or more quantum particles, such as photons or electrons, in a way that their quantum states become inextricably linked. Once entangled, the particles exhibit a peculiar behavior - any change to the state of one particle instantaneously affects the state of its entangled partner, regardless of the spatial separation between them.\n\nII. Nonlocality and Bells Inequality\n\nThe nonlocality inherent in quantum entanglement challenges the classical principles of locality and causality. John Bells groundbreaking work in the 1960s led to the formulation of Bells inequality, a mathematical criterion to test whether quantum mechanics adheres to local realism or if it must embrace nonlocality.\n\nIII. Entanglement and the Measurement Problem\n\nThe measurement problem, a central conundrum in quantum mechanics, becomes even more enigmatic in the context of quantum entanglement. When we observe one of the entangled particles, it collapses into a definite state, instantaneously determining the state of its entangled partner, regardless of the distance between them. This raises philosophical questions about the nature of reality, the role of the observer, and the existence of multiple realities or parallel universes.\n\nIV. Quantum Entanglement and Quantum Computing\n\nThe mind-boggling implications of quantum entanglement extend far beyond philosophical debates. The field of quantum computing exploits the phenomenon of entanglement to perform computations exponentially faster than classical computers. Quantum bits, or qubits, in a superposition of states can be entangled to enhance information processing capabilities, revolutionizing various industries, including cryptography, optimization, and drug discovery.\n\nV. Entanglement and Spacetime\n\nQuantum entanglement also intertwines with the fabric of spacetime, as suggested by recent theoretical research. Some physicists propose that entanglement may have a crucial role in understanding quantum gravity, reconciling the macroscopic world of general relativity with the microscopic world of quantum mechanics. The entanglement entropy is believed to be linked to the holographic principle, providing a deeper understanding of the fundamental nature of our universe.\n\nConclusion\n\nIn conclusion, quantum entanglement stands as one of the most profound and bewildering phenomena in modern physics. Its inherent nonlocality challenges the very fabric of reality, forcing us to reconsider our classical intuitions about causality and locality. From philosophical dilemmas to groundbreaking technological applications, quantum entanglement continues to push the boundaries of our knowledge, enticing us with the promise of unraveling the deepest secrets of the cosmos. The enigma of entanglement reminds us that there are still uncharted territories in the universe, waiting for the curious minds of future generations to explore and understand fully.', | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { styled, css } from 'styled-components'; | ||
import { noticeThreadBackground } from '~/assets/png'; | ||
|
||
interface BoardProps { | ||
isExpanded: boolean; | ||
height: number; | ||
} | ||
|
||
export const ThreadContainer = styled.div` | ||
position: relative; | ||
`; | ||
|
||
export const Thread = styled.div<BoardProps>` | ||
overflow: hidden; | ||
display: flex; | ||
flex-direction: column; | ||
row-gap: 20px; | ||
position: relative; | ||
|
||
width: 100%; | ||
min-height: 200px; | ||
max-height: ${({ height }) => height}px; | ||
padding: 26px; | ||
padding-bottom: ${({ isExpanded }) => (isExpanded ? '90px' : '26px')}; | ||
|
||
border-radius: 40px; | ||
box-shadow: 0 0 16px ${({ theme }) => theme.color.GRAY300}; | ||
background-image: url(${noticeThreadBackground}); | ||
background-size: 100%; | ||
|
||
transition: 0.3s; | ||
`; | ||
|
||
export const ThreadHeader = styled.header` | ||
display: flex; | ||
align-items: center; | ||
column-gap: 8px; | ||
|
||
width: 100%; | ||
height: 36px; | ||
`; | ||
|
||
export const ProfileImage = styled.img` | ||
width: 36px; | ||
height: 36px; | ||
|
||
border-radius: 8px; | ||
`; | ||
|
||
export const ContentWrapper = styled.div``; | ||
|
||
export const Divider = styled.span` | ||
display: inline-block; | ||
|
||
width: 1.5px; | ||
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. 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. 아 내가 말한건 1px 미만 소수점 단위였어! 몇몇 브라우저에서는 표현이 안될거야 https://mniyunsu.github.io/design-1px/ 1.5px가 디자인적으로 제일 적합하다면 사용해도 괜찮아 보여 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.
|
||
height: 20px; | ||
margin: 0 4px; | ||
|
||
background-color: ${({ theme }) => theme.color.GRAY400}; | ||
`; | ||
|
||
export const primaryNoticeTag = css` | ||
position: absolute; | ||
top: 22px; | ||
right: -18px; | ||
`; |
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.
이건 삭제해도 될듯?