Merge pull request #4 from Skhuthon/feature/2

[#3] 방탈출 테마 추천 화면

package.json

@@ -17,6 +17,7 @@
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",
     "three": "^0.165.0",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +46,7 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.34",
+    "@types/three": "^0.165.0",
     "typescript": "^4.9.5"
   }
 }

src/App.tsx

@@ -2,13 +2,22 @@ import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import MainPage from "./pages/MainPage";
 import ThemeRecs from "./pages/ThemeRecs";
+import ThemeRecsQuestions from "./pages/ThemeRecsQuestions";
+import ThemeRecsResult from "./pages/ThemeRecsResult";
+import Navbar from "./components/Navbar";
 
 const App: React.FC = () => {
     return (
         <Router>
+            <Navbar />
             <Routes>
-                <Route path="/" Component={MainPage} />
-                <Route path="/themeRecs" Component={ThemeRecs} />
+                <Route path="/" element={<MainPage />} />
+                <Route path="/themeRecs" element={<ThemeRecs />} />
+                <Route
+                    path="/ThemeRecsQuestions"
+                    element={<ThemeRecsQuestions />}
+                />
+                <Route path="/themeRecsResult" element={<ThemeRecsResult />} />
             </Routes>
         </Router>
     );

src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Container } from "../styles/NavbarStyled";
+import { Container, NavLink } from "../styles/NavbarStyled";
 import logo from "../image/bangpro_logo.png";
 import { BsChatSquareHeartFill } from "react-icons/bs";
 import { BsCollectionFill } from "react-icons/bs";
@@ -11,25 +11,34 @@ const Navbar = () => {
             <div className="logoBox">
                 <img src={logo} alt="logo" className="logo"></img>
             </div>
+
             <div className="navBox">
-                <div className="nav1">
-                    <div>
-                        <BsChatSquareHeartFill />
+                <NavLink to={`/themeRecs`}>
+                    <div className="nav">
+                        <div>
+                            <BsChatSquareHeartFill />
+                        </div>
+                        <p>테마 추천</p>
                     </div>
-                    <p>테마 추천</p>
-                </div>
-                <div className="nav2">
-                    <div>
-                        <BsCollectionFill />
+                </NavLink>
+
+                <NavLink to={`/`}>
+                    <div className="nav">
+                        <div>
+                            <BsCollectionFill />
+                        </div>
+                        <p>테마 정보</p>
                     </div>
-                    <p>테마 정보</p>
-                </div>
-                <div className="nav3">
-                    <div>
-                        <BsPersonFill />
+                </NavLink>
+
+                <NavLink to={`/`}>
+                    <div className="nav">
+                        <div>
+                            <BsPersonFill />
+                        </div>
+                        <p>마이페이지</p>
                     </div>
-                    <p>마이페이지</p>
-                </div>
+                </NavLink>
             </div>
         </Container>
     );

src/components/RoomTheme.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Theme } from "../styles/RoomThemeStyled";
+
+const RoomTheme = () => {
+    return (
+        <Theme>
+            <div className="titleBox">
+                <p>방탈출 테마 이름</p>
+            </div>
+            <div className="addressBox">
+                <p>매장 정보</p>
+            </div>
+            <div className="cardFooter">
+                <div className="hashtagBox">
+                    <p>#난이도</p>
+                    <p>#장르</p>
+                </div>
+                <div className="linkBtn">
+                    <p>예약 사이트</p>
+                </div>
+            </div>
+        </Theme>
+    );
+};
+
+export default RoomTheme;

src/index.css

@@ -12,3 +12,7 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
         monospace;
 }
+
+p {
+    margin: 0;
+}

src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import Navbar from "./components/Navbar";
 
 const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement
