PR시 린트검사 하도록 수정

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
     '.eslintrc.cjs',
     'vite.config.ts',
     'tailwind.config.js',
+    'vite-env.d.ts'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

.github/workflows/CodeIntegration.yml

@@ -0,0 +1,29 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches:
+      - main # 또는 기본 브랜치 이름
+      - dev
+
+jobs:
+  lint_build_Check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies #패키지 버전 체크
+        run: npm ci
+
+      - name: Run ESLint #린트 체크
+        run: npm run lint
+
+      - name: Run Build #빌드 체크
+        run: npm run build

.prettierrc

@@ -1,9 +1,8 @@
 {
   "semi" : false,
-  "trailling Comma" : "none",
+  "trailingComma" : "none",
   "arrowParens": "always",
   "singleQuote": true,
-  "tab width" : 2,
-  "printwidth" : 80
-
+  "tabWidth" : 2,
+  "printWidth" : 80
 }

src/App.tsx

@@ -9,24 +9,26 @@ function App() {
   return (
     <>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+        <a href={'https://vitejs.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 href={'https://react.dev'} target={'_blank'}>
+          <img src={reactLogo} className={'logo react'} alt={'React logo'} />
         </a>
       </div>
-      <h1>Vite + React</h1>
-      <div className="card">
+      <h1>{'Vite + React'}</h1>
+      <div className={'card'}>
         <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
+          {'count is '}
+          {count}
         </button>
         <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
+          {'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 className={'read-the-docs'}>
+        {'Click on the Vite and React logos to learn more'}
       </p>
     </>
   )

src/api/index.ts

@@ -2,5 +2,5 @@ import axios from 'axios'
 
 export const api = axios.create({
   baseURL: 'baseUrl',
-  timeout: 10_000,
+  timeout: 10_000
 })

src/main.tsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.querySelector('#root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 )

src/pages/HomePage.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function HomePage() {
   return <div>{'HomePage'}</div>
 }

src/stories/Button.stories.ts

@@ -1,50 +1,50 @@
-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/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Example/Button',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
+    layout: 'centered'
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
+    backgroundColor: { control: 'color' }
+  }
+} satisfies Meta<typeof Button>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 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',
-  },
-};
+    label: 'Button'
+  }
+}
 
 export const Small: Story = {
   args: {
     size: 'small',
-    label: 'Button',
-  },
-};
+    label: 'Button'
+  }
+}

src/stories/Button.tsx

@@ -1,24 +1,24 @@
-interface ButtonProps {
+interface ButtonProperties {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
+  primary?: boolean
   /**
    * What background color to use
    */
-  backgroundColor?: string;
+  backgroundColor?: string
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large'
   /**
    * Button contents
    */
-  label: string;
+  label: string
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: () => void
 }
 
 /**
@@ -29,17 +29,21 @@ export const Button = ({
   size = 'medium',
   backgroundColor,
   label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  ...properties
+}: ButtonProperties) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary'
   return (
     <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      type={'button'}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
       style={{ backgroundColor }}
-      {...props}
+      {...properties}
     >
       {label}
     </button>
-  );
-};
+  )
+}