Fetch and display point in gauge ui (#310)

payw-org · Apr 12, 2021 · ad579d6 · ad579d6
1 parent a282d16
commit ad579d6
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/src/pages/my/index.module.scss b/src/pages/my/index.module.scss
@@ -4,54 +4,50 @@
   &:not(:first-child) {
     margin-top: 50px;
   }
-}
 
-.eodiro-my {
-  .info-section {
-    .section-header {
-      font-weight: 600;
-      font-size: h(3);
-      @include resolve-optical-illusion;
-    }
+  .section-header {
+    font-weight: 600;
+    font-size: h(3);
+    @include resolve-optical-illusion;
+  }
 
-    .section-body {
-      margin-top: s(3);
-    }
+  .section-body {
+    margin-top: s(3);
   }
+}
 
-  .my-posts {
-    margin-top: 30px;
+.my-posts {
+  margin-top: 30px;
 
-    .my-post-item {
-      margin-top: 10px;
-    }
+  .my-post-item {
+    margin-top: 10px;
+  }
 
-    .post-item-boardName {
-      margin-right: 15px;
-    }
+  .post-item-boardName {
+    margin-right: 15px;
   }
+}
 
-  .info-block {
-    text-align: center;
+.info-block {
+  text-align: center;
 
-    .ib-header {
-      font-size: b(8);
+  .ib-header {
+    font-size: b(8);
 
-      & + * {
-        margin-top: 12px;
-      }
+    & + * {
+      margin-top: 12px;
     }
   }
+}
 
-  .sign-out-section {
-    margin-top: s(6);
-    padding-top: s(6);
-    @include separator('top');
-    display: flex;
-    justify-content: center;
+.sign-out-section {
+  margin-top: s(6);
+  padding-top: s(6);
+  @include separator('top');
+  display: flex;
+  justify-content: center;
 
-    .sign-out-btn {
-      margin-right: s(3);
-    }
+  .sign-out-btn {
+    margin-right: s(3);
   }
 }
diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
@@ -14,7 +14,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useSetRecoilState } from 'recoil'
-import $ from './style.module.scss'
+import $ from './index.module.scss'
 
 const MyPage: NextPage = () => {
   const router = useRouter()
@@ -24,6 +24,7 @@ const MyPage: NextPage = () => {
     nickname: '-',
     randomNickname: '-',
     joinedAt: new Date('1996-03-11'),
+    point: 0,
   })
 
   async function onLogOut() {
@@ -58,8 +59,15 @@ const MyPage: NextPage = () => {
   // }
 
   return (
-    <Body pageTitle={`${user.nickname}님`} bodyClassName={$['eodiro-my']}>
-      <section className={$['info-section']}>
+    <Body pageTitle={`${user.nickname}님`}>
+      <section className={classNames($['section'])}>
+        <h1 className={$['section-header']}>포인트</h1>
+        <Tile flat className={$['section-body']}>
+          <div className={$['gauge-']} />
+        </Tile>
+      </section>
+
+      <section className={classNames($['section'], $['info-section'])}>
         <h1 className={$['section-header']}>기본 정보</h1>
         <Grid proportion="large" className={$['section-body']}>
           <Tile flat>