fix:レビュー対応 #12

package.json

@@ -32,6 +32,7 @@
         "react-infinite-scroller": "^1.2.6",
         "react-markdown": "^8.0.7",
         "react-player": "^2.12.0",
+        "react-scroll": "^1.8.9",
         "react-three-fiber": "^6.0.13",
         "recoil": "^0.7.7",
         "swr": "^2.1.5",
@@ -52,6 +53,7 @@
         "@storybook/nextjs": "^7.0.22",
         "@storybook/react": "^7.0.22",
         "@types/react-infinite-scroller": "^1.2.3",
+        "@types/react-scroll": "^1.8.7",
         "@types/uuid": "^9.0.2",
         "babel-loader": "^8.3.0",
         "eslint-config-next": "13.2.1",

src/components/Map/Site/Site.tsx

@@ -0,0 +1,44 @@
+import { useMemo, useRef } from "react";
+import { ConvexPolyhedronArgs, useConvexPolyhedron } from "@react-three/cannon";
+import { useGLTF } from "@react-three/drei";
+import { Geometry } from "three-stdlib";
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+import * as THREE from 'three';
+
+type GLTFResult = GLTF & {
+  nodes: {
+    root: THREE.Mesh
+  }
+}
+
+
+function toConvexProps(bufferGeometry: THREE.BufferGeometry<THREE.NormalBufferAttributes>): ConvexPolyhedronArgs<THREE.Vector3> {
+  const geo = new Geometry().fromBufferGeometry(bufferGeometry);
+  geo.mergeVertices();
+  return [
+    geo.vertices.map((v) => new THREE.Vector3(v.x, v.y, v.z)),
+    geo.faces.map((f) => [f.a, f.b, f.c]),
+    []
+  ];
+}
+
+
+export const Site = () => {
+  const loadpath = "/models/site_physics.glb";
+  const { nodes } = useGLTF(loadpath) as GLTFResult;
+  const geo: ConvexPolyhedronArgs<THREE.Vector3> = useMemo(() => toConvexProps(nodes.root.geometry), [nodes]);
+  const [ref] = useConvexPolyhedron(
+    () => ({
+      mass: 100,
+      Type: "static",
+      args: geo
+    }),
+    useRef<THREE.Mesh>(null),
+  );
+  return (
+    <mesh castShadow receiveShadow ref={ref} geometry={nodes.root.geometry} material={nodes.root.material}>
+    </mesh>
+  )
+}
+
+useGLTF.preload('/models/site_physics_joined.glb')

src/components/Web/OwnerComment/OwnerComment.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OwnerComment } from "./OwnerComment";
+
+export default {
+  title: "Web/OwnerComment",
+  component: OwnerComment,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+  },
+} as Meta<typeof OwnerComment>;
+
+export const Default: StoryObj<typeof OwnerComment> = {};

src/components/Web/OwnerComment/OwnerComment.tsx

@@ -0,0 +1,45 @@
+import { comments } from "@/constants/ownerComment";
+import { Box, Typography, useMediaQuery } from "@mui/material";
+import { FlowBackImages } from "../FlowBackImages/FlowBackImages";
+
+export const OwnerComment = () => {
+    const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+    return (
+        <Box
+            component="div"
+            sx={{ position: "relative", color: "text.primary" }}
+        >
+            <FlowBackImages />
+            <Box
+                component="div"
+                sx={{
+                    width: "100%",
+                    height: "100vh",
+                    backgroundColor: `rgba(${isDarkMode ? 0 : 255}, ${
+                        isDarkMode ? 0 : 255
+                    }, ${isDarkMode ? 0 : 255},0.85)`,
+                    backdropFilter: "blur(1px)",
+                }}
+            >
+                <Typography
+                    sx={{
+                        whiteSpace: "pre-wrap",
+                        height: "100%",
+                        pl: 5,
+                        letterSpacing: 5,
+                        textShadow: `2px 2px 4px rgba(${
+                            isDarkMode ? 0 : 255
+                        }, ${isDarkMode ? 0 : 255}, ${
+                            isDarkMode ? 0 : 255
+                        }, 1), -2px -2px 4px rgba(${isDarkMode ? 0 : 255}, ${
+                            isDarkMode ? 0 : 255
+                        }, ${isDarkMode ? 0 : 255}, 0.25)`,
+                    }}
+                >
+                    {comments}
+                </Typography>
+            </Box>
+        </Box>
+    );
+};

src/components/Web/ScrollTo/ScrollTo.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ScrollTo } from "./ScrollTo";
+
+export default {
+    title: "Web/ScrollTo",
+    component: ScrollTo,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {},
+} as Meta<typeof ScrollTo>;
+
+export const Default: StoryObj<typeof ScrollTo> = {
+    args: {
+        to: "",
+    },
+};

src/components/Web/ScrollTo/ScrollTo.tsx

