chore: 충돌 오류 해결

.eslintignore

@@ -0,0 +1,3 @@
+build
+dist
+public

.eslintrc.cjs

@@ -1,51 +1,58 @@
 module.exports = {
   root: true,
-
-  env: {
-    browser: true,
-    node: true,
-  },
-
-  parser: '@typescript-eslint/parser',
-
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
-
+  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
+    "eslint:recommended",
+    //"plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
   ],
-
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-uses-react': 0,
-    'react/react-in-jsx-scope': 0,
-    'react-hooks/exhaustive-deps': 1,
-    '@typescript-eslint/no-explicit-any': 0,
-    'no-console': [
-      'warn',
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "prettier/prettier": [
+      "warn",
       {
-        allow: ['warn', 'error'],
+        endOfLine: "auto",
       },
     ],
-    'prettier/prettier': 'error'
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
+    eqeqeq: "error", // 항상 일치 연산자(=== 및 !==) 사용을 강제
+    curly: "error", // 제어문에서 항상 중괄호 사용을 강제
+    quotes: ["error", "single"], // 문자열은 항상 홀 따옴표로 설정
+    "comma-style": ["error", "last"], // 쉼표 스타일을 (객체에서)마지막 요소 뒤에 사용하도록 설정
+    "no-unused-vars": "warn", // 사용되지 않는 변수에 대한 경고 표시
+    "no-console": "warn", // console 사용 시 경고 표시
+    "no-extra-semi": "error", // 추가적인 세미콜론 사용을 방지
+    "no-unused-expressions": "error", // 사용되지 않는 표현식에 대한 경고 표시
+    indent: ["error", 2], // 들여쓰기는 두 칸으로 설정
+    semi: ["warn", "always"], // 항상 세미콜론 사용을 적극 권장
+    "no-undef": "error", // 정의되지 않은 변수에 대한 경고 표시
+    "no-trailing-spaces": "warn", // 줄 끝에 공백 사용을 방지
+    "no-multiple-empty-lines": "warn", // 연속된 빈 줄 사용을 방지
+    "arrow-spacing": "warn", // 화살표 함수의 화살표 주변에 공백 사용을 강제
+    "no-const-assign": "error", // const 변수에 재할당을 방지
+    //"no-extra-parens": "warn", // 불필요한 괄호 사용을 방지
+    "no-multi-spaces": "error", // 연속된 공백 사용을 방지
+    "prefer-const": "error", // 변수 재할당을 하지 않는 경우 const 사용을 권장
+    "no-else-return": "warn", // else 블록에서 return 사용을 방지
+    "no-floating-decimal": "error", // 소수점 앞에 있는 0 생략을 방지
+    "no-new-object": "error", // Object 생성자 사용을 방지
+    "no-shadow": "error", // 외부 범위에서 이미 선언된 변수와 동일한 이름의 변수를 선언하는 것을 방지
+    "no-param-reassign": "error", // 함수 매개변수의 재할당을 방지
+    "prefer-template": "warn", // 문자열 연결 대신 템플릿 리터럴 사용을 권장
+    radix: "error", // parseInt() 함수 사용 시 진수를 명시적으로 지정하도록 강제
+    "no-useless-constructor": "error", // 불필요한 생성자 사용을 방지
+    "no-alert": "warn", // alert() 함수 사용을 방지
+    "no-empty-pattern": "warn", // 빈 객체나 배열 분해 사용을 방지
+    "no-eval": "error", // eval() 함수 사용을 방지
+    "no-implicit-globals": "error", // 암묵적인 전역 변수 사용을 방지
+    "no-implied-eval": "error", // 암시적인 eval() 사용을 방지
+    "no-loop-func": "error", // 루프 내에서 함수 선언을 방지
+    "no-iterator": "error", // __iterator__ 속성 사용을 방지
+    "no-new-wrappers": "error", // 기본 객체 래퍼 클래스 사용을 방지
+    "no-restricted-globals": "error", // 특정한 전역 변수 사용을 방지
+    "no-return-assign": "warn", // 할당문을 리턴문에서 사용을 방지
   },
-
-  ignorePatterns: ['node_modules/'],
 };

.gitignore

@@ -26,3 +26,19 @@ dist-ssr
 
 #각자 알아서 env 파일 만들고 관리하기 !
 .env
+
+### yarn ###
+# used Zero-Install
+/.yarn
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+install-state.gz
+tsconfig.node.tsbuildinfo
+tsconfig.tsbuildinfo
+vite.config.d.ts
+vite.config.js

package.json

@@ -14,30 +14,39 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@eslint/js": "8.57.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
     "@svgr/cli": "^8.1.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "8.57.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "globals": "^15.11.0",
     "postcss-styled-syntax": "^0.7.0",
