Merge pull request #21 from endless-horses/feature#16-custom-page-pat…

…tern

타이어 만들기 페이지 구현 - 패턴 선택 close #16

commitlint.config.js

@@ -1,50 +1,50 @@
 module.exports = {
-	extends: ['@commitlint/config-conventional'],
-	plugins: ['commitlint-plugin-function-rules'],
-	rules: {
-		// 스코프는 컨벤션과 맞지 않기에, 사용하지 않는 것으로 한다.
-		'scope-empty': [2, 'always'],
-		// 헤더의 길이는 50자로 제한한다.
-		'header-max-length': [2, 'always', 50],
-		// 본문의 한 줄은 72자로 제한한다.
-		'body-max-line-length': [2, 'always', 72],
-		// 타입은 아래의 태그만 사용하도록 한다.
-		'type-enum': [2, 'always', ['feat', 'fix', 'refactor', 'style', 'docs', 'test', 'chore']],
-		'subject-full-stop': [0],
-		'function-rules/subject-full-stop': [
-			2,
-			'always',
-			({ subject, header, body, raw }) => {
-				// 이슈 번호로 종료되는가?
-				if (subject && !/[^\.] #[0-9]+$/.test(subject)) {
-					return [
-						false,
-						'subject는 issue 번호를 #[number] 형식으로 끝에 포함해야하며, .(점) 으로 끝나지 말아야 합니다.',
-					];
-				}
+  extends: ['@commitlint/config-conventional'],
+  plugins: ['commitlint-plugin-function-rules'],
+  rules: {
+    // 스코프는 컨벤션과 맞지 않기에, 사용하지 않는 것으로 한다.
+    'scope-empty': [2, 'always'],
+    // 헤더의 길이는 50자로 제한한다.
+    'header-max-length': [2, 'always', 50],
+    // 본문의 한 줄은 72자로 제한한다.
+    'body-max-line-length': [2, 'always', 72],
+    // 타입은 아래의 태그만 사용하도록 한다.
+    'type-enum': [2, 'always', ['feat', 'fix', 'refactor', 'style', 'docs', 'test', 'chore']],
+    'subject-full-stop': [0],
+    'function-rules/subject-full-stop': [
+      2,
+      'always',
+      ({ subject, header, body, raw }) => {
+        // 이슈 번호로 종료되는가?
+        if (subject && !/[^\.] #[0-9]+$/.test(subject)) {
+          return [
+            false,
+            'subject는 issue 번호를 #[number] 형식으로 끝에 포함해야하며, .(점) 으로 끝나지 말아야 합니다.',
+          ];
+        }
 
-				// 제목과 바디가 공백으로 분리되어있는가?
-				if (body && raw && header && raw.search('\n\n') !== header.length) {
-					return [false, '제목과 본문은 공백으로 구분해주시기 바랍니다.'];
-				}
+        // 제목과 바디가 공백으로 분리되어있는가?
+        if (body && raw && header && raw.search('\n\n') !== header.length) {
+          return [false, '제목과 본문은 공백으로 구분해주시기 바랍니다.'];
+        }
 
-				return [true];
-			},
-		],
-		'body-leading-blank': [0],
-		'function-rules/body-leading-blank': [
-			2,
-			'always',
-			({ body }) => {
-				// body가 없으면 굳이 판단하지 않는다.
-				if (!body) {
-					return [true];
-				}
-				if (body.split('\n').filter((line) => !/ *-/.test(line)).length > 0) {
-					return [false, '본문의 각 줄은 - 으로 시작해야 합니다.'];
-				}
-				return [true];
-			},
-		],
-	},
+        return [true];
+      },
+    ],
+    'body-leading-blank': [0],
+    'function-rules/body-leading-blank': [
+      2,
+      'always',
+      ({ body }) => {
+        // body가 없으면 굳이 판단하지 않는다.
+        if (!body) {
+          return [true];
+        }
+        if (body.split('\n').filter((line) => !/ *-/.test(line)).length > 0) {
+          return [false, '본문의 각 줄은 - 으로 시작해야 합니다.'];
+        }
+        return [true];
+      },
+    ],
+  },
 };

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
+    "@reduxjs/toolkit": "^2.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,9 +16,11 @@
     "craco-alias": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
     "react-router": "^6.21.3",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.8",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Main from '@pages/main';
+import Production from '@pages/production';
 
 function App() {
   return (
     <div className="App">
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Main />} />
+          <Route path="/production" element={<Production />} />
         </Routes>
       </BrowserRouter>
     </div>

src/api/color.types.ts

@@ -1,5 +1,6 @@
 export interface ColorData {
   id: number;
   name: string;
+  imageUrl: string;
   rgb: string;
 }

src/components/button/index.style.tsx

@@ -37,4 +37,5 @@ export const Wrapper = styled.input<WrapperProps>`
   }};
   border-radius: 12px;
   border: none;
+  cursor: pointer;
 `;

src/components/header/index.style.tsx

@@ -5,7 +5,7 @@ interface WrapperProps {
 }
 
 const Container = styled.div<WrapperProps>`
-  width: 100vw - 20px;
+  min-height: 100px;
   height: 10vh;
   background-color: ${(props) => {
     if (props.inversion === 'true') {