@@ -0,0 +1,50 @@
+import { Button, useMediaQuery } from "@mui/material";
+import { Link as Scroll } from "react-scroll";
+
+export type ScrollToProps = {
+    to: string;
+};
+
+export const ScrollTo = ({ to }: ScrollToProps) => {
+    const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    return (
+        <Scroll to={to} smooth={true} duration={800}>
+            <Button
+                sx={{
+                    position: "absolute",
+                    left: "50%",
+                    bottom: "10vh",
+                    color: isDarkMode ? "white" : "black",
+                    ":after": {
+                        content: '""',
+                        background: `linear-gradient(to top,${
+                            isDarkMode ? "white" : "black"
+                        } 25%,transparent 25%,transparent 75%,${
+                            isDarkMode ? "white" : "black"
+                        } 75%)`,
+                        position: "absolute",
+                        backgroundPosition: "center bottom",
+                        width: "2%",
+                        height: "10vh",
+                        left: "48%",
+                        top: "100%",
+                        backgroundSize: "auto 400%",
+                        transition: "0.5s",
+                    },
+                    ":hover:after": {
+                        backgroundPosition: "center top",
+                    },
+                    ":before": {
+                        content: '""',
+                        position: "absolute",
+                        width: "60%",
+                        height: "100vh",
+                        background: "transparent",
+                    },
+                }}
+            >
+                scroll
+            </Button>
+        </Scroll>
+    );
+};

src/components/Web/TopBackground/TopBackground.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { TopBackground } from "./TopBackground";
+
+export default {
+    title: "Web/TopBackground",
+    component: TopBackground,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {},
+} as Meta<typeof TopBackground>;
+
+export const Default: StoryObj<typeof TopBackground> = {
+    args: {
+        hovering: "hack",
+    },
+};

src/components/Web/TopBackground/TopBackground.tsx

@@ -0,0 +1,66 @@
+import { imagePaths } from "@/constants/topBackground";
+import { TopBackgroundProps } from "@/types/web";
+import { Box, Stack, useMediaQuery } from "@mui/material";
+
+export const TopBackground = ({ hovering }: TopBackgroundProps) => {
+    const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    const isSmall = useMediaQuery("(min-width:800px)");
+
+    return (
+        <Stack
+            direction={isSmall ? "column" : "row"}
+            sx={{
+                position: "absolute",
+                width: "100vw",
+                height: "100vh",
+                overflow: "hidden",
+                backgroundColor: "black",
+                zIndex: -100,
+            }}
+        >
+            {imagePaths.map(({ department, imagePath }, index) => (
+                <Box
+                    component="div"
+                    sx={{
+                        backgroundImage: `url(${imagePath})`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        width: isSmall ? "32vw" : "100%",
+                        height: isSmall ? "100%" : "32vh",
+                        position: "absolute",
+                        top: isSmall ? "0" : `${index * 17}vh`,
+                        left: isSmall ? `${index * 17}vw` : "0",
+                        clipPath: isSmall
+                            ? "polygon(100% 0%, 50% 100%, 0% 100%, 50% 0%)"
+                            : "polygon(100% 0%, 100% 50%, 0% 100%, 0% 50%)",
+                        animation: `down 0.3s`,
+                        animationDuration: `${index * 0.15 + 0.6}s`,
+                        transform: `scale(${hovering == department ? 1.1 : 1})`,
+                        transition: "0.8s transform",
+                        "@keyframes down": {
+                            "0%": {
+                                transform:
+                                    "translateX(30vh) translateY(-100vh)",
+                            },
+                            "100%": {
+                                transform: "translateX(0) translateY(0)",
+                            },
+                        },
+                    }}
+                >
+                    <Box
+                        component="div"
+                        sx={{
+                            width: isSmall ? "100%" : "100vw",
+                            height: isSmall ? "100vh" : "100%",
+                            backgroundColor: `rgba(${isDarkMode ? 0 : 255}, ${
+                                isDarkMode ? 0 : 255
+                            }, ${isDarkMode ? 0 : 255},0.5)`,
+                            backdropFilter: "blur(3px)",
+                        }}
+                    ></Box>
+                </Box>
+            ))}
+        </Stack>
+    );
+};

src/constants/ownerComment.ts

@@ -0,0 +1,2 @@
+export const comments =
+    "オープンキャンパス（以下OC）特設サイトにご来場の皆様、こんにちわ！\n2023年度部長の鈴木乖離と言います。\n\n前々年度、前年度は新型コロナウイルスの影響で対面での活動が制限されており、「オンラインでC3を知ってもらうきっかけ」としてOCサイトは特に重要でした。\nでは、対面活動が再開された本年度では必要ないのでは？と思うかもですが、OCサイトは、すでにC3の伝統であり、C3になくてはならないイベントのです。具体的には2つの意味合いがあります。\nまず、C3に入部した部員の最初の作品制作の目標地点という意味です。4月に入部した部員にとって、作品制作の目標を作るのはなかなか難しいことです。そこで、「7月のOCまでに一つ作る」ということが1つの目標となるのです。\nそして、このOCサイト自体も部員の作品であり、C3の真骨頂です。\nというのも、C3の最大の魅力は「コンピュータでモノづくり」という共通点を持った様々な分野に注力する部員が集まっています。その部員たちが自分の得意分野を生かして最大限協働した集大成がこのOCサイトになるわけです。こういう意味でも、C3においてOCサイトはすごく大切なものなんです。\nこの伝統は、もはや情勢だとかそういったものではなく、今後もC3の1つのビックイベントとして継承されていくでしょう。\n\n部員の作品については、私から語ることはありません。\n見ていただければ、その想い・熱意は伝わると確信しています。ぜひOCサイトを楽しんでください！\n\nそして、C3に興味を持った皆さん、来年度皆さんにお会いできることを楽しみにしています！\n";