-    "stylelint": "^16.10.0",
+    "postcss-syntax": "^0.36.2",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.5.0",
+    "stylelint-config-clean-order": "^5.4.2",
     "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-styled-components": "^0.1.1",
     "stylelint-order": "^6.0.4",
-    "typescript": "^5.6.3",
+    "typescript": "^5.2.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "packageManager": "[email protected]"
 }

src/App.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Navigate } from 'react-router-dom';
 import Layout from '@pages/Layout/Layout';
 import Main from '@pages/Main/Main';
+import Cart from '@pages/Cart/Cart';
 
 const router = createBrowserRouter([
   {
@@ -12,17 +13,21 @@ const router = createBrowserRouter([
         path: '/',
         element: <Main />,
       },
+      {
+        path: '/cart',
+        element: <Cart />,
+      },
     ],
     errorElement: <Navigate to={'/'} />,
   },
 ]);
 
-function App() {
+const App = () => {
   return (
     <>
       <RouterProvider router={router} />
     </>
   );
-}
+};
 
 export default App;

src/apis/apis.ts

@@ -1 +1 @@
-//예시
+//예시

src/components/Cart/CartSmallBtn/CartSmallBtn.styled.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import theme from "@styles/theme";
+
+export const StyledBtn = styled.button`
+    text: ${theme.colors.text_gray40};
+    border: 1px solid ${theme.colors.stroke_gray50};
+    ${theme.fonts.body10_sb_11};
+    padding: 0.4rem 0.6rem;
+    border-radius: 0.5rem;
+`;

src/components/Cart/CartSmallBtn/CartSmallBtn.tsx

@@ -0,0 +1,15 @@
+import * as S from "./CartSmallBtn.styled"
+
+interface CartSmallBtnProps {
+    text: string;
+}
+
+const CartSmallBtn = ( {text} : CartSmallBtnProps ) => {
+    return (
+        <S.StyledBtn>
+            {text}
+        </S.StyledBtn>
+    )
+}
+
+export default CartSmallBtn;

src/components/Cart/OrderBtn/OrderBtn.styled.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import theme from "@styles/theme";
+
+export const StyledBtn = styled.button`
+  background-color: ${theme.colors.purple50};
+  border-radius: 10px;
+  color: white;
+  ${theme.fonts.body2_b_14};
+  width: 25rem;
+  height: 5.6rem;
+  transition: 
+    background-color 0.3s ease, 
+    color 0.3s ease, 
+    width 0.3s ease, 
+    height 0.3s ease; 
+
+  &:active {
+    background-color: ${theme.colors.purple60};
+    color: ${theme.colors.purple40};
+    width: 23.6rem; 
+    height: 5.2rem;
+  }
+`;

src/components/Cart/OrderBtn/OrderBtn.tsx

@@ -0,0 +1,16 @@
+import * as S from "./OrderBtn.styled"
+
+interface OrderBtnProps {
+  totalItems: number;
+  totalPrice: number;
+}
+
+const OrderBtn = ({ totalItems, totalPrice } : OrderBtnProps) => {
+  return (
+    <S.StyledBtn>
+      {`${totalPrice.toLocaleString()}원 (${totalItems}) 주문하기`}
+    </S.StyledBtn>
+  ); 
+};
+
+export default OrderBtn;

src/main.tsx

@@ -1,15 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import GlobalStyle from '@styles/GlobalStyle.tsx'
-import { ThemeProvider } from '@emotion/react'
-import theme from '@styles/theme.ts'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import GlobalStyle from '@styles/GlobalStyle.tsx';
+import { ThemeProvider } from '@emotion/react';
+import theme from '@styles/theme.ts';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <GlobalStyle/>
+    <GlobalStyle />
     <ThemeProvider theme={theme}>
       <App />
     </ThemeProvider>
   </StrictMode>,
-)
+);

src/pages/Cart/Cart.styled.ts

@@ -0,0 +1 @@
+//여기에 장바구니 페이지 전용 스타일링

src/pages/Cart/Cart.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Cart = () => {
+  return <div>장바구니 페이지지롱 ~</div>;
+};
+
+export default Cart;

src/pages/Layout/Layout.tsx

@@ -1,13 +1,13 @@
 //import React from 'react'
-import * as S from "./Layout.styled"
-import { Outlet } from 'react-router-dom'
+import * as S from './Layout.styled';
+import { Outlet } from 'react-router-dom';
 
 const Layout = () => {
   return (
     <S.LayoutWrapper>
-      <Outlet/>
+      <Outlet />
     </S.LayoutWrapper>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;

src/pages/Main/Main.tsx

@@ -7,7 +7,7 @@ const Main = () => {
     <S.MainWrapper>
       <HomeSection1 />
     </S.MainWrapper>
-  )
-}
+  );
+};
 
-export default Main
+export default Main;