Merge pull request #41 from YKhm20020/ticket-38

close #38 ETロボコンページの作成

next.config.js

@@ -2,6 +2,7 @@ const { plugin } = require('postcss')
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    swcMinify: true,
     webpack: (config) => {
         const fileLoaderRule = config.module.rules.find((rule) =>
             rule.test?.test?.('.svg'),
@@ -22,6 +23,25 @@ const nextConfig = {
         // Modify the file loader rule to ignore *.svg, since we have it handled now.
         fileLoaderRule.exclude = /\.svg$/i
 
+        config.module.rules.unshift({
+            test: /pdf\.worker\.(min\.)?js/,
+            use: [
+                {
+                    loader: "file-loader",
+                    options: {
+                        name: "[contenthash].[ext]",
+                        publicPath: "/_next/static/worker",
+                        outputPath: "static/worker",
+                    },
+                },
+            ],
+        });
+        // Important: return the modified config
+        config.module.rules.push({
+            test: /\.node/,
+            use: "raw-loader",
+        });
+
         return config
     },
 

package.json

@@ -7,21 +7,25 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "check": "biome check --write --diagnostic-level=error *",
+    "check:ci": "biome ci --verbose --diagnostic-level=error *",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "lint-and-format": "biome check --write --diagnostic-level=error *",
-    "lint-and-format:ci": "biome ci --verbose --diagnostic-level=error *"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@newhighsco/storybook-addon-svgr": "^2.0.16",
+    "@react-pdf/renderer": "^4.0.0",
     "@storybook/addon-styling-webpack": "^1.0.0",
     "@storybook/addon-themes": "^8.1.3",
+    "file-loader": "^6.2.0",
     "next": "^14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.0",
     "react-icons": "^5.2.1",
-    "tailwindcss-animated": "^1.1.0"
+    "react-pdf": "^9.1.1",
+    "tailwindcss-animated": "^1.1.0",
+    "worker-loader": "^3.0.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.0",
@@ -45,6 +49,7 @@
     "postcss": "^8",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.10",
+    "raw-loader": "^4.0.2",
     "storybook": "^8.1.3",
     "tailwindcss": "^3.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

pdf-worker.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === "production") {
+    module.exports = require("pdfjs-dist/build/pdf.worker.min.js");
+  } else {
+    module.exports = require("pdfjs-dist/build/pdf.worker.js");
+  }

src/app/about/page.tsx

@@ -10,17 +10,11 @@ const About: React.FC = () => {
 				src='/images/robot_and_hogeta.jpeg'
 				alt='走行体とホゲータ'
 				heading='About Me'
-				text='宮崎大学の大学院に在籍している木村優哉です！
-                    プログラミングを専攻する学科に所属しており、研究やETロボコン、Webアプリケーション開発のアルバイトなどを行っております！'
+				texts={[
+					'宮崎大学の大学院に在籍している木村優哉です！',
+					'プログラミングを専攻する学科に所属しており、研究やETロボコン、Webアプリケーション開発のアルバイトなどを行っております！',
+				]}
 			/>
-			<WorkCard
-				src='/images/robot_and_hogeta.jpeg'
-				workTitle='Worktitle'
-				techs={['technology1', 'technology2', 'technology3']}
-				modalText='ワークカード確認'
-			/>
-			<p>作成中</p>
-			<Link href='/'>Go back to Home</Link>
 		</div>
 	);
 };

src/app/components/atoms/PDFViewer.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type React from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+// import pdfjsWorkerSrc from '../../../../pdf-worker';
+
+// pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerSrc;
+// pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+type PDFViewerProps = {
+	filePath: string; // 表示するPDFのファイルパス
+};
+
+export const PDFViewer: React.FC<PDFViewerProps> = ({ filePath }: PDFViewerProps) => {
+	const [numPages, setNumPages] = useState(1);
+	const [pageWidth, setPageWidth] = useState(500); // PDFページの初期幅
+	const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+		setNumPages(numPages);
+	};
+
+	useEffect(() => {
+		// PDFページの大きさを更新する関数
+		const updatePageWidth = () => {
+			const screenWidth = window.innerWidth;
+			if (screenWidth < 640) {
+				setPageWidth(screenWidth * 0.9); // スマホサイズ
+			} else if (screenWidth < 1024) {
+				setPageWidth(700); // タブレットサイズ
+			} else {
+				setPageWidth(950); // デスクトップサイズ
+			}
+		};
+
+		// 初回設定とリサイズイベントリスナー
+		updatePageWidth();
+		window.addEventListener('resize', updatePageWidth);
+		return () => window.removeEventListener('resize', updatePageWidth);
+	}, []);
+
+	return (
+		<>
+			<div className='flex justify-center'>
+				<Document file={filePath} onLoadSuccess={onDocumentLoadSuccess}>
+					<div className='flex flex-col items-center gap-8'>
+						{Array.from({ length: numPages }, (_, index) => (
+							<Page
+								key={`page_${index + 1}`}
+								pageNumber={index + 1}
+								renderAnnotationLayer={false}
+								renderTextLayer={false}
+								width={pageWidth}
+								className='mb-4 shadow-lg'
+							/>
+						))}
+					</div>
+				</Document>
+			</div>
+		</>
+	);
+};

