[FEAT]: 로컬 개인 기록 조회 및 통계 기능 구현

Author: Seol-JY

client/.pnp.cjs

@@ -6,13 +6,15 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.474.0",
     "react": "18.2.0",
     "react-cookie": "^7.1.4",
     "react-dom": "18.2.0",
     "react-draggable": "4.4.5",
     "react-intersection-observer": "9.4.0",
     "react-redux": "8.0.2",
     "react-scripts": "^5.0.1",
+    "recharts": "^2.15.1",
     "redux": "4.2.0",
     "tailwindcss": "^3.4.14"
   },

client/.yarn/cache/@babel-runtime-npm-7.26.7-685f05ad2c-a1664a08f3.zip

@@ -786,3 +786,202 @@ ul {
   display: inline-block;
   margin: 0 5px 0 0;
 }
+/* App.css 수정 */
+
+.stats-container {
+  transition: all 0.3s;
+  padding: 0.4rem 1.4rem;
+  height: 96%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.stats-summary {
+  transition: all 0.3s;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+}
+
+.stats-card {
+  transition: all 0.3s;
+  background-color: var(--sidebar-background-color);
+  padding: 1rem 1.25rem;
+  border-radius: 12px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.card-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--section-header-color);
+}
+
+.card-info {
+  display: flex;
+  flex-direction: column-reverse;
+  height: 42px;
+  gap: 0.25rem;
+}
+
+.card-label {
+  font-size: 01rem;
+  margin-left: 8px;
+  color: var(--section-header-color);
+}
+
+.card-value {
+  font-size: 1.5rem;
+  color: var(--section-header-color);
+  font-weight: 500;
+  line-height: 1;
+}
+
+.card-unit {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  margin-left: 0.25rem;
+}
+
+.trend-header {
+  transition: all 0.3s;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+.chart-scroll-container {
+  overflow-x: auto;
+  margin: 0 -1.25rem;
+  padding: 0 1.25rem;
+  scrollbar-width: none;
+}
+
+.records-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* 중요: 스크롤을 위해 필요 */
+}
+
+.records-header {
+  padding: 0.75rem 0;
+  margin-bottom: 0.5rem;
+}
+
+.records-table-container {
+  flex: 1;
+  overflow-y: auto;
+  border-radius: 8px;
+}
+.records-table-container::-webkit-scrollbar {
+  width: 7px;
+}
+
+.records-table-container::-webkit-scrollbar-thumb {
+  background-color: hsla(0, 0%, 42%, 0.169);
+  border-radius: 100px;
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  position: sticky;
+  top: 0;
+  background-color: var(--sidebar-background-color);
+  padding: 1rem 1.25rem;
+  font-weight: normal;
+  color: var(--section-header-color);
+  text-align: left;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--form-background-color);
+}
+
+.data-table td {
+  padding: 0.875rem 1.25rem;
+  color: var(--section-header-color);
+  border-bottom: 1px solid var(--form-background-color);
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+.data-table tr:hover td {
+  background-color: var(--editor-background-color);
+}
+
+.emphasis {
+  color: var(--cursor-color);
+  font-weight: 500;
+  text-align: left;
+}
+
+.speed-normal {
+  color: var(--section-header-color);
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.stats-card {
+  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.stats-card:hover {
+  transform: translateY(-2px) scale(1.01);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* Epic 카드 스타일 */
+.speed-card-epic {
+  background: linear-gradient(-45deg, #ff6b6b, #ffd93d, #ff6b6b);
+  background-size: 300% 300%;
+  animation: gradient 20s ease infinite;
+  transition: transform 0.2s ease-out;
+}
+
+/* Legendary 카드 스타일 */
+.speed-card-legendary {
+  background: linear-gradient(135deg, #ff0099, #00ffcc);
+  background-size: 300% 300%;
+  animation: gradient 20s ease infinite;
+  transition: transform 0.2s ease-out;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.white-text {
+  color: white !important;
+}
+
+.white-text .card-unit {
+  color: rgba(255, 255, 255, 0.8) !important;
+  opacity: 1;
+}

client/.yarn/cache/@types-d3-array-npm-3.2.1-40c200ccb1-8a41cee096.zip

@@ -1,6 +1,7 @@
 import Text from "./Text";
 import { useEffect, useState } from "react";
 import getFilecontents from "../utils/filecontents";
+import TypingStats from "./TypingStats";
 
 export default function Editor({
   file,
@@ -23,11 +24,10 @@ export default function Editor({
   // 이벤트 모드 체크를 위한 useEffect 추가
   useEffect(() => {
     const queryParams = new URLSearchParams(window.location.search);
-    const eventParam = queryParams.get('event');
-    setIsEventMode(eventParam?.toLowerCase() === 'bisc');
+    const eventParam = queryParams.get("event");
+    setIsEventMode(eventParam?.toLowerCase() === "bisc");
   }, []);
 
-
   useEffect(() => {
     setTextSplit(getFilecontents(file).content);
     if (fileForCompare !== file) {
@@ -54,7 +54,7 @@ export default function Editor({
   }, [userInput]);
 
   const userInputTabHandler = (event) => {
-    if (isEventMode && (event.key === 'Backspace' || event.key === 'Delete')) {
+    if (isEventMode && (event.key === "Backspace" || event.key === "Delete")) {
       event.preventDefault();
       return;
     }
@@ -144,7 +144,7 @@ export default function Editor({
     //textbox로 focus이동
     document.querySelector(".textbox").focus();
   };
-  return file !== "Ranking" ? (
+  return file !== "Statistics" ? (
     <div className="editor" onClick={focus}>
       <div className="numbering">
         {Array.from({ length: 26 }, (_, i) => (
@@ -174,12 +174,8 @@ export default function Editor({
       />
     </div>
   ) : (
-    <div className="editor" style={{ fontSize: "60px", color: "gray" }}>
-      <br />
-      <br />
-      <br />
-      <br />
-      Press Explorer to play.
+    <div className="editor">
+      <TypingStats />
     </div>
   );
 }

client/.yarn/cache/@types-d3-color-npm-3.1.3-220f383461-8a0e79a709.zip

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import fetcher from "../utils/fetcher";
 import { connect } from "react-redux";
+import { saveTypingRecord } from "../utils/typingHistory";
 
 function PopupInnerInput({
   file,
@@ -21,7 +22,12 @@ function PopupInnerInput({
   const sendResult = () => {
     if (loading) return;
     setLoading(true);
-
+    saveTypingRecord({
+      file,
+      cpm: finishTrigger,
+      correctChars: Correctchr,
+      wrongChars: Wrongchr,
+    });
     fetcher.save(
       file,
       finishTrigger,

client/.yarn/cache/@types-d3-ease-npm-3.0.2-04834f8d6b-0885219966.zip

@@ -16,17 +16,18 @@ export default function Sidebar(props) {
     setIsEventMode(event?.toLowerCase() === "bisc");
   }, []);
 
-  const filename = isEventMode
-    ? ["ex.py", "print.c", "sha256.java"]
-    : [
-        "hello.py",
-        "test.java",
-        "server.js",
-        "RectangleArea.java",
-        "say_hello.py",
-        "Example.java",
-        "Fibonacci.java",
-      ];
+  const filename = [
+    "hello.py",
+    "ex.py",
+    "print.c",
+    "sha256.java",
+    "test.java",
+    "server.js",
+    "RectangleArea.java",
+    "say_hello.py",
+    "Example.java",
+    "Fibonacci.java",
+  ];
 
   useEffect(() => {
     if (props.section === "1" && isEventMode) {
@@ -40,7 +41,7 @@ export default function Sidebar(props) {
       setFilestate(filestate);
       props.setFile(filestate);
     } else if (props.section === "2") {
-      props.setFile("Ranking");
+      props.setFile("Statistics");
     }
   }, [props.section]);
   if (props.section === "1") {