From 1ce94119da6649424d3e2c3140d144a420314766 Mon Sep 17 00:00:00 2001 From: k-impossible Date: Tue, 12 Sep 2023 00:39:03 +0900 Subject: [PATCH 01/12] [test] env api url test --- .github/workflows/ci_cd.yml | 31 ------------------------------- client/src/common/utils/api.ts | 3 ++- 2 files changed, 2 insertions(+), 32 deletions(-) delete mode 100644 .github/workflows/ci_cd.yml diff --git a/.github/workflows/ci_cd.yml b/.github/workflows/ci_cd.yml deleted file mode 100644 index 71ac4b31..00000000 --- a/.github/workflows/ci_cd.yml +++ /dev/null @@ -1,31 +0,0 @@ -name: client -on: - push: - branches: - - main -jobs: - build: - runs-on: ubuntu-20.04 - steps: - - name: Checkout source code. - uses: actions/checkout@v2 - - name: Install dependencies - run: npm i --force - working-directory: ./client - - name: Build - run: CI='' npm run build - working-directory: ./client - - name: SHOW AWS CLI VERSION - run: | - aws --version - - name: Sync Bucket - env: - AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_EC2_METADATA_DISABLED: true - run: | - aws s3 sync \ - --region ap-northeast-2 \ - build s3://i-learn \ - --delete - working-directory: ./client diff --git a/client/src/common/utils/api.ts b/client/src/common/utils/api.ts index 297576c0..f8164747 100644 --- a/client/src/common/utils/api.ts +++ b/client/src/common/utils/api.ts @@ -1,6 +1,7 @@ import axios from 'axios'; -const SERVER_URL = process.env.REACT_APP_API_URL; +// const SERVER_URL = process.env.REACT_APP_API_URL; +const SERVER_URL = 'https://83cb-14-36-94-78.ngrok-free.app'; const api = ( uri: string, From 73e5b229bc3eb03daad4e03a1e237e18cc27d221 Mon Sep 17 00:00:00 2001 From: k-impossible Date: Tue, 12 Sep 2023 13:49:10 +0900 Subject: [PATCH 02/12] =?UTF-8?q?[fix]=20Main=20-=20get=20chapterList=20ap?= =?UTF-8?q?i=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/common/utils/speak.ts | 1 - client/src/components/Nav/Nav.tsx | 6 +- client/src/components/Nav/WordNavItem.tsx | 3 + client/src/components/Word/Word.tsx | 1 - client/src/pages/Main/MainPage.tsx | 78 +++++++++++++---------- client/src/redux/slices/chapter.ts | 10 +-- 6 files changed, 53 insertions(+), 46 deletions(-) diff --git a/client/src/common/utils/speak.ts b/client/src/common/utils/speak.ts index 8b6c4afc..a465ece7 100644 --- a/client/src/common/utils/speak.ts +++ b/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; } diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx index deca09a0..9a75e37c 100644 --- a/client/src/components/Nav/Nav.tsx +++ b/client/src/components/Nav/Nav.tsx @@ -6,8 +6,7 @@ import MainNavItem from './MainNavItem'; interface NavProps { chapterList?: Chapter[]; location: string; - memberStatus: boolean; - myWordList?: number[]; + myWordList?: number[]; // TODO: Word 인터페이스 추가 } export default function Nav(props: NavProps) { @@ -15,14 +14,13 @@ export default function Nav(props: NavProps) { const location = props.location; const myWordList = props.myWordList; - console.log(props); function handleNavPage() { if (location === '/') { return chapterList?.map((el) => ( )); } else if (location === '/my-word') { - // word page + // WordNavItem.tsx 렌더링 return myWordList; } else { return null; diff --git a/client/src/components/Nav/WordNavItem.tsx b/client/src/components/Nav/WordNavItem.tsx index e69de29b..4671bf4b 100644 --- a/client/src/components/Nav/WordNavItem.tsx +++ b/client/src/components/Nav/WordNavItem.tsx @@ -0,0 +1,3 @@ +interface WordNavItemProps {} + +export default function WordNavItem() {} diff --git a/client/src/components/Word/Word.tsx b/client/src/components/Word/Word.tsx index 1add2141..74d50564 100644 --- a/client/src/components/Word/Word.tsx +++ b/client/src/components/Word/Word.tsx @@ -9,7 +9,6 @@ import React, { useState } from 'react'; import Speaker from '../Speaker/Speaker'; import { WordInterface } from '../../interfaces/Word.interface'; const defaultTheme = createTheme(); -console.log(defaultTheme); export default function Word(props: { wordInfo: WordInterface }) { const [detailCategory, setDetailCategory] = useState(0); diff --git a/client/src/pages/Main/MainPage.tsx b/client/src/pages/Main/MainPage.tsx index e1ac5e80..b3ac80be 100644 --- a/client/src/pages/Main/MainPage.tsx +++ b/client/src/pages/Main/MainPage.tsx @@ -17,57 +17,65 @@ export default function MainPage() { const location = useLocation().pathname; const dispatch = useAppDispatch(); const userInfo = useAppSelector((state) => state.user); + const selectedChapter = useAppSelector((state) => state.chapter); const getChapter = useQuery({ queryKey: ['getChapterList'], - queryFn: () => api('/learning', 'get').then(({ data }) => data.data) + queryFn: async () => { + try { + const response = await api('/learning', 'get'); + return response.data.data; + } catch (error) { + return alert('Error'); + } + } }); useEffect(() => { - if (getChapter.isError) { - alert('Error!'); - } - - if (!getChapter.isLoading) { - if (!userInfo.memberStatus && !localStorage.getItem('userChapter')) { - const localUserChapter = { - chapterList: [{}], - learningChapterId: 1 - }; - - for (let i = 0; i < getChapter.data.length; i++) { - localUserChapter.chapterList[i] = { - chapterId: i + 1, - chapterStatus: false, - progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] - }; - } - localStorage.setItem('userChapter', JSON.stringify(localUserChapter)); - } - + // data가 들어왔을때 실행 + if (getChapter.data !== undefined) { + const chapterData: Chapter[] = getChapter.data; let userChapter: UserChapter = { chapterList: [ { chapterId: 1, chapterStatus: false, - progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + progress: [0] } ], learningChapterId: 1 }; - const chapterData: Chapter[] = getChapter.data; - if (userInfo.memberStatus) { - console.log('get 유저 챕터'); - } else { + // 비회원 접속 시 userChapter 세팅 + if (!userInfo.memberStatus) { + // 로컬스토리지 정보가 없을 시 초기 세팅 + if (!localStorage.getItem('userChapter')) { + const localUserChapter = { + chapterList: [{}], + learningChapterId: 1 + }; + + for (let i = 0; i < getChapter.data.length; i++) { + localUserChapter.chapterList[i] = { + chapterId: i + 1, + chapterStatus: false, + progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }; + } + localStorage.setItem('userChapter', JSON.stringify(localUserChapter)); + } const localUserChapter = localStorage.getItem('userChapter'); if (localUserChapter !== null) { const parseUserChapter = JSON.parse(localUserChapter); userChapter = parseUserChapter; } + } else { + // 유저 로그인 시 userChapter 세팅 + console.log('get 유저 챕터'); } + // 챕터 데이터랑 유저 챕터 정보랑 mapping const changeStatusList = chapterData.map((chapter) => { const sameChapter = userChapter?.chapterList.find( (userChapter) => userChapter.chapterId === chapter.chapterId @@ -89,11 +97,15 @@ export default function MainPage() { }; } }); - console.log(changeStatusList); + // 변경된 챕터리스트로 setState setChapterList(changeStatusList); - dispatch(setChapter(changeStatusList[0])); + + // 첫 접속시 Enter, Nav 첫 챕터로 세팅 + if (selectedChapter.chapterId === 0) { + dispatch(setChapter(changeStatusList[0])); + } } - }, [getChapter.isLoading]); + }, [getChapter.data]); return ( -