Merge pull request #155 from bankidz/qa/sungwoo

Qa/sungwoo
bankidz · Aug 5, 2022 · 8eb65ee · 8eb65ee
2 parents c9a1e33 + b539e28
commit 8eb65ee
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 149 deletions.
diff --git a/dummy b/dummy
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,6 @@ import FinancialRouter from './pages/Financial';
 import NotFound from './pages/NotFound';
 import RequireAuth from '@components/auth/RequireAuth';
 import PersistLogin from '@components/auth/PersistLogin';
-import SungwooTestPage from './pages/SungwooTestPage';
 import WalkRouter from './pages/Walk';
 import { useEffect } from 'react';
 
@@ -40,7 +39,6 @@ function App() {
           <Route path="/walk/*" element={<WalkRouter />} />
           <Route path="/mypage/*" element={<MypageRouter />} />
           <Route path="/financial/*" element={<FinancialRouter />} />
-          <Route path="/sungwoo" element={<SungwooTestPage />} />
           <Route path="*" element={<NotFound />} />
         </Route>
         {/* </Route> */}

diff --git a/src/components/common/Receipt.tsx b/src/components/common/Receipt.tsx
@@ -88,9 +88,9 @@ ReceiptProps) {
             <div className="title">총 소요기간</div>
             <div className="content">{weeks}주</div>
           </div>
-          <div className="계약종료주차">
+          <div className="계약종료일">
             <div className="text-wrapper">
-              <div className="title">계약종료 주차</div>
+              <div className="title">계약종료일</div>
               <div className="content">
                 {`${year}년 ${month}월 ${weekNo}주`}
               </div>
@@ -151,7 +151,7 @@ const Wrapper = styled.div`
 `;
 
 const Content = styled.div`
-  margin: -1px 0; // overlaps 1px
+  margin: -2px 0; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.grey100};
   width: 100%;
   height: 360px;
@@ -283,6 +283,7 @@ const Content = styled.div`
         height: 12px;
         ${({ theme }) => theme.typo.text.S_12_M};
         color: ${({ theme }) => theme.palette.greyScale.grey500};
+        margin-top: 0;
         margin-bottom: 8px;
         padding: 0;
       }
@@ -294,7 +295,7 @@ const Content = styled.div`
       }
     }
 
-    .계약종료주차 {
+    .계약종료일 {
       width: 66.6%;
       height: 70px;
       display: flex;
@@ -307,6 +308,7 @@ const Content = styled.div`
           height: 12px;
           ${({ theme }) => theme.typo.text.S_12_M};
           color: ${({ theme }) => theme.palette.greyScale.grey500};
