Feat/game 2048

src/App.tsx

@@ -8,7 +8,7 @@ import { Game2048Leaderboard } from 'pages/Game2048/Leaderboard';
 import { KarrotClickerHome } from 'pages/KarrotClicker/Home';
 import { KarrotClickerGame } from 'pages/KarrotClicker/Game';
 import { KarrotClickerLeaderboard } from 'pages/KarrotClicker/Leaderboard';
-import { NonServiceArea } from 'pages/NonServiceArea';
+import { Survey } from 'pages/Survey';
 // import { LoadingScreen } from 'components/LoadingScreen';
 
 import {
@@ -25,12 +25,14 @@ import {
   loadFromEnv as loadKarrotMarketMiniConfig,
 } from 'services/karrotMarket/mini';
 
-import { useSignAccessToken, useUserData } from 'hooks';
+import { useAccessToken, useSignAccessToken, useUserData } from 'hooks';
 import { useMinigameApi } from 'services/api/minigameApi';
 
 const App: React.FC = () => {
   const minigameApi = useMinigameApi();
-  const { setRegionInfo, setTownInfo, setIsInstalled } = useUserData();
+  const { setRegionInfo, setTownInfo, setUserInfo, setIsInstalled } =
+    useUserData();
+  const { accessToken } = useAccessToken();
   const { signAccessToken } = useSignAccessToken();
   const [analytics, setAnalytics] = useState(emptyAnalytics);
   const [karrotMarketMini, setKarrotMarketMini] = useState(
@@ -62,10 +64,11 @@ const App: React.FC = () => {
 
   const getQueryParams = () => {
     const searchParams = new URLSearchParams(window.location.search);
+    const preload = searchParams.get('preload');
     const code: string | null = searchParams.get('code');
     const regionId: string | null = searchParams.get('region_id');
     const isInstalled: string | null = searchParams.get('installed');
-    return [code, regionId, isInstalled];
+    return [preload, code, regionId, isInstalled];
   };
   const getDistrictInfo = useCallback(
     async (regionId: string) => {
@@ -80,35 +83,63 @@ const App: React.FC = () => {
         console.error(error);
       }
     },
-    [minigameApi, setTownInfo]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [minigameApi.regionApi]
   );
 
+  const updateUserInfo = useCallback(async () => {
+    const {
+      data: { data },
+    } = await minigameApi.userApi.getUserInfoUsingGET();
+    if (data) {
+      setUserInfo(data.id, data.nickname);
+      // FA: track user with set user id
+      analytics.setUserId(data.id);
+      console.log('setuserinfo', data.id, data.nickname);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analytics, minigameApi.userApi]);
   useEffect(() => {
-    try {
-      const [code, regionId, isInstalled] = getQueryParams();
-      analytics.logEvent('launch_app');
-      console.log(code, regionId);
+    const [preload, code, regionId, isInstalled] = getQueryParams();
+    analytics.logEvent('launch_app');
+    console.log(preload, code, regionId, isInstalled);
+    if (!preload) {
+      try {
+        // const [code, regionId, isInstalled] = getQueryParams();
 
-      // handle if code and/or region id does not exist
-      if (regionId) {
-        setRegionInfo(regionId);
-        getDistrictInfo(regionId);
-        if (code) {
-          signAccessToken(code, regionId);
-        }
-        if (isInstalled) {
-          if (isInstalled === 'true') {
-            setIsInstalled(true);
-          } else if (isInstalled === 'false') {
-            setIsInstalled(false);
+        // handle if code and/or region id does not exist
+        if (accessToken) {
+          updateUserInfo();
+          setRegionInfo(regionId as string);
+          getDistrictInfo(regionId as string);
+          if (isInstalled) {
+            if (isInstalled === 'true') {
+              setIsInstalled(true);
+            } else if (isInstalled === 'false') {
+              setIsInstalled(false);
+            }
+          }
+        } else {
+          setRegionInfo(regionId as string);
+          getDistrictInfo(regionId as string);
+          if (code) {
+            signAccessToken(code, regionId as string);
+            updateUserInfo();
+            if (isInstalled) {
+              if (isInstalled === 'true') {
+                setIsInstalled(true);
+              } else if (isInstalled === 'false') {
+                setIsInstalled(false);
+              }
+            }
           }
         }
+      } catch (error) {
+        console.error(error);
       }
-    } catch (error) {
-      console.error(error);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [analytics]);
+  }, []);
 
   return (
     <AnalyticsContext.Provider value={analytics}>
@@ -135,7 +166,7 @@ const App: React.FC = () => {
             path="/karrot-clicker/leaderboard"
             component={KarrotClickerLeaderboard}
           />
-          <Screen path="/non-service-area" component={NonServiceArea} />
+          <Screen path="/survey" component={Survey} />
         </Navigator>
       </KarrotMarketMiniContext.Provider>
     </AnalyticsContext.Provider>

src/components/Navigation/Nav.tsx

@@ -7,27 +7,39 @@ type Props = {
   appendRight?: React.ReactNode;
   onClickLeft?: () => void;
   onClickRight?: () => void;
+  backgroundColor?: string;
+  border?: string;
 };
 export const Nav = (props: Props) => {
   return (
-    <Wrapper className="nav">
+    <Wrapper
+      className="nav"
+      backgroundColor={props.backgroundColor}
+      border={props.border}
+    >
       <Left onClick={props.onClickLeft}>{props.appendLeft}</Left>
       <Right onClick={props.onClickRight}>{props.appendRight}</Right>
     </Wrapper>
   );
 };
 
-const Wrapper = styled.div`
-  width: 100%;
+const Wrapper = styled.div<{
+  backgroundColor: string | undefined;
+  border: string | undefined;
+}>`
   display: flex;
   flex-flow: row;
   align-items: flex-end;
   justify-content: space-between;
   height: ${rem(90)};
   padding: ${rem(50)} ${rem(25)} ${rem(25)};
-  background: inherit;
+  background: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : `inherit`};
+
+  border-bottom: ${(props) => (props.border ? props.border : `none`)};
   z-index: 10;
   position: sticky;
+  // width: 100%;
   top: 0;
   left: 0;
 `;

src/hooks/useMini.ts

@@ -13,8 +13,9 @@ export const useMini = () => {
   const { regionId, setUserInfo } = useUserData();
   const { accessToken } = useAccessToken();
   const { signAccessToken } = useSignAccessToken();
-  const presetUrl = karrotMarketMiniConfig().presetUrl;
   const appId = karrotMarketMiniConfig().appId;
+  const presetUrl = karrotMarketMiniConfig().presetUrl;
+  const installationUrl = karrotMarketMiniConfig().installationUrl;
 
   const updateUserInfo = async () => {
     const {
@@ -52,14 +53,6 @@ export const useMini = () => {
           analytics.logEvent('click_karrot_mini_preset_agree_button', {
             game_type: 'karrot-clicker',
           });
-
-          // return new Promise((resolve, reject) => {
-          //   if (accessToken) {
-          //     resolve('resolved');
-          //   } else {
-          //     reject('rejected');
-          //   }
-          // });
           runOnSuccess();
         }
       },
@@ -71,6 +64,20 @@ export const useMini = () => {
     });
   };
 
+  const handleInstallation = async (runOnSuccess?: () => void) => {
+    mini.startPreset({
+      preset: installationUrl!,
+      onSuccess: async function (result) {
+        if (result.ok) {
+          console.log('즐겨찾기 성공');
+        }
+        if (runOnSuccess) {
+          runOnSuccess();
+        }
+      },
+    });
+  };
+
   const shareApp = (url: string, text: string) => {
     mini.share({
       url,
@@ -82,6 +89,17 @@ export const useMini = () => {
     isInWebEnvironment,
     ejectApp,
     handleThirdPartyAgreement,
+    handleInstallation,
     shareApp,
   };
 };
+
+// const mini = getMini();
+// mini.startPreset({
+//   preset: `https://mini-assets.kr.karrotmarket.com/presets/mvp-game-recommend-installation/alpha.html`,
+//   onSuccess: async function (result) {
+//     if (result.ok) {
+//       console.log('즐겨찾기 성공');
+//     }
+//   },
+// });