Merge pull request #7 from Kernel360/WAS-4/feature/boilerplate

WAS-4/tanstack-query-dev-tools 설치

package.json

@@ -10,14 +10,19 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest",
     "test:watch": "jest --watch"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.1",
+    "@storybook/test": "^7.6.6",
+    "@tanstack/query-core": "^4",
     "@tanstack/react-query": "^4",
+    "@tanstack/react-query-devtools": "^4",
+    "axios": "^1.6.2",
     "next": "^13",
     "react": "^18",
     "react-dom": "^18",
@@ -31,29 +36,27 @@
     "@storybook/blocks": "^7.6.6",
     "@storybook/nextjs": "^7.6.6",
     "@storybook/react": "^7.6.6",
-    "@storybook/test": "^7.6.6",
     "@tanstack/eslint-plugin-query": "^5.12.1",
-    "@tanstack/react-query-devtools": "^4",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4",
-    "eslint-plugin-storybook": "^0.6.15",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^7.6.6",
-    "ts-node": "^10.9.2",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-next": "14.0.4",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "storybook": "^7.6.6",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   }
-}
+}

src/__tests__/page.test.tsx

@@ -1,13 +1,14 @@
-import '@testing-library/jest-dom'
-import { render, screen } from '@testing-library/react'
-import Page from '../app/page'
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
 
-describe('Page', () => {
-  it('renders a heading', () => {
-    render(<Page />)
+import Page from "../app/page";
 
-    const heading = screen.getByRole('heading', { level: 1 })
+describe("Page", () => {
+  it("renders a heading", () => {
+    render(<Page />);
 
-    expect(heading).toBeInTheDocument()
-  })
-})
+    const heading = screen.getByRole("heading", { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

src/components/query/HydrateClient.tsx

@@ -6,4 +6,4 @@ function HydrateClient(props: HydrateProps) {
   return <Hydrate {...props} />;
 }
 
-export default HydrateClient;
+export default HydrateClient;

src/lib/getQueryClient.ts

@@ -1,5 +1,6 @@
-import { QueryClient } from "@tanstack/query-core";
 import { cache } from "react";
 
-const getQueryClient = cache(() => new QueryClient());
-export default getQueryClient;
+import { QueryClient } from "@tanstack/query-core";
+
+const getQueryClient = cache(() => { return new QueryClient(); });
+export default getQueryClient;

src/providers/StoreProvider.tsx

@@ -1,20 +1,22 @@
-'use client'
-import { useRef } from 'react'
-import { Provider } from 'react-redux'
-import { makeStore, AppStore } from '@stores/store'
+"use client";
+
+import { useRef } from "react";
+import { Provider } from "react-redux";
+
+import { makeStore, AppStore } from "@stores/store";
 
 function StoreProvider({
-  children
+  children,
 }: {
   children: React.ReactNode
 }) {
-  const storeRef = useRef<AppStore>()
+  const storeRef = useRef<AppStore>();
   if (!storeRef.current) {
     // Create the store instance the first time this renders
-    storeRef.current = makeStore()
+    storeRef.current = makeStore();
   }
 
-  return <Provider store={storeRef.current}>{children}</Provider>
+  return <Provider store={storeRef.current}>{children}</Provider>;
 }
 
-export default StoreProvider
+export default StoreProvider;

src/providers/TanstackQueryProvider.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useState } from "react";
+
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useState } from "react";
 
 function TanstackQueryProvider({ children }: { children: React.ReactNode }) {
   const [client] = useState(new QueryClient());
@@ -15,4 +16,4 @@ function TanstackQueryProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default TanstackQueryProvider
+export default TanstackQueryProvider;

src/stores/hooks.ts

@@ -1,8 +1,9 @@
-import { useDispatch, useSelector, useStore } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
-import type { RootState, AppDispatch, AppStore } from './store'
+import type { RootState, AppDispatch, AppStore } from "./store";
+import type { TypedUseSelectorHook } from "react-redux";
+
+import { useDispatch, useSelector, useStore } from "react-redux";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-export const useAppStore: () => AppStore = useStore
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const useAppStore: () => AppStore = useStore;

src/stores/store.ts

@@ -1,13 +1,13 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from "@reduxjs/toolkit";
 
 export const makeStore = () => {
   return configureStore({
-    reducer: {}
-  })
-}
+    reducer: {},
+  });
+};
 
 // Infer the type of makeStore
-export type AppStore = ReturnType<typeof makeStore>
+export type AppStore = ReturnType<typeof makeStore>;
 // Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<AppStore['getState']>
-export type AppDispatch = AppStore['dispatch']
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];

src/stories/Button.stories.ts

@@ -1,20 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from './Button';
+import { Button } from "./Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: "centered",
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
   },
 } satisfies Meta<typeof Button>;
 
@@ -25,26 +25,26 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'Button',
+    label: "Button",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    label: 'Button',
+    label: "Button",
   },
 };
 
 export const Large: Story = {
   args: {
-    size: 'large',
-    label: 'Button',
+    size: "large",
+    label: "Button",
   },
 };
 
 export const Small: Story = {
   args: {
-    size: 'small',
-    label: 'Button',
+    size: "small",
+    label: "Button",
   },
 };

src/stories/Button.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import './button.css';
+import React from "react";
+import "./button.css";
 
 interface ButtonProps {
   /**
@@ -13,7 +13,7 @@ interface ButtonProps {
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
   /**
    * Button contents
    */
@@ -27,26 +27,21 @@ interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({
+export function Button({
   primary = false,
-  size = 'medium',
+  size = "medium",
   backgroundColor,
   label,
   ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+}: ButtonProps) {
+  const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={["storybook-button", `storybook-button--${size}`, mode].join(" ")}
       {...props}
     >
       {label}
-      <style jsx>{`
-        button {
-          background-color: ${backgroundColor};
-        }
-      `}</style>
     </button>
   );
-};
+}

src/stories/Header.stories.ts

@@ -1,14 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from './Header';
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Header } from "./Header";
 
 const meta = {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } satisfies Meta<typeof Header>;
 
@@ -18,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
+      name: "Jane Doe",
     },
   },
 };