Merge pull request #73 from DeveloperRyou/develop

src/assist/buttonwrapper/AppleLoginButtonWrapper.tsx

@@ -0,0 +1,23 @@
+import { platformAtom } from "@/data/platform";
+import { postAppleLogin } from "@/libs/reactNative/sender";
+import LoginButton from "@modules/components/button/LoginButton";
+import FlexBox from "@modules/layout/FlexBox";
+import { useAtom } from "jotai";
+
+function AppleLoginButtonWrapper() {
+  const [platform] = useAtom(platformAtom);
+  const appleLogin = () => {
+    postAppleLogin();
+  };
+  return (
+    <FlexBox className="px-4 w-full justify-center">
+      {platform?.OS === "ios" && (
+        <div className="w-full max-w-[360px]">
+          <LoginButton type="apple" onClick={appleLogin} />
+        </div>
+      )}
+    </FlexBox>
+  );
+}
+
+export default AppleLoginButtonWrapper;

src/assist/KakaoLoginButtonWrapper.tsx → src/assist/buttonwrapper/KakaoLoginButtonWrapper.tsx

@@ -1,5 +1,6 @@
 import { eollugageUrl } from "@/apis/network";
 import LoginButton from "@modules/components/button/LoginButton";
+import FlexBox from "@modules/layout/FlexBox";
 import { useRouter } from "next/router";
 
 function KakaoLoginButtonWrapper() {
@@ -28,9 +29,11 @@ function KakaoLoginButtonWrapper() {
   }, []);
   */
   return (
-    <div className="px-4 w-full">
-      <LoginButton type="kakao" onClick={kakaoSDKLogin} />
-    </div>
+    <FlexBox className="px-4 w-full justify-center">
+      <div className="w-full max-w-[360px]">
+        <LoginButton type="kakao" onClick={kakaoSDKLogin} />
+      </div>
+    </FlexBox>
   );
 }
 

src/data/platform.ts

@@ -0,0 +1,93 @@
+import { atom } from "jotai";
+
+export type PlatformOSType =
+  | "ios"
+  | "android"
+  | "macos"
+  | "windows"
+  | "web"
+  | "native";
+type PlatformConstants = {
+  isTesting: boolean;
+  reactNativeVersion: {
+    major: number;
+    minor: number;
+    patch: number;
+    prerelease?: number | null | undefined;
+  };
+};
+interface PlatformStatic {
+  isTV: boolean;
+  isTesting: boolean;
+  Version: number | string;
+  constants: PlatformConstants;
+
+  /**
+   * @see https://reactnative.dev/docs/platform-specific-code#content
+   */
+  select<T>(
+    specifics:
+      | ({ [platform in PlatformOSType]?: T } & { default: T })
+      | { [platform in PlatformOSType]: T },
+  ): T;
+  select<T>(specifics: { [platform in PlatformOSType]?: T }): T | undefined;
+}
+
+interface PlatformIOSStatic extends PlatformStatic {
+  constants: PlatformConstants & {
+    forceTouchAvailable: boolean;
+    interfaceIdiom: string;
+    osVersion: string;
+    systemName: string;
+  };
+  OS: "ios";
+  isPad: boolean;
+  isTV: boolean;
+  Version: string;
+}
+
+interface PlatformAndroidStatic extends PlatformStatic {
+  constants: PlatformConstants & {
+    Version: number;
+    Release: string;
+    Serial: string;
+    Fingerprint: string;
+    Model: string;
+    Brand: string;
+    Manufacturer: string;
+    ServerHost?: string | undefined;
+    uiMode: "car" | "desk" | "normal" | "tv" | "watch" | "unknown";
+  };
+  OS: "android";
+  Version: number;
+}
+
+interface PlatformMacOSStatic extends PlatformStatic {
+  OS: "macos";
+  Version: string;
+  constants: PlatformConstants & {
+    osVersion: string;
+  };
+}
+
+interface PlatformWindowsOSStatic extends PlatformStatic {
+  OS: "windows";
+  Version: number;
+  constants: PlatformConstants & {
+    osVersion: number;
+  };
+}
+
+interface PlatformWebStatic extends PlatformStatic {
+  OS: "web";
+}
+
+export type Platform =
+  | PlatformIOSStatic
+  | PlatformAndroidStatic
+  | PlatformWindowsOSStatic
+  | PlatformMacOSStatic
+  | PlatformWebStatic;
+
+export const platformAtom = atom<Platform | null>(null);
+platformAtom.debugLabel = "platformAtom";

