-
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
Merged
The head ref may contain hidden characters: "feat/fe/\uACF5\uC9C0-\uC2A4\uB808\uB4DC-\uCEF4\uD3EC\uB10C\uD2B8-\uAD6C\uD604-2\uD68C\uCC28"
Merged
[FE] 공지 스레드 컴포넌트 구현 #244
Changes from all commits
Commits
Show all changes
35 commits
Select commit
Hold shift + click to select a range
7a6e7db
feat: 스레드에 사용될 확장/축소 버튼 구현
wzrabbit e6ae45d
test: 확장/축소 버튼에 대한 스토리북 작성
wzrabbit fd4afe6
feat: 스레드의 확장/축소 및 확장 상태 토글링을 위한 커스텀 훅 구현
wzrabbit 5a9c86e
feat: 공지 스레드의 배경 이미지 업로드
wzrabbit 90f7b0c
feat: 공지 스레드 구현을 위한 svg 이미지들 업로드
wzrabbit 9118a2a
feat: 공지 스레드의 작성자 정보, 작성 시간, 스레드 내용, 펼치기/접기 기능 구현
wzrabbit 4e948bd
test: 공지 스레드에 대한 스토리북 작성
wzrabbit 1d1a8bb
feat: 임시 스레드 태그 구현
wzrabbit da140a6
test: 임시 스레드 태그에 대한 스토리북 작성
wzrabbit 0fcf957
feat: 구현한 임시 태그를 공지 스레드 컴포넌트에 부착
wzrabbit 0a46a6d
feat: 임시 태그에 사용할 확성기 아이콘 업로드
wzrabbit 7a97883
chore: png 글로벌 타입 정의
wzrabbit 2e7077a
chore: 확장 버튼 / 태그의 디렉토리 변경
wzrabbit 8c94fff
feat: 작성 일자를 props로 넣을 수 있도록 변경
wzrabbit 9c27775
refactor: 스레드 태그의 이름명 변경
wzrabbit ddfdb0a
feat: 공지 태그에서 모아보기 페이지에 대응하는 작은 사이즈 추가 구현
wzrabbit 1c02795
test: NoticeTag 컴포넌트에 대해 스토리 개선
wzrabbit c0f1f08
feat: 시계 아이콘 제거, 디바이더 추가
wzrabbit 2784ddb
feat: 공지 스레드 컴포넌트에 모아보기 전용 사이즈를 선택할 수 있도록 개선
wzrabbit ca5c4e8
docs: 스토리북 공지 스레드 API문서에 컴포넌트 설명 추가
wzrabbit 5b581e6
refactor: 불필요 속성 제거, 길이 및 여백 짝수로 변경
wzrabbit 10d7f0e
refactor: 중복되는 컨테이너 제거 및 리팩토링
wzrabbit 6e36054
refactor: 공지 스레드의 기본 높이에 해당하는 상수를 상수파일로 분리
wzrabbit 2c7fc51
refactor: NoticeTag의 스토리 타이틀 변경
wzrabbit dae4640
refactor: children -> content prop으로 내용을 받기로 결정 후 반영
wzrabbit e30acb2
refactor: 불필요한 import 제거
wzrabbit 82e9c96
refactor: 사실은 불필요하지 않았던 useRef 다시 추가
wzrabbit 1393921
refactor: 공지 스레드 컴포넌트의 props에서 size에 해당하는 default value를 정의
wzrabbit 593f057
chore: 공지 태그의 경로 수정
wzrabbit dd05e9f
chore: 불필요 svg 제거
wzrabbit ac3690a
chore: 상수가 저장되는 파일을 thread -> feed 로 변경
wzrabbit 67fb669
chore: 컨플릭트 해소
wzrabbit 946c1bf
Merge branch 'develop' into feat/fe/공지-스레드-컴포넌트-구현-2회차
wzrabbit 1be9b3a
refactor: 공지 스레드 본문의 폰트 크기 변경
wzrabbit ef1fcef
Merge branch 'develop' into feat/fe/공지-스레드-컴포넌트-구현-2회차
wzrabbit File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as noticeThreadBackground } from './notice-thread-background.png'; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions
47
frontend/src/components/ExpandButton/ExpandButton.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | ||
}, | ||
}; |
29 changes: 29 additions & 0 deletions
29
frontend/src/components/ExpandButton/ExpandButton.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
30 changes: 30 additions & 0 deletions
30
frontend/src/components/NoticeThread/NoticeTag/NoticeTag.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}; |
23 changes: 23 additions & 0 deletions
23
frontend/src/components/NoticeThread/NoticeTag/NoticeTag.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}; | ||
`; |
27 changes: 27 additions & 0 deletions
27
frontend/src/components/NoticeThread/NoticeTag/NoticeTag.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = 'md', css } = props; | ||
|
||
return ( | ||
<S.TagContainer size={size} css={css}> | ||
<MegaphoneIcon /> | ||
{size === 'md' && ( | ||
<Text size="lg" weight="bold" css={S.tagLabel}> | ||
중요 공지 | ||
</Text> | ||
)} | ||
</S.TagContainer> | ||
); | ||
}; | ||
|
||
export default NoticeTag; |
74 changes: 74 additions & 0 deletions
74
frontend/src/components/NoticeThread/NoticeThread.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
content: '안녕하세요! 잘 부탁드립니다.', | ||
}, | ||
}; | ||
|
||
export const TooLongContent: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
content: | ||
'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', | ||
content: | ||
'모아보기 페이지에서는 최소한의 정보만 표시합니다. 이 글 내용을 제외한 나머지 정보가 보이지 않죠?', | ||
}, | ||
}; | ||
|
||
export const SmallWithTooLongContent: Story = { | ||
args: { | ||
author: '요술토끼', | ||
profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png', | ||
createdAt: '2022-03-04 12:34', | ||
size: 'sm', | ||
content: | ||
'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.', | ||
}, | ||
}; |
66 changes: 66 additions & 0 deletions
66
frontend/src/components/NoticeThread/NoticeThread.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
height: 20px; | ||
margin: 0 4px; | ||
|
||
background-color: ${({ theme }) => theme.color.GRAY400}; | ||
`; | ||
|
||
export const primaryNoticeTag = css` | ||
position: absolute; | ||
top: 22px; | ||
right: -18px; | ||
`; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
값이 애매한데? 화면에 이대로 표시되지 않을 것 같아
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.
당시에는
1px
은 너무 얇고,2px
은 너무 굵어보여서1.5px
로 설정하긴 했었어. 뭐 이건 내가 예민한 거니 정수 픽셀로 바꾸면 그만이긴 한데...스토리북에서
1px
,1.5px
,2px
로 설정하고, 각각의 경우에 브라우저를 확대했을 때, 명확하게 브라우저에 표시되는 것 같은데? "화면에 이대로 표시되지 않을 것 같아" 가 무슨 의미인지, 혹시 알려줄 수 있을까?이렇게 하는 게 안티 패턴이라고 해도, 반영해야 한다면 그 이유를 알고 반영하고 싶어.
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.
아 내가 말한건 1px 미만 소수점 단위였어! 몇몇 브라우저에서는 표현이 안될거야
https://mniyunsu.github.io/design-1px/
1.5px가 디자인적으로 제일 적합하다면 사용해도 괜찮아 보여
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.
< 1px
일 경우 이런 부작용이 있을 수 있구나... 기억해 두었다가< 1px
로 디자인하는 상황은 피해보려고 노력해 볼게이번에는
1.5px
로 작업했으니 이 선이 정확히1.5px
가 아닌 근사치로 보일 수는 있어도, 아예 안 보이는 일은 없겠지?길이는 이렇게 유지해 볼게.