Merge pull request #8 from MinseoKangQ/develop

Develop

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;

src/Body/Projects.css

@@ -37,6 +37,7 @@
 }
 
 .add-project-btn {
+    margin: 10px;
     margin-top: 30px;
     padding: 8px 16px;
     background-color: #007bff;
@@ -90,4 +91,31 @@ table tr:nth-child(odd) {
 
 table tr:nth-child(even) {
     background-color: white;
+}
+
+.delete-project-btn {
+    margin: 10px;
+    margin-top: 30px;
+    padding: 8px 16px;
+    background-color: red;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.delete-project-btn:hover {
+    background-color: darkred;
+}
+
+.projects-container .projects-table td input[type="checkbox"] {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+/* Alternatively, if you want to specifically target only the "Delete" column for any future adjustments */
+.projects-container .projects-table td:last-child {
+    text-align: center;
 }

src/Body/Projects.jsx

@@ -11,6 +11,7 @@ const Projects = ({
   setProjectsTitle,
 }) => {
   const [newColumn, setNewColumn] = useState('');
+  const [selectedForDeletion, setSelectedForDeletion] = useState(new Set());
 
   const handleAddColumn = () => {
     if (newColumn && !columns.includes(newColumn)) {
@@ -38,6 +39,22 @@ const Projects = ({
     setProjects([...projects, newProject]);
   };
 
+  const handleSelectForDeletion = (index) => {
+    const newSet = new Set(selectedForDeletion);
+    if (newSet.has(index)) {
+      newSet.delete(index);
+    } else {
+      newSet.add(index);
+    }
+    setSelectedForDeletion(newSet);
+  };
+
+  const deleteSelectedProjects = () => {
+    const remainingProjects = projects.filter((_, index) => !selectedForDeletion.has(index));
+    setProjects(remainingProjects);
+    setSelectedForDeletion(new Set()); // Reset selection
+  };
+
   return (
     <div className="projects-container">
       <input
@@ -59,12 +76,13 @@ const Projects = ({
           Add Column
         </button>
       </div>
-      <table>
+      <table className="projects-table">
         <thead>
           <tr>
             {columns.map((column, index) => (
               <th key={index}>{column}</th>
             ))}
+            <th>Delete</th>
           </tr>
         </thead>
         <tbody>
@@ -81,6 +99,13 @@ const Projects = ({
                   />
                 </td>
               ))}
+              <td>
+                <input
+                  type="checkbox"
+                  checked={selectedForDeletion.has(index)}
+                  onChange={() => handleSelectForDeletion(index)}
+                />
+              </td>
             </tr>
           ))}
         </tbody>
@@ -89,6 +114,12 @@ const Projects = ({
         <button className="add-project-btn" onClick={addNewProject}>
           Add Project
         </button>
+        <button
+          className="delete-project-btn"
+          onClick={deleteSelectedProjects}
+        >
+          Delete
+        </button>
       </div>
     </div>
   );