📦️ Husky+gitmoji 도입 - commit rule설정

.eslintrc.cjs

@@ -0,0 +1,37 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: [
+    "react-refresh",
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+  ],
+  rules: {
+    "no-unused-vars": "off",
+    "react-refresh/only-export-components": [
+      "warn",
+      {
+        allowConstantExport: true,
+      },
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        endofLine: "auto",
+      },
+    ],
+  },
+};

.husky/commit-msg

@@ -0,0 +1 @@
+npx gitmoji --hook

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "useTabs": false,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);

package.json

@@ -7,11 +7,17 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "husky"
   },
   "dependencies": {
+    "@tanstack/react-query": "4",
+    "axios": "^1.7.9",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2",
+    "styled-components": "^6.1.13",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -22,6 +28,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
+    "husky": "^9.1.7",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1"

src/App.tsx

@@ -1,35 +1,17 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { Outlet } from "react-router-dom";
+import Header from "./components/layout/Header";
+import Footer from "./components/layout/Footer";
+import GlobalStyles from "./styles/GlobalStyle";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <GlobalStyles />
+      <Header />
+      <Outlet />
+      <Footer />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/layout/Footer.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Footer() {
+  return <div>@2024 dicaprioCode</div>;
+}

src/components/layout/Header.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+export default function Header() {
+  return (
+    <>
+      <ul>
+        <li>
+          <NavLink to="/">메인</NavLink>
+        </li>
+        <li>
+          <NavLink to="/page1">페이지1</NavLink>
+        </li>
+        <li>
+          <NavLink to="/page2">페이지2</NavLink>
+        </li>
+        <li>
+          <NavLink to="/page3">페이지3</NavLink>
+        </li>
+      </ul>
+    </>
+  );
+}

src/components/ui/AppButton.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import * as S from "./appButtonStyle";
+
+export default function AppButton(
+  children: ReactNode,
+  { onClickFnc, type = "button", style = "default" }: IAppButtonProps,
+) {
+  return (
+    <S.Button onClick={onClickFnc} type={type} $style={style}>
+      AppButton
+    </S.Button>
+  );
+}

src/components/ui/AppInput.tsx

@@ -0,0 +1,5 @@
+import * as S from "./appInputStyle";
+
+export default function AppInput({ id }: IAppInputProps) {
+  return <S.Input />;
+}

src/components/ui/appButtonStyle.ts

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const Button = styled.button<{ $style: IAppButtonProps["style"] }>`
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  ${({ $style }) => {
+    switch ($style) {
+      case "small":
+        return `
+          padding: 5px 10px;
+          font-size: 12px;
+        `;
+      case "default":
+      default:
+        return `
+          padding: 10px 20px;
+          font-size: 16px;
+        `;
+    }
+  }}
+
+  &:hover {
+    background-color: #f0f0f0; /* 간단한 hover 효과 */
+  }
+`;

src/components/ui/appInputStyle.ts

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const Input = styled.input``;

src/components/ui/app_props.d.ts

@@ -0,0 +1,9 @@
+interface IAppButtonProps {
+  onClickFnc: () => void;
+  type: "button" | "submit" | "reset";
+  style: "default" | "small";
+}
+
+interface IAppInputProps {
+  id: string;
+}

src/main.tsx

@@ -1,10 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes/router.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRoot } from "react-dom/client";
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
+  </QueryClientProvider>,
+);

src/pages/Page1/Page1.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Page1() {
+  return <div>Page1</div>;
+}

src/pages/Page2/Page2.tsx

@@ -0,0 +1,3 @@
+export default function Page2() {
+  return <div>Page2</div>;
+}

src/pages/Page3/Page3.tsx

@@ -0,0 +1,3 @@
+export default function Page3() {
+  return <div>Page3</div>;
+}

src/routes/router.tsx

@@ -0,0 +1,26 @@
+import { createBrowserRouter } from "react-router-dom";
+import App from "../App";
+import Page1 from "../pages/Page1/Page1";
+import Page2 from "../pages/Page2/Page2";
+import Page3 from "../pages/Page3/Page3";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      {
+        path: "/page1",
+        element: <Page1 />,
+      },
+      {
+        path: "/page2",
+        element: <Page2 />,
+      },
+      {
+        path: "/page3",
+        element: <Page3 />,
+      },
+    ],
+  },
+]);

src/store/testStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface testState {
+  projectName: string;
+}
+
+export const useTestStore = create<testState>()((set) => ({
+  projectName: "디카프리오 코드",
+  changeProjectName: (newProjectName: string) =>
+    set(() => ({ projectName: newProjectName })),
+}));