V1.0.0 (#36)

# Overview onboarding과 웹뷰를 위한 falling 페이지 구현 --------- Co-authored-by: Jonghyeon Ko <[email protected]>
mash-up-kr · Aug 6, 2023 · cb126a3 · cb126a3
1 parent d42b1f0
commit cb126a3
Show file tree

Hide file tree

Showing 122 changed files with 9,181 additions and 805 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,6 @@
 .vscode
 .eslintrc.js
 packlint.config.mjs
-node_modules
+node_modules
+esm
+dist
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,9 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# bundled
+dist
+esm
+
+stats.html
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,8 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.packageManager": "pnpm",
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-  "cSpell.words": ["packlint", "nextjs", "sulsul"],
+  "cSpell.words": ["packlint", "nextjs", "sulsul", "jsxcss"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },

diff --git a/apps/falling/package.json b/apps/falling/package.json
@@ -22,7 +22,7 @@
     "@tanstack/react-query-devtools": "^4.29.3",
     "axios": "^1.3.6",
     "framer-motion": "^10.12.4",
-    "next": "13.4.4",
+    "next": "13.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",

diff --git a/apps/falling/public/images/bubble-beer.png b/apps/falling/public/images/bubble-beer.png
diff --git a/apps/falling/public/images/bubble-goryanju.png b/apps/falling/public/images/bubble-goryanju.png
diff --git a/apps/falling/public/images/bubble-soju.png b/apps/falling/public/images/bubble-soju.png
diff --git a/apps/falling/public/images/bubble-whisky.png b/apps/falling/public/images/bubble-whisky.png
diff --git a/apps/falling/public/images/bubble-wine.png b/apps/falling/public/images/bubble-wine.png
diff --git a/apps/falling/src/app/components/Falling.tsx b/apps/falling/src/app/components/Falling.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { StackView, useStackBall } from '@sulsul/ui';
+import { useEffect, useState } from 'react';
+import { drinkImage, drinks } from '../constants/drinks';
+
+export const Falling = () => {
+  const [isFirstTouch, setIsFirstTouch] = useState(false);
+  const { addBall, boxRef, canvasRef } = useStackBall();
+
+  useEffect(() => {
+    const addItem = (event: any) => {
+      if (!isFirstTouch) {
+        setIsFirstTouch(true);
+        return;
+      }
+
+      if (event.detail.data === undefined) {
+        throw new Error('event.detail.data is undefined');
+      }
+
+      const { image, size } = drinkImage[event.detail.data as drinks];
+      addBall(image, size);
+
+      window.sulsulBridge.onAddBallSuccess(event.detail.data as drinks);
+    };
+    window.addEventListener('addBall', addItem);
+
+    return () => {
+      window.removeEventListener('addBall', addItem);
+    };
+  }, [addBall, isFirstTouch]);
+
+  return (
+    <div style={{ width: '100%', height: '100dvh' }}>
+      <StackView boxRef={boxRef} canvasRef={canvasRef} isTouched={isFirstTouch} />
+    </div>
+  );
+};
diff --git a/apps/falling/src/app/constants/drinks.ts b/apps/falling/src/app/constants/drinks.ts
@@ -0,0 +1,24 @@
+export const drinkImage = {
+  소주: {
+    image: '/images/bubble-soju.png',
+    size: 80,
+  },
+  맥주: {
+    image: '/images/bubble-beer.png',
+    size: 100,
+  },
+  와인: {
+    image: '/images/bubble-wine.png',
+    size: 92,
+  },
+  고량주: {
+    image: '/images/bubble-goryanju.png',
+    size: 68,
+  },
+  위스키: {
+    image: '/images/bubble-whisky.png',
+    size: 68,
+  },
+} as const;
+
+export type drinks = keyof typeof drinkImage;
diff --git a/apps/falling/src/app/layout.tsx b/apps/falling/src/app/layout.tsx
@@ -7,10 +7,17 @@ import { SuspensiveConfigs, SuspensiveProvider } from '@suspensive/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Inter } from 'next/font/google';
+import { AndroidWebviewProvider } from '~/contexts/androidWeview';
 import RootStyleRegistry from '../../emotion';
 
 import './globals.css';
 
+declare global {
+  interface Window {
+    sulsulBridge: any;
+  }
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -34,16 +41,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={inter.className}>
-        <RootStyleRegistry>
-          <MediaQueryProvider pxs={[0, 768, 1440]}>
-            <SuspensiveProvider configs={suspensiveConfigs}>
-              <QueryClientProvider client={queryClient}>
-                <ThemeProvider theme={token}>{children}</ThemeProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
-              </QueryClientProvider>
-            </SuspensiveProvider>
-          </MediaQueryProvider>
-        </RootStyleRegistry>
+        <AndroidWebviewProvider>
+          <RootStyleRegistry>
+            <MediaQueryProvider pxs={[0, 768, 1440]}>
+              <SuspensiveProvider configs={suspensiveConfigs}>
+                <QueryClientProvider client={queryClient}>
+                  <ThemeProvider theme={token}>{children}</ThemeProvider>
+                  <ReactQueryDevtools initialIsOpen={false} />
+                </QueryClientProvider>
+              </SuspensiveProvider>
+            </MediaQueryProvider>
+          </RootStyleRegistry>
+        </AndroidWebviewProvider>
       </body>
     </html>
   );

diff --git a/apps/falling/src/app/page.tsx b/apps/falling/src/app/page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Falling } from './components/Falling';
+
 export default function Home() {
-  return <main>explore amplify test</main>;
+  return <Falling />;
 }
