Merge pull request #17 from kohta9521/develop

add new template child compoennts
kohta9521 · Nov 19, 2023 · 047751f · 047751f
2 parents 1101feb + 474f9ce
commit 047751f
Show file tree

Hide file tree

Showing 22 changed files with 454 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
+    "react-icons": "^4.12.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -4,6 +4,10 @@ import React from 'react'
 // scss import
 import styles from './About.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import SubPageSecTitle from '@/components/atoms/SubPageSecTitle'
+import Contact from '../contact/page'
+import MainLayout from '@/components/templates/MainLayout'
+import SubPageContent from '@/components/templates/SubPageContent'
 
 
 // components import
@@ -13,15 +17,49 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const About = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={1}
-                backgroundImg='/'
-                title='ここごはんについて'
-                subTitle='このサービスを作るに至った経緯について、また、このサービスをどのように使用して欲しいのか。サービスを詳しく説明させていただきます。'
-                pageName='ABOUT'
+            <MainLayout
+                id={2}
             >
-                <h1>this space is children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={1}
+                    backgroundImg='/'
+                    title='ここごはんについて'
+                    subTitle='このサービスを作るに至った経緯について、また、このサービスをどのように使用して欲しいのか。サービスを詳しく説明させていただきます。'
+                    pageName='ABOUT'
+                />
+                <SubPageContent id={1}>
+                    <SubPageSecTitle
+                        id={1}
+                        text='Our Mission'
+                        color='red'
+                    />
+                    <h1>sample code</h1>
+                    <p>
+                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda vel recusandae quam in officia qui sapiente ratione praesentium cumque deserunt?
+                    </p>
+                    <SubPageSecTitle
+                        id={2}
+                        text='Service Overview'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={3}
+                        text='Background of production'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={4}
+                        text='About the future'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={5}
+                        text='Self introduction'
+                        color='red'
+                    />
+                </SubPageContent>
+            </MainLayout>
+
         </div>
     )
 }

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Contact.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -13,15 +14,20 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const Contact = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={1}
-                backgroundImg='/'
-                title='お問い合わせ'
-                subTitle='このサービスについてお問い合わせいただけます。'
-                pageName='CONTACT'
+            {/* TODO: pureLayoutとかのコンポーネントを作る　contactの中にcontactは変 */}
+            <MainLayout
+                id={6}
             >
-                <h1>this space is contact children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={1}
+                    backgroundImg='/'
+                    title='お問い合わせ'
+                    subTitle='このサービスについてお問い合わせいただけます。'
+                    pageName='CONTACT'
+                >
+                    <h1>this space is contact children space</h1>
+                </SubPageHero>
+            </MainLayout>
         </div>
     )
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="ja">
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Login.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -13,15 +14,19 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const Login = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={4}
-                backgroundImg='/'
-                title='ログイン'
-                subTitle='ログインをすることでこのサービスを最大限活用していただけます。ログインをしたらできることなど含めご覧いただけます。'
-                pageName='LOGIN'
+            <MainLayout
+                id={5}
             >
-                <h1>this space is children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={4}
+                    backgroundImg='/'
+                    title='ログイン'
+                    subTitle='ログインをすることでこのサービスを最大限活用していただけます。ログインをしたらできることなど含めご覧いただけます。'
+                    pageName='LOGIN'
+                >
+                    <h1>this space is children space</h1>
+                </SubPageHero>
+            </MainLayout>
         </div>
     )
 }

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Map.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -12,16 +13,21 @@ import SubPageHero from '@/components/templates/SubPageHero'
 
 const Map = () => {
     return(
-        <div className={styles.about}>
-            <SubPageHero
-                id={2}
-                backgroundImg='/'
-                title='マップ'
-                subTitle='このサービスのメインとも言えるマップ機能。このページでは皆さんが作り上げていくマップについてより詳しくご覧いただけます。'
-                pageName='MAP'
+        <div className={styles.map}>
+            <MainLayout
+                id={3}
             >
-                <h1>this space is map children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={2}
+                    backgroundImg='/'
+                    title='マップ'
+                    subTitle='このサービスのメインとも言えるマップ機能。このページでは皆さんが作り上げていくマップについてより詳しくご覧いただけます。'
+                    pageName='MAP'
+                >
+                    <h1>this space is map children space</h1>
+                </SubPageHero>
+            </MainLayout>
+
         </div>
     )
 }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,25 +2,22 @@ import styles from "../styles/page.module.css";
 
 // components import
 import Hero from "@/components/organisms/Hero";
