Merge pull request #176 from boostcampwm-2022/develop

v0.2
boostcampwm-2022 · Dec 2, 2022 · dabc2e3 · dabc2e3
2 parents e378af2 + 163ab09
commit dabc2e3
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 23 deletions.
diff --git a/client/src/components/Card/Card.styles.ts b/client/src/components/Card/Card.styles.ts
@@ -18,7 +18,10 @@ export const Summary = styled.div`
 `;
 
 export const CardTitle = styled.p`
-    ${fontMedium(COLOR.BLACK, 700)}
+    ${fontMedium(COLOR.BLACK, 700)};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 `;
 
 export const SummaryBody = styled.div`

diff --git a/client/src/components/Card/Card.tsx b/client/src/components/Card/Card.tsx
@@ -1,18 +1,21 @@
+import useCardMap from "#hooks/useCardMap";
+import { LatLng } from "#types/LatLng";
 import { ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import { CardWrapper, Summary } from "./Card.styles";
 
 interface CardProps {
-    img: string;
     to: string;
     children: ReactNode;
+    path: LatLng[];
 }
 
-const Card = ({ img, to, children }: CardProps) => {
+const Card = ({ to, children, path }: CardProps) => {
     const navigate = useNavigate();
+    const { renderMap } = useCardMap({ runningPath: path });
     return (
         <CardWrapper onClick={() => navigate(to)}>
-            <img src={img} />
+            {renderMap()}
             <Summary>{children}</Summary>
         </CardWrapper>
     );

diff --git a/client/src/components/Card/CourseCard/CourseCard.stories.tsx b/client/src/components/Card/CourseCard/CourseCard.stories.tsx
@@ -20,7 +20,6 @@ _CourseCard.args = {
     data: {
         id: 1,
         title: "Dirty Ho (Lan tou He)",
-        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",
         path: [
             { lat: 126.57091836134346, lng: 33.45090000378721 },
             { lat: 126.57004847387998, lng: 33.450635526049844 },

diff --git a/client/src/components/Card/CourseCard/CourseCard.tsx b/client/src/components/Card/CourseCard/CourseCard.tsx
@@ -9,7 +9,7 @@ interface CourseCardProps {
 
 const CourseCard = ({ data }: CourseCardProps) => {
     return (
-        <Card img={data.img} to={`/course/${data.id}`}>
+        <Card to={`/course/${data.id}`} path={data.path}>
             <CardTitle>{data.title}</CardTitle>
             <SummaryBody>
                 <div>

diff --git a/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx b/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx
@@ -28,7 +28,6 @@ _RecruitCard.args = {
         course: {
             id: 1,
             title: "Dirty Ho (Lan tou He)",
-            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",
             path: [
                 { lat: 126.57091836134346, lng: 33.45090000378721 },
                 { lat: 126.57004847387998, lng: 33.450635526049844 },

diff --git a/client/src/components/Card/RecruitCard/RecruitCard.tsx b/client/src/components/Card/RecruitCard/RecruitCard.tsx
@@ -10,7 +10,7 @@ interface RecruitCardProps {
 
 const RecruitCard = ({ data }: RecruitCardProps) => {
     return (
-        <Card img={data.course.img} to={`/recruit/${data.id}`}>
+        <Card to={`/recruit/${data.id}`} path={data.course.path}>
             <SummaryHead>
                 <CardTitle>{data.title}</CardTitle>
                 <PeopleWrapper>

diff --git a/client/src/components/Card/RecruitTextCard/RecruitTextCard.tsx b/client/src/components/Card/RecruitTextCard/RecruitTextCard.tsx
@@ -11,6 +11,14 @@ const Card = styled.div`
     div:not(:last-child) {
         margin-bottom: 30px;
     }
