Merge pull request #246 from bankidz/fix/qa

Fix/qa

src/App.tsx

@@ -32,7 +32,7 @@ function App() {
       <Route element={<Layout />}>
         <Route path="/auth/*" element={<OnBoardingRouter />} />
         <Route path="/link/:groupCode" element={<GroupLink />} />
-        {/* <Route path="/test/*" element={<TestPage />} /> */}
+        <Route path="/test/*" element={<TestPage />} />
         <Route element={<PersistLogin />}>
           <Route element={<RequireAuth />}>
             <Route path="/*" element={<HomeRouter />} />

src/components/common/skeletons/SkeletonElement.tsx

@@ -42,7 +42,7 @@ function SkeletonElement({
       height={'100%'}
       backgroundColor="#FAFAFC" // grey100
       foregroundColor="#EAEAEC" // grey200
-      speed={2.1}
+      speed={2}
     >
       {figure}
     </ContentLoader>

src/components/common/skeletons/SkeletonInterestToPayList.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SkeletonInterestToPayList from './SkeletonInterestToPayList';
+
+export default {
+  title: 'common/skeletons/SkeletonInterestToPayList',
+  component: SkeletonInterestToPayList,
+} as ComponentMeta<typeof SkeletonInterestToPayList>;
+
+const Template: ComponentStory<typeof SkeletonInterestToPayList> = () => (
+  <SkeletonInterestToPayList />
+);
+
+export const 지급이_필요한_이자 = Template.bind({});
+지급이_필요한_이자.args = {};

src/components/common/skeletons/SkeletonInterestToPayList.tsx

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+import SkeletonElement from './SkeletonElement';
+
+function SkeletonInterestToPayList() {
+  const block = (
+    <Block>
+      <div className="text-wrapper">
+        <span className="date">
+          <SkeletonElement borderRadius={6} />
+        </span>
+        <h1>
+          <SkeletonElement borderRadius={8} />
+        </h1>
+        <div className="amount-wrapper">
+          <SkeletonElement borderRadius={8} />
+        </div>
+      </div>
+      <DoubleButtonWrapper>
+        <SkeletonElement borderRadius={12} />
+        <SkeletonElement borderRadius={12} />
+      </DoubleButtonWrapper>
+    </Block>
+  );
+
+  return (
+    <Wrapper>
+      {block}
+      {block}
+    </Wrapper>
+  );
+}
+
+export default SkeletonInterestToPayList;
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-top: 32px;
+`;
+
+const Block = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: space-between;
+  padding: 16px;
+
+  width: 100%;
+  height: 179px;
+  border-radius: ${({ theme }) => theme.radius.large};
+  background: ${({ theme }) => theme.palette.greyScale.white};
+
+  .date {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 12px;
+    margin-top: 8px;
+  }
+  h1 {
+    width: 100%;
+    height: 22px;
+    margin-top: 4px;
+  }
+  .amount-wrapper {
+    width: 100%;
+    height: 21px;
+    margin-top: 24px;
+  }
+  & + & {
+    margin-top: 16px;
+  }
+`;
+
+const DoubleButtonWrapper = styled.div`
+  width: 100%;
+  height: 40px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 8px;
+`;

src/components/common/skeletons/SkeletonOverView.tsx

@@ -8,7 +8,7 @@ const SkeletonOverview = ({ isKid }: { isKid: boolean }) => {
   return (
     <Wrapper>
       <div>
-        <ContentLoader width="128px" height="103px" speed={2.1}>
+        <ContentLoader width="128px" height="103px" speed={2}>
           <rect rx={8} ry={8} width="128px" height="103px" />
         </ContentLoader>
       </div>

src/components/home/homeTemplate/FixedBar.tsx

@@ -41,7 +41,7 @@ function FixedBar({ variant = 'Home' }: FixedBarProps) {
   return (
     <Wrapper
       colorByLevel={colorByLevel}
-      hasMultipleKids={hasMultipleKids}
+      hasMultipleKids={hasMultipleKids!}
       isAllRead={isAllRead!}
     >
       <div className="alert" onClick={() => navigate('/notification')}>

src/components/interest/Interest.tsx

@@ -4,7 +4,7 @@ import queryKeys from '@lib/constants/queryKeys';
 import { useQuery } from 'react-query';
 import styled from 'styled-components';
 import InterestTemplate from './InterestTemplate';
-import InterestToPay from './InterestToPay';
+import InterestToPaySection from './InterestToPaySection';
 
 function Interest() {
   const { data: kids } = useQuery(queryKeys.FAMILY_KID, familyAPI.getKid);
@@ -16,7 +16,7 @@ function Interest() {
     content = (
       <InterestTemplate>
         <FlexContainer>
-          <InterestToPay />
+          <InterestToPaySection />
         </FlexContainer>
       </InterestTemplate>
     );

src/components/interest/InterestToPay.tsx → src/components/interest/InterestToPaySection.tsx

@@ -1,8 +1,8 @@
+import SkeletonInterestToPayList from '@components/common/skeletons/SkeletonInterestToPayList';
 import EmptyDongil from '@components/home/EmptyDongil';
 import challengeAPI from '@lib/apis/challenge/challengeAPI';
 import queryKeys from '@lib/constants/queryKeys';
-import useAxiosPrivate from '@lib/hooks/auth/useAxiosPrivate';
-import { useAppDispatch, useAppSelector } from '@store/app/hooks';
+import { useAppSelector } from '@store/app/hooks';
 import {
   selectHasMultipleKids,
   selectSelectedKid,
@@ -11,7 +11,7 @@ import { useQuery } from 'react-query';
 import styled from 'styled-components';
 import InterestToPayList from './InterestToPayList';
 
-function InterestToPay() {
+function InterestToPaySection() {
   const selectedKid = useAppSelector(selectSelectedKid);
   const hasMultipleKids = useAppSelector(selectHasMultipleKids);
 
@@ -28,28 +28,39 @@ function InterestToPay() {
     interestToPay = 0;
   }
 
-  return (
-    <>
-      <Header hasMultipleKids={hasMultipleKids}>
-        <h1>지급이 필요한 이자</h1>
-        <h2>{interestToPay}원</h2>
-      </Header>
-      {notPayedInterests?.achievedChallengeListDTO.totalInterestPrice === 0 ? (
+  let content;
+  if (status === 'success') {
+    if (notPayedInterests?.achievedChallengeListDTO.totalInterestPrice === 0) {
+      content = (
         <EmptyDongilWrapper>
           <EmptyDongil subject="아직 완주한" />
         </EmptyDongilWrapper>
-      ) : (
+      );
+    } else {
+      content = (
         <InterestToPayList
           challengeDTOList={
             notPayedInterests?.achievedChallengeListDTO?.challengeDTOList!
           }
         />
-      )}
+      );
+    }
+  } else {
+    content = <SkeletonInterestToPayList />;
+  }
+
+  return (
+    <>
+      <Header hasMultipleKids={hasMultipleKids!}>
+        <h1>지급이 필요한 이자</h1>
+        <h2>{interestToPay}원</h2>
+      </Header>
+      {content}
     </>
   );
 }
 
-export default InterestToPay;
+export default InterestToPaySection;
 
 const Header = styled.header<{ hasMultipleKids: boolean }>`
   margin-top: ${({ hasMultipleKids }) => (hasMultipleKids ? '159px' : '112px')};

src/lib/apis/user/userAPI.tsx

@@ -12,7 +12,6 @@ const userAPI = {
   // 유저 정보 조회하기
   getUser: async (): Promise<IMyPageDTO> => {
     const response = await axiosPrivateTemp.get('/user');
-    console.log(response);
     const data = response.data;
     return data;
   },

src/pages/Home/ParentHomePage.tsx

@@ -7,6 +7,7 @@ import queryKeys from '@lib/constants/queryKeys';
 import usePreventGoBack from '@lib/hooks/usePreventGoBack';
 import { useAppDispatch, useAppSelector } from '@store/app/hooks';
 import {
+  selectHasMultipleKids,
   selectSelectedKid,
   setHasMultipleKids,
   setSelectedKid,
@@ -26,14 +27,21 @@ function ParentHomePage() {
   usePreventGoBack();
 
   const selectedKid = useAppSelector(selectSelectedKid);
+  const hasMultipleKids = useAppSelector(selectHasMultipleKids);
   const dispatch = useAppDispatch();
   const { status, data: kids } = useQuery(
     queryKeys.FAMILY_KID,
     familyAPI.getKid,
     {
       onSuccess: (data) => {
-        selectedKid === null && dispatch(setSelectedKid(data[0]));
-        data.length > 1 && dispatch(setHasMultipleKids(true));
+        selectedKid === undefined && dispatch(setSelectedKid(data[0]));
+        if (hasMultipleKids === undefined) {
+          if (data.length >= 2) {
+            dispatch(setHasMultipleKids(true));
+          } else {
+            dispatch(setHasMultipleKids(false));
+          }
+        }
       },
     },
   );

src/pages/Test/TestPage.tsx

@@ -1,11 +1,20 @@
+import SkeletonInterestToPayList from '@components/common/skeletons/SkeletonInterestToPayList';
+import MarginTemplate from '@components/layout/MarginTemplate';
 import styled from 'styled-components';
 
 function TestPage() {
-  return <Wrapper></Wrapper>;
+  return (
+    <Wrapper>
+      <MarginTemplate>
+        <SkeletonInterestToPayList />
+      </MarginTemplate>
+    </Wrapper>
+  );
 }
 
 export default TestPage;
 
 const Wrapper = styled.div`
   height: 1000px;
+  background: pink;
 `;

src/store/slices/kidsSlice.tsx

@@ -4,14 +4,14 @@ import { RootState } from '../app/store';
 
 interface IKidsState {
   // 부모 홈에서 다자녀중 선택된 한명의 자녀
-  selectedKid: IKidListDTO | null;
+  selectedKid: IKidListDTO | undefined;
   // 다자녀 유무
-  hasMultipleKids: boolean;
+  hasMultipleKids: boolean | undefined;
 }
 
 const initialState: IKidsState = {
-  selectedKid: null,
-  hasMultipleKids: false,
+  selectedKid: undefined,
+  hasMultipleKids: undefined,
 };
 
 export const kidsSlice = createSlice({