스크립트 연습 구현 (#52)

* 스크립트 연습 라우터 연결

* 영어 입력 활성화

* 영어 오타 분석 추출 기능 구현

* 스크립트 연습 결과창 연동 구현

* 스크립트 연습 진행 정보창 업데이트

* 스크립트 연습 결과 최종 정보 출력 구현

* 스크립트 연습 구현 완료

* 전체적인 ui 개선

front/src/App.js

@@ -8,6 +8,8 @@ import ParagraphPractice from "./features/practices/paragraphs";
 import WordPractice from "./features/practices/words";
 import KeyPractice from "./features/practices/keys";
 import PracticeSentence from "./features/practices/sentences/PracticeSentence"
+import PracticeScript from "./features/practices/scripts/PracticeScript"
+import PracticeResult from "./components/PracticeResult"
 
 function App() {
   return (
@@ -21,7 +23,10 @@ function App() {
             <Route exact path="/" component={ParagraphPractice} />
             <Route exact path="/practice-key" component={KeyPractice} />
             <Route exact path="/practice-word" component={WordPractice} />
-            <Route path="/practice-sentence" component={PracticeSentence} />
+            <Route exact path="/practice-sentence" component={PracticeSentence} />
+            <Route exact path="/practice-script/list" component={ShowScript} />
+            <Route path="/practice-script" component={PracticeScript} />
+            <Route exact path="/practice-result" component={PracticeResult} />
           </Switch>
         </main>
       </Router>

front/src/app/store.js

@@ -3,12 +3,14 @@ import keyboardsReducer from '../features/keyboards/KeyboardsSlice';
 import wordsReducer from '../features/practices/words/wordsSlice';
 import keysReducer from '../features/practices/keys/keysSlice';
 import sentenceReducer from '../features/practices/sentences/sentenceSlice';
+import scriptReducer from '../features/practices/scripts/scriptSlice';
 
 export default configureStore({
   reducer: {
     keyboards: keyboardsReducer,
     words: wordsReducer,
     keys: keysReducer,
     sentence: sentenceReducer,
+    script: scriptReducer,
   }
 });

front/src/components/DetailMenu.js

@@ -25,8 +25,8 @@ function DetailMenu({onChoose}) {
       href: '/practice-word' },
     { title: '문장연습',
       href: '/practice-sentence' }, 
-    { title: '스크팁트 연습',
-      href: '/practice-script' }];    
+    { title: '스크립트 연습',
+      href: '/practice-script/list' }];    
   const PracticeList = PracticeModes.map((menu,index) => 
     <Link id = 'detail' to = {menu.href} key = {index}>
       <li id='list'>{menu.title}</li>

front/src/components/PracticeBox.js

@@ -3,8 +3,9 @@ import '../sass/main.css'
 import PropTypes from 'prop-types';
 import ProgressBox from '../components/ProgressBox';
 import PracticeSentenceTask from '../features/practices/sentences/PracticeSentenceTask';
+import PracticeScriptTask from '../features/practices/scripts/PracticeScriptTask';
 
-function PracticeBox({information}) {
+function PracticeBox({type, information}) {
   const boxes = information.map((item, index) => (
     <ProgressBox
       key={index}
@@ -16,12 +17,14 @@ function PracticeBox({information}) {
   return (
     <div className="practice-box">
       <div className="practice-info">{boxes}</div>
-      <PracticeSentenceTask />
+      {type == "sentence" && <PracticeSentenceTask />}
+      {type == "script" && <PracticeScriptTask />}
     </div>
   );
 }
 
 PracticeBox.propTypes = {
+  type: PropTypes.string,
   information: PropTypes.array,
 };
 

front/src/components/PracticeResult.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "../sass/main.css";
+import { useLocation } from "react-router-dom";
+
+function PracticeResult() {
+  const location = useLocation();
+  return (
+    <div className="ScriptList">
+      최종 타수 : {location.state.typeSpeed}
+      <ul className="ScriptListItem">
+        {location.state.scriptList.map((item, idx) => {
+          return <li key={idx}>{item.name}</li>;
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default PracticeResult;

front/src/components/ProgressBox.js

@@ -5,22 +5,35 @@ import ProgressBar from "@ramonak/react-progress-bar";
 
 function ProgressBox ({title, figure, id}) {
   var progressPercent = String(figure).replace("%", '');
-  return (    
-    <div className='progress-box' id = {id}>
-      <div className='left-content'>
-        <div className='title'>{title}</div>
-        <div className='progress-border'>
-          <ProgressBar 
-            completed={progressPercent}
-            bgColor='#7BC5C5'
-            baseBgColor='#FFFFFF'
-            borderRadius='2px'
-            isLabelVisible={false}/>
+  if (title == "스크립트명")
+    return (
+      <div className="progress-box" id={id}>
+        <div className="left-content">
+          <div className="title">{title}</div>
+          <div className="text-box">
+            <div className="name">{figure}</div>
+          </div>
         </div>
       </div>
-      <div className='figure'>{figure}</div>
-    </div>  
-  );
+    );
+  else
+    return (
+      <div className="progress-box" id={id}>
+        <div className="left-content">
+          <div className="title">{title}</div>
+          <div className="progress-border">
+            <ProgressBar
+              completed={progressPercent}
+              bgColor="#7BC5C5"
+              baseBgColor="#FFFFFF"
+              borderRadius="2px"
+              isLabelVisible={false}
+            />
+          </div>
+        </div>
+        <div className="figure">{figure}</div>
+      </div>
+    );
 }
 
 ProgressBox.propTypes = {

front/src/components/Title.js

@@ -14,7 +14,7 @@ function Title({title}) {
 }
 
 const TitleStyle = {
-  width: '100%',
+  width: '94%',
   color: '#828282',
   fontWeight: '400',
   fontSize: '27.5px',

front/src/features/practices/keys/index.js

@@ -25,6 +25,7 @@ import ProgressBar from "@ramonak/react-progress-bar";
 import useSound from 'use-sound';
 import keySoundAsset from '../../../mechanicalKeyboard.mp3';
 import style from '../words/index.module.scss';
+import '../../../sass/main.css';
 
 function Header() {
   const dispatch = useDispatch();
@@ -137,7 +138,7 @@ function KeysPractice() {
   ));
 
   return (
-    <div className="noselect">
+    <div className="content2">
       <Header />
       <div className={style.BodyContainer}>
         <div className={style.Body}>

front/src/features/practices/scripts/PracticeScript.js

@@ -0,0 +1,47 @@
+import React, {useState, useEffect} from 'react';
+import useInterval from '@use-it/interval'
+import '../../../sass/main.css'
+import Title from '../../../components/Title';
+import PracticeBox from '../../../components/PracticeBox';
+import { useSelector, useDispatch } from 'react-redux';
+import { initState, selectProgressPercent, selectTypeCount, updateTypeSpeed, selectTitle} from "./scriptSlice";
+
+function PracticeScript() {
+  const dispatch = useDispatch();
+  const progressPecent = useSelector(selectProgressPercent);
+  const typeCount = useSelector(selectTypeCount);
+  const [tick, setTick] = useState(0); // 시작 후 흐른 시간
+  const [typeSpeed, setTypeSpeed] = useState(0);
+  const [maxTypeSpeed, setMaxTypeSpeed] = useState(0);
+  const [praticeInformation, setPractiveInformation] = useState([]);
+  const title = useSelector(selectTitle);
+
+  useEffect(() => {
+    dispatch(initState());
+  }, []);
+
+  useEffect(() => {
+    setPractiveInformation([
+      { title: "진행도", figure: progressPecent, id: "noBorder" },
+      { title: "현재 타수", figure: typeSpeed },
+      { title: "최대 타수", figure: maxTypeSpeed },
+      { title: "스크립트명", figure: title },
+    ]);
+  }, [tick]);
+
+  useInterval(() => {
+    setTypeSpeed(parseInt(typeCount / tick * 60) | 0);
+    setMaxTypeSpeed(Math.max(typeSpeed, maxTypeSpeed));
+    setTick(tick + 0.1);
+    dispatch(updateTypeSpeed(typeSpeed));
+  }, 100);
+
+  return (
+    <div className="content">
+      <Title title="스크립트 연습" />
+      <PracticeBox type = "script" information = {praticeInformation}/>
+    </div>
+  );
+}
+
+export default PracticeScript;