@@ -12,7 +11,6 @@ const root = ReactDOM.createRoot(
 root.render(
     // strictMode에서는 두번 렌더링 될 수 있으나, 프로덕션빌드 모드에서는 그렇지 않을것
     <React.StrictMode>
-        <Navbar />
         <App />
     </React.StrictMode>
 );

src/pages/Cube.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+
+const Cube = () => {
+    const mountRef = useRef<HTMLDivElement>(null);
+    const [mouseX, setMouseX] = useState(0);
+    const [mouseY, setMouseY] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [previousMouseX, setPreviousMouseX] = useState(0);
+    const [previousMouseY, setPreviousMouseY] = useState(0);
+    const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(
+        null
+    );
+    const [initialZoom, setInitialZoom] = useState(5); // 초기 줌 값을 상태로 관리
+
+    useEffect(() => {
+        const mount = mountRef.current;
+
+        // Scene, Camera, Renderer 생성
+        const scene = new THREE.Scene();
+        scene.background = null; // 배경을 투명하게 설정
+
+        const camera = new THREE.PerspectiveCamera(
+            70,
+            mount!.clientWidth / mount!.clientHeight,
+            0.1,
+            1000
+        );
+        const renderer = new THREE.WebGLRenderer({ alpha: true }); // alpha 속성을 true로 설정
+        renderer.setSize(mount!.clientWidth, mount!.clientHeight);
+        mount!.appendChild(renderer.domElement);
+
+        // 조명
+        const directionLight = new THREE.DirectionalLight(0xffffff, 1.5);
+        directionLight.position.set(-0.7, 1, 5);
+        scene.add(directionLight);
+
+        // 큐브 생성 (색상 변경)
+        const geometry = new THREE.BoxGeometry(2, 2, 2);
+        const material = new THREE.MeshPhysicalMaterial({
+            color: 0x03ff8d,
+            metalness: 1,
+            roughness: 0.5,
+            transparent: true,
+            opacity: 0.9,
+            reflectivity: 0.9,
+        });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+
+        camera.position.z = initialZoom; // 초기 줌 값 설정
+
+        // 마우스 이벤트 리스너
+        const onMouseDown = (event: MouseEvent) => {
+            setIsDragging(true);
+            setPreviousMouseX(event.clientX);
+            setPreviousMouseY(event.clientY);
+            setInitialRotation(cube.rotation.clone()); // 클릭 시점의 회전 상태 저장
+            setInitialZoom(camera.position.z); // 클릭 시점의 줌 값 저장
+        };
+
+        const onMouseMove = (event: MouseEvent) => {
+            if (isDragging) {
+                const deltaX = event.clientX - previousMouseX;
+                const deltaY = event.clientY - previousMouseY;
+
+                if (initialRotation) {
+                    cube.rotation.y = initialRotation.y + deltaX * 0.005;
+                    cube.rotation.x = initialRotation.x + deltaY * 0.005;
+                }
+
+                setPreviousMouseX(event.clientX);
+                setPreviousMouseY(event.clientY);
+            }
+        };
+
+        const onMouseUp = () => {
+            setIsDragging(false);
+        };
+
+        const onWheel = (event: WheelEvent) => {
+            const delta = event.deltaY * 0.01;
+
+            camera.position.z -= delta;
+
+            // Limiting camera zoom
+            if (camera.position.z < 4) {
+                camera.position.z = 4;
+            } else if (camera.position.z > 15) {
+                camera.position.z = 15;
+            }
+        };
+
+        window.addEventListener("mousedown", onMouseDown);
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        window.addEventListener("wheel", onWheel);
+
+        if (previousMouseX > 0 || previousMouseY > 0) {
+            cube.rotation.x -= previousMouseX;
+            cube.rotation.y -= previousMouseY;
+        }
+
+        // 반응형 처리
+        const onWindowResize = () => {
+            if (mount) {
+                camera.aspect = mount.clientWidth / mount.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(mount.clientWidth, mount.clientHeight);
+            }
+        };
+        window.addEventListener("resize", onWindowResize);
+
+        // 애니메이션 루프
+        const animate = () => {
+            requestAnimationFrame(animate);
+
+            // 기본 회전
+            if (!isDragging) {
+                cube.rotation.x += 0.005;
+                cube.rotation.y += 0.005;
+            }
+
+            renderer.render(scene, camera);
+        };
+        animate();
+
+        // 클린업 함수
+        return () => {
+            mount!.removeChild(renderer.domElement);
+            window.removeEventListener("mousedown", onMouseDown);
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+            window.removeEventListener("wheel", onWheel);
+            window.removeEventListener("resize", onWindowResize);
+        };
+    }, [isDragging, initialRotation, initialZoom]);
+
+    return <div ref={mountRef} style={{ width: "100%", height: "100%" }} />;
+};
+
+export default Cube;