src/libs/reactNative/RNListener.tsx

@@ -1,14 +1,21 @@
+import { Platform, platformAtom } from "@/data/platform";
 import { usePostFcmToken } from "@/hooks/query/fcmtoken";
+import { useAtom } from "jotai";
 import { useEffect } from "react";
 
 function RNListener() {
   const { mutate: postHistoryStatusMutate } = usePostFcmToken();
+  const [, setPlatform] = useAtom(platformAtom);
 
   const onMessageEvent = (e: MessageEvent) => {
     e.stopPropagation();
-    const message: { type: string; data: string } = JSON.parse(String(e.data));
+    const message: { type: string; data: number | string | object } =
+      JSON.parse(String(e.data));
     if (message.type === "getFcmTokenResponse") {
-      postHistoryStatusMutate({ token: message.data });
+      postHistoryStatusMutate({ token: message.data as string });
+    }
+    if (message.type === "getPlatform") {
+      setPlatform(message.data as Platform);
     }
   };
 

src/libs/reactNative/sender.ts

@@ -5,3 +5,19 @@ export function getFcmTokenRN() {
     ReactNativeWebView.postMessage(JSON.stringify({ type: "getFcmToken" }));
   }
 }
+
+export function getPlatform() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { ReactNativeWebView } = window as any;
+  if (ReactNativeWebView) {
+    ReactNativeWebView.postMessage(JSON.stringify({ type: "getPlatform" }));
+  }
+}
+
+export function postAppleLogin() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { ReactNativeWebView } = window as any;
+  if (ReactNativeWebView) {
+    ReactNativeWebView.postMessage(JSON.stringify({ type: "postAppleLogin" }));
+  }
+}

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { myMemberIdAtom, storeIdAtom } from "@/data/global";
 import { useGetMy } from "@/hooks/query/my";
 import RNListener from "@/libs/reactNative/RNListener";
-import { getFcmTokenRN } from "@/libs/reactNative/sender";
+import { getFcmTokenRN, getPlatform } from "@/libs/reactNative/sender";
 import "@/styles/fonts/fonts.css";
 import "@/styles/globals.scss";
 import "@/styles/scroll.scss";
@@ -48,6 +48,10 @@ export default function App({ Component, pageProps }: AppProps) {
     if (storeId !== "") setRendor(true);
   }, [storeId, pathname]);
 
+  useEffect(() => {
+    getPlatform();
+  }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools />

src/pages/index.tsx

@@ -1,4 +1,5 @@
-import KakaoLoginButtonWrapper from "@/assist/KakaoLoginButtonWrapper";
+import AppleLoginButtonWrapper from "@/assist/buttonwrapper/AppleLoginButtonWrapper";
+import KakaoLoginButtonWrapper from "@/assist/buttonwrapper/KakaoLoginButtonWrapper";
 import FlexBox from "@modules/layout/FlexBox";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -37,7 +38,10 @@ export default function Home() {
             간편하게 일하는 법
           </div>
           <div className={styles.backgroundImage} />
-          <KakaoLoginButtonWrapper />
+          <FlexBox direction="col" className="w-full gap-4">
+            <AppleLoginButtonWrapper />
+            <KakaoLoginButtonWrapper />
+          </FlexBox>
         </FlexBox>
       </FlexBox>
     </FlexBox>

src/pages/manage/attendance.tsx

@@ -1,6 +1,6 @@
 import { AllHistory } from "@/apis/history";
 import ProfileDiscription from "@/assist/ProfileDiscription";
-import StateButtonWrapper from "@/assist/StateButtonWrapper";
+import StateButtonWrapper from "@/assist/buttonwrapper/StateButtonWrapper";
 import TimeBanner from "@/assist/banner/TimeBanner";
 import {
   useGetAllMemeberHistory,