[ fix ] main page fonts 수정

TeamPiickle · Jul 14, 2022 · 8b3a518 · 8b3a518
1 parent 93f7f03
commit 8b3a518
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/src/components/Main/BestPiickle/BestPiickleCard/style.ts b/src/components/Main/BestPiickle/BestPiickleCard/style.ts
@@ -25,7 +25,7 @@ export const St = {
   `,
 
   Content: styled.p`
-    ${({ theme }) => theme.fonts.caption1};
+    ${({ theme }) => theme.fonts.body1};
     color: ${({ theme }) => theme.colors.black};
 
     width: 17rem;

diff --git a/src/components/Main/PiickleMe/index.tsx b/src/components/Main/PiickleMe/index.tsx
@@ -37,8 +37,8 @@ export default function PiickleMe() {
     <St.Container>
       <HeadingTitleContainer headingTitles={headingTitles[2]} />
       <St.RepresentVoteContentConTainer>
-        <St.VoteContentText isFirst={true}>{representVoteData.contentText}</St.VoteContentText>
-        <St.VoteContentSubText isFirst={true}>{representVoteData.discription}</St.VoteContentSubText>
+        <St.RepresentVoteContentText>{representVoteData.contentText}</St.RepresentVoteContentText>
+        <St.RepresentVoteContentSubText>{representVoteData.discription}</St.RepresentVoteContentSubText>
         <St.RepresentGoVoteBtn>투표하기</St.RepresentGoVoteBtn>
       </St.RepresentVoteContentConTainer>
       {voteData.map((element) => {
@@ -47,8 +47,7 @@ export default function PiickleMe() {
             <St.VoteImgTextWrapper>
               {element.profileImg}
               <St.VoteTextContainer>
-                <St.VoteContentText isFirst={false}>{element.contentText.slice(0, 18)}...</St.VoteContentText>
-                <St.VoteContentSubText isFirst={false}>{element.subText}</St.VoteContentSubText>
+                <St.VoteContentText>{element.contentText.slice(0, 18)}...</St.VoteContentText>
               </St.VoteTextContainer>
             </St.VoteImgTextWrapper>
             <St.GoVoteBtn>{element.voteBtn}</St.GoVoteBtn>

diff --git a/src/components/Main/PiickleMe/style.ts b/src/components/Main/PiickleMe/style.ts
@@ -37,20 +37,29 @@ export const St = {
     flex-direction: column;
   `,
 
-  VoteContentText: styled.p<{ isFirst: boolean }>`
+  RepresentVoteContentText: styled.p`
     line-height: 1.4;
 
     margin-bottom: 0.4rem;
 
-    ${({ isFirst, theme }) => (isFirst ? theme.fonts.caption1 : theme.fonts.body2)};
+    ${({ theme }) => theme.fonts.body3};
+    color: ${({ theme }) => theme.colors.gray800};
   `,
 
-  VoteContentSubText: styled.p<{ isFirst: boolean }>`
-    ${({ theme }) => theme.fonts.body2}
+  RepresentVoteContentSubText: styled.p`
+    ${({ theme }) => theme.fonts.caption3}
 
     color: ${({ theme }) => theme.colors.gray600};
   `,
 
+  VoteContentText: styled.p`
+    line-height: 1.4;
+
+    margin-bottom: 0.4rem;
+
+    ${({ theme }) => theme.fonts.body4};
+  `,
+
   RepresentGoVoteBtn: styled.button`
     width: 7.6rem;
     height: 2.8rem;

diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts
@@ -60,13 +60,13 @@ export const St = {
 
     color: ${({ theme }) => theme.colors.gray600};
 
-    border-right: solid 0.15rem #606060;
+    border-right: solid 0.15rem ${({ theme }) => theme.colors.gray600};
 
     padding-right: 1rem;
   `,
 
   LogoutBtn: styled.button`
-    ${({ theme }) => theme.fonts.body12};
+    ${({ theme }) => theme.fonts.btn2};
     color: ${({ theme }) => theme.colors.gray600};
 
     padding-left: 1rem;
@@ -77,7 +77,7 @@ export const St = {
   `,
 
   TitleText: styled.h1`
-    ${({ theme }) => theme.fonts.caption1};
+    ${({ theme }) => theme.fonts.body1};
 
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -89,15 +89,15 @@ export const St = {
   `,
 
   MoodPiickleText: styled.h2`
-    ${({ theme }) => theme.fonts.caption1};
+    ${({ theme }) => theme.fonts.body1};
 
     color: ${({ theme }) => theme.colors.bg};
 
     margin-right: 1.2rem;
   `,
 
   GoMoodPiickleBtn: styled.button`
-    ${({ theme }) => theme.fonts.body12};
+    ${({ theme }) => theme.fonts.body4};
 
     color: ${({ theme }) => theme.colors.gray600};
   `,
@@ -109,15 +109,15 @@ export const St = {
   `,
 
   PiickleMeText: styled.h2`
-    ${({ theme }) => theme.fonts.caption1};
+    ${({ theme }) => theme.fonts.body1};
 
     color: ${({ theme }) => theme.colors.bg};
 
     margin-right: 1.2rem;
   `,
 
   GoPiickleMeBtn: styled.button`
-    ${({ theme }) => theme.fonts.body12};
+    ${({ theme }) => theme.fonts.body4};
 
     color: ${({ theme }) => theme.colors.gray600};
   `,