Skip to content

Commit dabc2e3

Browse files
claycatclaycat
authored
Merge pull request #176 from boostcampwm-2022/develop
v0.2
2 parents e378af2 + 163ab09 commit dabc2e3

File tree

17 files changed

+93
-23
lines changed

17 files changed

+93
-23
lines changed

โ€Žclient/src/components/Card/Card.styles.tsโ€Ž

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ export const Summary = styled.div`
1818
`;
1919

2020
export const CardTitle = styled.p`
21-
${fontMedium(COLOR.BLACK, 700)}
21+
${fontMedium(COLOR.BLACK, 700)};
22+
white-space: nowrap;
23+
overflow: hidden;
24+
text-overflow: ellipsis;
2225
`;
2326

2427
export const SummaryBody = styled.div`

โ€Žclient/src/components/Card/Card.tsxโ€Ž

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1+
import useCardMap from "#hooks/useCardMap";
2+
import { LatLng } from "#types/LatLng";
13
import { ReactNode } from "react";
24
import { useNavigate } from "react-router-dom";
35
import { CardWrapper, Summary } from "./Card.styles";
46

57
interface CardProps {
6-
img: string;
78
to: string;
89
children: ReactNode;
10+
path: LatLng[];
911
}
1012

11-
const Card = ({ img, to, children }: CardProps) => {
13+
const Card = ({ to, children, path }: CardProps) => {
1214
const navigate = useNavigate();
15+
const { renderMap } = useCardMap({ runningPath: path });
1316
return (
1417
<CardWrapper onClick={() => navigate(to)}>
15-
<img src={img} />
18+
{renderMap()}
1619
<Summary>{children}</Summary>
1720
</CardWrapper>
1821
);

โ€Žclient/src/components/Card/CourseCard/CourseCard.stories.tsxโ€Ž

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ _CourseCard.args = {
2020
data: {
2121
id: 1,
2222
title: "Dirty Ho (Lan tou He)",
23-
img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
2423
path: [
2524
{ lat: 126.57091836134346, lng: 33.45090000378721 },
2625
{ lat: 126.57004847387998, lng: 33.450635526049844 },

โ€Žclient/src/components/Card/CourseCard/CourseCard.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface CourseCardProps {
99

1010
const CourseCard = ({ data }: CourseCardProps) => {
1111
return (
12-
<Card img={data.img} to={`/course/${data.id}`}>
12+
<Card to={`/course/${data.id}`} path={data.path}>
1313
<CardTitle>{data.title}</CardTitle>
1414
<SummaryBody>
1515
<div>

โ€Žclient/src/components/Card/RecruitCard/RecruitCard.stories.tsxโ€Ž

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ _RecruitCard.args = {
2828
course: {
2929
id: 1,
3030
title: "Dirty Ho (Lan tou He)",
31-
img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
3231
path: [
3332
{ lat: 126.57091836134346, lng: 33.45090000378721 },
3433
{ lat: 126.57004847387998, lng: 33.450635526049844 },

โ€Žclient/src/components/Card/RecruitCard/RecruitCard.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface RecruitCardProps {
1010

1111
const RecruitCard = ({ data }: RecruitCardProps) => {
1212
return (
13-
<Card img={data.course.img} to={`/recruit/${data.id}`}>
13+
<Card to={`/recruit/${data.id}`} path={data.course.path}>
1414
<SummaryHead>
1515
<CardTitle>{data.title}</CardTitle>
1616
<PeopleWrapper>

โ€Žclient/src/components/Card/RecruitTextCard/RecruitTextCard.tsxโ€Ž

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ const Card = styled.div`
1111
div:not(:last-child) {
1212
margin-bottom: 30px;
1313
}
14+
h2 {
15+
display: block;
16+
white-space: nowrap;
17+
text-overflow: ellipsis;
18+
overflow: hidden;
19+
max-width: 100%;
20+
margin-bottom: 12px;
21+
}
1422
`;
1523

1624
interface RecruitTextCardProps {
@@ -21,6 +29,7 @@ const RecruitTextCard = ({ data }: RecruitTextCardProps) => {
2129
const navigate = useNavigate();
2230
return (
2331
<Card onClick={() => navigate(`/recruit/${data.id}`)}>
32+
<h2>{data.title}</h2>
2433
<DetailLabel title="์ถœ๋ฐœ์ " value={data.course.hDong.name || ""} />
2534
<DetailLabel title="์ด๊ฑฐ๋ฆฌ" value={`${(data.course.pathLength / 1000).toFixed(1)}km`} />
2635
<DetailLabel title="ํŽ˜์ด์Šค" value={getDisplayPaceString(data.pace)} />

โ€Žclient/src/components/DetailLabel/DetailLabel.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const TextWrapper = styled.div`
1010
${fontSmall(COLOR.LIGHT_GRAY, 400)};
1111
}
1212
p:nth-child(2) {
13-
${fontSmall(COLOR.BLACK, 500)}
13+
${fontSmall(COLOR.BLACK, 500)};
1414
}
1515
`;
1616

โ€Žclient/src/hooks/useCardMap.tsxโ€Ž

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { LatLng } from "#types/LatLng";
2+
import { MapProps } from "#types/MapProps";
3+
import { getBounds, getMiddlePoint } from "#utils/pathUtils";
4+
import { useCallback, useEffect, useRef, useState } from "react";
5+
6+
const useCardMap = ({ runningPath }: Pick<MapProps, "runningPath">) => {
7+
const container = useRef<HTMLDivElement>(null);
8+
const map = useRef<kakao.maps.Map>();
9+
const polyLineRef = useRef<kakao.maps.Polyline>();
10+
const [path] = useState<kakao.maps.LatLng[]>([]);
11+
12+
useEffect(() => {
13+
if (!container.current || !runningPath) return;
14+
const { lat, lng } = getMiddlePoint(runningPath);
15+
map.current = new kakao.maps.Map(container.current, {
16+
center: new kakao.maps.LatLng(lat, lng),
17+
});
18+
19+
polyLineRef.current = new kakao.maps.Polyline({
20+
map: map.current,
21+
path,
22+
});
23+
map.current.setZoomable(false);
24+
map.current.setDraggable(false);
25+
drawPath(runningPath);
26+
const pathBounds = getBounds(runningPath || []);
27+
const sw = new kakao.maps.LatLng(pathBounds.minLat, pathBounds.minLng);
28+
const ne = new kakao.maps.LatLng(pathBounds.maxLat, pathBounds.maxLng);
29+
const mapBounds = new kakao.maps.LatLngBounds(sw, ne);
30+
map.current.setBounds(mapBounds);
31+
}, [runningPath, map]);
32+
33+
const getLaMaByLatLng = (point: LatLng): kakao.maps.LatLng => {
34+
return new kakao.maps.LatLng(point.lat, point.lng);
35+
};
36+
37+
const drawPath = useCallback(
38+
async (path: LatLng[] | undefined) => {
39+
if (!path) {
40+
return;
41+
}
42+
if (!polyLineRef.current) return;
43+
polyLineRef.current.setPath(path.map((point) => getLaMaByLatLng(point)));
44+
},
45+
[polyLineRef],
46+
);
47+
48+
return {
49+
map: map.current,
50+
path,
51+
renderMap: () => (
52+
<div style={{ position: "relative" }}>
53+
<div ref={container} style={{ width: "100%", aspectRatio: `16 / 9` }} />
54+
</div>
55+
),
56+
};
57+
};
58+
59+
export default useCardMap;

โ€Žclient/src/pages/Courses/Courses.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ const Courses = () => {
4141

4242
const courseQueryParams = () => {
4343
const param: any = {};
44-
if (titleFilter) param.title = "true";
45-
if (authorFilter) param.author = "true";
44+
param.title = titleFilter ? "true" : "false";
45+
param.author = authorFilter ? "true" : "false";
4646
if (searchContent !== "") param.query = searchContent;
4747
param.maxLen = (currentDistanceFilter.max * 1000).toString();
4848
param.minLen = (currentDistanceFilter.min * 1000).toString();

0 commit comments

Comments
ย (0)