diff --git a/src/components/Main/BestPiickle/BestPiickleCard/style.ts b/src/components/Main/BestPiickle/BestPiickleCard/style.ts index b463c46e..fcafcce0 100644 --- 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 index 3c99c761..4e62ab10 100644 --- a/src/components/Main/PiickleMe/index.tsx +++ b/src/components/Main/PiickleMe/index.tsx @@ -37,8 +37,8 @@ export default function PiickleMe() { - {representVoteData.contentText} - {representVoteData.discription} + {representVoteData.contentText} + {representVoteData.discription} 투표하기 {voteData.map((element) => { @@ -47,8 +47,7 @@ export default function PiickleMe() { {element.profileImg} - {element.contentText.slice(0, 18)}... - {element.subText} + {element.contentText.slice(0, 18)}... {element.voteBtn} diff --git a/src/components/Main/PiickleMe/style.ts b/src/components/Main/PiickleMe/style.ts index 06f94318..ff2e3eca 100644 --- 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 index 351512b0..5e649cc3 100644 --- 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,7 +89,7 @@ export const St = { `, MoodPiickleText: styled.h2` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.bg}; @@ -97,7 +97,7 @@ export const St = { `, GoMoodPiickleBtn: styled.button` - ${({ theme }) => theme.fonts.body12}; + ${({ theme }) => theme.fonts.body4}; color: ${({ theme }) => theme.colors.gray600}; `, @@ -109,7 +109,7 @@ export const St = { `, PiickleMeText: styled.h2` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.bg}; @@ -117,7 +117,7 @@ export const St = { `, GoPiickleMeBtn: styled.button` - ${({ theme }) => theme.fonts.body12}; + ${({ theme }) => theme.fonts.body4}; color: ${({ theme }) => theme.colors.gray600}; `,