[FE] 챕터 진행상황, 문제 조회 api 연결 작업

.github/workflows/fe_deploy.yml

@@ -27,6 +27,6 @@ jobs:
         run: |
           aws s3 sync \
             --region ap-northeast-2 \
-            build s3://i-learn \
+            build s3://i-learn.site \
             --delete
         working-directory: ./client

client/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://s3.amazonaws.com/i-learn.site/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

client/src/common/data/chapterData.ts

@@ -1,70 +1,79 @@
-import { Chapter, UserChapter } from '../../interfaces/Chapter.interface';
+// import {
+//   Chapter,
+//   UserChapter,
+//   UserChapterListItem
+// } from '../../interfaces/Chapter.interface';
 
-export const chapterData: Array<Chapter> = [
-  {
-    title: '인사 나누기',
-    chapterId: 1,
-    wordId: [1, 2, 3]
-  },
-  {
-    title: '쇼핑 및 주문하기',
-    chapterId: 2,
-    wordId: [4, 5, 6]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 3,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 3,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 5,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 3,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 7,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 3,
-    wordId: [71, 28, 66]
-  },
-  {
-    title: '활동에 대해 말하기',
-    chapterId: 3,
-    wordId: [71, 28, 66]
-  }
-];
+// export const chapterData: Array<Chapter> = [
+//   {
+//     title: '인사 나누기',
+//     chapterId: 1,
+//     wordId: [1, 2, 3]
+//   },
+//   {
+//     title: '쇼핑 및 주문하기',
+//     chapterId: 2,
+//     wordId: [4, 5, 6]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 3,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 3,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 5,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 3,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 7,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 3,
+//     wordId: [71, 28, 66]
+//   },
+//   {
+//     title: '활동에 대해 말하기',
+//     chapterId: 3,
+//     wordId: [71, 28, 66]
+//   }
+// ];
 
-export const userChapterAllData: UserChapter = {
-  chapterList: [
-    {
-      chapterId: 1,
-      chapterStatus: true,
-      progress: [1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1]
-    },
-    {
-      chapterId: 2,
-      chapterStatus: false,
-      progress: [1, 1, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0]
-    },
-    {
-      chapterId: 3,
-      chapterStatus: false,
-      progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-    }
-  ],
-  learningChapterId: 3
-};
+// export const userChapterAllData: UserChapter = {
+//   chapterList: [
+//     {
+//       chapterId: 1,
+//       chapterStatus: true,
+//       progress: [1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1]
+//     },
+//     {
+//       chapterId: 2,
+//       chapterStatus: false,
+//       progress: [1, 1, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0]
+//     },
+//     {
+//       chapterId: 3,
+//       chapterStatus: false,
+//       progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+//     }
+//   ]
+// };
+
+// export const userChapterData: UserChapterListItem = {
+//   chapterId: 1,
+//   chapterStatus: false,
+//   progress: [1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+// };

client/src/common/data/learningData.ts

