Feature/frontend UI

aurora.config.json

@@ -1,6 +1,6 @@
 {
   "files": [
-      "./prisma/base.prisma"
+      "./prisma/models/"
   ],
   "output": "./prisma/schema.prisma"
 }

package.json

@@ -10,12 +10,20 @@
     "lint": "next lint",
     "migration": "npx aurora && npx prisma migrate dev --name $npm_config_name",
     "migration:prod": "npx aurora && npx prisma generate && npx prisma migrate deploy",
-    "migrate": "npx aurora && npx prisma migrate dev"
+    "migrate": "npx aurora && npx prisma migrate dev",
+    "make-element": "ts-node ./src/commands/makeElementTree.ts"
   },
   "dependencies": {
     "@apollo/client": "^3.7.12",
     "@apollo/server": "^4.7.0",
     "@as-integrations/next": "^1.3.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
     "@nextui-org/react": "^1.0.0-beta.12",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
@@ -28,9 +36,12 @@
     "next": "13.3.0",
     "postcss": "8.4.23",
     "prisma": "^4.13.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "^3.3.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-type-animation": "^3.1.0",
+    "sass": "^1.63.6",
+    "tailwindcss": "^3.3.2",
+    "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^3.3.1",

src/commands/makeElementTree.ts

@@ -0,0 +1,112 @@
+const fs = require('fs');
+const path = require('path');
+
+// ツリー構造を定義
+interface TreeNode {
+  name: string;
+  children?: TreeNode[];
+}
+
+const elementTreeStructure: TreeNode[] = [
+    {
+      name: 'index.tsx',
+    },
+    {
+      name: 'elements',
+      children: [],
+    },
+    {
+      name: 'hooks',
+      children: [],
+    },
+    {
+      name: 'contexts',
+      children: [],
+    },
+    {
+      name: 'styles',
+      children: [],
+    },
+  ];
+
+const extractBottomDirectoryName = (directoryPath: string): string => {
+  const directoryName = path.basename(directoryPath);
+  return directoryName;
+};
+
+const capitalizeFirstLetter = (str: string): string => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+const writeFileIfNotExists = (filePath: string, content: string): void => {
+  // ファイルがなければ作成
+  if (!fs.existsSync(filePath)) {
+    fs.writeFileSync(filePath, content);
+  }
+};
+
+const mkdirIfNotExists = (directoryPath: string): void => {
+  // ディレクトリがなければ作成
+  if (!fs.existsSync(directoryPath)) {
+    fs.mkdirSync(directoryPath, { recursive: true });
+  }
+};
+
+// ツリーを生成する関数
+const createElementTree = (directoryPath: string, structure: TreeNode[]): void => {
+  // ディレクトリを作成
+  fs.mkdirSync(directoryPath, { recursive: true });
+
+  const bottomDirectoryName = extractBottomDirectoryName(directoryPath);
+
+  for (const element of structure) {
+    // ディレクトリを作成
+    const elementPath = path.join(directoryPath, element.name);
+
+    switch (element.name) {
+      case 'index.tsx':
+        // 存在しなければファイル作成
+        writeFileIfNotExists(elementPath, '');
+        break;
+      case 'elements':
+        // 存在しなければディレクトリ作成
+        mkdirIfNotExists(elementPath);
+        break;
+      case 'hooks':
+        // 存在しなければディレクトリ作成
+        mkdirIfNotExists(elementPath);
+
+        // ファイル作成
+        writeFileIfNotExists(path.join(elementPath, 'use' + capitalizeFirstLetter(bottomDirectoryName) + '.tsx'), '');
+        break;
+      case 'contexts':
+        // 存在しなければディレクトリ作成
+        mkdirIfNotExists(elementPath);
+
+        // 存在しなければファイル作成
+        writeFileIfNotExists(path.join(elementPath, bottomDirectoryName + 'Context.tsx'), '');
+        break;
+      case 'styles':
+        // 存在しなければディレクトリ作成
+        mkdirIfNotExists(elementPath);
+
+        // 存在しなければファイル作成
+        writeFileIfNotExists(path.join(elementPath, bottomDirectoryName + '.tsx'), '');
+        break;
+      default:
+        // 何もしない
+        break;
+    }
+  }
+}
+
+const ROOT = './src/components';
+const directoryPath = process.argv[2];
+
+if (!directoryPath) {
+  console.error('ディレクトリパスが指定されていません。');
+  process.exit(1);
+}
+
+// ツリーを生成
+createElementTree(path.join(ROOT, directoryPath), elementTreeStructure);

src/components/about/index.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+export const AboutPage: FC = () => {
+  return (
+    <main>
+      About
+    </main>
+  )
+}
+
+export default AboutPage

src/components/blog/index.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+export const BlogPage: FC = () => {
+  return (
+    <main>
+      Blog
+    </main>
+  )
+}
+
+export default BlogPage

src/components/home/elements/homeLeft/index.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { TypeAnimation } from 'react-type-animation';
+import Box from '@mui/material/Box';
+
+
+export const HomeLeft: FC = () => {
+  return (
+    <>
+      <Box sx={{
+        p: 10,
+        m: 10,
+        minWidth: 400,
+        minHeight: 300,
+        border: '1px white solid',
+      }}>
+        <TypeAnimation
+          sequence={[
+            "Hi, there.👋",
+            3000,
+            "I'm Kotaro Saito.",
+            3000,
+            "Thank you for visiting my website.",
+            3000,
+            "Please check out my resume, portfolio, and blog on the right side.",
+            5000,
+          ]}
+          wrapper="span"
+          speed={50}
+          style={{ fontSize: '2em', display: 'inline-block' }}
+        />
+      </Box>
+    </>
+  )
+}
+
+export default HomeLeft

src/components/home/elements/homeRight/elements/navigationCard/index.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react'
+import Card from '@mui/material/Card';
+import { CardActionArea, CardContent, Typography } from '@mui/material';
+
+interface Props {
+  name: string
+}
+
+export const NavigationCard: FC<Props> = ({ name }: Props) => {
+  return (
+    <Card
+    variant='outlined'
+    sx={{
+      minWidth: 275,
+      minHeight: 100,
+      m: 2,
+      backgroundColor: 'primary.main',
+      color: 'text.primary',
+      border: '1px white solid',
+      '&:hover': {
+        backgroundColor: 'primary.light',
+        color: 'text.secondary',
+      },
+    }}>
+      <CardActionArea>
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="div">
+            { `${name} ->` }
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            description
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}
+
+export default NavigationCard

src/components/home/elements/homeRight/index.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import { NavigationCard } from './elements/navigationCard';
+
+
+export const HomeLeft: FC = () => {
+  return (
+    <>
+      <Box
+        sx={{
+          p: 5,
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'primary.main',
+        }}>
+          <Grid container>
+            <NavigationCard name="about" />
+            <NavigationCard name="product" />
+            <NavigationCard name="blog" />
+          </Grid>
+      </Box>
+    </>
+  )
+}
+
+export default HomeLeft