Merge pull request #3 from MinseoKangQ/feat/projects

Feat/projects
MinseoKangQ · Mar 11, 2024 · 2098cbb · 2098cbb
2 parents 71b7d66 + af936b2
commit 2098cbb
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 76 deletions.
diff --git a/src/Body/Body.css b/src/Body/Body.css
@@ -31,6 +31,22 @@
   font-size: 16px; /* 글자 크기 */
 }
 
+/* .generate-readme-btn {
+  margin-top: 30px;
+} */
+
 .generate-readme-btn {
+  font-size: 16px;
   margin-top: 30px;
-}
+  padding: 10px 16px;
+  background-color: #28a745; /* GitHub's green color */
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.generate-readme-btn:hover {
+  background-color: #218838;
+}
diff --git a/src/Body/Body.jsx b/src/Body/Body.jsx
@@ -16,7 +16,7 @@ export default function Body() {
   const [githubUsername, setGithubUsername] = useState('');
   const [iconsList, setIconsList] = useState([]);
   const [iconTheme, setIconTheme] = useState('dark');
-  const [projects, setProjects] = useState([]);
+
   const [columns, setColumns] = useState(['Project Name', 'Repository', 'Role']);
   const [generatedReadmeContent, setGeneratedReadmeContent] = useState('');
   const [showGeneratedReadme, setShowGeneratedReadme] = useState(false);
@@ -28,6 +28,14 @@ export default function Body() {
   const [nowStudyingTitle, setNowStudyingTitle] = useState('📚 Now Studying');
   const [projectsTitle, setProjectsTitle] = useState('📁 Projects');
 
+  // projects 상태의 초기값에 하나의 빈 프로젝트 추가
+  const initialProject = columns.reduce((acc, column) => {
+    acc[column] = '';
+    return acc;
+  }, {});
+
+  const [projects, setProjects] = useState([initialProject]);
+
   useEffect(() => {
     setIsLoading(true);
     fetchReadmeAndParseIcons('tandpfun/skill-icons')
@@ -79,37 +87,35 @@ export default function Body() {
         ? `### ${nowStudyingTitle}\n\n[![Now Studying](https://skillicons.dev/icons?i=${selectedStudyingLanguages.join(",")}${themeQuery})](https://skillicons.dev)`
         : '';
 
-      // 프로젝트들 타이틀명
-      const projectsTitleMarkdown = projects.length > 0 ? `### ${projectsTitle}\n\n` : '';
-
-      // 테이블 헤더
-      const headerRow = columns.map(column => `    <th>${column}</th>`).join('\n');
-
-      // 테이블 바디
-      const bodyRows = projects.map(project =>
-        `    <tr>\n` + 
-        columns.map(column => {
-          const cellValue = project[column];
-          if (column === 'Repository' && cellValue) {
-            return `      <td><a href="${cellValue}">${cellValue}</a></td>`;
-          }
-          return `      <td>${cellValue || ''}</td>`;
-        }).join('\n') + 
-        '\n    </tr>'
-      ).join('\n');
-
-      // 전체 테이블 마크다운
-      const projectsTableMarkdown = projects.length > 0
-          ? `<table>\n  <tr>\n${headerRow}\n  </tr>\n${bodyRows}\n</table>`
-          : '';
+        const isInitialProjectState = projects.length === 1 && columns.every(column => projects[0][column] === '');
+
+        const areAllProjectsEmpty = projects.every(project => 
+          columns.every(column => !project[column])
+        );
+
+        let projectsSectionMarkdown = '';
+        if (!isInitialProjectState && !areAllProjectsEmpty) {
+            const projectsTitleMarkdown = `### ${projectsTitle}\n\n`;
+            const headerRow = columns.map(column => `    <th>${column}</th>`).join('\n');
+            const bodyRows = projects.map(project =>
+                `    <tr>\n` + 
+                columns.map(column => {
+                    const cellValue = project[column];
+                    return `      <td>${cellValue || ''}</td>`;
+                }).join('\n') + 
+                '\n    </tr>'
+            ).join('\n');
+            const projectsTableMarkdown = `<table>\n  <tr>\n${headerRow}\n  </tr>\n${bodyRows}\n</table>`;
+            projectsSectionMarkdown = projectsTitleMarkdown + projectsTableMarkdown;
+        }
 
       // README 전체 내용 생성
       const markdownSections = [
           usernameMarkdown, 
           mainSkillsMarkdown, 
           availableSkillsMarkdown, 
           nowStudyingMarkdown, 
-          projectsTitleMarkdown + projectsTableMarkdown
+          projectsSectionMarkdown
       ].filter(Boolean).join("\n\n<br><br>\n\n");
 
       setGeneratedReadmeContent(markdownSections);

diff --git a/src/Body/Projects.css b/src/Body/Projects.css
@@ -1,15 +1,5 @@
-.projects-btn {
-    padding: 8px 16px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-.projects-btn:hover {
-    background-color: #0056b3;
+.projects-container {
+    font-family: Arial, sans-serif;
 }
 
 .projects-container input[type="text"]:not(.title-input) {
@@ -19,6 +9,8 @@
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
+    font-size: 14px;
+    line-height: 20px;
 }
 
 .projects-container .title-input {
@@ -33,51 +25,69 @@
     border-bottom: 1px solid #ccc;
 }
 
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-
-th, td {
-    text-align: left;
-    padding: 8px;
-    border-bottom: 1px solid #ddd;
-}
-
-th {
-    background-color: #f0f0f0;
+.projects-btn {
+    padding: 8px 16px;
+    background-color: #007bff;
+    color: white;
+    margin-left: 5px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
-table th, table td {
-    height: 50px;
-}
-
 .add-project-btn {
+    margin-top: 30px;
     padding: 8px 16px;
-    background-color: #28a745;
+    background-color: #007bff;
     color: white;
     border: none;
-    border-radius: 4px;
+    border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.2s ease;
 }
-
-.add-project-btn:hover {
-    background-color: #218838;
+
+.add-project-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.projects-btn:hover, .add-project-btn:hover {
+    background-color: #0056b3;
 }
-  
+
 .column-controls {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     margin-bottom: 20px;
 }
-  
+
 .new-column-input {
     margin-left: 10px;
 }
 
-.add-project-row {
-    background-color: #f0f0f0;
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    padding: 8px 15px;
+    border: 1px solid #d0d7de;
+    text-align: left;
 }
+
+th {
+    background-color: white;
+    font-weight: 600;
+}
+
+table tr:nth-child(odd) {
+    background-color: #f6f8fa;
+}
+
+table tr:nth-child(even) {
+    background-color: white;
+}
diff --git a/src/Body/Projects.jsx b/src/Body/Projects.jsx
@@ -72,24 +72,22 @@ const Projects = ({ projects, setProjects, columns, setColumns, projectsTitle, s
               ))}
             </tr>
           ))}
-          <tr className="add-project-row">
-            <td colSpan={columns.length} style={{textAlign: 'center'}}>
-              <button className="add-project-btn" onClick={addNewProject}>Add Project</button>
-            </td>
-          </tr>
         </tbody>
       </table>
+      <div className="add-project-container align-center">
+        <button className="add-project-btn" onClick={addNewProject}>Add Project</button>
+      </div>
     </div>
   );
 };
 
 Projects.propTypes = {
-    projects: PropTypes.arrayOf(PropTypes.object).isRequired,
-    setProjects: PropTypes.func.isRequired,
-    columns: PropTypes.arrayOf(PropTypes.string).isRequired,
-    setColumns: PropTypes.func.isRequired,
-    projectsTitle: PropTypes.string.isRequired,
-    setProjectsTitle: PropTypes.func.isRequired,
+  projects: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setProjects: PropTypes.func.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setColumns: PropTypes.func.isRequired,
+  projectsTitle: PropTypes.string.isRequired,
+  setProjectsTitle: PropTypes.func.isRequired,
 };
 
 export default Projects;