+    h2 {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 100%;
+        margin-bottom: 12px;
+    }
 `;
 
 interface RecruitTextCardProps {
@@ -21,6 +29,7 @@ const RecruitTextCard = ({ data }: RecruitTextCardProps) => {
     const navigate = useNavigate();
     return (
         <Card onClick={() => navigate(`/recruit/${data.id}`)}>
+            <h2>{data.title}</h2>
             <DetailLabel title="출발점" value={data.course.hDong.name || ""} />
             <DetailLabel title="총거리" value={`${(data.course.pathLength / 1000).toFixed(1)}km`} />
             <DetailLabel title="페이스" value={getDisplayPaceString(data.pace)} />

diff --git a/client/src/components/DetailLabel/DetailLabel.tsx b/client/src/components/DetailLabel/DetailLabel.tsx
@@ -10,7 +10,7 @@ const TextWrapper = styled.div`
         ${fontSmall(COLOR.LIGHT_GRAY, 400)};
     }
     p:nth-child(2) {
-        ${fontSmall(COLOR.BLACK, 500)}
+        ${fontSmall(COLOR.BLACK, 500)};
     }
 `;
 

diff --git a/client/src/hooks/useCardMap.tsx b/client/src/hooks/useCardMap.tsx
@@ -0,0 +1,59 @@
+import { LatLng } from "#types/LatLng";
+import { MapProps } from "#types/MapProps";
+import { getBounds, getMiddlePoint } from "#utils/pathUtils";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const useCardMap = ({ runningPath }: Pick<MapProps, "runningPath">) => {
+    const container = useRef<HTMLDivElement>(null);
+    const map = useRef<kakao.maps.Map>();
+    const polyLineRef = useRef<kakao.maps.Polyline>();
+    const [path] = useState<kakao.maps.LatLng[]>([]);
+
+    useEffect(() => {
+        if (!container.current || !runningPath) return;
+        const { lat, lng } = getMiddlePoint(runningPath);
+        map.current = new kakao.maps.Map(container.current, {
+            center: new kakao.maps.LatLng(lat, lng),
+        });
+
+        polyLineRef.current = new kakao.maps.Polyline({
+            map: map.current,
+            path,
+        });
+        map.current.setZoomable(false);
+        map.current.setDraggable(false);
+        drawPath(runningPath);
+        const pathBounds = getBounds(runningPath || []);
+        const sw = new kakao.maps.LatLng(pathBounds.minLat, pathBounds.minLng);
+        const ne = new kakao.maps.LatLng(pathBounds.maxLat, pathBounds.maxLng);
+        const mapBounds = new kakao.maps.LatLngBounds(sw, ne);
+        map.current.setBounds(mapBounds);
+    }, [runningPath, map]);
+
+    const getLaMaByLatLng = (point: LatLng): kakao.maps.LatLng => {
+        return new kakao.maps.LatLng(point.lat, point.lng);
+    };
+
+    const drawPath = useCallback(
+        async (path: LatLng[] | undefined) => {
+            if (!path) {
+                return;
+            }
+            if (!polyLineRef.current) return;
+            polyLineRef.current.setPath(path.map((point) => getLaMaByLatLng(point)));
+        },
+        [polyLineRef],
+    );
+
+    return {
+        map: map.current,
+        path,
+        renderMap: () => (
+            <div style={{ position: "relative" }}>
+                <div ref={container} style={{ width: "100%", aspectRatio: `16 / 9` }} />
+            </div>
+        ),
+    };
+};
+
+export default useCardMap;
diff --git a/client/src/pages/Courses/Courses.tsx b/client/src/pages/Courses/Courses.tsx
@@ -41,8 +41,8 @@ const Courses = () => {
 
     const courseQueryParams = () => {
         const param: any = {};
-        if (titleFilter) param.title = "true";
-        if (authorFilter) param.author = "true";
+        param.title = titleFilter ? "true" : "false";
+        param.author = authorFilter ? "true" : "false";
         if (searchContent !== "") param.query = searchContent;
         param.maxLen = (currentDistanceFilter.max * 1000).toString();
         param.minLen = (currentDistanceFilter.min * 1000).toString();

diff --git a/client/src/pages/MockRecruits.tsx b/client/src/pages/MockRecruits.tsx
@@ -85,13 +85,11 @@ const MockRecruits = () => {
             pace: randomPace,
             userId: userInfo.userIdx,
         };
-        console.log(randomRecruit);
         return randomRecruit;
     };
 
     const sendAxiosRequest = async (recruit: any) => {
-        const response = await post("/recruit", await recruit);
-        console.log(response);
+        await post("/recruit", await recruit);
     };
     const handleSubmit = async () => {
         for (let i = 0; i < reps; i++) {

diff --git a/client/src/pages/NewCourse/NewCourse.tsx b/client/src/pages/NewCourse/NewCourse.tsx
@@ -31,7 +31,6 @@ const NewCourse = () => {
     const checkFormValidation = () => {
         if (title && path.length) {
             handleToggleConfirmModal();
-            console.log(title);
         }
     };
 

diff --git a/client/src/pages/Recruits/Recruits.tsx b/client/src/pages/Recruits/Recruits.tsx
@@ -47,9 +47,9 @@ const Recruits = () => {
 
     const recruitQueryParams = () => {
         const param: any = {};
-        if (titleFilter) param.title = "true";
-        if (authorFilter) param.author = "true";
-        if (availFilter) param.avail = "true";
+        param.title = titleFilter ? "true" : "false";
+        param.author = authorFilter ? "true" : "false";
+        param.avail = availFilter ? "true" : "false";
         if (searchContent !== "") param.query = searchContent;
         param.maxLen = (currentDistanceFilter.max * 1000).toString();
         param.minLen = (currentDistanceFilter.min * 1000).toString();

diff --git a/client/src/types/Course.ts b/client/src/types/Course.ts
@@ -4,7 +4,6 @@ import { LatLng } from "./LatLng";
 export interface Course {
     id: number;
     title: string;
-    img: string;
     path: LatLng[];
     pathLength: number;
     hDong: hDong;

diff --git a/client/src/utils/pathUtils.ts b/client/src/utils/pathUtils.ts
@@ -1,9 +1,11 @@
-export const getMiddlePoint = (path: { lat: number; lng: number }[]) => {
+import { LatLng } from "#types/LatLng";
+
+export const getMiddlePoint = (path: LatLng[]) => {
     const bounds = getBounds(path);
     return { lat: (bounds.minLat + bounds.maxLat) / 2, lng: (bounds.minLng + bounds.maxLng) / 2 };
 };
 
-export const getBounds = (path: { lat: number; lng: number }[]) => {
+export const getBounds = (path: LatLng[]) => {
     let minLat = 90;
     let maxLat = -90;
     let minLng = 180;

diff --git a/server/src/course/course.service.ts b/server/src/course/course.service.ts
@@ -18,7 +18,7 @@ export class CourseService {
             return [];
         }
 
-        if (!queryParams.getTitle() && !queryParams.getAuthor()) {
+        if (!queryParams.getTitle() && !queryParams.getAuthor() && queryParams.getQuery()) {
             return [];
         }
 

diff --git a/server/src/recruit/recruit.service.ts b/server/src/recruit/recruit.service.ts
@@ -37,7 +37,7 @@ export class RecruitService {
             return [];
         }
 
-        if (!queryParams.getTitle() && !queryParams.getAuthor()) {
+        if (!queryParams.getTitle() && !queryParams.getAuthor() && queryParams.getQuery()) {
             return [];
         }