-import Header from "@/components/organisms/Header";
 import About from "@/components/organisms/About";
 import Service from "@/components/organisms/Service";
 import Ranking from "@/components/organisms/Ranking";
-import Footer from "@/components/organisms/Footer";
 import News from "@/components/organisms/News";
-import Contact from "@/components/organisms/Contact";
+import MainLayout from "@/components/templates/MainLayout";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <Header />
-      <Hero />
-      <About />
-      <Service />
-      <Ranking />
-      <News />
-      <Contact />
-      <Footer />
-    </main>
+      <MainLayout
+        id={1}
+      >
+        <Hero />
+        <About />
+        <Service />
+        <Ranking />
+        <News />
+      </MainLayout>
   );
 }
diff --git a/src/app/ranking/page.tsx b/src/app/ranking/page.tsx
@@ -3,21 +3,26 @@ import React from "react";
 // scss import
 import styles from "./Ranking.module.scss";
 import SubPageHero from "@/components/templates/SubPageHero";
+import MainLayout from "@/components/templates/MainLayout";
 
 // components import
 
 const Ranking = () => {
   return (
     <div className={styles.ranking}>
-      <SubPageHero
-        id={3}
-        backgroundImg="/"
-        title="ランキング"
-        subTitle="ただ地図を作るだけではつまらない。ランキング機能で各団体、会社内で一押しのお店を決めませんか？"
-        pageName="RANKING"
+      <MainLayout
+        id={4}
       >
-        <h1>this page is ranking page</h1>
-      </SubPageHero>
+        <SubPageHero
+          id={3}
+          backgroundImg="/"
+          title="ランキング"
+          subTitle="ただ地図を作るだけではつまらない。ランキング機能で各団体、会社内で一押しのお店を決めませんか？"
+          pageName="RANKING"
+        >
+          <h1>this page is ranking page</h1>
+        </SubPageHero>
+      </MainLayout>
     </div>
   );
 };

diff --git a/src/components/atoms/SubPageSecTitle.tsx b/src/components/atoms/SubPageSecTitle.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+
+// scss import
+import styles from './styles/SubPageSecTitle.module.scss'
+
+// type
+export type SubPageSecTitleProps = {
+    id: number
+    text: string
+    color?: 'white' | 'black' | 'red'
+}
+
+
+const SubPageSecTitle = ({
+    id,
+    text,
+    color = 'red'
+}: SubPageSecTitleProps ) => {
+    return (
+        <div className={styles.titleBox}>
+            <span className={`${styles.circle} ${styles[color]}`}></span>
+            <p className={styles.text}>{text}</p>
+        </div>
+    )
+}
+
+export default SubPageSecTitle
diff --git a/src/components/atoms/styles/SubPageSecTitle.module.scss b/src/components/atoms/styles/SubPageSecTitle.module.scss
@@ -0,0 +1,54 @@
+.titleBox {
+    display: flex;
+    margin: 0 0 60px 0;
+    padding-top: 80px;
+    align-items: center;
+    .circle {
+        content: " ";
+        display: block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: #ff0211;
+        margin-right: 16px;
+        flex-shrink: 0;
+    }
+    .text {
+        font-size: 16px;
+        font-weight: 600;
+    }
+}
+
+// props
+.white {
+    background-color: var(--main-white-color);
+}
+.black {
+    background-color: var(--main-black-color);
+}
+.red {
+    background-color: var(--main-red-color);
+}
+
+@media screen and (max-width: 1024px) {
+    .titleBox {
+        display: flex;
+        margin: 0;
+        padding-top: 50px;
+        align-items: center;
+        .circle {
+            content: " ";
+            display: block;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #ff0211;
+            margin-right: 16px;
+            flex-shrink: 0;
+        }
+        .text {
+            font-size: 16px;
+            font-weight: 600;
+        }
+    }
+}
diff --git a/src/components/molecules/ListBox.tsx b/src/components/molecules/ListBox.tsx
@@ -26,8 +26,15 @@ const ListBox = () => {
         size="medium"
         color="black"
       />
+      <List
+        id={5}
+        text="メンバー"
+        link="/member"
+        size="medium"
+        color="black"
+      />
       <BoxButton
-        id={1}
+        id={6}
         text="ログイン"
         size="medium"
         color="red"