@@ -1,5 +1,5 @@
-import { LearningInterface } from '../../interfaces/Learning.interface';
-export const correct: LearningInterface = {
+import { Learning } from '../../interfaces/Learning.interface';
+export const learningData: Learning = {
   questionNum: 1,
   questionType: 1, // or 2
   question: '안녕',

client/src/common/utils/localStorageFuncs.ts

@@ -0,0 +1,32 @@
+import { ChapterList, UserChapter } from '../../interfaces/Chapter.interface';
+
+export function localStorageInit(allChapterList: ChapterList) {
+  if (localStorageIsNull()) {
+    const localUserChapter: UserChapter = {
+      data: []
+    };
+    const initList = allChapterList.data.map((el, idx) => {
+      return {
+        chapterId: idx + 1,
+        chapterStatus: false,
+        progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as (0 | 1 | 2)[]
+      };
+    });
+    localUserChapter.data = initList;
+
+    localStorageSet(localUserChapter);
+  }
+}
+
+export function localStorageIsNull() {
+  return localStorage.getItem('userChapter') == null;
+}
+
+export function localStorageGet(): UserChapter {
+  const localUserChapter = localStorage.getItem('userChapter');
+  return JSON.parse(localUserChapter!);
+}
+
+export function localStorageSet(userChapter: UserChapter) {
+  localStorage.setItem('userChapter', JSON.stringify(userChapter));
+}

client/src/common/utils/pointCalculator.ts

@@ -3,8 +3,8 @@ export function pointAcc(progress: (0 | 1 | 2)[]) {
     if (cur === 0 || cur === 2) return acc;
 
     if (cur === 1)
-      if (i === 9 || i === 10 || i === 11) return acc + 3;
-      else if (i === 2 || i === 5 || i === 8) return acc + 2;
+      if (i === 3 || i === 7 || i === 11) return acc + 3;
+      else if (i === 2 || i === 6 || i === 10) return acc + 2;
       else return acc + 1;
 
     return acc;

client/src/common/utils/speak.ts

@@ -7,7 +7,6 @@ synth.onvoiceschanged = () => {
   const desiredVoice = synth
     .getVoices()
     .find((voice) => voice.name === desiredVoiceName);
-  console.log('loaded');
   if (desiredVoice) {
     utterance.voice = desiredVoice;
   }

client/src/components/Enter/Enter.tsx

@@ -3,28 +3,29 @@ import GuideBook from '../GuideBook/GuideBook';
 import { useAppSelector } from '../../redux/hooks';
 import { Link } from 'react-router-dom';
 import { grey } from '@mui/material/colors';
-import Progress from './MainProgress';
+import MainProgress from '../Progress/MainProgress';
 import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
 import EastOutlinedIcon from '@mui/icons-material/EastOutlined';
+import { pointAcc } from '../../common/utils/pointCalculator';
 export default function Enter() {
   const chapter = useAppSelector((state) => state.chapter);
 
-  function pointAcc() {
-    let point = 0;
+  // function pointAcc() {
+  //   let point = 0;
 
-    for (let i = 0; i < chapter.progress!.length; i++) {
-      if (chapter.progress![i] === 1) {
-        if (i === 9 || i === 10 || i === 11) {
-          point += 3;
-        } else if (i === 2 || i === 5 || i === 8) {
-          point += 2;
-        } else {
-          point += 1;
-        }
-      }
-    }
-    return point;
-  }
+  //   for (let i = 0; i < chapter.progress!.length; i++) {
+  //     if (chapter.progress![i] === 1) {
+  //       if (i === 9 || i === 10 || i === 11) {
+  //         point += 3;
+  //       } else if (i === 2 || i === 5 || i === 8) {
+  //         point += 2;
+  //       } else {
+  //         point += 1;
+  //       }
+  //     }
+  //   }
+  //   return point;
+  // }
   return (
     <Container
       sx={{
@@ -141,15 +142,15 @@ export default function Enter() {
               }}
             >
               <Typography variant="h4" color={grey[700]}>
-                {pointAcc()}
+                {pointAcc(chapter.progress!)}
               </Typography>
               <Typography variant="subtitle2" color={grey[700]}>
                 포인트
               </Typography>
             </Box>
           </Box>
 
-          <Progress progress={chapter.progress!} />
+          <MainProgress progress={chapter.progress!} />
         </Box>
       </Box>
     </Container>

client/src/components/Header/Header.tsx

@@ -104,7 +104,7 @@ export default function Header(props: HeaderProp) {
             </Tooltip>
             <Tooltip title="내 정보">
               <IconButton
-                onClick={() => handleNavigate('/my-profile')}
+                onClick={() => handleNavigate('/my-page')}
                 sx={{
                   width: '40px',
                   height: '40px',

client/src/components/Nav/Nav.tsx

@@ -6,23 +6,21 @@ import MainNavItem from './MainNavItem';
 interface NavProps {
   chapterList?: Chapter[];
   location: string;
-  memberStatus: boolean;
-  myWordList?: number[];
+  myWordList?: number[]; // TODO: Word 인터페이스 추가
 }
 
 export default function Nav(props: NavProps) {
   const chapterList = props.chapterList;
   const location = props.location;
   const myWordList = props.myWordList;
 
-  console.log(props);
   function handleNavPage() {
     if (location === '/') {
       return chapterList?.map((el) => (
         <MainNavItem key={el.chapterId} chapter={el} />
       ));
     } else if (location === '/my-word') {
-      // word page
+      // WordNavItem.tsx 렌더링
       return myWordList;
     } else {
       return null;

client/src/components/Nav/WordNavItem.tsx

@@ -0,0 +1,3 @@
+interface WordNavItemProps {}
+
+export default function WordNavItem() {}

client/src/components/Enter/MainProgress.tsx → client/src/components/Progress/MainProgress.tsx

@@ -8,10 +8,10 @@ import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
 import { Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
-interface Progress {
+export interface Progress {
   progress: number[];
 }
-export default function Progress({ progress }: Progress) {
+export default function MainProgress({ progress }: Progress) {
   function itemMapping(el: number, idx: number) {
     let status = '';
     let point = '';
@@ -22,9 +22,9 @@ export default function Progress({ progress }: Progress) {
     if (el === 1) {
       status = 'Success';
       statusColor = 'success.main';
-      if (idx === 9 || idx === 10 || idx === 11) {
+      if (idx === 3 || idx === 7 || idx === 11) {
         point = '+ 3';
-      } else if (idx === 2 || idx === 5 || idx === 8) {
+      } else if (idx === 2 || idx === 6 || idx === 10) {
         point = '+ 2';
       } else {
         point = '+ 1';
@@ -35,21 +35,21 @@ export default function Progress({ progress }: Progress) {
       point = '+ 0';
     }
 
-    if (idx === 0 || idx === 3 || idx === 6) {
-      qType = '영단어 선택하기';
-    } else if (idx === 1 || idx === 4 || idx === 7) {
-      qType = '의미 선택하기';
-    } else if (idx === 2 || idx === 5 || idx === 8) {
-      qType = '소리 듣고 입력하기';
+    if (idx === 0 || idx === 4 || idx === 8) {
+      qType = '영단어 고르기';
+    } else if (idx === 1 || idx === 5 || idx === 9) {
+      qType = '뜻 고르기';
+    } else if (idx === 2 || idx === 6 || idx === 10) {
+      qType = '스펠링 입력하기';
     } else {
-      qType = '문장 채우기';
+      qType = '빈칸 채우기';
     }
 
-    if (idx === 0 || idx === 1 || idx === 2 || idx === 9) {
+    if (idx === 0 || idx === 1 || idx === 2 || idx === 3) {
       qTypeNo = 1;
-    } else if (idx === 3 || idx === 4 || idx === 5 || idx === 10) {
+    } else if (idx === 4 || idx === 5 || idx === 6 || idx === 7) {
       qTypeNo = 2;
-    } else if (idx === 6 || idx === 7 || idx === 8 || idx === 11) {
+    } else {
       qTypeNo = 3;
     }