Merge pull request #29 from endless-horses/feature#28-preview

타이어 미리보기 컴포넌트 구현 close #28

package.json

@@ -22,6 +22,7 @@
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
     "styled-components": "^6.1.8",
+    "three": "^0.161.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -47,6 +48,7 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
+    "@types/three": "^0.161.2",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "commitlint-plugin-function-rules": "^3.0.0",

src/pages/production/content/preview/index.style.tsx

@@ -2,8 +2,6 @@ import styled from 'styled-components';
 import defaultImage from '@assets/image/default-image.png';
 
 export const Wrapper = styled.div`
-  width: 300px;
-  height: 300px;
   background-image: url(${defaultImage});
   background-size: cover;
 `;

src/pages/production/content/preview/index.tsx

@@ -1,7 +1,63 @@
+import { useEffect, useRef } from 'react';
 import { Wrapper } from './index.style';
+import * as THREE from 'three';
+import liv from '@assets/pattern/liv.png';
+import lug from '@assets/pattern/lug.png';
+import livlug from '@assets/pattern/livlug.png';
+import block from '@assets/pattern/block.png';
+import v from '@assets/pattern/v.png';
+import bedeching from '@assets/pattern/bedeching.png';
+import { selectedPatternState } from '@context/pattern';
+import { useRecoilState } from 'recoil';
 
 function Preview() {
-  return <Wrapper className="preview" />;
+  const mountRef = useRef<HTMLDivElement>(null);
+  const image = [liv, lug, livlug, block, v, bedeching];
+  const [selectedPattern] = useRecoilState(selectedPatternState);
+
+  useEffect(() => {
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setClearColor(0xffffff);
+    renderer.setSize(480, 300);
+
+    if (mountRef.current) {
+      mountRef.current.appendChild(renderer.domElement);
+    }
+
+    const textureLoader = new THREE.TextureLoader();
+    const texture = textureLoader.load(image[selectedPattern]);
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.center.set(0.5, 0.5);
+    texture.rotation = Math.PI / 2;
+    texture.offset.set(0, 0);
+    texture.repeat.set(2, 8);
+
+    const tireGeometry = new THREE.TorusGeometry(6, 2, 16, 150);
+    const tireMaterial = new THREE.MeshBasicMaterial({ map: texture });
+    const tire = new THREE.Mesh(tireGeometry, tireMaterial);
+    tire.rotation.y = Math.PI / 2;
+    scene.add(tire);
+
+    camera.position.z = 15;
+
+    const animate = function () {
+      requestAnimationFrame(animate);
+      tire.rotation.y += 0.01;
+      renderer.render(scene, camera);
+    };
+    animate();
+
+    // 컴포넌트 언마운트 시 클린업 로직
+    return () => {
+      if (mountRef.current) {
+        mountRef.current.removeChild(renderer.domElement);
+      }
+    };
+  }, [selectedPattern]);
+
+  return <Wrapper ref={mountRef} className="preview" />;
 }
 
 export default Preview;