Merge pull request #82 from TeamPiickle/feat/#78-Nayeon_QA

Feat/#78 nayeon qa
TeamPiickle · Jul 19, 2022 · e955db0 · e955db0
2 parents f4d04e4 + 315102e
commit e955db0
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 56 deletions.
diff --git a/src/asset/icon/changeProfileBtn.svg b/src/asset/icon/changeProfileBtn.svg
diff --git a/src/asset/icon/index.ts b/src/asset/icon/index.ts
@@ -1,3 +1,4 @@
+export { ReactComponent as IcChangeProfileBtn } from "./changeProfileBtn.svg";
 export { ReactComponent as IcCheck1 } from "./check1.svg";
 export { ReactComponent as IcCheck2 } from "./check2.svg";
 export { ReactComponent as IcCloseBtn } from "./closeBtn.svg";

diff --git a/src/components/Bookmark/MyPiickleItem/style.ts b/src/components/Bookmark/MyPiickleItem/style.ts
@@ -14,7 +14,6 @@ export const St = {
 
   MyPiickleContent: styled.strong`
     ${({ theme }) => theme.fonts.body4};
-    letter-spacing: -0.03em;
     color: ${({ theme }) => theme.colors.bg};
 
     overflow: hidden;

diff --git a/src/components/CardCollection/LoginModal/style.ts b/src/components/CardCollection/LoginModal/style.ts
@@ -22,7 +22,6 @@ export const St = {
   ModalContents: styled.p`
     width: 16.5rem;
 
-    letter-spacing: -0.03rem;
     ${({ theme }) => theme.fonts.body4};
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -53,7 +52,6 @@ export const St = {
     box-shadow: 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
     border-radius: 4.7rem;
 
-    letter-spacing: -0.03rem;
     ${({ theme }) => theme.fonts.btn1};
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -73,7 +71,6 @@ export const St = {
     box-shadow: 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
     border-radius: 4.7rem;
 
-    letter-spacing: -0.03rem;
     ${({ theme }) => theme.fonts.btn1};
     color: ${({ theme }) => theme.colors.bg};
   `,

diff --git a/src/components/Login/LoginForm/style.ts b/src/components/Login/LoginForm/style.ts
@@ -8,7 +8,7 @@ export const St = {
   Form: styled.form``,
 
   Title: styled.h2`
-    margin-bottom: 2rem;
+    padding: 2.4rem 0;
 
     ${({ theme }) => theme.fonts.h1};
     color: ${({ theme }) => theme.colors.bg};

diff --git a/src/components/Main/Banner/style.ts b/src/components/Main/Banner/style.ts
@@ -10,27 +10,25 @@ export const St = {
     width: 36rem;
     height: 21.7rem;
   `,
-  ContentsPages: styled.span`
+
+  ContentsPages: styled.div`
     position: absolute;
     right: 0;
     bottom: 0;
 
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 0.4rem 0.7rem 0.5rem;
-    gap: 0.3rem;
+    justify-content: center;
+    gap: 0.8rem;
 
-    width: 3.5rem;
-    height: 1.7rem;
+    width: 3.9rem;
+    height: 1.8rem;
 
     background: rgba(0, 0, 0, 0.5);
   `,
 
   CurrentPage: styled.span`
-    line-height: 81.34%;
-    font-weight: 400;
-    font-size: 1rem;
+    ${({ theme }) => theme.fonts.caption4};
+    line-height: 1.8rem;
     color: ${({ theme }) => theme.colors.white};
   `,
 };
diff --git a/src/components/Main/PiickleMe/style.ts b/src/components/Main/PiickleMe/style.ts
@@ -5,10 +5,11 @@ export const St = {
   Container: styled.section``,
 
   RepresentVoteContentConTainer: styled.section`
+    position: relative;
     width: 100%;
     height: 15.2rem;
 
-    padding: 2.8rem 2.4rem 2rem;
+    padding: 2.6rem 2.4rem 2rem;
 
     background-color: #c9f2de; //확정 아니어서 일단 노가다로 박음
   `,
@@ -40,6 +41,7 @@ export const St = {
     line-height: 1.4;
 
     margin-bottom: 0.4rem;
+    padding-right: 5.8rem;
 
     ${({ theme }) => theme.fonts.body3};
     color: ${({ theme }) => theme.colors.gray800};
@@ -79,6 +81,10 @@ export const St = {
     border-radius: 4.2rem;
 
     ${({ theme }) => theme.fonts.h2}
+
+    position: absolute;
+    bottom: 1.8rem;
+    right: 1.6rem;
   `,
 
   RepresentGoVoteBtn: styled(Link)``,

diff --git a/src/components/MyPage/MyInfo/index.tsx b/src/components/MyPage/MyInfo/index.tsx
@@ -1,13 +1,21 @@
+import { IcChangeProfileBtn } from "../../../asset/icon/index";
 import useUserProfile from "../../../core/api/myPage";
 import { St } from "./style";
+
 export default function MyInfo() {
   const { userProfile, isLoading, isError } = useUserProfile();
 
   return (
     <St.MyInfoContainer>
       {userProfile && (
         <St.Profile>
-          <St.ProfileImage src={userProfile.data.profile_image_url} alt="프로필이미지" />
+          <St.Images>
+            <St.ProfileImage src={userProfile.data.profile_image_url} alt="프로필" />
+            <St.ChangeButton>
+
+              <IcChangeProfileBtn />
+            </St.ChangeButton>
+          </St.Images>
           <St.ProfileDetail>
             <St.ProfileNickname>
               <St.ProfileMyNickname>{userProfile.data.nickname}</St.ProfileMyNickname>

diff --git a/src/components/MyPage/MyInfo/style.ts b/src/components/MyPage/MyInfo/style.ts
@@ -12,10 +12,23 @@ export const St = {
     height: 11.8rem;
   `,
 
+  Images: styled.div`
+    width: 58px;
+    height: 58px;
+    position: relative;
+  `,
+
   ProfileImage: styled.img`
     width: 5.8rem;
     height: 5.8rem;
     border-radius: 50%;
+    background-color: pink;
+  `,
+
+  ChangeButton: styled.button`
+    position: absolute;
+    bottom: -0.3rem;
+    right: -0.3rem;
   `,
 
   ProfileDetail: styled.div``,
@@ -37,7 +50,6 @@ export const St = {
     width: auto;
     height: 2.6rem;
 
-    letter-spacing: -0.03em;
     ${({ theme }) => theme.fonts.body9};
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -59,7 +71,6 @@ export const St = {
   `,
 
   ProfileEmail: styled.p`
-    letter-spacing: -0.03rem;
     ${({ theme }) => theme.fonts.body4};
     color: ${({ theme }) => theme.colors.gray600};
   `,

diff --git a/src/components/MyPage/MyPiickle/style.ts b/src/components/MyPage/MyPiickle/style.ts
@@ -40,7 +40,6 @@ export const St = {
     width: 7.5rem;
     height: 2.2rem;
 
-    letter-spacing: -0.03rem;
     ${({ theme }) => theme.fonts.body1};
     color: ${({ theme }) => theme.colors.gray800};
   `,
@@ -49,8 +48,7 @@ export const St = {
     width: auto;
     height: 1.7rem;
 
-    letter-spacing: -0.03rem;
-    ${({ theme }) => theme.fonts.body4};
+    ${({ theme }) => theme.fonts.body6};
     color: ${({ theme }) => theme.colors.gray600};
   `,
 
@@ -69,10 +67,9 @@ export const St = {
 
   MoveButtonTitle: styled.p`
     width: auto;
-    height: 1.7rem;
+    height: 2rem;
 
-    letter-spacing: -0.03rem;
-    ${({ theme }) => theme.fonts.body4};
+    ${({ theme }) => theme.fonts.body6};
     color: ${({ theme }) => theme.colors.bg};
   `,
 };
diff --git a/src/components/MyPage/MySetting/style.ts b/src/components/MyPage/MySetting/style.ts
@@ -15,8 +15,7 @@ export const St = {
     width: 36rem;
     height: 3.9rem;
 
-    letter-spacing: -0.03rem;
-    ${({ theme }) => theme.fonts.body6};
+    ${({ theme }) => theme.fonts.body12};
     color: ${({ theme }) => theme.colors.bg};
   `,
 

diff --git a/src/mocks/handlers/ballots.ts b/src/mocks/handlers/ballots.ts
@@ -18,7 +18,7 @@ export const ballotsHandler = [
           },
           {
             _id: "62cc022f2e3dd7425047e382",
-            title: "투표 주제 제목",
+            title: "일이삼 사오륙 칠팔구 랄랄라 랄랄라 랄랄라라 사친깻 잎을떼 주냐남 사친깻 잎을",
           },
           {
             _id: "62cc022f2e3dd7425047e383",

diff --git a/src/style/globalStyle.ts b/src/style/globalStyle.ts
@@ -59,7 +59,6 @@ export const GlobalStyle = createGlobalStyle`
     box-sizing: border-box;
   } 
   html {
-    letter-spacing: -0.03rem;
     font-family: sans-serif;
     font-size: 62.5%;
     user-select: none;

diff --git a/src/style/theme.ts b/src/style/theme.ts
@@ -1,3 +1,5 @@
+import { number } from "prop-types";
+
 const colors = {
   red: "#FF0000",
   green: "#19BE7E",
@@ -31,45 +33,46 @@ interface Font {
   weight: 300 | 400 | 500 | 600 | 700;
   size: number;
   lineHeight: number;
+  letterSpacing: number;
   notoSans?: boolean;
 }
 
-function FONT({ weight, size, lineHeight, notoSans }: Font): string {
+function FONT({ weight, size, lineHeight, letterSpacing, notoSans }: Font): string {
   return `
     font-family: ${notoSans ? "Noto Sans" : "Pretendard"};
     font-weight: ${weight};
     font-size: ${size}rem;
     line-height: ${lineHeight}%;
-    letter-spacing: -0.04rem;
+    letter-spacing: -0.0${letterSpacing}rem;
   `;
 }
 
 const fonts = {
-  h1: FONT({ weight: 600, size: 2, lineHeight: 130 }),
-  h2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
-  body1: FONT({ weight: 600, size: 1.6, lineHeight: 140 }),
-  body2: FONT({ weight: 400, size: 2.4, lineHeight: 140 }),
-  body3: FONT({ weight: 700, size: 1.5, lineHeight: 140 }),
-  body4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
-  body5: FONT({ weight: 700, size: 2.4, lineHeight: 140 }),
-  body6: FONT({ weight: 400, size: 1.4, lineHeight: 140 }),
-  body7: FONT({ weight: 500, size: 1.6, lineHeight: 140 }),
-  body8: FONT({ weight: 400, size: 2, lineHeight: 140, notoSans: true }),
-  body9: FONT({ weight: 600, size: 2, lineHeight: 130 }),
-  body10: FONT({ weight: 600, size: 2.4, lineHeight: 130 }),
-  body11: FONT({ weight: 400, size: 1.5, lineHeight: 140 }),
-  body12: FONT({ weight: 400, size: 1.6, lineHeight: 140 }),
-  caption1: FONT({ weight: 400, size: 1, lineHeight: 80 }),
-  caption2: FONT({ weight: 500, size: 1, lineHeight: 130 }),
-  caption3: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
-  caption4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
-  caption5: FONT({ weight: 400, size: 1.1, lineHeight: 140 }),
-  btn1: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
-  btn2: FONT({ weight: 400, size: 1.4, lineHeight: 130 }),
-  btn3: FONT({ weight: 300, size: 1.6, lineHeight: 140 }),
-  btn4: FONT({ weight: 300, size: 1, lineHeight: 140 }),
-  footer1: FONT({ weight: 600, size: 1.2, lineHeight: 140 }),
-  footer2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }),
+  h1: FONT({ weight: 600, size: 2, lineHeight: 130, letterSpacing: 4 }),
+  h2: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 4 }),
+  body1: FONT({ weight: 600, size: 1.6, lineHeight: 140, letterSpacing: 3 }),
+  body2: FONT({ weight: 400, size: 2.4, lineHeight: 140, letterSpacing: 4 }),
+  body3: FONT({ weight: 700, size: 1.5, lineHeight: 140, letterSpacing: 3 }),
+  body4: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 3 }),
+  body5: FONT({ weight: 700, size: 2.4, lineHeight: 140, letterSpacing: 4 }),
+  body6: FONT({ weight: 400, size: 1.4, lineHeight: 140, letterSpacing: 3 }),
+  body7: FONT({ weight: 500, size: 1.6, lineHeight: 140, letterSpacing: 4 }),
+  body8: FONT({ weight: 400, size: 2, lineHeight: 140, letterSpacing: 4, notoSans: true }),
+  body9: FONT({ weight: 600, size: 2, lineHeight: 130, letterSpacing: 3 }),
+  body10: FONT({ weight: 600, size: 2.4, lineHeight: 130, letterSpacing: 4 }),
+  body11: FONT({ weight: 400, size: 1.5, lineHeight: 140, letterSpacing: 4 }),
+  body12: FONT({ weight: 400, size: 1.6, lineHeight: 140, letterSpacing: 4 }),
+  caption1: FONT({ weight: 400, size: 1, lineHeight: 80, letterSpacing: 4 }),
+  caption2: FONT({ weight: 500, size: 1, lineHeight: 130, letterSpacing: 4 }),
+  caption3: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 4 }),
+  caption4: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 3 }),
+  caption5: FONT({ weight: 400, size: 1.1, lineHeight: 140, letterSpacing: 4 }),
+  btn1: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 3 }),
+  btn2: FONT({ weight: 400, size: 1.4, lineHeight: 130, letterSpacing: 4 }),
+  btn3: FONT({ weight: 300, size: 1.6, lineHeight: 140, letterSpacing: 4 }),
+  btn4: FONT({ weight: 300, size: 1, lineHeight: 140, letterSpacing: 4 }),
+  footer1: FONT({ weight: 600, size: 1.2, lineHeight: 140, letterSpacing: 4 }),
+  footer2: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 4 }),
 } as const;
 
 const theme = {