Merge pull request #88 from karrotmvp/feature/#84

Feature/#84

src/App.tsx

@@ -14,14 +14,17 @@ import {
   My,
   Resume,
   ApplierList,
+  Description,
 } from "./pages";
-import { checkMobileType, checkSubScribe } from "@utils/utils";
+import { checkMobileType } from "@utils/utils";
 import withMini from "@hoc/withMini";
 import { withParams } from "@hoc/withParams";
 import { withQueryParams } from "@hoc/withQueryParams";
 import ErrorPage from "@pages/ErrorPage";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import Toast from "@components/Toast/Index";
+import mini from "@lib/mini";
+import CustomMixPanel from "@utils/mixpanel";
 
 // initMSW();
 
@@ -33,13 +36,22 @@ function App() {
     localStorage.setItem("depth", depth.toString());
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem("countOfVisitToDetail", String(0));
+  }, []);
+
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
       <Navigator
         theme={checkMobileType()}
         className={NavigatorStyle}
-        onClose={checkSubScribe}
+        onClose={() => {
+          CustomMixPanel.track(CustomMixPanel.eventName.clickClose, {
+            page: "홈",
+          });
+          mini.close();
+        }}
         onDepthChange={onDepthChange}
       >
         <Screen path="/" component={withMini(Home)} />
