Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] issue134: 내 스터디 페이지 생성 #166

Merged
merged 7 commits into from
Jul 30, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: 내 스터디 조회 페이지 생성
Co-authored-by: TaeYoon <[email protected]>
airman5573 and nan-noo committed Jul 29, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 02fd271f29860df51ea105d3c6c116971266fba9
12 changes: 10 additions & 2 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ import CreateStudyPage from '@pages/create-study-page/CreateStudyPage';
import ErrorPage from '@pages/error-page/ErrorPage';
import LoginRedirectPage from '@pages/login-redirect-page/LoginRedirectPage';
import MainPage from '@pages/main-page/MainPage';
import MyStudyPage from '@pages/my-study-page/MyStudyPage';

import DetailPage from '@detail-page/DetailPage';

@@ -36,8 +37,15 @@ const App = () => {
<Routes>
<Route path={PATH.MAIN} element={<MainPage />} />
<Route path={PATH.STUDY_DETAIL()} element={<DetailPage />} />
<Route path="/study/new" element={isLoggedIn ? <CreateStudyPage /> : <Navigate to="/" replace={true} />} />
<Route path={PATH.LOGIN} element={isLoggedIn ? <Navigate to="/" replace={true} /> : <LoginRedirectPage />} />
<Route
path={PATH.CREATE_STUDY}
element={isLoggedIn ? <CreateStudyPage /> : <Navigate to={PATH.MAIN} replace={true} />}
/>
<Route
path={PATH.LOGIN}
element={isLoggedIn ? <Navigate to={PATH.MAIN} replace={true} /> : <LoginRedirectPage />}
/>
<Route path={PATH.MY_STUDY} element={isLoggedIn ? <MyStudyPage /> : <Navigate to="/" replace={true} />} />
<Route path="*" element={<ErrorPage />} />
</Routes>
</Main>
6 changes: 6 additions & 0 deletions frontend/src/api/getMyStudyList.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import axiosInstance from '@api/axiosInstance';

export const getMyStudyList = async () => {
const response = await axiosInstance.get(`/api/my/studies`);
return response.data;
};
5 changes: 5 additions & 0 deletions frontend/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export const PATH = {
MAIN: '/',
STUDY_DETAIL: (studyId = ':studyId') => `/study/${studyId}`,
CREATE_STUDY: '/study/create',
MY_STUDY: '/my/study',
LOGIN: '/login',
};

@@ -94,3 +96,6 @@ export const MEMBER_COUNT = {
},
},
};

export const PROFILE_IMAGE_URL =
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80';
2 changes: 1 addition & 1 deletion frontend/src/index.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ import App from './App';
if (process.env.NODE_ENV == 'development') {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { worker } = require('./mocks/browser');
// worker.start();
worker.start();
}

const $root = document.getElementById('root');
12 changes: 8 additions & 4 deletions frontend/src/mocks/handlers.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { rest } from 'msw';

import detailStudyHandlers from './detail-study-handlers';
import studyJSON from './studies.json';
import { tagHandlers } from './tagHandlers';
import { tokenHandlers } from './tokenHandlers';
import detailStudyHandlers from '@mocks/detailStudyHandlers';
import { myHandlers } from '@mocks/myHandlers';
import { reviewHandlers } from '@mocks/reviewHandler';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 지워야겠네요!

import studyJSON from '@mocks/studies.json';
import { tagHandlers } from '@mocks/tagHandlers';
import { tokenHandlers } from '@mocks/tokenHandlers';

export const handlers = [
rest.get('/api/studies', (req, res, ctx) => {
@@ -89,4 +91,6 @@ export const handlers = [
...detailStudyHandlers,
...tagHandlers,
...tokenHandlers,
...myHandlers,
...reviewHandlers,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

얘도!

];
466 changes: 466 additions & 0 deletions frontend/src/mocks/my-studies.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/src/pages/main-page/MainPage.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
import { useInfiniteQuery } from 'react-query';
import { Link, useNavigate } from 'react-router-dom';

import { DEFAULT_STUDY_CARD_QUERY_PARAM } from '@constants';
import { DEFAULT_STUDY_CARD_QUERY_PARAM, PATH } from '@constants';

import type { Study, StudyListQueryData, TagInfo } from '@custom-types/index';

@@ -70,7 +70,7 @@ const MainPage: React.FC = () => {
return;
}
window.scrollTo(0, 0);
navigate('/study/new');
navigate(PATH.CREATE_STUDY);
};

return (
10 changes: 10 additions & 0 deletions frontend/src/pages/my-study-page/MyStudyPage.style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import styled from '@emotion/styled';

export const PageTitle = styled.h1`
font-size: 32px;
text-align: center;
`;

export const SectionContainer = styled.div`
margin-bottom: 20px;
`;
59 changes: 59 additions & 0 deletions frontend/src/pages/my-study-page/MyStudyPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useQuery } from 'react-query';

import { css } from '@emotion/react';

import type { MyStudyQueryData } from '@custom-types/index';
import { MyStudyData } from '@custom-types/index';

import { getMyStudyList } from '@api/getMyStudyList';

import MyStudyCardListSection from '@pages/my-study-page/components/my-study-card-list-section/MyStudyCardListSection';

import Divider from '@components/divider/Divider';
import Wrapper from '@components/wrapper/Wrapper';

import * as S from '@my-study-page/MyStudyPage.style';

const studies: Record<string, Array<MyStudyData>> = {
prepare: [],
inProgress: [],
done: [],
};

const MyStudyPage: React.FC = () => {
const { data, isFetching, isError } = useQuery<MyStudyQueryData, Error>('my-studies', getMyStudyList);

const myStudies =
data?.studies.reduce((acc, study) => {
if (study.studyStatus === 'IN_PROGRESS') {
acc.inProgress.push(study);
}
if (study.studyStatus === 'PREPARE') {
acc.prepare.push(study);
}
if (study.studyStatus === 'DONE') {
acc.done.push(study);
}
return acc;
}, studies) || studies;

const mb20 = css`
margin-bottom: 20px;
`;

return (
<div>
<Wrapper>
<S.PageTitle>가입한 스터디 목록</S.PageTitle>
<Divider />
{isFetching && <div>로딩 중...</div>}
{isError && <div>내 스터디 불러오기를 실패했습니다</div>}
<MyStudyCardListSection css={mb20} sectionTitle="활동 중!" myStudies={myStudies.inProgress} />
<MyStudyCardListSection css={mb20} sectionTitle="곧 시작해요!" myStudies={myStudies.prepare} />
<MyStudyCardListSection css={mb20} sectionTitle="종료했어요" myStudies={myStudies.done} disabled={true} />
</Wrapper>
</div>
);
};

export default MyStudyPage;

Large diffs are not rendered by default.