From c44c0e636677c2252e9f71461268556748f6bee2 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Tue, 13 Sep 2022 23:15:46 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B8=80=20=EC=9E=91=EC=84=B1=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=ED=88=B4=EB=B0=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=9E=85=EB=A0=A5=20=ED=8F=BC=20css?=
 =?UTF-8?q?=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=98=EB=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 글 작성페이지에 툴바 및 태그 입력 폼 css를 수정
---
 src/components/write/EditorToolbar.test.tsx |  4 ++--
 src/components/write/EditorToolbar.tsx      |  4 ++--
 src/components/write/TagForm.test.tsx       |  4 ++--
 src/components/write/TagForm.tsx            | 12 ++++++------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/write/EditorToolbar.test.tsx b/src/components/write/EditorToolbar.test.tsx
index a7245bb3..c5d03ffd 100644
--- a/src/components/write/EditorToolbar.test.tsx
+++ b/src/components/write/EditorToolbar.test.tsx
@@ -72,7 +72,7 @@ describe('EditorToolbar', () => {
         });
       });
 
-      context('스크롤 left값이 0인 경우', () => {
+      context('스크롤 left값이 0보다 작은 경우', () => {
         it('"left-shadow-block"의 opacity값은 0이여만 한다', () => {
           renderEditorToolbar();
 
@@ -84,7 +84,7 @@ describe('EditorToolbar', () => {
         });
       });
 
-      context('스크롤 left값이 툴바 최대 수평 길이와 같은 경우', () => {
+      context('스크롤 left값이 툴바 최대 수평 길이보다 큰 경우', () => {
         it('"right-shadow-block"의 opacity값은 0이여만 한다', () => {
           renderEditorToolbar();
 
diff --git a/src/components/write/EditorToolbar.tsx b/src/components/write/EditorToolbar.tsx
index fe1bb534..6ff4e772 100644
--- a/src/components/write/EditorToolbar.tsx
+++ b/src/components/write/EditorToolbar.tsx
@@ -95,7 +95,7 @@ function EditorToolbar(): ReactElement {
     >
       {isMobile && (
         <LeftShadowBlock
-          isHidden={toolbarScroll.scrollLeft === 0}
+          isHidden={toolbarScroll.scrollLeft <= 0}
           data-testid="left-shadow-block"
         >
           <div>
@@ -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>
diff --git a/src/components/write/TagForm.test.tsx b/src/components/write/TagForm.test.tsx
index fcb5bec3..c3fd529a 100644
--- a/src/components/write/TagForm.test.tsx
+++ b/src/components/write/TagForm.test.tsx
@@ -20,7 +20,7 @@ describe('TagsForm', () => {
 
   describe('태그의 유무에 따라 인풋창의 스타일이 변경된다', () => {
     context('태그가 존재하지 않는 경우', () => {
-      const height = '34px';
+      const height = '28px';
 
       it(`인풋창의 "height"가 ${height}이어야 한다`, () => {
         renderTagsForm([]);
@@ -32,7 +32,7 @@ describe('TagsForm', () => {
     });
 
     context('태그가 존재하는 경우', () => {
-      const height = '40px';
+      const height = '32px';
 
       it(`인풋창의 "height"가 ${height}이어야 한다`, () => {
         renderTagsForm(['test']);
diff --git a/src/components/write/TagForm.tsx b/src/components/write/TagForm.tsx
index 1b572644..24390e35 100644
--- a/src/components/write/TagForm.tsx
+++ b/src/components/write/TagForm.tsx
@@ -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;
@@ -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;