Merge pull request #303 from bankidz/dev

돈길 계약하기 웹뷰 렌더링 오류 수정1트

package.json

@@ -25,6 +25,7 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-transition-group": "^4.4.5",
     "@types/storybook-react-router": "^1.0.1",
+    "@types/throttle-debounce": "^5.0.0",
     "axios": "^0.27.2",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.5",
@@ -53,6 +54,7 @@
     "styled-components": "^5.3.5",
     "styled-reset": "^4.4.1",
     "swiper": "6.8.4",
+    "throttle-debounce": "^5.0.0",
     "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },

src/components/blocks/home/NoFamily.tsx

@@ -64,7 +64,7 @@ function NoFamily({ variant = 'Home' }: NoFamilyProps) {
           </p>
           <OutlinedButton
             label={'가족 추가하기'}
-            onClick={() => navigate('/mypage', { state: { prev: '/' } })}
+            onClick={() => navigate('/mypage', { state: { background: '/' } })}
           />
         </Container>
       </MarginTemplate>

src/components/blocks/home/create/steps/Step5.tsx

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useNavigate } from 'react-router-dom';
+import { debounce } from 'throttle-debounce';
 import usePresignedUrl from '../utils/usePresignedUrl';
 import ContractSheet from '@components/atoms/bottomSheets/contractSheet/ContractSheet';
 import Signature from '@components/atoms/bottomSheets/contractSheet/Signature';
@@ -56,10 +57,10 @@ function Step5() {
   }, []);
 
   // 다음으로 버튼 클릭
