Skip to content

Commit

Permalink
Merge pull request #163 from GDSC-PKNU-21-22/dev
Browse files Browse the repository at this point in the history
부리미 v0.23 배포
  • Loading branch information
pp449 authored Aug 16, 2023
2 parents e91c7c8 + 66a74cd commit 3e645e0
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 57 deletions.
3 changes: 1 addition & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,5 @@ const App = () => {
export default App;

const Body = styled.div`
height: calc(100vh - 16vh);
padding: 8vh 0 8vh 0;
padding: 8.5vh 0 8.5vh 0;
`;
32 changes: 21 additions & 11 deletions src/components/Card/InformCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import useModals from '@hooks/useModals';
import useRouter from '@hooks/useRouter';
import { THEME } from '@styles/ThemeProvider/theme';
import { IconKind } from '@type/styles/icon';
import { setSize } from '@utils/styles/size';

// TODO: InformCard 컴포넌트 Props 및 로직 수정

Expand Down Expand Up @@ -50,18 +49,26 @@ const InformCard = ({
return (
<>
<Card data-testid="card" icon={icon} onClick={handleMajorModal}>
<Icon
kind={icon}
color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
/>
<span
<div
css={css`
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
`}
>
{title}
</span>
<Icon
kind={icon}
color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
/>
<span
css={css`
font-size: 18px;
font-weight: bold;
margin-left: 10px;
`}
>
{title}
</span>
</div>
<span
css={css`
font-size: 16px;
Expand All @@ -84,16 +91,19 @@ const Card = styled.div<CardProps>(({ icon }) => {
display: 'flex',
flexDirection: 'column',
padding: '15px',
marginBottom: '5%',

borderRadius: '15px',

backgroundColor: icon === 'school' ? THEME.BACKGROUND : THEME.PRIMARY,
color: icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE,
boxShadow: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',

height: '90px',

'& > svg': {
margin: '10px 0',
},
...setSize(200, 150),
cursor: 'pointer',
};
});
1 change: 1 addition & 0 deletions src/components/FooterTab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const Footer = styled.div`
align-items: center;
z-index: 2;
background-color: ${THEME.TEXT.WHITE};
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
`;

const IconContainer = styled.div`
Expand Down
1 change: 1 addition & 0 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const HeaderContainer = styled.div`
height: 8vh;
background-color: ${THEME.TEXT.WHITE};
z-index: 2;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
`;

const HeaderWrapper = styled.div`
Expand Down
41 changes: 24 additions & 17 deletions src/mocks/handlers/graudationHandler.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
import { SERVER_URL } from '@config/index';
import { RequestHandler, rest } from 'msw';

type GRADUATION_LINK = {
[key in string]: {
link: string;
};
};
interface GraduationLink {
department: string;
link: string;
}

const MOCK_GRDUATION_LINK: GRADUATION_LINK = {
컴퓨터인공지능학부: {
link: 'https://ce.pknu.ac.kr/ce/2889',
const MOCK_GRDUATION_LINK: GraduationLink[] = [
{
department: '데이터정보과학부',
link: 'https://archieng.pknu.ac.kr/archieng/1423?action=view&no=9911252',
},
데이터정보과학부: {
link: 'https://www.youtube.com',
{
department: '미디어커뮤니케이션학부',
link: 'https://masscom.pknu.ac.kr/comm/3128?action=view&no=9916308',
},
'조형학부 건축학전공': {
link: 'https://www.naver.com',
{
department: '컴퓨터인공지능학부',
link: 'https://ce.pknu.ac.kr/ce/2889',
},
미디어커뮤니케이션학부: {
link: 'https://www.google.com',
{
department: '조형학부 건축학전공',
link: 'https://pknuarchi.pknu.ac.kr/pknuarchi/969?action=view&no=9933526',
},
};
];

export const graduationHandler: RequestHandler[] = [
rest.get(`${SERVER_URL}/api/graduation`, (req, res, ctx) => {
Expand All @@ -30,8 +33,12 @@ export const graduationHandler: RequestHandler[] = [
return res(
ctx.status(200),
ctx.json({
major: major,
graduationLink: MOCK_GRDUATION_LINK[major].link,
department: major,
link: MOCK_GRDUATION_LINK[
MOCK_GRDUATION_LINK.findIndex(
(graduationLink) => graduationLink.department === major,
)
].link,
}),
);
}
Expand Down
63 changes: 36 additions & 27 deletions src/pages/Home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,60 @@
import http from '@apis/http';
import InformCard from '@components/Card/InformCard';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import useMajor from '@hooks/useMajor';
import useRouter from '@hooks/useRouter';
import { AxiosResponse } from 'axios';
import { useEffect, useState } from 'react';

const Home = () => {
const [graduationLink, setGraduationLink] = useState<string>('');
const [graduationLink, setGraduationLink] = useState<string | null>('');
const { routerTo } = useRouter();
const { major } = useMajor();

const routerToGraduationRequired = () => {
window.location.href = graduationLink;
const routerToGraduationRequiredPage = (graduationLink: string | null) => {
graduationLink && window.open(graduationLink, '_blank');
};

useEffect(() => {
if (!major) return;
const getGraduationLink = async () => {
const response = await http.get(`/api/graduation?major=${major}`);
setGraduationLink(response.data.graduationLink);
const response: AxiosResponse<GraduationLink> = await http.get(
`/api/graduation?major=${major}`,
);
setGraduationLink(response.data.link);
};
getGraduationLink();
}, [major]);

return (
<>
<div
css={css`
display: flex;
justify-content: center;
`}
>
<InformCard
icon="notification"
title="공지사항"
majorRequired={false}
onClick={() => routerTo('/announcement')}
/>
<InformCard
icon="school"
title="졸업요건"
majorRequired={true}
onClick={() => routerToGraduationRequired()}
/>
</div>
</>
<Container>
<InformCard
icon="notification"
title="공지사항"
majorRequired={false}
onClick={() => routerTo('/announcement')}
/>
<InformCard
icon="school"
title="졸업요건"
majorRequired={true}
onClick={() => routerToGraduationRequiredPage(graduationLink)}
/>
</Container>
);
};

export default Home;

const Container = styled.div`
display: flex;
flex-direction: column;
width: 85%;
text-aligb: center;
margin: 0 auto;
`;

interface GraduationLink {
department: string;
link: string | null;
}
1 change: 1 addition & 0 deletions src/styles/Global/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ const resetCss = css`
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
background-color: #fffef9;
}
ol,
ul {
Expand Down

0 comments on commit 3e645e0

Please sign in to comment.