Skip to content

Commit

Permalink
feat: 토큰 유무에 따라 코드 접근 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@KimKyuHoi
KimKyuHoi committed May 28, 2024
1 parent 660bc40 commit a194618
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 69 deletions.
160 changes: 98 additions & 62 deletions front/src/pages/feed/FeedPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Layout, DisplayLayout } from '@styles/Layout';
import { IProblem } from '@interfaces/ProblemInterface';

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;
Expand Down Expand Up @@ -81,7 +88,13 @@ const ProfileWrapper = styled.div`
`;

const FeedPage = () => {
const { isAccessToken } = useTokenStore();
const { selectedDate, setSelectedDate } = useFeedStore();
const {
data: problemData,
isPending: problemPending,
isError: problemError,
} = useProblem();

// eslint-disable-next-line @typescript-eslint/naming-convention
const formatDay = (_locale: string | undefined, date: Date) =>
Expand All @@ -98,35 +111,58 @@ const FeedPage = () => {
return (
<Layout>
<DisplayLayout>
<FeedLayout>
<CalendarLayout>
<ProfileWrapper>
<Profile />
</ProfileWrapper>
<StyleCalendar
formatDay={formatDay}
calendarType='iso8601'
onClickDay={handleDateClick}
tileContent={({ date, view }) =>
view === 'month' &&
problemRecords.find(
(problem) => problem.date === dayjs(date).format('YYYY-MM-DD')
) ? (
<div className='react-calendar__tile--dot'></div>
) : null
}
/>
</CalendarLayout>
{selectedDate &&
problemRecords.find((problem) => problem.date === formattedDate) ? (
{isAccessToken ? (
<FeedLayout>
{' '}
<CalendarLayout>
<ProfileWrapper>
<Profile />
</ProfileWrapper>
<StyleCalendar
formatDay={formatDay}
calendarType='iso8601'
onClickDay={handleDateClick}
tileContent={({ date, view }) =>
view === 'month' &&
problemData &&
problemData.length > 0 &&
problemData.some(
(problem: IProblem) =>
problem.solvedDate === dayjs(date).format('YYYY-MM-DD')
) ? (
<div className='react-calendar__tile--dot'></div>
) : null
}
/>
</CalendarLayout>
{/* {selectedDate &&
problemRecords.find(
(problem) => problem.solvedDate === formattedDate
) ? (
<ProblemList
problems={problemRecords}
formattedDate={formattedDate}
/>
) : (
<div style={{ width: '470px' }} />
)}
</FeedLayout>
)} */}
{selectedDate &&
problemData &&
!problemPending &&
!problemError && (
<ProblemList
problems={problemData}
formattedDate={formattedDate}
/>
)}
</FeedLayout>
) : (
<LoginLayout>
<Text size='var(--size-lg)' weight='700'>
환영합니다! Guest님! 로그인 후 이용해주세요.
</Text>
</LoginLayout>
)}
</DisplayLayout>
</Layout>
);
Expand Down
26 changes: 19 additions & 7 deletions front/src/pages/search/SearchPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -15,14 +17,24 @@ const SearchLayout = styled(DisplayLayout)`
`;

const SearchPage = () => {
const { isAccessToken } = useTokenStore();

return (
<Layout>
<SearchLayout>
<Text weight='700' size='var(--size-md)'>
현재 그룹 목록
</Text>
<SearchResult />
</SearchLayout>
{isAccessToken ? (
<SearchLayout>
<Text weight='700' size='var(--size-md)'>
현재 그룹 목록
</Text>
<SearchResult />
</SearchLayout>
) : (
<LoginLayout>
<Text size='var(--size-lg)' weight='700'>
둘러보기 기능은 로그인 후 이용 가능합니다.
</Text>
</LoginLayout>
)}
</Layout>
);
};
Expand Down
7 changes: 7 additions & 0 deletions front/src/styles/Layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
`;

0 comments on commit a194618

Please sign in to comment.