-  const onClickNextButton = () => {
+  const onClickNextButton = debounce(1000, () => {
     uploadS3(sign);
     mutatePostChallenge(createChallengePayload);
-  };
+  });
 
   return (
     <>

src/components/blocks/home/homeTemplate/FixedBar.tsx

@@ -49,7 +49,16 @@ function FixedBar({ variant = 'Home' }: FixedBarProps) {
       hasMultipleKids={hasMultipleKids!}
       isAllRead={isAllRead!}
     >
-      <div className="alert" onClick={() => navigate('/notification')}>
+      <div
+        className="alert"
+        onClick={() =>
+          navigate('/notification', {
+            state: {
+              returnBackgroundTo: variant === 'Home' ? '/' : '/interest',
+            },
+          })
+        }
+      >
         <Bell fill={'white'} />
       </div>
       {headerText}

src/components/blocks/home/notification/NotificationItem.tsx

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import { INotification } from '@lib/apis/notification/notificationDTO';
+import { ReactComponent as AlertDongil } from '@assets/icons/alertDongil.svg';
+import { ReactComponent as AlertNotice } from '@assets/icons/alertNotice.svg';
+import { ReactComponent as AlertLevel } from '@assets/icons/alertLevel.svg';
+import { ReactComponent as AlertFamily } from '@assets/icons/alertFamily.svg';
+import getTimeForToday from '@lib/utils/getTimeForToday';
+
+const icon = {
+  CHALLENGE: <AlertDongil />,
+  NOTICE: <AlertNotice />,
+  LEVEL: <AlertLevel />,
+  FAMILY: <AlertFamily />,
+};
+const category = {
+  CHALLENGE: '돈길',
+  NOTICE: '공지',
+  LEVEL: '레벨',
+  FAMILY: '가족',
+};
+
+export interface NotificationItemProps {
+  notification: INotification;
+  isRead: boolean;
+  handleListItemClick: () => void;
+}
+
+const NotificationItem = ({
+  notification,
+  isRead,
+  handleListItemClick,
+}: NotificationItemProps) => {
+  const { id, notificationCategory, createdAt, title, message } = notification;
+  return (
+    <Wrapper key={id} isRead={isRead} onClick={handleListItemClick}>
+      {icon[notificationCategory]}
+      <div>
+        <div className="sub">
+          <p>{category[notificationCategory]}</p>
+          <p>{getTimeForToday(createdAt)}</p>
+        </div>
+        <div className="main">
+          <p>{title}</p>
+          <p>{message}</p>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default NotificationItem;
+
+const Wrapper = styled.div<{ isRead: boolean }>`
+  display: grid;
+  grid-template-columns: 48px auto;
+  grid-gap: 16px;
+  padding: 16px 18px 20px 18px;
+  background-color: ${({ isRead, theme }) =>
+    isRead ? 'none' : theme.palette.main.yellow100};
+  cursor: pointer;
+  .sub {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    & > p:first-child {
+      ${({ theme }) => theme.typo.text.T_12_EB}
+      color: ${({ theme }) => theme.palette.greyScale.grey500};
+    }
+    & > p:last-child {
+      ${({ theme }) => theme.typo.text.Alarm_T_12_R}
+      color: ${({ theme }) => theme.palette.greyScale.grey500};
+    }
+  }
+
+  .main {
+    ${({ theme }) => theme.typo.text.Alarm_T_14_R}
+    line-height: 150%;
+    color: ${({ theme }) => theme.palette.greyScale.black};
+  }
+
+  svg {
+    margin: auto 0px;
+  }
+`;

src/components/blocks/home/notification/NotificationList.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import NotificationItem, { NotificationItemProps } from './NotificationItem';
+import { INotification } from '@lib/apis/notification/notificationDTO';
+import notificationAPI from '@lib/apis/notification/notificationAPI';
+
+interface NotificationListProps {
+  notifications: INotification[];
+}
+
+const NotificationList = ({ notifications }: NotificationListProps) => {
+  return (
+    <>
+      {notifications.map((notification) => (
+        <NotificationListHeadless
+          notification={notification}
+          key={notification.id}
+        >
+          {({ notification, handleListItemClick, isRead }) => (
+            <NotificationItem
+              notification={notification}
+              handleListItemClick={handleListItemClick}
+              isRead={isRead}
+            />
+          )}
+        </NotificationListHeadless>
+      ))}
+    </>
+  );
+};
+
+export default NotificationList;
+
+interface NotificationListHeadlessProps {
+  notification: INotification;
+  children: (args: NotificationItemProps) => JSX.Element;
+}
+
+const NotificationListHeadless = ({
+  notification,
+  children,
+}: NotificationListHeadlessProps) => {
+  const { isRead, id, linkUrl } = notification;
+  const [isReadClient, setIsReadClient] = useState<boolean>(isRead);
+  const navigate = useNavigate();
+
+  const onNotificationItemClick = useCallback(
+    async (id: number, url: string) => {
+      if (!isReadClient) {
+        await notificationAPI.patchNotificationIsRead(id);
+        setIsReadClient(true);
+      }
+      url && navigate(url);
+    },
+    [isReadClient],
+  );
+
+  return children({
+    notification: notification,
+    handleListItemClick: () => onNotificationItemClick(id, linkUrl),
+    isRead: isReadClient,
+  });
+};

src/components/pages/Home/Create.tsx

@@ -118,16 +118,16 @@ function Create() {
               step={step}
               skipSelectParents={status === 'success' && isAlone ? true : false}
             />
-            <SlideTransition keyValue={step} direction={direction}>
-              <ContentWrapper>
-                <MarginTemplate>
-                  {status === 'success' && isAlone
-                    ? title[step]
-                    : title[step - 1]}
-                  {renderContent(step)}
-                </MarginTemplate>
-              </ContentWrapper>
-            </SlideTransition>
+            {/* <SlideTransition keyValue={step} direction={direction}> */}
+            <ContentWrapper>
+              <MarginTemplate>
+                {status === 'success' && isAlone
+                  ? title[step]
+                  : title[step - 1]}
+                {renderContent(step)}
+              </MarginTemplate>
+            </ContentWrapper>
+            {/* </SlideTransition> */}
           </>
         )}
       </Wrapper>

src/components/pages/Home/Notification.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import ForegroundTemplate from '@components/atoms/layout/ForegroundTemplate';
 import { ReactComponent as Banki } from '@assets/icons/giveUpExceeded.svg';
 import useInfiniteNotificationQuery from '@lib/hooks/queries/useInfiniteNotificationQuery';
-import NotificationList from '@components/blocks/home/NotificationList';
+import NotificationList from '@components/blocks/home/notification/NotificationList';
 import LoadingSpinner from '@components/atoms/loaders/LoadingSpinner';
 
 const Notification = () => {

src/lib/hooks/globalErrorHandler/useAPIError.tsx

@@ -58,7 +58,7 @@ const handle401default = () => {
 };
 const handle500default = () => {
   toast.error(
-    '예상치 못한 서버 오류가 발생했어요. 오류가 반복되는 경우 앱을 종료하고 다시 실행해주세요.',
+    '예상치 못한 서버 오류가 발생했어요. 오류가 반복되면 앱을 종료하고 다시 실행해주세요.',
   );
 };
 

src/lib/utils/getTimeForToday.ts

@@ -4,6 +4,7 @@ const getTimeForToday = (date: string) => {
   const betweenTime = Math.floor(
     (today.getTime() - timeValue.getTime()) / 1000 / 60,
   );
+  console.log(date, timeValue.getTime());
 
   if (betweenTime < 1) return '방금 전';
   if (betweenTime < 60) {

yarn.lock

@@ -3708,6 +3708,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/throttle-debounce@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-5.0.0.tgz#8208087f0af85107bcc681c50fa837fc9505483e"
+  integrity sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==
+
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
@@ -14487,6 +14492,11 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
+throttle-debounce@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz#a17a4039e82a2ed38a5e7268e4132d6960d41933"
+  integrity sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"