Skip to content

Commit 9882058

Browse files
UbinquitousUbinquitous
authored
Merge pull request #99 from Team-INSERT/fix/home
홈 레이아웃에 API를 연결하고 버그를 수정했습니다.
2 parents badba6f + 37e1f9b commit 9882058

File tree

13 files changed

+204
-114
lines changed

13 files changed

+204
-114
lines changed

‎src/components/common/Aside/InfomationBox.tsx

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ interface IInfomationBoxProps {
1818

1919
const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
2020
const router = useRouter();
21-
const isLoginedStudent = isLogined && user.role === USER.STUDENT;
2221
const { openModal } = useModal();
2322

2423
const handleLoginButtonClick = () => {
@@ -40,24 +39,20 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
4039
rounded
4140
/>
4241
)}
43-
{isLoginedStudent && (
44-
<>
45-
<Column>
46-
<UserInfoBox>
47-
<UserGrade>{user.grade}</UserGrade>
48-
<UserClass>{user.classNum}</UserClass>
49-
<UserStudentNumber>{user.studentNumber}</UserStudentNumber>
50-
</UserInfoBox>
51-
<Row gap="4px">
52-
<UserName>{user.name}</UserName>
53-
<UserType>{getUserRole(user.role)}</UserType>
54-
</Row>
55-
</Column>
56-
<InfomationButton onClick={handleLoginButtonClick}>
57-
내 정보
58-
</InfomationButton>
59-
</>
60-
)}
42+
<Column>
43+
<UserInfoBox>
44+
<UserGrade>{user.grade}</UserGrade>
45+
<UserClass>{user.classNum}</UserClass>
46+
<UserStudentNumber>{user.studentNumber}</UserStudentNumber>
47+
</UserInfoBox>
48+
<Row gap="4px">
49+
<UserName>{user.name}</UserName>
50+
<UserType>{getUserRole(user.role)}</UserType>
51+
</Row>
52+
</Column>
53+
<InfomationButton onClick={handleLoginButtonClick}>
54+
내 정보
55+
</InfomationButton>
6156
{!isLogined && (
6257
<>
6358
<LoginText>로그인이 필요해요</LoginText>

‎src/components/common/Aside/MeisterBox.tsx

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
11
import styled from "styled-components";
22
import { color, font } from "@/styles";
3-
import { SERVICE } from "@/constants";
43
import { Row } from "@/components/Flex";
5-
6-
const scores = [
7-
{
8-
name: SERVICE.MEISTER.NAME,
9-
type: SERVICE.MEISTER.TYPE,
10-
},
11-
{
12-
name: SERVICE.REWARD_POINTS.NAME,
13-
type: SERVICE.REWARD_POINTS.TYPE,
14-
},
15-
];
4+
import useMeister from "@/hooks/useMeister";
165

176
const MeisterBox = () => {
7+
const { meister } = useMeister();
188
return (
199
<Container>
20-
{scores.map((score) => (
21-
<ScoreHGroup key={score.type}>
22-
<ScoreName>{score.name}</ScoreName>
23-
<Row gap="4px">
24-
<Score>{score.name === SERVICE.MEISTER.NAME ? 159.8 : 26}</Score>
25-
<Rank>{score.name === SERVICE.MEISTER.NAME ? 11 : 4}</Rank>
26-
</Row>
27-
</ScoreHGroup>
28-
))}
10+
<ScoreHGroup>
11+
<ScoreName>인증제 점수</ScoreName>
12+
<Row gap="4px">
13+
<Score>{meister.score}</Score>
14+
</Row>
15+
</ScoreHGroup>
16+
<ScoreHGroup>
17+
<ScoreName>상벌점</ScoreName>
18+
<Row gap="4px">
19+
<Score>{meister.positivePoint - meister.negativePoint}</Score>
20+
</Row>
21+
</ScoreHGroup>
2922
</Container>
3023
);
3124
};

‎src/constants/key.constant.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const KEY = {
1111
RESERVE: "useReserve",
1212
MEISTER: "useMeister",
1313
MEISTER_DETAIL: "useMeisterDetail",
14+
MEISTER_ME: "useMeisterMe",
1415
RANKING: "useRanking",
1516
MAIN: "useMain",
1617
} as const;

‎src/hooks/useMeal.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import dayjs from "dayjs";
2+
3+
const useMeal = () => {
4+
const getMealTime = () => {
5+
const now = dayjs();
6+
const dinnerTime = now.add(1, "hour").add(20, "minute");
7+
const morningTime = now.add(7, "hour");
8+
const lunchTime = now.add(8, "hour");
9+
10+
if (now.isAfter(dinnerTime)) return "DINNER";
11+
if (now.isAfter(morningTime)) return "MORNING";
12+
if (now.isAfter(lunchTime)) return "LUNCH";
13+
return "MORNING";
14+
};
15+
16+
return {
17+
getMealTime,
18+
};
19+
};
20+
21+
export default useMeal;

‎src/hooks/useMeister.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import httpClient from "@/apis/httpClient";
2+
import Storage from "@/apis/storage";
3+
import { authorization } from "@/apis/token";
4+
import { KEY, TOKEN } from "@/constants";
5+
import { meisterStore } from "@/store/meister.store";
6+
import { useQuery } from "@tanstack/react-query";
7+
import React from "react";
8+
import { useRecoilState } from "recoil";
9+
10+
const useMeister = () => {
11+
const [meister, setMeister] = useRecoilState(meisterStore);
12+
13+
const { data: meisterInfo } = useQuery(
14+
[KEY.MEISTER_ME],
15+
async () => {
16+
const { data } = await httpClient.meister.get(authorization());
17+
return data;
18+
},
19+
{ enabled: !!Storage.getItem(TOKEN.ACCESS) },
20+
);
21+
22+
React.useEffect(() => {
23+
if (meisterInfo) setMeister(meisterInfo.meister);
24+
}, [setMeister, meisterInfo]);
25+
26+
return { meister };
27+
};
28+
29+
export default useMeister;

‎src/store/meister.store.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { atom } from "recoil";
2+
3+
export const emptyMeister = {
4+
score: 0,
5+
positivePoint: 0,
6+
negativePoint: 0,
7+
basicJobSkills: 0,
8+
professionalTech: 0,
9+
workEthic: 0,
10+
humanities: 0,
11+
foreignScore: 0,
12+
};
13+
14+
export const meisterStore = atom({
15+
key: "meisterStore",
16+
default: emptyMeister,
17+
});

‎src/templates/home/index.tsx

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,50 @@ import React from "react";
22
import styled from "styled-components";
33
import { Aside } from "@/components/common";
44
import { flex } from "@/styles";
5+
import { getMealName } from "@/helpers";
56
import { Column, Row } from "@/components/Flex";
7+
import useMeal from "@/hooks/useMeal";
68
import { useMainQuery } from "./services/query.service";
79
import HomeMeal from "./layouts/HomeMeal";
810
import HomeReserve from "./layouts/HomeReserve";
911
import HomeMainBanner from "./layouts/HomeMainBanner";
1012
import HomeCalender from "./layouts/HomeCalender";
1113
import HomePost from "./layouts/HomePost";
1214
import HomeRadarChart from "./layouts/HomeRadarChart";
15+
import HomeMiniBanner from "./layouts/HomeMiniBanner";
16+
import HomeBamboo from "./layouts/HomeBamboo";
1317

1418
const HomePage = () => {
15-
const { data } = useMainQuery();
16-
17-
React.useEffect(() => {
18-
if (data) console.log(data);
19-
}, [data]);
19+
const { isSuccess, data } = useMainQuery();
20+
const { getMealTime } = useMeal();
2021

2122
return (
2223
<Layout>
23-
<Container>
24-
<Row gap="8px" width="100%">
25-
<HomeMeal />
26-
<HomeReserve />
27-
<Aside />
28-
</Row>
29-
<Row gap="8px" width="100%">
30-
<Column gap="8px" width="100%">
31-
<HomeMainBanner href="/post" />
32-
<Row gap="8px" width="100%">
33-
<HomeCalender />
34-
<HomePost />
35-
</Row>
36-
</Column>
37-
<HomeRadarChart />
38-
</Row>
39-
</Container>
24+
{isSuccess && (
25+
<Container>
26+
<Row gap="8px" width="100%">
27+
<HomeMeal
28+
{...data.meal.data[getMealTime()]}
29+
name={getMealName(getMealTime())}
30+
/>
31+
<HomeReserve />
32+
<Aside />
33+
</Row>
34+
<Row gap="8px" width="100%">
35+
<Column gap="8px" width="100%">
36+
<HomeMainBanner href="/post" />
37+
<Row gap="8px" width="100%">
38+
<HomeCalender {...data.calender} />
39+
<HomePost notice={data.notice} common={data.common} />
40+
</Row>
41+
</Column>
42+
<Column gap="8px">
43+
<HomeMiniBanner href="https://buma.wiki" />
44+
<HomeBamboo {...data.bamboo} />
45+
</Column>
46+
</Row>
47+
</Container>
48+
)}
4049
</Layout>
4150
);
4251
};

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,29 @@ import styled from "styled-components";
44
import { BambooIcon } from "@/assets/icons";
55
import HomeHead from "./HomeHead";
66

7-
const HomeBamboo = () => {
7+
interface IHomeBambooProps {
8+
allowedId: number;
9+
content: string;
10+
}
11+
12+
const HomeBamboo = ({ allowedId, content }: IHomeBambooProps) => {
813
return (
914
<Container>
1015
<HomeHead
1116
icon={<BambooIcon />}
12-
title="#34번째 부마숲 이야기"
17+
title={`#${allowedId}번째 부마숲 이야기`}
1318
href="/bamboo"
1419
/>
1520
<StyledContent>
16-
코로나 정책이 완화된 요즘, 인프런에서 주최하는 컨퍼런스 ‘인프콘’,
17-
안드로이드 개발자를 위한 ‘드로이드 나이츠’, … 그 외 많은 IT인들을 위한
18-
행사들이 곳곳에서 열리고 있습니다. 여러분은 컨퍼런스, IT 대회 등 각종 IT
19-
행사들에 관심이 있으신가요? 특히 컨퍼런스는 IT 업계의 능력있는 사람들이
20-
모여 지식을 공유하고, 네트워킹하며 지식의 뿌리를 넓힐 수 있는 매력적인
21-
행사입니다. 공모전과 같은 대회 역시 자신의 역량을 시험하고 경험을 넓힐
22-
수 있는 귀중한 기회가 되기도 합니다. 여러분은 개발자 컨퍼런스, 대회를
23-
찾을 때 어떻게 찾으시나요? 어쩌다가 생각나서 행사 모음 사이트를
24-
검색하거나 지인에게 건너 듣진 않으신가요? 이런 IT 행사 정보를 간편하게
25-
한 데 모아볼 수 있다면 좋지 않을까요?
21+
{content.length > 30 ? `${content}...` : content}
2622
</StyledContent>
2723
</Container>
2824
);
2925
};
3026

3127
const Container = styled.div`
3228
width: 100%;
33-
height: 20vh;
29+
height: 100%;
3430
background-color: ${color.white};
3531
border-radius: 4px;
3632
`;
@@ -42,7 +38,7 @@ const StyledContent = styled.p`
4238
text-overflow: ellipsis;
4339
display: -webkit-box;
4440
line-height: 180%;
45-
-webkit-line-clamp: 3; /* 라인수 */
41+
-webkit-line-clamp: 2; /* 라인수 */
4642
-webkit-box-orient: vertical;
4743
word-wrap: break-word;
4844
`;

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,24 @@ import React from "react";
44
import styled from "styled-components";
55
import HomeHead from "./HomeHead";
66

7-
const HomeCalender = () => {
7+
interface IHomeCalenderProps {
8+
calenders: Array<{
9+
id: number;
10+
title: string;
11+
type: string;
12+
}>;
13+
}
14+
15+
const HomeCalender = ({ calenders }: IHomeCalenderProps) => {
816
return (
917
<Container>
1018
<HomeHead icon={<CalenderIcon />} title="오늘의 일정" href="/Calender" />
1119
<CalenderBody>
12-
<CalenderType>학년일정</CalenderType>
13-
<CalenderContent>
14-
- asdmlkasnl
15-
<br />
16-
- asdmlkasnl
17-
<br />
18-
- asdmlkasnl
19-
<br />- asdmlkasnl
20-
</CalenderContent>
20+
{calenders.map((calender) => (
21+
<CalenderContent>
22+
- {calender.title} ({calender.type})
23+
</CalenderContent>
24+
))}
2125
</CalenderBody>
2226
</Container>
2327
);
@@ -38,11 +42,6 @@ const CalenderBody = styled.div`
3842
${flex.COLUMN};
3943
`;
4044

41-
const CalenderType = styled.span`
42-
${font.p3};
43-
font-weight: 500;
44-
`;
45-
4645
const CalenderContent = styled.p`
4746
${font.p3};
4847
padding-left: 6px;

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import React from "react";
44
import styled from "styled-components";
55
import HomeHead from "./HomeHead";
66

7-
const HomeMeal = () => {
7+
interface IHomeMealProps {
8+
content: string;
9+
cal: string;
10+
name: string;
11+
}
12+
13+
const HomeMeal = ({ content, cal, name }: IHomeMealProps) => {
814
return (
915
<Container>
1016
<HomeHead icon={<MealIcon />} title="오늘의 급식" href="/meal" />
1117
<MealBody>
12-
<MealContent>
13-
asdmlkasnl
14-
<br />
15-
asdmlkasnl
16-
<br />
17-
asdmlkasnl
18-
<br />
19-
asdmlkasnl
20-
</MealContent>
21-
<MealCalorie>852.1</MealCalorie>
18+
<MealContent dangerouslySetInnerHTML={{ __html: content }} />
19+
<MealCalorie>
20+
{name}, {cal}
21+
</MealCalorie>
2222
</MealBody>
2323
</Container>
2424
);
@@ -42,7 +42,8 @@ const MealBody = styled.div`
4242
const MealContent = styled.p`
4343
${font.p3};
4444
white-space: pre;
45-
line-height: 160%;
45+
font-size: 12px;
46+
line-height: 180%;
4647
`;
4748

4849
const MealCalorie = styled.span`

0 commit comments

Comments
 (0)