Feat/#133: 글쓰기 페이지 QA 반영

src/components/common/banner/ToolListBanner.styled.ts

@@ -15,8 +15,6 @@ export const Container = styled.div<{ $forCommunity: boolean }>`
   margin-top: ${({ $forCommunity }) => $forCommunity && '2.4rem'};
   overflow: ${({ $forCommunity }) => ($forCommunity ? 'auto' : 'hidden auto')};
 
-  box-shadow: 0 0 1.2rem 0 ${({ theme }) => theme.colors.shadow1};
-  border: 1px solid ${({ theme, $forCommunity }) => ($forCommunity ? 'none' : theme.colors.gray4)};
   border-radius: 2rem;
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -39,11 +37,10 @@ export const TitleBox = styled.div`
   flex-shrink: 0;
   align-items: flex-start;
   width: 100%;
-  height: 10rem;
   padding: 1.6rem 2.4rem;
 
   background: ${({ theme }) => theme.colors.white1};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray2};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray4};
   border-radius: 2rem 2rem 0 0;
 `;
 
@@ -83,7 +80,7 @@ export const CategoryHeader = styled.div<{ isFreeChecked: boolean }>`
   padding: 1.9rem 2.4rem;
 
   cursor: pointer;
-  border-top: 1px solid ${({ theme }) => theme.colors.gray4};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray6};
 
   & svg path {
     fill: ${({ theme, isFreeChecked }) => (isFreeChecked ? theme.colors.white1 : theme.colors.black)};
@@ -97,10 +94,6 @@ export const ToolList = styled.ul`
   margin: 0;
 
   list-style: none;
-  border-top: 0;
-  border-right: 1px solid ${({ theme }) => theme.colors.gray4};
-  border-bottom: 0;
-  border-left: 1px solid ${({ theme }) => theme.colors.gray4};
 `;
 
 export const ToolItem = styled.li<{ isSelected: boolean }>`

src/pages/communityWrite/CommunityWrite.styled.ts

@@ -27,17 +27,16 @@ export const WriteTitle = styled.div`
   width: 104.8rem;
   height: 6.4rem;
   margin: 0.8rem 0;
+  padding: 1.6rem;
 
   ${({ theme }) => theme.fonts.body_24_b};
   color: ${({ theme }) => theme.colors.black};
-
-  cursor: pointer;
 `;
 
 export const SideBanner = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.6rem;
+  justify-content: space-between;
 `;
 
 export const ToastBox = styled.div`

src/pages/communityWrite/components/writingBody/WritingBody.styled.ts

@@ -14,14 +14,13 @@ export const Container = styled.div<{
   height: 52.5rem;
   overflow: hidden;
 
-  box-shadow: 0 0.4rem 0.6rem rgb(0 0 0 / 10%);
-  box-shadow: 0 0 1.2rem 0 rgb(211 211 211 / 63%);
+  background-color: ${({ theme }) => theme.colors.white1};
   border: ${({ isExceedingLimit, isActive, theme }) =>
     isExceedingLimit
       ? `2px solid ${theme.colors.sys_red}`
       : isActive
         ? `2px solid ${theme.colors.gray1}`
-        : `1px solid ${theme.colors.gray4}`} !important;
+        : `1px solid ${theme.colors.gray6}`} !important;
   border-radius: 1.6rem;
 
   animation: ${({ triggerShake }) => (triggerShake ? `shake 0.3s ease` : 'none')};
@@ -56,8 +55,8 @@ export const Divider = styled.div`
   width: 2rem;
   height: 46.5rem;
 
-  background-color: ${({ theme }) => theme.colors.white2};
-  border-left: 1px solid ${({ theme }) => theme.colors.gray4};
+  background-color: ${({ theme }) => theme.colors.white1};
+  border-left: 1px solid ${({ theme }) => theme.colors.gray6};
 `;
 
 export const TextArea = styled.textarea`
@@ -87,7 +86,7 @@ export const TextArea = styled.textarea`
   &::-webkit-scrollbar-thumb {
     background-color: ${({ theme }) => theme.colors.gray4};
     cursor: pointer;
-    border: 5px solid ${({ theme }) => theme.colors.white2};
+    border: 5px solid ${({ theme }) => theme.colors.white1};
     border-radius: 2.3rem;
 
     &:hover {
@@ -115,6 +114,6 @@ export const CharCount = styled.span<{ isExceedingLimit: boolean }>`
   ${({ theme }) => theme.fonts.body_20_r};
 
   background: ${({ theme }) => theme.colors.white1};
-  border-top: 1px solid ${({ theme }) => theme.colors.gray2};
+  border-top: 1px solid ${({ theme }) => theme.colors.gray5};
   border-radius: 0 0 1.6rem 1.6rem;
 `;

src/pages/communityWrite/components/writingImg/WritingImg.styled.ts

@@ -10,8 +10,7 @@ export const Container = styled.div`
   padding-left: 4rem;
 
   background: ${({ theme }) => theme.colors.white1};
-  box-shadow: 0 0 1.2rem 0 ${({ theme }) => theme.colors.shadow1};
-  border: 1px solid ${({ theme }) => theme.colors.gray4};
+  border: 1px solid ${({ theme }) => theme.colors.gray6};
   border-radius: 1.6rem;
 `;
 
@@ -26,7 +25,7 @@ export const Button = styled.button<{ isHovered: boolean; isClicked: boolean }>`
   justify-content: center;
   width: 10rem;
   height: 10rem;
-  padding: 2.8rem;
+  padding: 3rem 2.6rem 2.4rem 3.2rem;
 
   background: ${({ theme }) => theme.colors.white2};
   cursor: pointer;
@@ -37,10 +36,14 @@ export const Button = styled.button<{ isHovered: boolean; isClicked: boolean }>`
     transform 0.2s;
 
   &:hover {
+    padding: 2.8rem;
+
     background-color: ${({ theme }) => theme.colors.gray4};
   }
 
   &:active {
+    padding: 2.8rem;
+
     background-color: ${({ theme }) => theme.colors.gray4};
     transform: scale(0.95);
   }

src/pages/communityWrite/components/writingTitle/WritingTitle.styled.ts

@@ -11,14 +11,12 @@ export const Container = styled.div<{
   padding: 2.4rem 4rem;
 
   background: ${({ theme }) => theme.colors.white1};
-  box-shadow: 0 0 1.2rem 0 ${({ theme }) => theme.colors.shadow1};
-  border: 1px solid ${({ theme }) => theme.colors.gray4};
   border: ${({ isExceedingLimit, isActive, theme }) =>
     isExceedingLimit
       ? `2px solid ${theme.colors.sys_red}`
       : isActive
         ? `2px solid ${theme.colors.gray1}`
-        : `1px solid ${theme.colors.gray4}`};
+        : `1px solid ${theme.colors.gray6}`};
   border-radius: 1.6rem;
 
   animation: ${({ triggerShake }) => (triggerShake ? `shake 0.3s ease` : 'none')};