Skip to content
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.

Sign up for GitHub

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

fix: 글 작성페이지에 툴바 및 태그 입력 폼 css를 수정하라 #472

Merged
merged 1 commit into from
Sep 13, 2022
+12 −12
Merged

fix: 글 작성페이지에 툴바 및 태그 입력 폼 css를 수정하라 #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/write/EditorToolbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('EditorToolbar', () => {
});
});

context('스크롤 left값이 0인 경우', () => {
context('스크롤 left값이 0보다 작은 경우', () => {
it('"left-shadow-block"의 opacity값은 0이여만 한다', () => {
renderEditorToolbar();

Expand All @@ -84,7 +84,7 @@ describe('EditorToolbar', () => {
});
});

context('스크롤 left값이 툴바 최대 수평 길이와 같은 경우', () => {
context('스크롤 left값이 툴바 최대 수평 길이보다 큰 경우', () => {
it('"right-shadow-block"의 opacity값은 0이여만 한다', () => {
renderEditorToolbar();

Expand Down
4 changes: 2 additions & 2 deletions src/components/write/EditorToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function EditorToolbar(): ReactElement {
>
{isMobile && (
<LeftShadowBlock
isHidden={toolbarScroll.scrollLeft === 0}
isHidden={toolbarScroll.scrollLeft <= 0}
data-testid="left-shadow-block"
>
<div>
Expand Down Expand Up @@ -225,7 +225,7 @@ function EditorToolbar(): ReactElement {

{isMobile && (
<RightShadowBlock
isHidden={toolbarScroll.scrollLeft === toolbarScroll.maximumHorizontalScroll}
isHidden={toolbarScroll.scrollLeft >= toolbarScroll.maximumHorizontalScroll}
data-testid="right-shadow-block"
>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/write/TagForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('TagsForm', () => {

describe('태그의 유무에 따라 인풋창의 스타일이 변경된다', () => {
context('태그가 존재하지 않는 경우', () => {
const height = '34px';
const height = '28px';

it(`인풋창의 "height"가 ${height}이어야 한다`, () => {
renderTagsForm([]);
Expand All @@ -32,7 +32,7 @@ describe('TagsForm', () => {
});

context('태그가 존재하는 경우', () => {
const height = '40px';
const height = '32px';

it(`인풋창의 "height"가 ${height}이어야 한다`, () => {
renderTagsForm(['test']);
Expand Down
12 changes: 6 additions & 6 deletions src/components/write/TagForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,15 @@ const TagFormWrapper = styled.div`
}
`;

const TagsWrapper = styled.div<{isHaveTag: boolean }>`
const TagsWrapper = styled.div<{ isHaveTag: boolean; }>`
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
align-items: center;
padding-left: 8px;
padding-top: ${({ isHaveTag }) => (isHaveTag ? '5px' : '8px')};
padding-bottom: ${({ isHaveTag }) => (isHaveTag ? '5px' : '8px')};
padding-left: ${({ isHaveTag }) => (isHaveTag ? '8px' : '16px')};
padding-top: ${({ isHaveTag }) => (isHaveTag ? '5px' : '11px')};
padding-bottom: ${({ isHaveTag }) => (isHaveTag ? '5px' : '11px')};
background: ${({ theme }) => theme.background};
border: 1px solid ${({ theme }) => theme.accent2};
box-sizing: border-box;
Expand All @@ -141,11 +141,11 @@ const TagsWrapper = styled.div<{isHaveTag: boolean }>`
}
`;

const TagInput = styled.input<{isHaveTag: boolean }>`
const TagInput = styled.input<{ isHaveTag: boolean; }>`
${body1Font()};
display: inline-flex;
outline: none;
height: ${({ isHaveTag }) => (isHaveTag ? '40px' : '34px')};
height: ${({ isHaveTag }) => (isHaveTag ? '32px' : '28px')};
min-width: 8rem;
color: ${({ theme }) => theme.foreground};
border: none;
Expand Down