From 6a7d03c9fa6576a844e1035aa6666b8da0a01076 Mon Sep 17 00:00:00 2001 From: DoubleD <53948297+Hoon-Hub@users.noreply.github.com> Date: Sat, 9 Sep 2023 23:13:06 +0900 Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=EB=B0=98?= =?UTF-8?q?=EC=98=81=20(#109)=20(#110)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/AnswerNowStep.tsx | 16 ++- src/components/main/AnsweredCategoryUI.tsx | 4 +- src/components/main/AnsweredListContent.tsx | 2 +- src/components/main/MyCalendar.tsx | 25 ++-- src/pages/auth/Login.tsx | 5 +- src/pages/main/AnsweredList.tsx | 2 +- src/store/modules/Answers.ts | 136 ++++++++++++-------- src/store/modules/CardState.ts | 19 +-- 8 files changed, 125 insertions(+), 84 deletions(-) diff --git a/src/components/main/AnswerNowStep.tsx b/src/components/main/AnswerNowStep.tsx index 8c44863..64af364 100644 --- a/src/components/main/AnswerNowStep.tsx +++ b/src/components/main/AnswerNowStep.tsx @@ -12,12 +12,16 @@ const AnswerNowStep = () => { const {todayCardSelectStep} = useCardState() //카드 뽑기 단계 조회 useEffect(()=>{ - setSelectionStep(todayCardSelectStep) //질문회차 값 세팅 - switch (todayCardSelectStep) { - case 1: setStepText('첫'); break; - case 2: setStepText('두'); break; - case 3: setStepText('세'); break; - default: setStepText('첫'); break; + if (todayCardSelectStep > 3) { + console.log('오늘의 카드 뽑기 단계가 3을 초과했습니다.') + } else { + setSelectionStep(todayCardSelectStep) //질문회차 값 세팅 + switch (todayCardSelectStep) { + case 1: setStepText('첫'); break; + case 2: setStepText('두'); break; + case 3: setStepText('세'); break; + default: setStepText('첫'); break; + } } },[]) diff --git a/src/components/main/AnsweredCategoryUI.tsx b/src/components/main/AnsweredCategoryUI.tsx index 9a6b399..1a876e5 100644 --- a/src/components/main/AnsweredCategoryUI.tsx +++ b/src/components/main/AnsweredCategoryUI.tsx @@ -13,8 +13,8 @@ const AnsweredCategoryUI = ({category}: any) => { switch (category) { case '탐구': bgColor = '#C4DCF0'; categoryText = '나의 탐구'; break; case '기억': bgColor = '#DFF0C4'; categoryText = '나의 기억'; break; - case '일상': bgColor = '#FAD39C'; categoryText = '나의 취향'; break; - case 'memory': bgColor = '#DDC4F0'; categoryText = '나의 일상'; break; + case '취향': bgColor = '#FAD39C'; categoryText = '나의 취향'; break; + case '일상': bgColor = '#DDC4F0'; categoryText = '나의 일상'; break; case '꿈': bgColor = '#FAC8D4'; categoryText = '나의 꿈'; break; default: bgColor = '#E9E7E2'; categoryText = '선택안됨'; break; } diff --git a/src/components/main/AnsweredListContent.tsx b/src/components/main/AnsweredListContent.tsx index 0cc5860..8c642e4 100644 --- a/src/components/main/AnsweredListContent.tsx +++ b/src/components/main/AnsweredListContent.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useMemo } from "react"; +import { useMemo } from "react"; import useAnsweredList from "store/modules/Answers"; import "assets/components/answered-list/answered-list.css"; import AnsweredCategoryUI from "./AnsweredCategoryUI"; diff --git a/src/components/main/MyCalendar.tsx b/src/components/main/MyCalendar.tsx index 84916ef..46c9b72 100644 --- a/src/components/main/MyCalendar.tsx +++ b/src/components/main/MyCalendar.tsx @@ -29,27 +29,26 @@ const MyCalendar = () => { getAnsweredCount, initAnsweredList, updateIsThisMonth, - initAnsweredCount, - selectedMonth, setSelectedMonth, setSelectDate, getAnsweredDateCount, initAnsweredDateCount, answeredDateCount, } = useAnsweredList(); + const { userInfo } = useAuthStore((state) => state); - const { setHeaderText, setIsNavigation } = useDefaultSets(); + const { setHeaderText } = useDefaultSets(); const [selectedDate, setValue] = useState(new Date()); //calendar - 선택일자 const today = new Date(); const [textlabelControl, setTextLabel] = useState(today); // [선택,오늘] 라벨 제어 const todayYearMonth = dateFormat.getYearAndMonth(today); //금일 연월 - const todayMonth = today.getMonth() + 1; //이번달 - const minDate = today.getDate(); //오늘이후날짜 비활성화 -> 내일날짜 + // const todayMonth = today.getMonth() + 1; //이번달 + // const minDate = today.getDate(); //오늘이후날짜 비활성화 -> 내일날짜 const [showCalendar, setShowCalendar] = useState(true); //calendar 보이기 숨기기 처리 const [activeCalendarBtn, setActiveCalendarBtn] = useState(false); //calendar 보이기숨기기 버튼 - active/disabled 처리 - const [mark, setMark] = useState>([]); + // const [mark, setMark] = useState>([]); /**************************************************************************** * 오늘 날짜 관련 요소 사용 - 캘린더관련 @@ -131,14 +130,24 @@ const MyCalendar = () => { }; // 해당 일자의 데이터 목록 [월/일]별 조회 - const getQnAList = (date: Date, type: String) => { + const getQnAList = async (date: Date, type: String) => { // type 에 따른 date 포맷 변경 const convertedDate = type === "month" ? dateFormat.getYearAndMonth(date) : dateFormat.getYearAndMonthAndDay(date); const param = { email: userInfo.eml, date: convertedDate }; - getAnsweredList(param); //date, count 포맷 데이터 조회 + + //해당 일자의 데이터가 없을 때, api 호출하지 않음 + const hasData = answeredDateCount?.findIndex( + (item) => item.date.toString() === convertedDate + ); // 동일한 일자인지 체크 + console.log('hasData', hasData); + if (type === "day" && hasData === -1) { + initAnsweredList() + } else { + await getAnsweredList(param); //date, count 포맷 데이터 조회 + } if (type === "month") { //월 diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx index 73a2147..e0ab48f 100644 --- a/src/pages/auth/Login.tsx +++ b/src/pages/auth/Login.tsx @@ -27,9 +27,11 @@ const Login: React.FC = () => { const [rememberEmail, setRememberEmail] = useState(false); //id저장여부 확인 const [emailFormChk, setEmailFormChk] = useState(false); //* 이메일 형식체크 const [invalid, setInvalid] = useState(true); //아이디비밀번호 일치x + const {isLogin} = useAuthStore() useEffect(() => { - console.log(window.location.origin); + isLogin && navigate('/main') //로그인했을 경우 메인페이지로 이동 + if (localStorage.getItem("bside-remember-login")) { //로컬스토리지에서 email 가져오기 const LSrememberEmail: string = String( @@ -82,7 +84,6 @@ const Login: React.FC = () => { }; const result: AxiosResponse = await axios.post( `${process.env.REACT_APP_API_URL}/api/users/login`, - //`http://localhost:8080/api/users/login`, { ...param }, { withCredentials: false } ); diff --git a/src/pages/main/AnsweredList.tsx b/src/pages/main/AnsweredList.tsx index 41d9149..157e1dd 100644 --- a/src/pages/main/AnsweredList.tsx +++ b/src/pages/main/AnsweredList.tsx @@ -28,7 +28,7 @@ const AnsweredList = () => {
- {false ? : } + {isThisMonth ? : }
{/* divider */} diff --git a/src/store/modules/Answers.ts b/src/store/modules/Answers.ts index 6b2b415..b50f33a 100644 --- a/src/store/modules/Answers.ts +++ b/src/store/modules/Answers.ts @@ -48,6 +48,17 @@ type ANSWER_TYPE = { size: number; totalElements: number; }; + +/** + * @desc 이번달이상의 날짜인지 체크 + * @returns {boolean} true: 이번달 이상, false: 이번달 이하 + */ +const checkIsMonthOver = (date: Date|string): boolean => { + console.log("checkIsMonthOver", date); + + return new Date(date).getMonth() >= new Date().getMonth() +} + /** * @desc Main - QNA List 상태관리 */ @@ -65,57 +76,66 @@ const useAnsweredList = create((set) => ({ * @return answeredList update */ getAnsweredList: async (param: any) => { - console.log(new Date(param.date).getMonth() + 1); - - param.size = param.size === undefined || null || "" ? 15 : param.size; - param.page = param.page === undefined || null || "" ? 1 : param.page; - - const result = await axios.get( - `${process.env.REACT_APP_API_URL}/api/question/answered/${ - param.email - }/${param.date.toString()}?size=${param?.size}&page=${param?.page}` - ); - console.log("getAnsweredList", result?.data); - - if (typeof result?.data === "object") { - if (result.data?.content?.length > 0) { - // answer 컬럼의 값이 존재하지 않을 경우 목록에서 해당 객체를 제거 - for (let i = 0; i < result?.data.content.length; i++) { - if (result?.data.content[i]) { - if (result.data.content[i]?.answer.trim().length === 0) { - result?.data.content.splice(i, 1); - i--; + console.log(new Date(param.date).getMonth() + 1 + "월 답변 목록 조회"); + + //param.date 가 이번 달 혹은 미래의 경우, api 를 조회하지 않고 빈 배열 반환 + if (checkIsMonthOver(param.date)) { + set({answeredList: { content: [], page: 0, size: 0, totalElements: 0 }}); + } else { + param.size = param.size === undefined || null || "" ? 15 : param.size; + param.page = param.page === undefined || null || "" ? 1 : param.page; + + const result = await axios.get( + `${process.env.REACT_APP_API_URL}/api/question/answered/${ + param.email + }/${param.date.toString()}?size=${param?.size}&page=${param?.page}` + ); + console.log("getAnsweredList", result?.data); + + if (typeof result?.data === "object") { + if (result.data?.content?.length > 0) { + // answer 컬럼의 값이 존재하지 않을 경우 목록에서 해당 객체를 제거 + for (let i = 0; i < result?.data.content.length; i++) { + if (result?.data.content[i]) { + if (result.data.content[i]?.answer.trim().length === 0) { + result?.data.content.splice(i, 1); + i--; + } } } + const newList = result?.data ? result?.data : []; //값이 없을 경우 빈 배열로 초기화 + console.log("getAnsweredList 조회 종료: ", newList); + set({ answeredList: newList }); + } else { + set({ + answeredList: { + content: result?.data, + page: 0, + size: 100, + totalElements: result?.data.length, + }, + }); } - const newList = result?.data ? result?.data : []; //값이 없을 경우 빈 배열로 초기화 - console.log("getAnsweredList 조회 종료: ", newList); - set({ answeredList: newList }); } else { - set({ - answeredList: { - content: result?.data, - page: 0, - size: 100, - totalElements: result?.data.length, - }, - }); + set({answeredList: { content: [], page: 0, size: 0, totalElements: 0 }}); } - } else { - set({ - answeredList: { content: [], page: 0, size: 0, totalElements: 0 }, - }); - } + } }, /** * @desc 해당 date의 qna count 를 리스트로 조회 */ getAnsweredDateCount: async (param: any) => { - const result = await axios.get( - `${process.env.REACT_APP_API_URL}/api/question/answeredCountDatesInMonth/${param.email}/${param.date}` - ); - set({ answeredDateCount: result?.data }); + if (checkIsMonthOver(param.date)) { + console.log("getAnsweredDateCount -- 이번 혹은 미래를 조회하는 경우, api호출X"); + set({ answeredCount: 0 }); + set({ answeredDateCount: [] }); + } else { + const result = await axios.get( + `${process.env.REACT_APP_API_URL}/api/question/answeredCountDatesInMonth/${param.email}/${param.date}` + ); + set({ answeredDateCount: result?.data }); + } }, /** @@ -139,22 +159,28 @@ const useAnsweredList = create((set) => ({ * @param type */ getAnsweredCount: async (param: any) => { - let url: string = `${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/`; - - if (param.type === "month") { - //월 - url += `${param.date[0]}/${param.date[1]}`; - const result = await axios.get(url); - const count = result?.data.count ? result?.data.count : 0; - set({ answeredCount: count }); - } else if (param.type === "day") { - //일 - url += `${param.date}`; - const result = await axios.get(url); - const count = result?.data ? result?.data : 0; - set({ answeredCount: count }); + if (checkIsMonthOver(param.date)) { + console.log("getAnsweredCount -- 이번 혹은 미래를 조회하는 경우, api호출X"); + set({ answeredCount: 0 }); + } else { + let url: string = `${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/`; + + if (param.type === "month") { + //월 + url += `${param.date[0]}/${param.date[1]}`; + const result = await axios.get(url); + const count = result?.data.count ? result?.data.count : 0; + set({ answeredCount: count }); + } else if (param.type === "day") { + //일 + url += `${param.date}`; + const result = await axios.get(url); + const count = result?.data ? result?.data : 0; + set({ answeredCount: count }); + } + } - + }, /** diff --git a/src/store/modules/CardState.ts b/src/store/modules/CardState.ts index dc1bca7..171d3f8 100644 --- a/src/store/modules/CardState.ts +++ b/src/store/modules/CardState.ts @@ -73,7 +73,6 @@ const useCardState = create((persist as pillListPersist) // const response: AxiosResponse = await axios.get(`${process.env.REACT_APP_API_URL}/api/question/answered/day?writer=${param.email}`, {withCredentials: false}) const today = getDateFormat01(new Date()) const response: AxiosResponse = await axios.get(`${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/${today}`, {withCredentials: false}) - console.log('getCardSelectStep', response.data); set({todayCardSelectStep: ++response.data}) // 단계 상태값 세팅 } catch (error) { @@ -84,18 +83,20 @@ const useCardState = create((persist as pillListPersist) /******************************************************* * @desc 카드 4개 조회 (카테고리 조회 -> 카테고리 저장 -> 유저별 카드 조회) * @param {string} email - * @return {Array} fourCards + * @return {Array} FourCards *******************************************************/ getCards: async (email?: string): Promise => { const param = {email: ''} param.email = email ? email : '' //로그인했을 경우 이메일, 아닐경우 빈값 전달 - let url: string = `${process.env.REACT_APP_API_URL}` //axios url 초기화 - - if (email) { - url += `/api/category/select?email=${param.email}` - } else { - url += `/api/category/select` - } + // let url: string = `${process.env.REACT_APP_API_URL}` //axios url 초기화 + console.log('email', email); + + // if (email) { + // url += `/api/category/select?email=${param.email}` + // } else { + // url += `/api/category/select?email=""` + // } + const url = `${process.env.REACT_APP_API_URL}/api/category/select?email=${param.email}` const response: AxiosResponse = await axios.get(url, {withCredentials: false}) console.log(response) let cards:Array = [] //조회된 카드목록