diff --git a/apps/falling/src/contexts/androidWeview/index.tsx b/apps/falling/src/contexts/androidWeview/index.tsx
@@ -0,0 +1,72 @@
+import {
+  createContext,
+  PropsWithChildren,
+  ReactNode,
+  Suspense,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+const AndroidWebviewContext = createContext<AndroidWebview | null>(null);
+export const AndroidWebviewProvider = (props: PropsWithChildren) => {
+  const [androidWebview, setAndroidWebview] = useState<AndroidWebview | null>(null);
+  useEffect(() => {
+    if ((window as any).android) {
+      setAndroidWebview((window as any).android);
+    }
+  }, []);
+  return <AndroidWebviewContext.Provider {...props} value={androidWebview} />;
+};
+
+export const AndroidWebviewGuaranteed = ({
+  render,
+  fallback,
+}: {
+  render: (androidWebview: AndroidWebview) => ReactNode;
+  fallback?: ReactNode;
+}) => {
+  const androidWebviewContextValue = useContext(AndroidWebviewContext);
+
+  if (androidWebviewContextValue === null) {
+    return <>{fallback}</>;
+  }
+  const androidWebview = androidWebviewContextValue;
+  return <>{render(androidWebview)}</>;
+};
+
+interface AndroidWebview {
+  showToastMessage(): void;
+}
+
+export const useAndroidWebview = (): AndroidWebview => {
+  const androidWebviewContextValue = useContext(AndroidWebviewContext);
+
+  if (androidWebviewContextValue === null) {
+    throw new Promise(() => {});
+  }
+
+  return androidWebviewContextValue;
+};
+
+export const Comp = () => {
+  return (
+    <>
+      hihihih jijojooj
+      <Suspense fallback={<>loading...</>}>
+        <AndroidWebviewUser />
+      </Suspense>
+      <AndroidWebviewGuaranteed
+        render={(webview) => <button onClick={webview.showToastMessage}>hi</button>}
+      />
+    </>
+  );
+};
+
+const AndroidWebviewUser = () => {
+  const androidWebview = useAndroidWebview();
+
+  const handleClick = () => androidWebview.showToastMessage();
+
+  return <button onClick={handleClick}></button>;
+};
diff --git a/apps/onboarding/.eslintrc.js b/apps/onboarding/.eslintrc.js
@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ['@sulsul/eslint-config/react-ts-noimport', 'plugin:@next/next/recommended'],
+  rules: {
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+  },
 };
diff --git a/apps/onboarding/emotion.tsx b/apps/onboarding/emotion.tsx
diff --git a/apps/onboarding/env.d.ts b/apps/onboarding/env.d.ts
@@ -0,0 +1,6 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly NEXT_PUBLIC_DOMAIN: string;
+  }
+}
diff --git a/apps/onboarding/next.config.js b/apps/onboarding/next.config.js
@@ -8,8 +8,15 @@ const nextConfig = {
     '@suspensive/react',
     '@suspensive/react-query',
   ],
-  compiler: {
-    emotion: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+  images: {
+    formats: ['image/avif', 'image/webp'],
   },
 };
 

diff --git a/apps/onboarding/openapi-config.json b/apps/onboarding/openapi-config.json
@@ -0,0 +1,3 @@
+{
+  "allowUnicodeIdentifiers": true
+}
diff --git a/apps/onboarding/openapitools.json b/apps/onboarding/openapitools.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "6.6.0"
+  }
+}
diff --git a/apps/onboarding/package.json b/apps/onboarding/package.json
@@ -6,7 +6,9 @@
     "build": "next build",
     "dev": "next dev --port 3000",
     "lint": "next lint",
