depromeet · Collection50 · Jul 19, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 19, 2024
@@ -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"
   }
 }
@@ -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
@@ -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"
+  }
+}
@@ -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",

@@ -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>
   );
 }
@@ -0,0 +1 @@
+export * from './useIsClient';
@@ -0,0 +1,11 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+export function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+}
@@ -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';