diff --git a/front/src/hooks/queries/feed/getProblems.ts b/front/src/hooks/queries/feed/getProblems.ts new file mode 100644 index 0000000..7528407 --- /dev/null +++ b/front/src/hooks/queries/feed/getProblems.ts @@ -0,0 +1,13 @@ +import { getUserProblems } from '@services/feed/getProblems'; + +import { useQuery } from '@tanstack/react-query'; + +export const useProblem = (date: string | null) => { + const { data, isPending, isError, error } = useQuery({ + queryKey: ['userProblems', date], + queryFn: () => (date ? getUserProblems(date) : Promise.resolve([])), + refetchOnMount: false, + }); + + return { data, isPending, isError, error }; +}; diff --git a/front/src/hooks/queries/feed/getUserCommitQuery.ts b/front/src/hooks/queries/feed/getUserCommitQuery.ts new file mode 100644 index 0000000..c8f9b5a --- /dev/null +++ b/front/src/hooks/queries/feed/getUserCommitQuery.ts @@ -0,0 +1,13 @@ +import { getUserCommit } from '@services/feed/getUserCommit'; + +import { useQuery } from '@tanstack/react-query'; + +export const useCommits = () => { + const { data, isPending, isError, error } = useQuery({ + queryKey: ['user_commit'], + queryFn: getUserCommit, + refetchOnMount: false, + }); + + return { data, isPending, isError, error }; +}; diff --git a/front/src/hooks/queries/feed/getUserDataQuery.ts b/front/src/hooks/queries/feed/getUserDataQuery.ts new file mode 100644 index 0000000..b810f44 --- /dev/null +++ b/front/src/hooks/queries/feed/getUserDataQuery.ts @@ -0,0 +1,13 @@ +import { getUserData } from '@services/feed/getUserData'; + +import { useQuery } from '@tanstack/react-query'; + +export const useUserData = () => { + const { data, isPending, isError, error } = useQuery({ + queryKey: ['users'], + queryFn: getUserData, + refetchOnMount: false, + }); + + return { data, isPending, isError, error }; +}; diff --git a/front/src/interfaces/ProblemInterface.ts b/front/src/interfaces/ProblemInterface.ts new file mode 100644 index 0000000..e7132ee --- /dev/null +++ b/front/src/interfaces/ProblemInterface.ts @@ -0,0 +1,6 @@ +export interface IProblem { + solvedDate: string; + commitUrl: string; + title: string; + rank: string; +} diff --git a/front/src/pages/feed/FeedPage.tsx b/front/src/pages/feed/FeedPage.tsx index 4983faa..f99b1b4 100644 --- a/front/src/pages/feed/FeedPage.tsx +++ b/front/src/pages/feed/FeedPage.tsx @@ -2,55 +2,62 @@ import 'react-calendar/dist/Calendar.css'; import dayjs from 'dayjs'; +import Text from '@components/typography/Text'; + import { StyleCalendar } from '@pages/feed/components/Calendar'; import ProblemList from '@pages/feed/components/ProblemList'; import Profile from '@pages/feed/components/Profile'; +import { useProblem } from '@hooks/queries/feed/getProblems'; + import { useFeedStore } from '@stores/useFeedStore'; +import { useTokenStore } from '@stores/useTokenStore'; + +import { IProblem } from '@interfaces/ProblemInterface'; -import { Layout, DisplayLayout } from '@styles/Layout'; +import { Layout, DisplayLayout, LoginLayout } from '@styles/Layout'; import styled from '@emotion/styled'; import 'dayjs/locale/ko'; -interface IProblem { - date: string; - problem: string; - difficulty: string; -} - -const problemRecords: IProblem[] = [ - { - date: '2024-05-20', - problem: '토마토', - difficulty: 'gold4', - }, - { - date: '2024-05-20', - problem: '사과', - difficulty: 'gold2', - }, - { - date: '2024-05-20', - problem: '감자', - difficulty: 'gold4', - }, - { - date: '2024-05-20', - problem: '감자', - difficulty: 'gold4', - }, - { - date: '2024-05-20', - problem: '감자', - difficulty: 'gold4', - }, - { - date: '2024-05-20', - problem: '감자', - difficulty: 'gold4', - }, -]; +// const problemRecords: IProblem[] = [ +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '토마토', +// rank: 'gold4', +// }, +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '사과', +// rank: 'gold2', +// }, +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '감자', +// rank: 'gold4', +// }, +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '감자', +// rank: 'gold4', +// }, +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '감자', +// rank: 'gold4', +// }, +// { +// solvedDate: '2024-05-20', +// commitUrl: 'https://github.com/gidskql6671', +// title: '감자', +// rank: 'gold4', +// }, +// ]; const FeedLayout = styled.div` margin-top: 62px; @@ -81,7 +88,16 @@ const ProfileWrapper = styled.div` `; const FeedPage = () => { + const { isAccessToken } = useTokenStore(); const { selectedDate, setSelectedDate } = useFeedStore(); + const formattedDate = selectedDate + ? dayjs(selectedDate).format('YYYY-MM-DD') + : ''; + const { + data: problemData, + isPending: problemPending, + isError: problemError, + } = useProblem(formattedDate); // eslint-disable-next-line @typescript-eslint/naming-convention const formatDay = (_locale: string | undefined, date: Date) => @@ -91,42 +107,61 @@ const FeedPage = () => { setSelectedDate(date); }; - const formattedDate = selectedDate - ? dayjs(selectedDate).format('YYYY-MM-DD') - : ''; - return ( - - - - - - - view === 'month' && - problemRecords.find( - (problem) => problem.date === dayjs(date).format('YYYY-MM-DD') - ) ? ( -
- ) : null - } - /> - - {selectedDate && - problemRecords.find((problem) => problem.date === formattedDate) ? ( + {isAccessToken ? ( + + {' '} + + + + + + view === 'month' && + problemData && + problemData.length > 0 && + problemData.some( + (problem: IProblem) => + problem.solvedDate === dayjs(date).format('YYYY-MM-DD') + ) ? ( +
+ ) : null + } + /> + + {/* {selectedDate && + problemRecords.find( + (problem) => problem.solvedDate === formattedDate + ) ? ( ) : (
- )} - + )} */} + {selectedDate && + problemData && + !problemPending && + !problemError && ( + + )} + + ) : ( + + + 환영합니다! Guest님! 로그인 후 이용해주세요. + + + )} ); diff --git a/front/src/pages/feed/components/ProblemList.tsx b/front/src/pages/feed/components/ProblemList.tsx index b15a346..00420ce 100644 --- a/front/src/pages/feed/components/ProblemList.tsx +++ b/front/src/pages/feed/components/ProblemList.tsx @@ -1,13 +1,9 @@ import { ButtonWrapper } from '@components/button/ButtonWrapper'; import { DefaultButton } from '@components/button/DefaultButton'; -import styled from '@emotion/styled'; +import { IProblem } from '@interfaces/ProblemInterface'; -interface IProblem { - date: string; - problem: string; - difficulty: string; -} +import styled from '@emotion/styled'; const ProblemContainer = styled.div` background: linear-gradient( @@ -101,15 +97,15 @@ const ProblemList = ({ {problems - .filter((problem) => problem.date === formattedDate) + .filter((problem) => problem.solvedDate === formattedDate) .map((problem, index) => ( - {problem.problem} - {problem.difficulty} + {problem.title} + {problem.rank} alert('click')} + onClick={() => window.open(problem.commitUrl)} color='white' backgroundColor='blue' > diff --git a/front/src/pages/feed/components/Profile.tsx b/front/src/pages/feed/components/Profile.tsx index c901f64..c989fa7 100644 --- a/front/src/pages/feed/components/Profile.tsx +++ b/front/src/pages/feed/components/Profile.tsx @@ -1,13 +1,13 @@ -import { useEffect } from 'react'; - -import axios from 'axios'; - +// import { useEffect } from 'react'; +// import axios from 'axios'; import Text from '@components/typography/Text'; -import DefaultProfileImg from '@assets/HaedalProfile.png'; +import { useCommits } from '@hooks/queries/feed/getUserCommitQuery'; +import { useUserData } from '@hooks/queries/feed/getUserDataQuery'; -import { useUserDataStore } from '@stores/useUserDataStore'; +import DefaultProfileImg from '@assets/HaedalProfile.png'; +// import { useUserDataStore } from '@stores/useUserDataStore'; import styled from '@emotion/styled'; const ProfileLayout = styled.div` @@ -34,56 +34,80 @@ const ProfileTextLayout = styled.div` const Profile = () => { const { - setUsername, - getUsername, - setProfileImg, - getProfileImg, - setCommit, - getCommit, - } = useUserDataStore(); - const username = getUsername(); - const commitNum = getCommit(); - const profileImg = getProfileImg(); + data: userData, + isPending: userPending, + isError: userError, + } = useUserData(); + const { data: commit } = useCommits(); + const username = userData?.loginId || ''; + const profileImg = userData?.profileUrl || DefaultProfileImg; + const commitNum = commit?.count || 0; + + // console.log('commit', commit.count); + // MSW Test CODE + // const { + // setUsername, + // getUsername, + // setProfileImg, + // getProfileImg, + // setCommit, + // getCommit, + // } = useUserDataStore(); + // const username = getUsername(); + // const commitNum = getCommit(); + // const profileImg = getProfileImg(); - useEffect(() => { - const fetchProfile = async () => { - try { - const res = await axios.get('/api/profile'); - setUsername(res.data.name); - setProfileImg(res.data.url); - console.log(res.data.url); - } catch (e) { - console.error('Error fetching profile:', e); - } - }; + // useEffect(() => { + // const fetchProfile = async () => { + // try { + // const res = await axios.get('/api/profile'); + // setUsername(res.data.name); + // setProfileImg(res.data.url); + // console.log(res.data.url); + // } catch (e) { + // console.error('Error fetching profile:', e); + // } + // }; - fetchProfile(); - }, [setUsername, setProfileImg]); + // fetchProfile(); + // }, [setUsername, setProfileImg]); - useEffect(() => { - const fetchCommit = async () => { - try { - const res = await axios.get('/api/commit'); - setCommit(res.data.commit); - } catch (e) { - console.error('Error fetching commit:', e); - } - }; + // useEffect(() => { + // const fetchCommit = async () => { + // try { + // const res = await axios.get('/api/commit'); + // setCommit(res.data.commit); + // } catch (e) { + // console.error('Error fetching commit:', e); + // } + // }; - fetchCommit(); - }, [setCommit]); + // fetchCommit(); + // }, [setCommit]); return ( <> - + - - {username}님 반갑습니다! - - - 오늘의 커밋 개수는 {commitNum}개 입니다. - + {userPending ? ( + + Loading... + + ) : userError ? ( + + 네트워크 오류입니다. + + ) : ( + <> + + {username}님 반갑습니다! + + + 오늘의 커밋 개수는 {commitNum}개 입니다. + + + )} diff --git a/front/src/pages/search/SearchPage.tsx b/front/src/pages/search/SearchPage.tsx index 0535c9a..38eba76 100644 --- a/front/src/pages/search/SearchPage.tsx +++ b/front/src/pages/search/SearchPage.tsx @@ -2,7 +2,9 @@ import Text from '@components/typography/Text'; import SearchResult from '@pages/search/components/SearchResult'; -import { Layout, DisplayLayout } from '@styles/Layout'; +import { useTokenStore } from '@stores/useTokenStore'; + +import { Layout, DisplayLayout, LoginLayout } from '@styles/Layout'; import styled from '@emotion/styled'; @@ -15,14 +17,24 @@ const SearchLayout = styled(DisplayLayout)` `; const SearchPage = () => { + const { isAccessToken } = useTokenStore(); + return ( - - - 현재 그룹 목록 - - - + {isAccessToken ? ( + + + 현재 그룹 목록 + + + + ) : ( + + + 둘러보기 기능은 로그인 후 이용 가능합니다. + + + )} ); }; diff --git a/front/src/services/feed/getProblems.ts b/front/src/services/feed/getProblems.ts new file mode 100644 index 0000000..97f8b3c --- /dev/null +++ b/front/src/services/feed/getProblems.ts @@ -0,0 +1,18 @@ +import { BASE_URI } from '@constants/URI'; + +import { instance } from '@services/API_JWT'; + +export const getUserProblems = async (date: string) => { + try { + const response = await instance.get(`${BASE_URI}/problems`, { + params: { + type: 'DAY', + date: date, + }, + }); + return response.data; + } catch (error) { + console.error('Error fetching UserData:', error); + throw error; + } +}; diff --git a/front/src/services/feed/getUserCommit.ts b/front/src/services/feed/getUserCommit.ts new file mode 100644 index 0000000..5555a9c --- /dev/null +++ b/front/src/services/feed/getUserCommit.ts @@ -0,0 +1,19 @@ +import dayjs from 'dayjs'; + +import { BASE_URI } from '@constants/URI'; + +import { instance } from '@services/API_JWT'; + +export const getUserCommit = async () => { + const currentDate = dayjs().format('YYYY-MM-DD'); // 현재 날짜를 yyyy-mm-dd 형식으로 추출 + + try { + const response = await instance.get( + `${BASE_URI}/problems/count?date=${currentDate}` + ); + return response.data; + } catch (error) { + console.error('Error fetching UserData:', error); + throw error; + } +}; diff --git a/front/src/services/feed/getUserData.ts b/front/src/services/feed/getUserData.ts new file mode 100644 index 0000000..aea2801 --- /dev/null +++ b/front/src/services/feed/getUserData.ts @@ -0,0 +1,13 @@ +import { BASE_URI } from '@constants/URI'; + +import { instance } from '@services/API_JWT'; + +export const getUserData = async () => { + try { + const response = await instance.get(`${BASE_URI}/users`); + return response.data; + } catch (error) { + console.error('Error fetching UserData:', error); + throw error; + } +}; diff --git a/front/src/services/search/getGroups.tsx b/front/src/services/search/getGroups.ts similarity index 81% rename from front/src/services/search/getGroups.tsx rename to front/src/services/search/getGroups.ts index 287ed33..0274a28 100644 --- a/front/src/services/search/getGroups.tsx +++ b/front/src/services/search/getGroups.ts @@ -7,7 +7,7 @@ export const getGroups = async () => { const response = await instance.get(`${BASE_URI}/groups`); return response.data; } catch (error) { - console.error('Error fetching groups:', error); + console.error('Error fetching groups Try Again:', error); throw error; } }; diff --git a/front/src/styles/Layout.ts b/front/src/styles/Layout.ts index 6d85a14..f56eb7c 100644 --- a/front/src/styles/Layout.ts +++ b/front/src/styles/Layout.ts @@ -13,3 +13,10 @@ export const DisplayLayout = styled.div` display: flex; justify-content: center; `; + +export const LoginLayout = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: calc(100vh - 45px); +`;