Merge pull request #84 from TeamPiickle/feat/#78-JiyeongQA

Feat/#78 jiyeong qa
TeamPiickle · Jul 19, 2022 · d1f879a · d1f879a
2 parents d0792d9 + ba4a2a7
commit d1f879a
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 31 deletions.
diff --git 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
@@ -44,7 +44,7 @@ export default function AfterVoteList(props: AfterVoteListProps) {
           })}
       </St.VoteOptionContainer>
       <St.VoteBtnContainer>
-        <St.VoteBtn onClick={cancelVote}>재투표하기</St.VoteBtn>
+        <St.VoteBtn onClick={cancelVote}>다시 투표하기</St.VoteBtn>
       </St.VoteBtnContainer>
     </>
   );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(