Merge pull request #134 from MurakawaTakuya/feat/top-page-introduction

トップページ/紹介ページ作成

.stylelintrc.json

@@ -4,7 +4,9 @@
   "rules": {
     "order/properties-alphabetical-order": true,
     "selector-class-pattern": null,
-    "block-no-empty": null
+    "block-no-empty": null,
+    "custom-property-pattern": null,
+    "value-keyword-case": null
   },
   "ignoreFiles": "node_modules/**/*"
 }

README.md

@@ -1,4 +1,8 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# About This Project
+TODO REAL is a web application that helps users manage their goals and tasks more effectively. It also works as a social platform, allowing users to share their to-do lists with others. By sending notifications and competing with friends, it makes achieving goals more engaging and easier.
+This project is developed using Next.js, Firebase, and TypeScript.
+For More information, please refer to the Top Page.
+[TODO REAL](https://todo-real-c28fa.web.app/)
 
 ## Getting Started
 First run this command to install required packages:
@@ -50,7 +54,7 @@ firebase emulators:start
 ```
 
 ## Technical Documents
-||Document in this project or related PR|Firebase|
+||Document in this project or related PR|Firebase/Google Cloud - Official Documents|
 |-|-|-|
 |API|[API Document](./Documents/API.md)|[Firebase Cloud Functions](https://firebase.google.com/docs/functions)|
 |Database||[Firestore](https://firebase.google.com/docs/firestore)|

functions/src/tasks.ts

@@ -32,7 +32,7 @@ export const createTasksOnGoalCreate = onDocumentCreated(
 
     try {
       const goalData = event.data.data();
-      const marginTime = 2;
+      const marginTime = 5;
       // 期限のmarginTime分前にタスクを設定
       const deadline = new Date(
         goalData.deadline.toDate().getTime() - marginTime * 60 * 1000

next.config.ts

@@ -6,6 +6,9 @@ const nextConfig: NextConfig = {
   sassOptions: {
     includePaths: ["./src/styles"],
   },
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

package.json

@@ -20,12 +20,13 @@
     "firebase": "^11.0.1",
     "firebase-admin": "^12.7.0",
     "firebase-functions": "^6.1.1",
+    "framer-motion": "^11.16.0",
     "next": "^15.1.2",
     "openai": "^4.73.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sass": "^1.80.6",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.14"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",

src/Components/Account/AuthForm.tsx

@@ -2,13 +2,13 @@ import { signInAsGuest } from "@/utils/Auth/signInAnonymously";
 import { signInWithGoogleAccount } from "@/utils/Auth/signInWithGoogleAccount";
 import { signInWithMail } from "@/utils/Auth/signInWithMail";
 import { signUpWithMail } from "@/utils/Auth/signUpWithMail";
+import Typography from "@mui/joy/Typography";
 import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Divider from "@mui/material/Divider";
 import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
 import React, { useState } from "react";
 import { RoundedButton } from "./LoggedInView";
@@ -216,6 +216,10 @@ export default function AuthForm() {
           "ゲストログイン"
         )}
       </RoundedButton>
+      <Typography level="body-xs">
+        ゲストログインを使用するとアカウントを作成せずに閲覧できます。
+        (投稿機能は使用できません。)
+      </Typography>
     </>
   );
 }

src/Components/Animation/Animation.tsx

@@ -0,0 +1,29 @@
+import { AnimationConfigs, AnimationType } from "@/types/types";
+import { FC, ReactNode } from "react";
+import BottomIn from "./BottomIn";
+import CenterIn from "./CenterIn";
+import LeftIn from "./LeftIn";
+import RightIn from "./RightIn";
+import TopIn from "./TopIn";
+
+interface AnimationProps {
+  animationType?: AnimationType;
+  children: ReactNode;
+}
+
+export default function Animation({
+  animationType = "center",
+  children,
+  ...configs
+}: AnimationProps & AnimationConfigs) {
+  const animationComponents: Record<AnimationType, FC<AnimationConfigs>> = {
+    left: LeftIn,
+    right: RightIn,
+    top: TopIn,
+    bottom: BottomIn,
+    center: CenterIn,
+  };
+
+  const AnimationComponent = animationComponents[animationType] || CenterIn;
+  return <AnimationComponent {...configs}>{children}</AnimationComponent>;
+}

src/Components/Animation/BottomIn.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { AnimationConfigs } from "@/types/types";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+// 下からフェードイン
+export default function BottomIn({
+  children,
+  duration = 0.7,
+  delay = 0,
+  distance = 40,
+  margin = 50,
+}: AnimationConfigs) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `${-margin}px`, // 画面に入ってからmargin分超えたら表示
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: distance }}
+      animate={{ opacity: isInView ? 1 : 0, y: isInView ? 0 : distance }}
+      transition={{ duration, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/Components/Animation/CenterIn.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { AnimationConfigs } from "@/types/types";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+// その場でフェードイン
+export default function CenterIn({
+  children,
+  duration = 0.6,
+  delay = 0,
+  margin = 50,
+}: AnimationConfigs) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `${-margin}px`, // 画面に入ってからmargin分超えたら表示
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: isInView ? 1 : 0 }}
+      transition={{ duration, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/Components/Animation/LeftIn.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { AnimationConfigs } from "@/types/types";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+// 左からフェードイン
+export default function LeftIn({
+  children,
+  duration = 0.7,
+  delay = 0,
+  distance = 60,
+  margin = 50,
+}: AnimationConfigs) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `${-margin}px`, // 画面に入ってからmargin分超えたら表示
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, x: -distance }}
+      animate={{ opacity: isInView ? 1 : 0, x: isInView ? 0 : -distance }}
+      transition={{ duration, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/Components/Animation/RightIn.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { AnimationConfigs } from "@/types/types";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+// 右からフェードイン
+export default function RightIn({
+  children,
+  duration = 0.7,
+  delay = 0,
+  distance = 60,
+  margin = 50,
+}: AnimationConfigs) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `${-margin}px`, // 画面に入ってからmargin分超えたら表示
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, x: distance }}
+      animate={{ opacity: isInView ? 1 : 0, x: isInView ? 0 : distance }}
+      transition={{ duration, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/Components/Animation/TopIn.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { AnimationConfigs } from "@/types/types";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+// 上からフェードイン
+export default function TopIn({
+  children,
+  duration = 0.7,
+  delay = 0,
+  distance = 40,
+  margin = 50,
+}: AnimationConfigs) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `${-margin}px`, // 画面に入ってからmargin分超えたら表示
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: -distance }}
+      animate={{ opacity: isInView ? 1 : 0, y: isInView ? 0 : -distance }}
+      transition={{ duration, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}