-    "start": "next start"
+    "spec:api": "openapi-generator-cli generate -g typescript-axios -i ../../openapispec.json -o ./src/api -c openapi-config.json",
+    "start": "next start",
+    "type:check": "tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.0",
@@ -18,21 +20,26 @@
     "@sulsul/ui": "workspace:*",
     "@suspensive/react": "^1.11.2",
     "@suspensive/react-query": "^1.11.2",
+    "@svgr/webpack": "^8.0.1",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^4.29.3",
     "axios": "^1.3.6",
     "framer-motion": "^10.12.4",
-    "next": "13.4.4",
+    "next": "13.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-hook-step": "workspace:*",
+    "tss-react": "^4.8.8",
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@next/eslint-plugin-next": "13.4.6",
+    "@openapitools/openapi-generator-cli": "^2.6.0",
     "@sulsul/eslint-config": "workspace:*",
     "@sulsul/tsconfig": "workspace:*",
+    "@svgr/webpack": "^8.0.1",
     "@types/node": "^17.0.12",
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",

diff --git a/apps/onboarding/public/favicons/android-chrome-192x192.png b/apps/onboarding/public/favicons/android-chrome-192x192.png
diff --git a/apps/onboarding/public/favicons/android-chrome-512x512.png b/apps/onboarding/public/favicons/android-chrome-512x512.png
diff --git a/apps/onboarding/public/favicons/apple-touch-icon.png b/apps/onboarding/public/favicons/apple-touch-icon.png
diff --git a/apps/onboarding/public/favicons/favicon-16x16.png b/apps/onboarding/public/favicons/favicon-16x16.png
diff --git a/apps/onboarding/public/favicons/favicon-32x32.png b/apps/onboarding/public/favicons/favicon-32x32.png
diff --git a/apps/onboarding/public/favicons/site.webmanifest b/apps/onboarding/public/favicons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "sulsul",
+  "short_name": "sulsul",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/onboarding/public/images/bubble-beer.png b/apps/onboarding/public/images/bubble-beer.png
diff --git a/apps/onboarding/public/images/bubble-goryanju.png b/apps/onboarding/public/images/bubble-goryanju.png
diff --git a/apps/onboarding/public/images/bubble-soju.png b/apps/onboarding/public/images/bubble-soju.png
diff --git a/apps/onboarding/public/images/bubble-whisky.png b/apps/onboarding/public/images/bubble-whisky.png
diff --git a/apps/onboarding/public/images/bubble-wine.png b/apps/onboarding/public/images/bubble-wine.png
diff --git a/apps/onboarding/public/metadata/images/baby.png b/apps/onboarding/public/metadata/images/baby.png
diff --git a/public/images/result/card/card_2_common.png → ...oarding/public/metadata/images/common.png b/public/images/result/card/card_2_common.png → ...oarding/public/metadata/images/common.png
diff --git a/public/images/result/card/card_6_god.png → ...onboarding/public/metadata/images/god.png b/public/images/result/card/card_6_god.png → ...onboarding/public/metadata/images/god.png
diff --git a/public/images/result/card/card_5_heaven.png → ...oarding/public/metadata/images/heaven.png b/public/images/result/card/card_5_heaven.png → ...oarding/public/metadata/images/heaven.png
diff --git a/public/images/result/card/card_3_master.png → ...oarding/public/metadata/images/master.png b/public/images/result/card/card_3_master.png → ...oarding/public/metadata/images/master.png
diff --git a/public/images/result/card/card_4_ghost.png → ...arding/public/metadata/images/monster.png b/public/images/result/card/card_4_ghost.png → ...arding/public/metadata/images/monster.png
diff --git a/public/images/main_image.png → ...onboarding/public/metadata/main_image.png b/public/images/main_image.png → ...onboarding/public/metadata/main_image.png
diff --git a/apps/onboarding/public/next.svg b/apps/onboarding/public/next.svg
diff --git a/apps/onboarding/public/svgs/grainy.svg b/apps/onboarding/public/svgs/grainy.svg
diff --git a/apps/onboarding/public/vercel.svg b/apps/onboarding/public/vercel.svg
diff --git a/apps/onboarding/src/.babelrc b/apps/onboarding/src/.babelrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "production": {
+      "plugins": ["@emotion"]
+    }
+  },
+  "plugins": ["@emotion"]
+}