refactor: css 선택자 class 선택자로 변경

miind-palace · Mar 2, 2024 · 96d2ec6 · 96d2ec6
1 parent 7f03a0e
commit 96d2ec6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/components/common/Header/Header.style.ts b/components/common/Header/Header.style.ts
@@ -8,11 +8,11 @@ export const Container = styled.header<{ titleFontSize: string }>`
   padding: 0px 8px 24px;
   line-height: 41px;
 
-  & > button {
+  & > .right-btn {
     display: flex;
   }
 
-  & > h1 {
+  & > .header-title {
     font-size: ${({ titleFontSize }) => titleFontSize};
     font-weight: ${({ theme }) => theme.typography.weight.bold};
     color: ${({ theme }) => theme.colors.text.normal};

diff --git a/components/common/Header/Header.tsx b/components/common/Header/Header.tsx
@@ -17,8 +17,10 @@ const Header = ({ rightButton, onClickRightButton, title, titleFontSize = '24px'
       <button onClick={() => route.back()}>
         <LeftArrowIcon />
       </button>
-      <h1>{title}</h1>
-      <button onClick={onClickRightButton}>{rightButton && rightButton}</button>
+      <h1 className="header-title">{title}</h1>
+      <button className="right-btn" onClick={onClickRightButton}>
+        {rightButton && rightButton}
+      </button>
     </Container>
   )
 }