diff --git a/src/components/Main/Banner/style.ts b/src/components/Main/Banner/style.ts index 5ccd643e..1a4942c8 100644 --- a/src/components/Main/Banner/style.ts +++ b/src/components/Main/Banner/style.ts @@ -9,6 +9,8 @@ export const St = { ImageWrapper: styled.img` width: 36rem; height: 21.7rem; + + margin-top: -2.4rem; `, ContentsPages: styled.div` diff --git a/src/components/Vote/AfterVoteList/index.tsx b/src/components/Vote/AfterVoteList/index.tsx index ad89e643..6937b064 100644 --- a/src/components/Vote/AfterVoteList/index.tsx +++ b/src/components/Vote/AfterVoteList/index.tsx @@ -44,7 +44,7 @@ export default function AfterVoteList(props: AfterVoteListProps) { })} - 재투표하기 + 다시 투표하기 ); diff --git a/src/components/Vote/AfterVoteList/style.ts b/src/components/Vote/AfterVoteList/style.ts index aa6842a8..e7901f42 100644 --- a/src/components/Vote/AfterVoteList/style.ts +++ b/src/components/Vote/AfterVoteList/style.ts @@ -4,19 +4,18 @@ import { IcCheck1 } from "../../../asset/icon"; export const St = { VoteOptionContainer: styled.ul` - width: 27.2rem; height: 14.3rem; - margin-top: 2.6rem; - margin-left: 1.6rem; + margin: 2.6rem 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between; + + position: relative; `, VoteOptionList: styled.li` - width: 27.2rem; height: 3.7rem; border-radius: 0.5rem; @@ -28,6 +27,7 @@ export const St = { VotedDescription: styled.div` display: flex; justify-content: space-between; + align-items: center; `, IconTextContainer: styled.div` @@ -45,10 +45,12 @@ export const St = { margin-left: 0.4rem; `, - VotedPercent: styled.strong``, + VotedPercent: styled.strong` + ${({ theme }) => theme.fonts.h2}; + `, VotedProgressBarContainer: styled.div<{ isSelected: boolean }>` - width: 27.2rem; + width: 100%; height: 1rem; border-radius: 4rem; @@ -73,19 +75,22 @@ export const St = { VoteBtnContainer: styled.div` display: flex; justify-content: center; + + bottom: 3.2rem; + position: absolute; + left: 50%; + transform: translateX(-50%); `, VoteBtn: styled.button` - width: 15.6rem; + width: 22.6rem; height: 3.4rem; border-radius: 6.6rem; - ${({ theme }) => theme.fonts.h2} + ${({ theme }) => theme.fonts.body6} background-color: ${({ theme }) => theme.colors.gray800}; color: ${({ theme }) => theme.colors.white}; - - margin-top: 8.4rem; `, }; diff --git a/src/components/Vote/BeforeVoteList/index.tsx b/src/components/Vote/BeforeVoteList/index.tsx index 1d1a25df..4accf26a 100644 --- a/src/components/Vote/BeforeVoteList/index.tsx +++ b/src/components/Vote/BeforeVoteList/index.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from "react"; - import { IcCheck2 } from "../../../asset/icon"; import { BallotTopicData, real } from "../../../core/api/vote"; import LoginModal from "../../CardCollection/LoginModal"; diff --git a/src/components/Vote/BeforeVoteList/style.ts b/src/components/Vote/BeforeVoteList/style.ts index 2005ae88..c1860d13 100644 --- a/src/components/Vote/BeforeVoteList/style.ts +++ b/src/components/Vote/BeforeVoteList/style.ts @@ -2,18 +2,17 @@ import styled from "styled-components"; export const St = { VoteOptionContainer: styled.ul` - width: 27.2rem; height: 14.3rem; - margin-top: 2.6rem; - margin-left: 1.6rem; + margin: 2.6rem 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between; + + position: relative; `, VoteOptionList: styled.li<{ isClicked: boolean }>` - width: 27.2rem; height: 3.7rem; border: solid 0.1rem #e0e0e0; @@ -41,18 +40,22 @@ export const St = { VoteBtnContainer: styled.div` display: flex; justify-content: center; + + bottom: 3.2rem; + position: absolute; + left: 50%; + transform: translateX(-50%); `, + VoteBtn: styled.button` - width: 15.6rem; + width: 22.6rem; height: 3.4rem; border-radius: 6.6rem; - ${({ theme }) => theme.fonts.h2} + ${({ theme }) => theme.fonts.body6} background-color: ${({ theme }) => theme.colors.gray800}; color: ${({ theme }) => theme.colors.white}; - - margin-top: 8.4rem; `, }; diff --git a/src/components/Vote/VoteContent/style.ts b/src/components/Vote/VoteContent/style.ts index 8418da85..6cf4c196 100644 --- a/src/components/Vote/VoteContent/style.ts +++ b/src/components/Vote/VoteContent/style.ts @@ -1,15 +1,23 @@ import styled from "styled-components"; export const St = { + ContainerWrapper: styled.section` + width: 100%; + + padding: 0 2.4rem; + `, + VoteContentContainer: styled.article` height: 44.2rem; - width: 30.4rem; box-shadow: 0rem 0.4rem 0.4rem rgba(0, 0, 0, 0.25), 0rem 0rem 0.2rem rgba(0, 0, 0, 0.25); border-radius: 1.5rem; padding-top: 5.3rem; + + display: flex; + flex-direction: column; `, VoteContentTitle: styled.h2` @@ -21,18 +29,18 @@ export const St = { `, VoteOptionContainer: styled.ul` - width: 27.2rem; + width: 100%; height: 14.3rem; margin-top: 2.6rem; - margin-left: 1.6rem; display: flex; flex-direction: column; justify-content: space-between; `, + VoteOptionList: styled.li` - width: 27.2rem; + width: 100%; height: 3.7rem; border: solid 0.1rem #e0e0e0; diff --git a/src/components/Vote/VoteTitle/style.ts b/src/components/Vote/VoteTitle/style.ts index 6a542826..cc00cdc4 100644 --- a/src/components/Vote/VoteTitle/style.ts +++ b/src/components/Vote/VoteTitle/style.ts @@ -2,9 +2,7 @@ import styled from "styled-components"; export const St = { VoteTitleContainer: styled.article` height: 7.4rem; - width: 36rem; - - padding: 0.2rem 1.6rem 4.6rem; + padding: 0 1.6rem 4.6rem; `, VoteTitleText: styled.h1` diff --git a/src/components/common/Header/style.ts b/src/components/common/Header/style.ts index 8ecd2a86..76681534 100644 --- a/src/components/common/Header/style.ts +++ b/src/components/common/Header/style.ts @@ -11,6 +11,8 @@ export const St = { padding: 0 1.6rem; + margin-bottom: 2.4rem; + width: 100%; height: 5.2rem; diff --git a/src/index.tsx b/src/index.tsx index 516ceef1..ef6b9733 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,13 +4,13 @@ import { RecoilRoot } from "recoil"; import { ThemeProvider } from "styled-components"; import App from "./App"; -import { worker } from "./mocks/browser"; +// import { worker } from "./mocks/browser"; import { GlobalStyle } from "./style/globalStyle"; import theme from "./style/theme"; -if (process.env.NODE_ENV === "development") { - worker.start(); -} +// if (process.env.NODE_ENV === "development") { +// worker.start(); +// } const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render(