src/app/components/molecules/card/WorkCard.tsx

@@ -10,10 +10,10 @@ type WorkCardProps = {
 	alt?: string; // 画像が表示されないときに代わりに表示する文字
 	workTitle: string; // 成果物のタイトル
 	techs: string[]; // カードホバー時に浮かび上がる技術スタック
-	modalText: string; // モーダル画面の説明文
+	modalTexts: string[]; // モーダル画面の説明文。改行ごとに要素を分割する
 };
 
-export const WorkCard: React.FC<WorkCardProps> = ({ src, alt, workTitle, techs, modalText }) => {
+export const WorkCard: React.FC<WorkCardProps> = ({ src, alt, workTitle, techs, modalTexts }) => {
 	const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
 	const onOpenModal = (): void => {
@@ -62,7 +62,7 @@ export const WorkCard: React.FC<WorkCardProps> = ({ src, alt, workTitle, techs,
 				src={src}
 				alt={alt ?? workTitle}
 				modalTitle={workTitle}
-				modalText={modalText}
+				modalTexts={modalTexts}
 				onClose={onCloseModal}
 			/>
 		</>

src/app/components/organisms/Header.tsx

@@ -7,8 +7,8 @@ const Header: React.FC = () => {
 			<nav className='flex justify-end gap-5'>
 				<NavButton href='/'>Home</NavButton>
 				<NavButton href='/about'>About</NavButton>
+				<NavButton href='/etrobocon'>ETRobocon</NavButton>
 				<NavButton href='/products'>Products</NavButton>
-				<NavButton href='/contact'>Contact</NavButton>
 			</nav>
 		</div>
 	);

src/app/components/organisms/MediaObject.stories.tsx

@@ -15,6 +15,6 @@ export const Default: Story = {
 		src: '/images/robot_and_hogeta.jpeg',
 		alt: 'MediaObject',
 		heading: 'Sample Heading',
-		text: 'Sample Text',
+		texts: ['Sample Text', 'Sample 2nd Line Text'],
 	},
 };

src/app/components/organisms/MediaObject.tsx

@@ -5,10 +5,10 @@ type MediaObjectProps = {
 	src: string; // 左に配置する画像の画像パス
 	alt: string; // 画像が表示されないときに変わりに表示する文字列
 	heading: string; // 右上方に配置する題
-	text: string; // 題の下に配置する文字列
+	texts: string[]; // 題の下に配置する文字列。改行ごとに要素を分割する
 };
 
-export const MediaObject: React.FC<MediaObjectProps> = ({ src, alt, heading, text }) => {
+export const MediaObject: React.FC<MediaObjectProps> = ({ src, alt, heading, texts }) => {
 	return (
 		<div className='bg-white py-6 sm:py-8 lg:py-12'>
 			<div className='mx-auto'>
@@ -25,10 +25,14 @@ export const MediaObject: React.FC<MediaObjectProps> = ({ src, alt, heading, tex
 						</div>
 					</div>
 					<div>
-						<h1 className='py-2 text-center text-5xl font-bold'>{heading}</h1>
-						<p className='text-left sm:text-center animate-fade-right animate-duration-[1600ms]'>
-							{text}
-						</p>
+						<h1 className='pt-2 pb-4 md:py-2 text-center sm:text-4xl md:text-2xl lg:text-3xl text-3xl font-bold animate-fade-right animate-duration-[1600ms]'>
+							{heading}
+						</h1>
+						{texts.map((text) => (
+							<p key={text} className='text-left'>
+								{text}
+							</p>
+						))}
 					</div>
 				</div>
 			</div>

src/app/components/organisms/Modal.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
 		src: '/images/robot_and_hogeta.jpeg',
 		alt: 'Modal',
 		modalTitle: 'Sample Title',
-		modalText: 'Sample Text',
+		modalTexts: ['Sample Text', 'Sample 2nd Line Text'],
 		onClose: fn(),
 	},
 };
@@ -33,7 +33,7 @@ export const CloseModal: Story = {
 		src: '/images/robot_and_hogeta.jpeg',
 		alt: 'Modal',
 		modalTitle: 'Sample Title',
-		modalText: 'Sample Text',
+		modalTexts: ['Sample Text', 'Sample 2nd Line Text'],
 		onClose: fn(),
 	},
 	play: async ({ canvasElement }) => {

src/app/components/organisms/Modal.tsx

@@ -9,7 +9,7 @@ type ModalProps = {
 	src: string; // 左に配置する画像の画像パス
 	alt: string; // 画像が表示されないときに変わりに表示するテキスト
 	modalTitle: string; // 右上部に配置する題
-	modalText: string; // 題の下に配置するテキスト
+	modalTexts: string[]; // 題の下に配置するテキスト。改行ごとに要素を分割する。
 	onClose: () => void; // モーダルを閉じる関数
 };
 
@@ -18,7 +18,7 @@ export const Modal: React.FC<ModalProps> = ({
 	src,
 	alt,
 	modalTitle,
-	modalText,
+	modalTexts,
 	onClose,
 }) => {
 	// キー入力時の処理
@@ -105,10 +105,15 @@ export const Modal: React.FC<ModalProps> = ({
 							alt={alt}
 						/>
 					</div>
-					<div className='md:w-1/2 flex items-center'>
-						<p className='md:ml-8 text-left animate-fade-right animate-duration-[1600ms]'>
-							{modalText}
-						</p>
+					<div className='md:w-1/2 items-start'>
+						{modalTexts.map((modalText) => (
+							<p
+								key={modalText}
+								className='md:ml-8 text-left animate-fade-right animate-duration-[1600ms]'
+							>
+								{modalText}
+							</p>
+						))}
 					</div>
 				</div>
 			</div>

src/app/etrobocon/page.tsx

@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import type React from 'react';
+// import { PDFViewer } from '../components/atoms/PDFViewer';
+import { MediaObject } from '../components/organisms/MediaObject';
+
+const imageInfo = [
+	{ id: 0, src: '/images/etrobocon/model/0_abstract.jpg', alt: 'abstract' },
+	{ id: 1, src: '/images/etrobocon/model/1_requirements.jpg', alt: 'requirements' },
+	{ id: 2, src: '/images/etrobocon/model/2_analysis.jpg', alt: 'analysis' },
+	{ id: 3, src: '/images/etrobocon/model/3_design1.jpg', alt: 'design1' },
+	{ id: 4, src: '/images/etrobocon/model/3_design2.jpg', alt: 'design2' },
+	{ id: 5, src: '/images/etrobocon/model/4_control.jpg', alt: 'control' },
+];
+
+const ETRobocon: React.FC = () => {
+	return (
+		<div className='bg-white flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+			<div className='flex flex-col items-center py-4'>
+				<h1 className='text-4xl font-bold text-center'>ETロボコン</h1>
+				<p className='text-lg pt-4'>
+					学生時代に最も力を入れて取り組んだ、ETロボコンについてのページ
+				</p>
+			</div>
+			<MediaObject
+				src='/images/etrobocon/etrobocon2024.png'
+				alt='ETロボコン'
+				heading='ETロボコンとは'
+				texts={[
+					'ETロボコンは、高専や大学生などの学生から、企業までが参加する組み込み系の大会です。',
+					'リアルコース上を機械に走らせて点数を競う走行部門と、設計書の出来を評価するモデル部門でチームの得点を決定します。',
+					'2023年は九州地区大会で総合優勝、全国大会で総合6位の成績を収めました。',
+					'2024年はチームリーダーを務め、九州地区大会で総合準優勝、モデル優勝の成績を収めました。',
+				]}
+			/>
+			<MediaObject
+				src='/images/etrobocon/driving.png'
+				alt='走行部門'
+				heading='走行部門'
+				texts={[
+					'走行部門では、走行体にリアルな布製のコースを走らせた結果が評価されます。',
+					'指定箇所の走行までが速いほど得点が高いエリアと、攻略することでボーナスの得点が入る難所のエリアがあります。',
+				]}
+			/>
+			<MediaObject
+				src='/images/etrobocon/model/2_analysis.jpg'
+				alt='モデル部門'
+				heading='モデル部門'
+				texts={[
+					'モデル部門では、設計書の出来が評価されます。',
+					'開発の目標と、それに必要な機能や品質、制約をまとめた要求モデル、要求や制約からシステム全体の構造をまとめた分析モデル、要求を実現する各システムの構造と振る舞いをまとめた設計モデル、要求で定義した品質を満たす制御戦略とそれに用いる要素技術をまとめた制御モデルで構成します。',
+				]}
+			/>
+			<div className='flex flex-col items-center'>
+				<h1 className='py-4 self-start text-3xl font-bold sm:text-4xl md:text-2xl lg:text-3xl'>
+					KatLab 2024年モデル
+				</h1>
+				{/* <PDFViewer filePath='/ADV_093_KatLab.pdf' /> */}
+				{imageInfo.map((image) => (
+					<Image
+						key={image.id}
+						src={image.src}
+						alt={image.alt}
+						layout='responsive'
+						width={700}
+						height={700}
+						className='shadow-lg'
+					/>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default ETRobocon;

src/app/page.tsx

@@ -5,13 +5,19 @@ const sectionCards = [
 	{
 		id: 1,
 		title: 'About Me',
-		description: '自分や所属している大学・組織について紹介するページ',
+		description: '自分や所属している大学・組織についてのページ',
 		linkHref: '/about',
 	},
 	{
 		id: 2,
+		title: 'ETRobocon',
+		description: '最も力を入れて活動したETロボコンについてのページ',
+		linkHref: '/etrobocon',
+	},
+	{
+		id: 3,
 		title: 'My Products',
-		description: '今まで作成してきた成果物をまとめたページ',
+		description: '今まで作成してきた成果物についてのページ',
 		linkHref: '/products',
 	},
 ];