Feat: 제목 컴포넌트 분리 #10

공통 컴포넌트 BigTitle 생성
JMarketYard · Jan 26, 2025 · 7b8a3b7 · 7b8a3b7
1 parent 2bdabbe
commit 7b8a3b7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/src/components/BigTitle.tsx b/src/components/BigTitle.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const BigTitle = ({children}:{children:string}) => {
+    return (
+        <BigTitleBox>
+            <TitleIcon />
+            {children}
+        </BigTitleBox>
+    )
+}
+
+export default BigTitle;
+
+const BigTitleBox = styled.div`
+    width: 1080px;
+    height: 53px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid black;
+    color: #000;
+    font-family: Pretendard;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+`
+
+const TitleIcon = styled.span`
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background-color: #C908FF;
+    border-radius: 50%;
+    margin-right: 52px;
+`
diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx
@@ -1,13 +1,11 @@
 import styled from "styled-components";
+import BigTitle from "../components/BigTitle";
 
 const RaffleUploadPage = () => {
     return (
         <UploadForm>
             <div>
-                <BigTitle>
-                    <TitleIcon />
-                    상품 정보
-                </BigTitle>
+                <BigTitle>상품 정보</BigTitle>
                 <ItemInfoContainer>
                     <ImgContainer>
                         <ImgSpan>상품 이미지</ImgSpan>
@@ -43,7 +41,6 @@ const RaffleUploadPage = () => {
             </div>
             <div>
                 <BigTitle>
-                    <TitleIcon/>
                     거래 설정
                 </BigTitle>
                 <SetConditionContainer>
@@ -90,28 +87,6 @@ const UploadForm = styled.form`
     padding-top: 63px;
 `
 
-const BigTitle = styled.div`
-    width: 1080px;
-    height: 53px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid black;
-    color: #000;
-    font-family: Pretendard;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-`
-const TitleIcon = styled.span`
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    background-color: #C908FF;
-    border-radius: 50%;
-    margin-right: 52px;
-`
-
 const ItemInfoContainer = styled.div`
     display: flex;
     column-gap: 73px;