From 6639bddba7d1175f1e05d25c1ab26db8beb7b1be Mon Sep 17 00:00:00 2001
From: jaemin <jaemin4033@gmail.com>
Date: Thu, 28 Nov 2024 00:09:28 +0900
Subject: [PATCH] update: Add Article Header

---
 app/domain/entities/text.entity.ts            |  5 +++
 app/page.tsx                                  | 30 ++---------------
 .../component/article/AboutMe.tsx             | 14 ++++++++
 app/presentation/component/article/Career.tsx | 14 ++++++++
 .../component/article/Projects.tsx            | 14 ++++++++
 .../component/article/SimpleIntroduce.tsx     | 18 ++++++++++
 app/presentation/component/article/Skills.tsx | 14 ++++++++
 .../component/text/ArticleHeader.tsx          | 10 ++++++
 app/presentation/screen/MainScreen.tsx        | 33 +++++++++++++++++++
 9 files changed, 124 insertions(+), 28 deletions(-)
 create mode 100644 app/domain/entities/text.entity.ts
 create mode 100644 app/presentation/component/article/AboutMe.tsx
 create mode 100644 app/presentation/component/article/Career.tsx
 create mode 100644 app/presentation/component/article/Projects.tsx
 create mode 100644 app/presentation/component/article/SimpleIntroduce.tsx
 create mode 100644 app/presentation/component/article/Skills.tsx
 create mode 100644 app/presentation/component/text/ArticleHeader.tsx
 create mode 100644 app/presentation/screen/MainScreen.tsx

diff --git a/app/domain/entities/text.entity.ts b/app/domain/entities/text.entity.ts
new file mode 100644
index 0000000..3f09823
--- /dev/null
+++ b/app/domain/entities/text.entity.ts
@@ -0,0 +1,5 @@
+export interface TextProps {
+    str: string;
+    color?: string;
+   }
+   
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index b1a56bf..010ef49 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,33 +1,7 @@
-import ParallaxContainer from "./presentation/component/ParallaxContainer";
+import MainScreen from "./presentation/screen/MainScreen";
 
 export default function Home() {
   return (
-    <div className="bg-gray-600 w-screen h-screen overflow-y-scroll">
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-01.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-02.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-03.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-04.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-05.webp"}>
-        <article className="h-screen flex items-center justify-center text-2xl">
-          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
-        </article>
-      </ParallaxContainer>
-    </div>
+    <MainScreen/>
   );
 }
diff --git a/app/presentation/component/article/AboutMe.tsx b/app/presentation/component/article/AboutMe.tsx
new file mode 100644
index 0000000..4770ff5
--- /dev/null
+++ b/app/presentation/component/article/AboutMe.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const AboutMe = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='ABOUT ME'/>
+    </div>
+  )
+}
+
+export default AboutMe
\ No newline at end of file
diff --git a/app/presentation/component/article/Career.tsx b/app/presentation/component/article/Career.tsx
new file mode 100644
index 0000000..7f5aec2
--- /dev/null
+++ b/app/presentation/component/article/Career.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Career = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='CAREER'/>
+    </div>
+  )
+}
+
+export default Career
\ No newline at end of file
diff --git a/app/presentation/component/article/Projects.tsx b/app/presentation/component/article/Projects.tsx
new file mode 100644
index 0000000..ed1488e
--- /dev/null
+++ b/app/presentation/component/article/Projects.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Projects = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='PROJECTS'/>
+    </div>
+  )
+}
+
+export default Projects
\ No newline at end of file
diff --git a/app/presentation/component/article/SimpleIntroduce.tsx b/app/presentation/component/article/SimpleIntroduce.tsx
new file mode 100644
index 0000000..0c3dc20
--- /dev/null
+++ b/app/presentation/component/article/SimpleIntroduce.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const SimpleIntroduce = (props: Props) => {
+
+    const str = `SIM JAE MIN`
+    const str2 = `안녕하세요\n지속적인 성장과 혁신을 추구하는\n열정적인 프론트엔드 개발자\n심재민입니다`
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str={str} color='#ffeeaa'/>
+        <p className='whitespace-pre-wrap text-center text-2xl'>{str2}</p>
+    </div>
+  )
+}
+
+export default SimpleIntroduce
\ No newline at end of file
diff --git a/app/presentation/component/article/Skills.tsx b/app/presentation/component/article/Skills.tsx
new file mode 100644
index 0000000..b20f2b0
--- /dev/null
+++ b/app/presentation/component/article/Skills.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ArticleHeader from '../text/ArticleHeader'
+
+type Props = {}
+
+const Skills = (props: Props) => {
+  return (
+    <div className='h-full flex flex-col items-center justify-center'>
+        <ArticleHeader str='SKILLS' color='#000000'/>
+    </div>
+  )
+}
+
+export default Skills
\ No newline at end of file
diff --git a/app/presentation/component/text/ArticleHeader.tsx b/app/presentation/component/text/ArticleHeader.tsx
new file mode 100644
index 0000000..8eb4683
--- /dev/null
+++ b/app/presentation/component/text/ArticleHeader.tsx
@@ -0,0 +1,10 @@
+import { TextProps } from '@/app/domain/entities/text.entity'
+import React from 'react'
+
+const ArticleHeader = ({ str, color = '#ffffff' }: TextProps) => {
+  return (
+    <p className='font-extrabold text-8xl whitespace-pre-wrap text-center pb-4 border-b-4 mb-8' style={{ color }}>{str}</p>
+  )
+}
+
+export default ArticleHeader
\ No newline at end of file
diff --git a/app/presentation/screen/MainScreen.tsx b/app/presentation/screen/MainScreen.tsx
new file mode 100644
index 0000000..e177602
--- /dev/null
+++ b/app/presentation/screen/MainScreen.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import ParallaxContainer from '../component/ParallaxContainer'
+import SimpleIntroduce from '../component/article/SimpleIntroduce'
+import AboutMe from '../component/article/AboutMe'
+import Skills from '../component/article/Skills'
+import Projects from '../component/article/Projects'
+import Career from '../component/article/Career'
+
+type Props = {}
+
+const MainScreen = (props: Props) => {
+  return (
+    <div className="bg-gray-600 w-screen h-screen overflow-y-scroll">
+      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-01.webp"}>
+        <SimpleIntroduce/>
+      </ParallaxContainer>
+      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-02.webp"}>
+        <AboutMe/>
+      </ParallaxContainer>
+      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-03.webp"}>
+        <Skills/>
+      </ParallaxContainer>
+      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-04.webp"}>
+        <Career/>
+      </ParallaxContainer>
+      <ParallaxContainer imgSrc={"https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/bg-05.webp"}>
+        <Projects/>
+      </ParallaxContainer>
+    </div>
+  )
+}
+
+export default MainScreen
\ No newline at end of file