Merge pull request #9 from depromeet/feat/async

feat: 비동기 처리를 위한 유틸 함수 구현
depromeet · Jul 19, 2024 · 5148b39 · 5148b39
2 parents 64b99d6 + 081ec51
commit 5148b39
Show file tree

Hide file tree

Showing 50 changed files with 689 additions and 45 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,8 +22,30 @@
     "plugin:storybook/recommended"
   ],
   "rules": {
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "next",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
+      }
+    ],
     "@typescript-eslint/consistent-type-imports": "warn",
     "prettier/prettier": ["warn", { "printWidth": 80 }],
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "react/require-default-props": "off",
+    "no-restricted-syntax": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/button-has-type": "off"
   }
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,27 @@
+name: CI 체크중..
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 레포지토리 체크아웃 중..
+        uses: actions/checkout@v2
+
+      - name: node 설치중..
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.2.0'
+
+      - name: yarn 설치중..
+        run: npm install -g yarn
+
+      - name: 종속성 설치중...
+        run: yarn install
+
+      - name: 빌드 중..
+        run: yarn build
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.21.5-62349c1520-8.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.21.5-62349c1520-8.zip
diff --git a/.yarn/cache/@esbuild-darwin-x64-npm-0.21.5-491c2ae06c-8.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.21.5-491c2ae06c-8.zip
diff --git a/.yarn/cache/@img-sharp-darwin-arm64-npm-0.33.4-061afc6886-8.zip b/.yarn/cache/@img-sharp-darwin-arm64-npm-0.33.4-061afc6886-8.zip
diff --git a/.yarn/cache/@img-sharp-darwin-x64-npm-0.33.4-6aac8de317-8.zip b/.yarn/cache/@img-sharp-darwin-x64-npm-0.33.4-6aac8de317-8.zip
diff --git a/.yarn/cache/@img-sharp-libvips-darwin-arm64-npm-1.0.2-6c9ede770e-8.zip b/.yarn/cache/@img-sharp-libvips-darwin-arm64-npm-1.0.2-6c9ede770e-8.zip
diff --git a/.yarn/cache/@img-sharp-libvips-darwin-x64-npm-1.0.2-01b146c37d-8.zip b/.yarn/cache/@img-sharp-libvips-darwin-x64-npm-1.0.2-01b146c37d-8.zip
diff --git a/...wc-darwin-x64-npm-14.2.4-56f1600da7-8.zip → ...-darwin-arm64-npm-14.2.4-86d534c3ee-8.zip b/...wc-darwin-x64-npm-14.2.4-56f1600da7-8.zip → ...-darwin-arm64-npm-14.2.4-86d534c3ee-8.zip
diff --git a/.yarn/cache/class-variance-authority-npm-0.7.0-1a63840197-e7fd1fab43.zip b/.yarn/cache/class-variance-authority-npm-0.7.0-1a63840197-e7fd1fab43.zip
diff --git a/.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip b/.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip
diff --git a/.yarn/cache/lucide-react-npm-0.411.0-2cd46087e9-e0f963f194.zip b/.yarn/cache/lucide-react-npm-0.411.0-2cd46087e9-e0f963f194.zip
diff --git a/.yarn/cache/tailwindcss-animate-npm-1.0.7-0ee9776556-c1760983eb.zip b/.yarn/cache/tailwindcss-animate-npm-1.0.7-0ee9776556-c1760983eb.zip
diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/util"
+  }
+}
diff --git a/package.json b/package.json
@@ -17,11 +17,15 @@
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.411.0",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
-    "tailwind-variants": "^0.2.1"
+    "tailwind-merge": "^2.4.0",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { QueryProvider } from '@/lib';
 import './globals.css';
+import QueryProvider from '@/context/QueryProvider/QueryProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -16,7 +18,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <QueryProvider>{children}</QueryProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useIsClient';
diff --git a/src/hooks/useIsClient.ts b/src/hooks/useIsClient.ts
@@ -0,0 +1,11 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+export function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+}
diff --git a/src/lib/AsyncBoundary/AsyncBoundary.tsx b/src/lib/AsyncBoundary/AsyncBoundary.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { chain } from '@/utils';
+import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary';
+import SSRSafeSuspense from '../SSRSafeSuspense/SSRSafeSuspense';
+import type { StrictPropsWithChildren } from '@/types';
+import type { ComponentProps, ComponentRef, Suspense } from 'react';
+
+type ErrorBoundaryProps = Omit<ComponentProps<typeof ErrorBoundary>, 'renderFallback'>;
+type SuspenseProps = Omit<ComponentProps<typeof Suspense>, 'fallback'>;
+
+type AsyncBoundrayProps = StrictPropsWithChildren &
+  ErrorBoundaryProps &
+  SuspenseProps & {
+    errorFallback?: ComponentProps<typeof ErrorBoundary>['renderFallback'];
+    pendingFallback?: ComponentProps<typeof Suspense>['fallback'];
+  };
+
+export const AsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundrayProps>(
+  ({ errorFallback, pendingFallback, children, ...errorBoundaryProps }, ref) => {
+    return (
+      <ErrorBoundary ref={ref} renderFallback={errorFallback} {...errorBoundaryProps}>
+        <SSRSafeSuspense fallback={pendingFallback}>{children}</SSRSafeSuspense>
+      </ErrorBoundary>
+    );
+  },
+);
+
+AsyncBoundary.displayName = 'AsyncBoundary';
+
+export const AsyncBoundaryWithQuery = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundrayProps>(
+  (props, ref) => {
+    const { children, ...otherProps } = props;
+    const { reset } = useQueryErrorResetBoundary();
+
+    return (
+      <AsyncBoundary ref={ref} {...otherProps} onReset={chain(props.onReset, reset)}>
+        {children}
+      </AsyncBoundary>
+    );
+  },
+);
+
+AsyncBoundaryWithQuery.displayName = 'AsyncBoundaryWithQuery';