@@ -66,6 +78,7 @@ function App() {
         />
         <Screen path="/my" component={My} />
         <Screen path="/404" component={ErrorPage} />
+        <Screen path="/description" component={Description} />
       </Navigator>
       <Toast />
     </ThemeProvider>

src/assets/images/index.ts

@@ -0,0 +1,9 @@
+export { default as NoDataImage } from "./no-data.png";
+export { default as Category1 } from "./category_1.png";
+export { default as Category2 } from "./category_2.png";
+export { default as Category3 } from "./category_3.png";
+export { default as Category4 } from "./category_4.png";
+export { default as DefaultProfile } from "./default_profile.png";
+export { default as DefaultThumbnail } from "./default_thumbnail.png";
+export { default as BannerImage } from "./banner.png";
+export { default as Sample } from "./sample.jpg";

src/components/Nodata/index.tsx

@@ -2,9 +2,9 @@ import styled from "@emotion/styled";
 import Button from "@components/Button";
 import { TabType } from "@type/client";
 import usePush from "@hooks/usePush";
-import NodataImage from "@assets/images/no-data.png";
 import { useNavigator } from "@karrotframe/navigator";
 import CustomMixPanel from "@utils/mixpanel";
+import { NoDataImage } from "@assets/images";
 
 type NoDataProps = {
   tabType: TabType;
@@ -18,14 +18,14 @@ export default function NoData({ tabType }: NoDataProps) {
     if (tabType === "main" || tabType === "request") {
       CustomMixPanel.track(CustomMixPanel.eventName.clickETC, {
         page: tabType === "main" ? "홈" : "마이",
-        clickTarget: '심부름 요청하기'
+        clickTarget: "심부름 요청하기",
       });
       moveToErrandRequestForm();
     } else {
       pop().send({ isAppliable: true });
       CustomMixPanel.track(CustomMixPanel.eventName.clickETC, {
         page: "마이",
-        clickTarget: '지원 가능한 심부름 보러가기'
+        clickTarget: "지원 가능한 심부름 보러가기",
       });
     }
   };
@@ -35,7 +35,7 @@ export default function NoData({ tabType }: NoDataProps) {
       {renderText(tabType)}
       {tabType === "main" && (
         <div className="no-data__image">
-          <img src={NodataImage} alt="nodata" />
+          <img src={NoDataImage} alt="nodata" />
         </div>
       )}
       <Button

src/constant/category.ts

@@ -1,30 +1,27 @@
-import Categorty1 from "@assets/images/category_1.png";
-import Categorty2 from "@assets/images/category_2.png";
-import Categorty3 from "@assets/images/category_3.png";
-import Categorty4 from "@assets/images/category_4.png";
+import { Category1, Category2, Category3, Category4 } from "@assets/images";
 import { Category } from "@type/response";
 
 export const CATEGORYS: Category[] = [
   {
     id: 1,
     name: "벌레잡기",
-    imageUrl: Categorty1,
+    imageUrl: Category1,
   },
   {
     id: 2,
     name: "반려동물 산책하기",
-    imageUrl: Categorty2,
+    imageUrl: Category2,
   },
   {
     id: 3,
     name: "사다주기",
     subscribe: "필요한 물건 사다주세요!",
-    imageUrl: Categorty3,
+    imageUrl: Category3,
   },
   {
     id: 4,
     name: "기타",
     subscribe: "다른 심부름 부탁할래요!",
-    imageUrl: Categorty4,
+    imageUrl: Category4,
   },
 ];

src/constant/default.ts

@@ -1,2 +1,2 @@
-export { default as DEFAULT_THUMBNAIL } from "@assets/images/default_thumbnail.png";
-export { default as DEFAULT_PROFILE } from "@assets/images/default_profile.png";
+export { DefaultThumbnail as DEFAULT_THUMBNAIL } from "@assets/images";
+export { DefaultProfile as DEFAULT_PROFILE } from "@assets/images";

src/hoc/withMini.tsx

@@ -5,7 +5,7 @@ import { isLoginAtom } from "../store/user";
 import { getValueFromSearch } from "@utils/utils";
 import { useCallback, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
-import Sample from "@assets/images/sample.jpg";
+import { Sample } from "@assets/images";
 import CustomScreenHelmet from "@components/CustomScreenHelmet";
 import { AppenderWrapper, Title } from "@pages/Home";
 import { Gear, Loader, Me } from "@assets/icon";

src/pages/Description/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "@emotion/styled";
+import CustomScreenHelmet from "@components/CustomScreenHelmet";
+
+type DescriptionProps = {};
+
+export default function Description({}: DescriptionProps) {
+  return (
+    <DescriptionWrapper>
+      <CustomScreenHelmet title="크리스틴화이팅" />
+    </DescriptionWrapper>
+  );
+}
+
+const DescriptionWrapper = styled.div``;

src/pages/ErrandDetail/index.tsx

@@ -13,7 +13,7 @@ import { convertToKRW } from "@utils/convert";
 import Modal, { ModalInfoType } from "@components/Modal";
 import useModal from "@hooks/useModal";
 import Button from "@components/Button";
-import { getComparedTime } from "@utils/utils";
+import { checkSubScribe, getComparedTime } from "@utils/utils";
 import {
   getRefinedFromData,
   modalInfoFlagType,
@@ -22,7 +22,7 @@ import {
 import { useNavigator } from "@karrotframe/navigator";
 import { WithParamsProps } from "@hoc/withParams";
 import { ErrandDetailResponseBody } from "@type/response";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useCancelAPply } from "@api/help";
 import Slider from "react-slick";
 import CustomMixPanel from "@utils/mixpanel";
@@ -276,6 +276,20 @@ export default function ErrandDetail({ errandId }: WithParamsProps) {
 
   const modalInfo = getModalInfo(modalInfoFlag);
 
+  useEffect(() => {
+    const countOfVisitToDetail = Number(
+      localStorage.getItem("countOfVisitToDetail")
+    );
+    console.log("countOfVisitToDetail", countOfVisitToDetail);
+    if (countOfVisitToDetail === 1) {
+      checkSubScribe();
+    }
+    localStorage.setItem(
+      "countOfVisitToDetail",
+      String(countOfVisitToDetail + 1)
+    );
+  }, []);
+
   return (
     <StickyPageWrpper>
       <CustomScreenHelmet

src/pages/Home/index.tsx

@@ -4,26 +4,28 @@ import styled from "@emotion/styled";
 import usePush from "@hooks/usePush";
 import { useNavigator } from "@karrotframe/navigator";
 import { Container } from "@styles/shared";
-import { checkSubScribe, getRegion } from "@utils/utils";
+import { getRegion } from "@utils/utils";
 import { useState } from "react";
 import List from "@components/List";
 import CustomMixPanel from "@utils/mixpanel";
-import useBack from "@hooks/useBack";
 import ToolTip from "@components/ToolTip";
 import { useTooltip } from "@hooks/useTooltip";
+import { BannerImage } from "@assets/images";
 
 export default function Home() {
   const moveToErrandRequestForm = usePush("/errand-request?categoryId=0");
   const [showTooltip, closeTooltip] = useTooltip("home");
 
   const [isAppliable, setIsAppliable] = useState<boolean>(false);
   const region = getRegion();
+  const { push } = useNavigator();
   const toggleIsAppliable = () => {
     setIsAppliable((current) => !current);
   };
 
-  useBack(checkSubScribe, false);
-
+  const handleClickBanner = () => {
+    push("/description");
+  };
   return (
     <>
       <CustomScreenHelmet
@@ -37,6 +39,9 @@ export default function Home() {
       />
       <HomeWrapper>
         <ContentWrapper>
+          <div onClick={handleClickBanner}>
+            <img src={BannerImage} alt="banner" />
+          </div>
           <Container>
             <div className="home__top">
               <div className="home__top__location">

src/pages/index.ts

@@ -8,3 +8,4 @@ export { default as My } from "./My";
 export { default as Resume } from "./Resume";
 export { default as FeedErrandDetail } from "./feeds/FeedErrandDetail";
 export { default as FeedRequestForm } from "./feeds/FeedRequestForm";
+export { default as Description } from "./Description";

src/styles/global-style.tsx

@@ -25,6 +25,13 @@ export const GlobalStyle = () => {
             “Noto Color Emoji”;
           color: #41474c;
           line-height: ${LINE_HEIGHT};
+          appearance: none;
+        }
+        input {
+          -webkit-appearance: none;
+        }
+        textarea {
+          -webkit-appearance: none;
         }
 
         .flex {

src/utils/mixpanel.ts

@@ -54,6 +54,7 @@ const CustomMixPanel = {
     firstLogin: "최초 로그인",
     login: "유저 로그인",
     clickBack: "뒤로가기 클릭",
+    clickClose: "앱 닫기 클릭",
     refresh: "리스트 새로고침",
     clickInput: "Input 클릭",
     clickCTA: "CTA 클릭",

src/utils/utils.ts

@@ -76,7 +76,10 @@ export const getRegion = () => {
 export const checkSubScribe = () => {
   const isInstalled = getValueFromSearch("installed");
   if (isInstalled === "true") {
-    mini.close();
+    return;
+  }
+  const isRejected = localStorage.getItem("isrejectInstalled");
+  if (isRejected === "true") {
     return;
   }
   mini.startPreset({
@@ -85,13 +88,11 @@ export const checkSubScribe = () => {
     onSuccess(result) {
       if (result.ok) {
         toast("구독해주셔서 감사합니다!");
-        setTimeout(() => {
-          mini.close();
-        }, 1800);
+        localStorage.setItem("isrejectInstalled", "true");
       }
     },
     onClose() {
-      mini.close();
+      localStorage.setItem("isrejectInstalled", "true");
     },
   });
 };