From bafccae106289855351f834328018df0b0fb002a Mon Sep 17 00:00:00 2001 From: JohnJung-1017 Date: Sat, 17 Feb 2024 16:17:55 +0900 Subject: [PATCH 1/4] timelinePage_edit --- .../src/components/Style/timeline.module.css | 57 +++------------ project-front/src/pages/TimelinePage.jsx | 69 +++++++++++-------- 2 files changed, 50 insertions(+), 76 deletions(-) diff --git a/project-front/src/components/Style/timeline.module.css b/project-front/src/components/Style/timeline.module.css index 90153ab..a22914b 100644 --- a/project-front/src/components/Style/timeline.module.css +++ b/project-front/src/components/Style/timeline.module.css @@ -5,61 +5,26 @@ font-size: 60px; font-weight: bolder; text-decoration: none; - margin-left: 30vh; + margin-left: 20vh; margin-top: 10vh; margin-bottom: 70px; } -.timeline__Data{ - margin-left: 40vh; - font-size: 25px; - text-decoration: none; - font-weight: bold; - margin-bottom: 20px; -} -.nameData { - width: 75px; - display: inline-block; - justify-content: center; -} -.repositoryData { - display: inline-block; - background-color: #4285F5; - width: 200px; - height: 35px; - display: inline-block; - border-radius: 7px; - text-decoration: none; +.commit{ + color: rgb(100, 100, 100); + display: flex; + margin-left: 20vh; } -a { +.commit_link{ text-decoration: none; - color: white; - font-weight: bold; - margin-left: 40px; + color: #4285F5; +} +.commit_link:hover{ + color: #184fac; } + @media screen and (max-width: 768px) { .timeline { font-size: 40px; margin-left: 10px; } - - .timeline__Data { - margin-left: 10px; - font-size: 18px; - } - - .nameData { - text-align: center; - margin-bottom: 10px; - width: 55px; - } - - .repositoryData { - margin-top: 10px; - width: 110px; - height: 25px; - } - - a { - margin-left: 10px; - } } \ No newline at end of file diff --git a/project-front/src/pages/TimelinePage.jsx b/project-front/src/pages/TimelinePage.jsx index f55765f..9076e3f 100644 --- a/project-front/src/pages/TimelinePage.jsx +++ b/project-front/src/pages/TimelinePage.jsx @@ -1,36 +1,45 @@ -import React from 'react'; -import jsonData from '../Data/memberData23_24.json'; -import style from '../components/Style/timeline.module.css'; // 스타일 모듈 불러오기 +import React, { useState, useEffect } from 'react'; +import style from "../components/Style/timeline.module.css"; -const TimelineItem = ({ name, githubLink }) => ( -
-
• - {name}님은{' '} - - - repository - - - 를 작업 중입니다. -
-
-); +function TimelinePage() { + const [recentCommits, setRecentCommits] = useState([]); -const Timeline = ({ data }) => ( -
-
TimeLines
- {data.map((userData, index) => ( - - ))} -
-); + useEffect(() => { + fetch('https://raw.githubusercontent.com/Google-DSC-Kookmin/Google-DSC-Kookmin.github.io/master/data/data.json') + .then(response => response.json()) + .then(data => { + const uniqueUsers = {}; + const recentCommitsData = []; -const TimelinePage = () => { - return ( -
- -
+ // 각 사용자의 최신 커밋 데이터를 추출하고 날짜를 형식화하여 저장 + data.forEach(userCommits => { + userCommits.forEach(commit => { + if (!uniqueUsers[commit.userName] && recentCommitsData.length < 10) { + uniqueUsers[commit.userName] = true; + const formattedDate = new Date(commit.commitTime).toISOString().split('T')[0]; + recentCommitsData.push({ ...commit, commitTime: formattedDate }); + } + }); + }); + + setRecentCommits(recentCommitsData); + }) + .catch(error => console.error('Error fetching data:', error)); + }, []); + + return ( +
+
Timelines
+ +
); -}; +} export default TimelinePage; \ No newline at end of file From 38bca88a88cca8a45aa480e72c9a79f2a8bc4785 Mon Sep 17 00:00:00 2001 From: JohnJung-1017 Date: Sat, 17 Feb 2024 20:58:23 +0900 Subject: [PATCH 2/4] media-query --- project-front/src/components/Style/timeline.module.css | 10 +++++++++- project-front/src/pages/TimelinePage.jsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/project-front/src/components/Style/timeline.module.css b/project-front/src/components/Style/timeline.module.css index a22914b..33a9929 100644 --- a/project-front/src/components/Style/timeline.module.css +++ b/project-front/src/components/Style/timeline.module.css @@ -25,6 +25,14 @@ @media screen and (max-width: 768px) { .timeline { font-size: 40px; - margin-left: 10px; + display: flex; + align-items: center; + } + .commit_list{ + padding: 1.5vh; + } + .commit { + display: flex; + margin-left: 0; } } \ No newline at end of file diff --git a/project-front/src/pages/TimelinePage.jsx b/project-front/src/pages/TimelinePage.jsx index 9076e3f..7032f23 100644 --- a/project-front/src/pages/TimelinePage.jsx +++ b/project-front/src/pages/TimelinePage.jsx @@ -32,7 +32,7 @@ function TimelinePage() {
Timelines