+          margin-top: 0;
           margin-bottom: 8px;
         }
         .content {

diff --git a/src/components/common/modals/QuinaryModal.tsx b/src/components/common/modals/QuinaryModal.tsx
@@ -151,9 +151,9 @@ function QuinaryModal({
               <div className="title">총 소요기간</div>
               <div className="content">{weeks}주</div>
             </div>
-            <div className="계약종료주차">
+            <div className="계약종료일">
               <div className="text-wrapper">
-                <div className="title">계약종료 주차</div>
+                <div className="title">계약종료일</div>
                 <div className="content">
                   {`${year}년 ${month}월 ${weekNo}주`}
                 </div>
@@ -252,7 +252,7 @@ const Content = styled.div`
 `;
 
 const Top = styled.div`
-  margin: -1px 0; // overlaps 1px
+  margin: -2px 0; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   height: 116px; // 10px decreased
   width: 100%;
@@ -273,7 +273,7 @@ const Top = styled.div`
 `;
 
 const Bottom = styled.div`
-  margin-bottom: -1px; // overlaps 1px
+  margin-bottom: -2px; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   width: 100%;
   height: 360px; // 10px decreased
@@ -420,7 +420,7 @@ const Bottom = styled.div`
       }
     }
 
-    .계약종료주차 {
+    .계약종료일 {
       width: 66.6%;
       height: 100%;
       display: flex;

diff --git a/src/components/common/modals/SenaryModal.tsx b/src/components/common/modals/SenaryModal.tsx
@@ -156,9 +156,9 @@ function SenaryModal({
               <div className="title">총 소요기간</div>
               <div className="content">{weeks}주</div>
             </div>
-            <div className="계약종료주차">
+            <div className="계약종료일">
               <div className="text-wrapper">
-                <div className="title">계약종료 주차</div>
+                <div className="title">계약종료일</div>
                 <div className="content">
                   {`${year}년 ${month}월 ${weekNo}주`}
                 </div>
@@ -282,7 +282,7 @@ const Content = styled.div`
 `;
 
 const Top = styled.div`
-  margin: -1px 0; // overlaps 1px
+  margin: -2px 0; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   height: 116px; // 10px decreased
   width: 100%;
@@ -303,7 +303,7 @@ const Top = styled.div`
 `;
 
 const Bottom = styled.div`
-  margin-bottom: -1px; // overlaps 1px
+  margin-bottom: -2px; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   width: 100%;
   height: 350px; // 10px decreased
@@ -450,7 +450,7 @@ const Bottom = styled.div`
       }
     }
 
-    .계약종료주차 {
+    .계약종료일 {
       width: 66.6%;
       height: 100%;
       display: flex;

diff --git a/src/components/common/modals/quaternaryModal/PerforatedLineBottom.tsx b/src/components/common/modals/quaternaryModal/PerforatedLineBottom.tsx
@@ -37,7 +37,7 @@ const Wrapper = styled.div`
   outline: none;
 
   .shape {
-    margin: 0 -1px;
+    margin: 0 -1.5px;
     flex: 1;
     border: none;
     outline: none;

diff --git a/src/components/common/modals/quaternaryModal/PerforatedLineTop.tsx b/src/components/common/modals/quaternaryModal/PerforatedLineTop.tsx
@@ -37,7 +37,7 @@ const Wrapper = styled.div`
   outline: none;
 
   .shape {
-    margin: 0 -1px;
+    margin: 0 -1.5px;
     flex: 1;
     border: none;
     outline: none;

diff --git a/src/components/common/modals/quaternaryModal/QuaternaryModal.tsx b/src/components/common/modals/quaternaryModal/QuaternaryModal.tsx
@@ -169,9 +169,9 @@ function QuaternaryModal({
               <div className="title">총 소요기간</div>
               <div className="content">{weeks}주</div>
             </div>
-            <div className="계약종료주차">
+            <div className="계약종료일">
               <div className="text-wrapper">
-                <div className="title">계약종료 주차</div>
+                <div className="title">계약종료일</div>
                 <div className="content">
                   {`${year}년 ${month}월 ${weekNo}주`}
                 </div>
@@ -289,7 +289,7 @@ const Content = styled.div`
 `;
 
 const Top = styled.div`
-  margin: -1px 0; // overlaps 1px
+  margin: -2px 0; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   height: 100px;
   width: 100%;
@@ -314,7 +314,7 @@ const Top = styled.div`
 `;
 
 const Bottom = styled.div`
-  margin-bottom: -1px; // overlaps 1px
+  margin-bottom: -2px; // overlaps 2px
   background: ${({ theme }) => theme.palette.greyScale.white};
   width: 100%;
   height: 360px;
@@ -461,7 +461,7 @@ const Bottom = styled.div`
       }
     }
 
-    .계약종료주차 {
+    .계약종료일 {
       width: 66.6%;
       height: 70px;
       display: flex;

diff --git a/src/components/home/HomeTemplate.tsx b/src/components/home/HomeTemplate.tsx
@@ -51,6 +51,18 @@ function HomeTemplate({ children, usage }: HomeTemplateProps) {
     // 부모 -> 주어진
     headerText = `자녀가 저축에 실패하지\n않도록 격려해주세요`;
   }
+
+  // 온보딩으로 뒤로가기 차단
+  const preventGoBack = () => {
+    history.pushState(null, '', location.href);
+  };
+  useEffect(() => {
+    history.pushState(null, '', location.href);
+    window.addEventListener('popstate', preventGoBack);
+    return () => {
+      window.removeEventListener('popstate', preventGoBack);
+    };
+  }, []);
   return (
     <Wrapper>
       <FixedBar colorByLevel={colorByLevel}>
@@ -185,30 +197,29 @@ const BackgroundBox = styled.div<{
   transition: ${({ theme }) => theme.transition.onFocus};
 `;
 
-const Background = styled.div<{ colorByLevel: string }>`
-  position: absolute;
-  top: 0;
-  left: 50%;
-  z-index: 1;
-  transform: translate3d(-50%, 0, 0);
+// const Background = styled.div<{ colorByLevel: string }>`
+//   position: absolute;
+//   top: 0;
+//   left: 50%;
+//   z-index: 1;
+//   transform: translate3d(-50%, 0, 0);
 
-  height: 288px;
-  width: 100%;
-  /* background-color: ${({ colorByLevel }) => colorByLevel}; */
-  background: red;
+//   height: 288px;
+//   width: 100%;
+//   background-color: ${({ colorByLevel }) => colorByLevel};
 
-  &:after {
-    width: ${calcRatio(530, 360)};
-    margin: 0 auto;
-    height: 230px;
-    background-color: ${({ theme }) => theme.palette.greyScale.white};
-    border-radius: 50%;
-    position: absolute;
-    top: 257px;
-    left: calc(-${calcRatio(530, 360)} / 2 + 50%);
-    content: '';
-  }
-`;
+//   &:after {
+//     width: ${calcRatio(530, 360)};
+//     margin: 0 auto;
+//     height: 230px;
+//     background-color: ${({ theme }) => theme.palette.greyScale.white};
+//     border-radius: 50%;
+//     position: absolute;
+//     top: 257px;
+//     left: calc(-${calcRatio(530, 360)} / 2 + 50%);
+//     content: '';
+//   }
+// `;
 
 const BackgroundEllipse = styled.div<{
   colorByLevel: string;

diff --git a/src/components/home/SkeletonDongilList.tsx b/src/components/home/SkeletonDongilList.tsx
@@ -1,12 +1,8 @@
 import styled, { css } from 'styled-components';
 
-export type TSkeletonDongilListUsage =
-  | 'walking'
-  | 'pending'
-  | 'proposed'
-  | 'thisWeekS';
+type TUsage = 'walking' | 'pending' | 'proposed' | 'thisWeekS';
 
-function SkeletonDongilList({ usage }: { usage: TSkeletonDongilListUsage }) {
+function SkeletonDongilList({ usage }: { usage: TUsage }) {
   return (
     <Wrapper usage={usage}>
       <Item usage={usage} />
@@ -18,15 +14,15 @@ function SkeletonDongilList({ usage }: { usage: TSkeletonDongilListUsage }) {
 
 export default SkeletonDongilList;
 
-const Wrapper = styled.div<{ usage: TSkeletonDongilListUsage }>`
+const Wrapper = styled.div<{ usage: TUsage }>`
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
 `;
 
-const Item = styled.div<{ usage: TSkeletonDongilListUsage }>`
+const Item = styled.div<{ usage: TUsage }>`
   width: 100%;
   background: ${({ theme }) => theme.palette.greyScale.white};
   border-radius: ${({ theme }) => theme.radius.medium};

diff --git a/src/pages/Home/Detail.tsx b/src/pages/Home/Detail.tsx
@@ -67,6 +67,7 @@ function Detail() {
     return found?.challengeList;
   }
 
+  console.log('targetDongil: ', targetDongil!);
   const {
     isMom,
     title,
@@ -77,6 +78,8 @@ function Detail() {
     weeks,
     progressList,
     successWeeks,
+    isAchieved,
+    status,
   } = targetDongil!;
 
   const percent = Math.ceil((successWeeks / weeks / 10) * 100) * 10;
@@ -184,7 +187,7 @@ function Detail() {
                 )}
               </div>
             </DongilContractContent>
-            {isKid === true && (
+            {isKid === true && !(isAchieved === 0 && status === 0) && (
               <GiveUpDongilButton onClick={onGiveUpCheckOpen}>
                 돈길 포기하기
               </GiveUpDongilButton>