Skip to content

Commit 5a03647

Browse files
UbinquitousUbinquitous
committed
feat(Home): 홈페이지 퍼블리싱
1 parent b30fb73 commit 5a03647

12 files changed

+631
-1
lines changed

‎src/templates/home/index.tsx

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,47 @@
1+
import React from "react";
12
import styled from "styled-components";
23
import { Aside } from "@/components/common";
4+
import { flex } from "@/styles";
5+
import { Column, Row } from "@/components/Flex";
6+
import { useMainQuery } from "./services/query.service";
7+
import HomeMeal from "./layouts/HomeMeal";
8+
import HomeReserve from "./layouts/HomeReserve";
9+
import HomeMainBanner from "./layouts/HomeMainBanner";
10+
import HomeCalender from "./layouts/HomeCalender";
11+
import HomePost from "./layouts/HomePost";
12+
import HomeRadarChart from "./layouts/HomeRadarChart";
13+
import HomeBamboo from "./layouts/HomeBamboo";
14+
import HomeMiniBanner from "./layouts/HomeMiniBanner";
315

416
const HomePage = () => {
17+
const { data } = useMainQuery();
18+
19+
React.useEffect(() => {
20+
if (data) console.log(data);
21+
}, [data]);
22+
523
return (
624
<Layout>
725
<Container>
8-
<Aside />
26+
<Row gap="8px" width="100%">
27+
<HomeMeal />
28+
<HomeReserve />
29+
<Aside />
30+
</Row>
31+
<Row gap="8px" width="100%">
32+
<Column gap="8px" width="100%">
33+
<HomeMainBanner href="/post" />
34+
<Row gap="8px" width="100%">
35+
<HomeCalender />
36+
<HomePost />
37+
</Row>
38+
</Column>
39+
<HomeRadarChart />
40+
</Row>
41+
<Row gap="8px" width="100%">
42+
<HomeBamboo />
43+
<HomeMiniBanner href="https://buma.wiki" />
44+
</Row>
945
</Container>
1046
</Layout>
1147
);
@@ -20,6 +56,8 @@ const Layout = styled.div`
2056
const Container = styled.div`
2157
width: 76%;
2258
height: 100vh;
59+
${flex.COLUMN};
60+
gap: 8px;
2361
`;
2462

2563
export default HomePage;

‎src/templates/home/layouts/HomeBamboo.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { color, font } from "@/styles";
2+
import React from "react";
3+
import styled from "styled-components";
4+
import { BambooIcon } from "@/assets/icons";
5+
import HomeHead from "./HomeHead";
6+
7+
const HomeBamboo = () => {
8+
return (
9+
<Container>
10+
<HomeHead
11+
icon={<BambooIcon />}
12+
title="#34번째 부마숲 이야기"
13+
href="/bamboo"
14+
/>
15+
<StyledContent>
16+
코로나 정책이 완화된 요즘, 인프런에서 주최하는 컨퍼런스 ‘인프콘’,
17+
안드로이드 개발자를 위한 ‘드로이드 나이츠’, … 그 외 많은 IT인들을 위한
18+
행사들이 곳곳에서 열리고 있습니다. 여러분은 컨퍼런스, IT 대회 등 각종 IT
19+
행사들에 관심이 있으신가요? 특히 컨퍼런스는 IT 업계의 능력있는 사람들이
20+
모여 지식을 공유하고, 네트워킹하며 지식의 뿌리를 넓힐 수 있는 매력적인
21+
행사입니다. 공모전과 같은 대회 역시 자신의 역량을 시험하고 경험을 넓힐
22+
수 있는 귀중한 기회가 되기도 합니다. 여러분은 개발자 컨퍼런스, 대회를
23+
찾을 때 어떻게 찾으시나요? 어쩌다가 생각나서 행사 모음 사이트를
24+
검색하거나 지인에게 건너 듣진 않으신가요? 이런 IT 행사 정보를 간편하게
25+
한 데 모아볼 수 있다면 좋지 않을까요?
26+
</StyledContent>
27+
</Container>
28+
);
29+
};
30+
31+
const Container = styled.div`
32+
width: 100%;
33+
height: 20vh;
34+
background-color: ${color.white};
35+
border-radius: 4px;
36+
`;
37+
38+
const StyledContent = styled.p`
39+
${font.p2};
40+
padding: 6px 26px;
41+
overflow: hidden;
42+
text-overflow: ellipsis;
43+
display: -webkit-box;
44+
line-height: 180%;
45+
-webkit-line-clamp: 3; /* 라인수 */
46+
-webkit-box-orient: vertical;
47+
word-wrap: break-word;
48+
`;
49+
50+
export default HomeBamboo;

‎src/templates/home/layouts/HomeCalender.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { color, flex, font } from "@/styles";
2+
import { CalenderIcon } from "@/assets/icons";
3+
import React from "react";
4+
import styled from "styled-components";
5+
import HomeHead from "./HomeHead";
6+
7+
const HomeCalender = () => {
8+
return (
9+
<Container>
10+
<HomeHead icon={<CalenderIcon />} title="오늘의 일정" href="/Calender" />
11+
<CalenderBody>
12+
<CalenderType>학년일정</CalenderType>
13+
<CalenderContent>
14+
- asdmlkasnl
15+
<br />
16+
- asdmlkasnl
17+
<br />
18+
- asdmlkasnl
19+
<br />- asdmlkasnl
20+
</CalenderContent>
21+
</CalenderBody>
22+
</Container>
23+
);
24+
};
25+
26+
const Container = styled.div`
27+
width: 46%;
28+
height: 30vh;
29+
border-radius: 4px;
30+
background-color: ${color.white};
31+
${flex.COLUMN};
32+
`;
33+
34+
const CalenderBody = styled.div`
35+
width: 100%;
36+
height: 100%;
37+
padding: 6px 24px;
38+
${flex.COLUMN};
39+
`;
40+
41+
const CalenderType = styled.span`
42+
${font.p3};
43+
font-weight: 500;
44+
`;
45+
46+
const CalenderContent = styled.p`
47+
${font.p3};
48+
padding-left: 6px;
49+
white-space: pre;
50+
line-height: 160%;
51+
`;
52+
53+
export default HomeCalender;

‎src/templates/home/layouts/HomeHead.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Arrow } from "@/assets/icons";
2+
import { color, flex, font } from "@/styles";
3+
import Link from "next/link";
4+
import React from "react";
5+
import styled from "styled-components";
6+
7+
interface IHomeHeadProps {
8+
icon: React.JSX.Element;
9+
title: string;
10+
href?: string;
11+
}
12+
13+
const HomeHead = ({ icon, title, href }: IHomeHeadProps) => {
14+
return (
15+
<Container>
16+
{icon}
17+
<StyledTitle>{title}</StyledTitle>
18+
{href && (
19+
<StyledLink href={href} target="_blank">
20+
<StyledLinkHref />
21+
<Arrow direction="right" width={8} />
22+
</StyledLink>
23+
)}
24+
</Container>
25+
);
26+
};
27+
28+
const Container = styled.div`
29+
margin: 4px 12px;
30+
${flex.HORIZONTAL};
31+
gap: 8px;
32+
padding: 6px 8px;
33+
border-bottom: 1px solid ${color.on_tertiary};
34+
`;
35+
36+
const StyledTitle = styled.span`
37+
${font.p3};
38+
font-weight: 500;
39+
`;
40+
41+
const StyledLink = styled(Link)`
42+
${flex.HORIZONTAL};
43+
margin-left: auto;
44+
gap: 4px;
45+
`;
46+
47+
const StyledLinkHref = styled.span`
48+
${font.p4};
49+
color: ${color.gray};
50+
51+
&:after {
52+
content: "자세히 보기";
53+
}
54+
`;
55+
56+
export default HomeHead;

‎src/templates/home/layouts/HomeMainBanner.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { TestBanner } from "@/assets/images";
2+
import Image from "next/image";
3+
import { useRouter } from "next/navigation";
4+
import React from "react";
5+
import styled from "styled-components";
6+
7+
interface IHomeMainBannerProps {
8+
href?: string;
9+
}
10+
11+
const HomeMainBanner = ({ href }: IHomeMainBannerProps) => {
12+
const router = useRouter();
13+
14+
return (
15+
<Container>
16+
<StyledBanner
17+
onClick={() => router.push(href || "")}
18+
src={TestBanner}
19+
alt="banner"
20+
/>
21+
</Container>
22+
);
23+
};
24+
25+
const Container = styled.div`
26+
width: 100%;
27+
height: 5.5vw;
28+
`;
29+
30+
const StyledBanner = styled(Image)`
31+
width: 100%;
32+
height: fit-content;
33+
overflow: hidden;
34+
cursor: pointer;
35+
`;
36+
37+
export default HomeMainBanner;

‎src/templates/home/layouts/HomeMeal.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { color, flex, font } from "@/styles";
2+
import { MealIcon } from "@/assets/icons";
3+
import React from "react";
4+
import styled from "styled-components";
5+
import HomeHead from "./HomeHead";
6+
7+
const HomeMeal = () => {
8+
return (
9+
<Container>
10+
<HomeHead icon={<MealIcon />} title="오늘의 급식" href="/meal" />
11+
<MealBody>
12+
<MealContent>
13+
asdmlkasnl
14+
<br />
15+
asdmlkasnl
16+
<br />
17+
asdmlkasnl
18+
<br />
19+
asdmlkasnl
20+
</MealContent>
21+
<MealCalorie>852.1</MealCalorie>
22+
</MealBody>
23+
</Container>
24+
);
25+
};
26+
27+
const Container = styled.div`
28+
width: 46%;
29+
height: 30vh;
30+
border-radius: 4px;
31+
background-color: ${color.white};
32+
${flex.COLUMN};
33+
`;
34+
35+
const MealBody = styled.div`
36+
width: 100%;
37+
height: 100%;
38+
padding: 6px 24px;
39+
display: flex;
40+
`;
41+
42+
const MealContent = styled.p`
43+
${font.p3};
44+
white-space: pre;
45+
line-height: 160%;
46+
`;
47+
48+
const MealCalorie = styled.span`
49+
${font.caption};
50+
color: ${color.gray};
51+
margin-left: auto;
52+
53+
&:after {
54+
content: "kcal";
55+
}
56+
`;
57+
58+
export default HomeMeal;

‎src/templates/home/layouts/HomeMiniBanner.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TestSmallBanner } from "@/assets/images";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import React from "react";
5+
import styled from "styled-components";
6+
7+
interface IHomeMiniBanner {
8+
href: string;
9+
}
10+
11+
const HomeMiniBanner = ({ href }: IHomeMiniBanner) => {
12+
return (
13+
<Container href={href || "/"} target="_blank">
14+
<StyledBanner src={TestSmallBanner} alt="small banner" />
15+
</Container>
16+
);
17+
};
18+
19+
const Container = styled(Link)`
20+
width: 31.2vw;
21+
`;
22+
23+
const StyledBanner = styled(Image)`
24+
width: 100%;
25+
height: 100%;
26+
border-radius: 4px;
27+
`;
28+
29+
export default HomeMiniBanner;

‎src/templates/home/layouts/HomePost.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { color } from "@/styles";
2+
import { ChatIcon, NoticeIcon } from "@/assets/icons";
3+
import React from "react";
4+
import styled from "styled-components";
5+
import HomeHead from "./HomeHead";
6+
import HomePostList from "./HomePostList";
7+
8+
const HomePost = () => {
9+
return (
10+
<Container>
11+
<PostBox>
12+
<HomeHead icon={<NoticeIcon />} title="공지사항" href="/post" />
13+
<HomePostList />
14+
</PostBox>
15+
<PostBox>
16+
<HomeHead icon={<ChatIcon />} title="일반 게시판" href="/post" />
17+
<HomePostList />
18+
</PostBox>
19+
</Container>
20+
);
21+
};
22+
23+
const Container = styled.div`
24+
width: 100%;
25+
height: 30vh;
26+
background-color: ${color.white};
27+
border-radius: 4px;
28+
display: flex;
29+
`;
30+
31+
const PostBox = styled.div`
32+
width: 100%;
33+
height: 100%;
34+
`;
35+
36+
export default HomePost;

0 commit comments

Comments
 (0)