Merge pull request #6 from MinseoKangQ/feat/introduce

Feat/introduce

src/Body/Body.jsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
 import ReadmeEditor from './ReadmeEditor';
+import GithubUserName from './GithubUserName';
+import Introduce from './Introduce';
 import MainSkills from './MainSkills';
 import AvailableSkills from './AvailableSkills';
 import NowStudying from './NowStudying';
-import Loading from './Loading';
-import GithubUserName from './GithubUserName';
 import Projects from './Projects';
+import Loading from './Loading';
 import './Body.css';
 import { fetchReadmeAndParseIcons } from '../API/apiService';
 
@@ -14,6 +15,7 @@ export default function Body() {
   const [selectedAvailableLanguages, setSelectedAvailableLanguages] = useState([]);
   const [selectedStudyingLanguages, setSelectedStudyingLanguages] = useState([]);
   const [githubUsername, setGithubUsername] = useState('');
+  const [userIntroduction, setUserIntroduction] = useState('');
   const [iconsList, setIconsList] = useState([]);
   const [iconTheme, setIconTheme] = useState('dark');
 
@@ -69,8 +71,11 @@ export default function Body() {
 
       // 깃허브 계정 이름
       const usernameMarkdown = githubUsername
-        ? `### Hi there, I'm ${githubUsername} 👋\n\n`
-        : '';
+      ? `### ✨ ${githubUsername}\n\n`
+      : '';
+
+      // 소개
+      const introductionMarkdown = userIntroduction ? `### 👋 About Me\n\n${userIntroduction}\n\n` : '';
 
       // 메인 스킬들
       const mainSkillsMarkdown = selectedLanguages.length
@@ -112,6 +117,7 @@ export default function Body() {
       // README 전체 내용 생성
       const markdownSections = [
           usernameMarkdown, 
+          introductionMarkdown,
           mainSkillsMarkdown, 
           availableSkillsMarkdown, 
           nowStudyingMarkdown, 
@@ -141,6 +147,7 @@ export default function Body() {
       {!showGeneratedReadme && (
         <>
           <GithubUserName setUsername={setGithubUsername} />
+          <Introduce setUserIntroduction={setUserIntroduction} />
           <MainSkills
             title={mainSkillsTitle}
             setTitle={setMainSkillsTitle}

src/Body/GithubUserName.css

@@ -4,7 +4,7 @@
 }
 
 .username-input {
-    width: 20%;
+    width: 30%;
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;

src/Body/GithubUserName.jsx

@@ -15,7 +15,7 @@ function GithubUserName({ setUsername }) {
 
   return (
     <div className="github-username-container">
-      <h2>What&apos;s your github username?</h2>
+      <h3>What&apos;s your github username?</h3>
       <input 
         type="text"
         value={localUsername}

src/Body/Introduce.css

@@ -0,0 +1,19 @@
+.introduce-container {
+    margin: 20px 0;
+    text-align: left;
+  }
+
+  .introduction-input {
+    width: 80%;
+    height: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+    font-family: 'Font Name', sans-serif;
+    font-size: 14px;
+  }
+
+.introduce-container h3 {
+    margin: 50px 0px 20px 0px;
+}

src/Body/Introduce.jsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Introduce.css';
+
+function Introduce({ setUserIntroduction }) {
+    const [introduction, setIntroduction] = useState('');
+
+  const handleChange = (e) => {
+    setIntroduction(e.target.value);
+  };
+
+  const handleBlur = () => {
+    setUserIntroduction(introduction);
+  };
+
+  return (
+    <div className="introduce-container">
+      <h3>👋 Tell me about yourself</h3>
+      <textarea
+        value={introduction}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        className="introduction-input"
+        placeholder="Hello, I am a user!"
+      />
+    </div>
+  );
+}
+
+Introduce.propTypes = {
+  setUserIntroduction: PropTypes.func.isRequired,
+};
+
+export default Introduce;