Feat: 시즌별 및 현재 커밋 관련 정보 띄워주기

src/App.jsx

@@ -5,6 +5,7 @@ import CommitTracker from "./pages/CommitTracker";
 import ErrorPage from "./error/ErrorPage";
 import TestAPI from "./pages/TestAPI";
 import GithubLogin from "./components/GithubLogin";
+import CommitInfo from "./pages/commit/CommitInfo"; // 경로 수정
 
 function ProtectedRoute({ children }) {
  const navigate = useNavigate();
@@ -30,6 +31,7 @@ function App() {
  <Route path="/home" element={<Home />} />
  <Route path="/error" element={<ErrorPage />} />
  <Route path="/commit" element={<CommitTracker />} />
+ <Route path="/commit-info" element={<CommitInfo />} /> {/* 커밋 정보 페이지 */}
  <Route path="/testapi" element={<TestAPI />} />
  <Route path="/protected" element={
  <ProtectedRoute>

src/components/GithubLogin.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Github } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 
 const GithubLogin = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
+ const navigate = useNavigate();
 
  useEffect(() => {
  checkLoginStatus();
@@ -17,10 +19,10 @@ const GithubLogin = () => {
  if (response.ok) {
  const data = await response.json();
  setUser(data);
- window.location.href = "/home"; // 로그아웃 후 메인 페이지로 이동
+ window.location.href = "/home"; // 로그인 성공시 홈 페이지로 이동
  }
  } catch (error) {
- console.error('Error checking login status:', error);
+ console.error('로그인 상태 확인 중 오류:', error);
  }
  setLoading(false);
  };
@@ -30,14 +32,35 @@ const GithubLogin = () => {
  window.location.href = 'http://localhost:8090/oauth2/authorization/github';
  };
 
+ const goToCommitInfo = () => {
+ navigate('/commit-info');
+ };
+
+ const handleLogout = async () => {
+ try {
+ const response = await fetch('http://localhost:8090/api/logout', {
+ method: 'POST',
+ credentials: 'include',
+ });
+
+ if (response.ok) {
+ setUser(null);
+ window.location.href = '/';
+ } else {
+ console.error('로그아웃 실패:', response.status);
+ }
+ } catch (error) {
+ console.error('로그아웃 중 오류:', error);
+ }
+ };
 
  if (loading) {
- return <div className="flex justify-center items-center">Loading...</div>;
+ return <div className="flex justify-center items-center">로딩 중...</div>;
  }
 
  return (
- <div className="p-4">
-  <h1>Commit Field</h1>
+ <div className="p-4 flex flex-col items-center justify-center min-h-screen">
+ <h1 className="text-3xl font-bold mb-8">커밋 필드</h1>
  {!user ? (
  <button
  onClick={handleLogin}
@@ -47,24 +70,41 @@ const GithubLogin = () => {
  GitHub로 로그인하기
  </button>
  ) : (
- <div className="space-y-4">
+ <div className="space-y-8 flex flex-col items-center">
  <div className="flex items-center gap-4">
  <img
  src={user.avatar_url}
- alt="Profile"
- className="w-12 h-12 rounded-full"
+ alt="프로필"
+ className="w-16 h-16 rounded-full"
  />
  <div>
- <h2 className="text-lg font-semibold">{user.name}</h2>
+ <h2 className="text-xl font-semibold">{user.name}</h2>
  <p className="text-gray-600">{user.login}</p>
  </div>
  </div>
- <button
- onClick={handleLogout}
- className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors"
- >
- 로그아웃
- </button>
+
+ <div className="flex flex-col gap-4 w-full">
+ <button
+ onClick={goToCommitInfo}
+ className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors w-full"
+ >
+ 내 커밋 정보 보기
+ </button>
+
+ <button
+ onClick={() => navigate('/home')}
+ className="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors w-full"
+ >
+ 홈으로 이동
+ </button>
+
+ <button
+ onClick={handleLogout}
+ className="bg-red-500 text-white px-6 py-3 rounded-lg hover:bg-red-600 transition-colors w-full"
+ >
+ 로그아웃
+ </button>
+ </div>
  </div>
  )}
  </div>

src/pages/Home.jsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
-
+import { useNavigate } from 'react-router-dom';
 
 const Home = () => {
- const [user, setUser] = useState(null); // setUser 정의
+ const [user, setUser] = useState(null);
+ const navigate = useNavigate();
+
  const handleLogout = async () => {
  try {
  const response = await fetch('http://localhost:8090/api/logout', {
@@ -14,22 +16,36 @@ const Home = () => {
  setUser(null); // 유저 정보 초기화
  window.location.href = '/'; // 홈 페이지로 리다이렉트
  } else {
- console.error('Logout failed:', response.status);
+ console.error('로그아웃 실패:', response.status);
  }
  } catch (error) {
- console.error('Error during logout:', error);
+ console.error('로그아웃 중 오류 발생:', error);
  }
  };
 
+ const goToCommitInfo = () => {
+ navigate('/commit-info');
+ };
 
  return (
- <div className="w-full max-w-2xl p-4">
+ <div className="w-full max-w-2xl p-4 mx-auto">
  {/* Header with logout */}
  <div className="flex justify-between items-center mb-6">
  <h1 className="text-lg font-medium">CommitField</h1>
- <button onClick={handleLogout} className="bg-emerald-500 text-white px-4 py-1 rounded-md">
- Logout
- </button>
+ <div className="flex gap-2">
+ <button 
+ onClick={goToCommitInfo} 
+ className="bg-blue-500 text-white px-4 py-1 rounded-md hover:bg-blue-600 transition-colors"
+ >
+ 커밋 정보 보기
+ </button>
+ <button 
+ onClick={handleLogout} 
+ className="bg-emerald-500 text-white px-4 py-1 rounded-md hover:bg-emerald-600 transition-colors"
+ >
+ 로그아웃
+ </button>
+ </div>
  </div>
 
  {/* Profile section */}
@@ -50,15 +66,15 @@ const Home = () => {
 
  <div className="mt-4 space-y-2">
  <div>
- <h3 className="font-medium mb-1">Badges</h3>
+ <h3 className="font-medium mb-1">배지</h3>
  <div className="flex gap-2">
- <span className="text-yellow-500">★ 2025 눈 14일</span>
+ <span className="text-yellow-500">★ 2025 겨울 14일</span>
  <span className="text-yellow-500">★ 2025 여름 14일</span>
  </div>
  </div>
 
  <div>
- <h3 className="font-medium mb-1">Pets</h3>
+ <h3 className="font-medium mb-1">펫</h3>
  <div className="flex gap-2">
  {[1, 2].map((pet) => (
  <div key={pet} className="w-8 h-8 bg-blue-200 rounded"></div>
@@ -71,27 +87,27 @@ const Home = () => {
 
  {/* Stats section */}
  <div>
- <div className="p-6">
- <h2 className="text-lg font-medium mb-4">Today's commit</h2>
+ <div className="p-6 bg-white rounded-lg shadow-sm">
+ <h2 className="text-lg font-medium mb-4">오늘의 커밋</h2>
  <div className="grid grid-cols-3 gap-4 text-center">
  <div>
  <div className="text-2xl font-bold">2,048</div>
- <div className="text-sm text-gray-600">Total Contributions</div>
- <div className="text-xs text-gray-400">Aug 10, 2016 - Present</div>
+ <div className="text-sm text-gray-600">총 기여</div>
+ <div className="text-xs text-gray-400">2016년 8월 10일 - 현재</div>
  </div>
 
  <div>
  <div className="w-16 h-16 mx-auto rounded-full border-4 border-orange-400 grid place-items-center">
  <div className="text-2xl font-bold">16</div>
  </div>
- <div className="text-sm text-gray-600 mt-1">Current Streak</div>
- <div className="text-xs text-gray-400">Feb 5 - Feb 20</div>
+ <div className="text-sm text-gray-600 mt-1">현재 연속 커밋</div>
+ <div className="text-xs text-gray-400">2월 5일 - 2월 20일</div>
  </div>
 
  <div>
  <div className="text-2xl font-bold">86</div>
- <div className="text-sm text-gray-600">Longest Streak</div>
- <div className="text-xs text-gray-400">Dec 19, 2021 - Mar 14, 2022</div>
+ <div className="text-sm text-gray-600">최장 연속 커밋</div>
+ <div className="text-xs text-gray-400">2021년 12월 19일 - 2022년 3월 14일</div>
  </div>
  </div>
  </div>
@@ -100,4 +116,4 @@ const Home = () => {
  );
 };
 
-export default Home;
+export default Home;