Merge pull request #43 from SWYP-mingling/feature/QA-midpoint-ui

fix : 중간모임 카테고리 & 환승경로 수정

Author: kangdy25

app/result/[id]/page.tsx

@@ -33,7 +33,7 @@ export default function Page() {
     }
 
     return midpointData.data.map((midpoint, index) => {
-      const { endStation, endStationLine, userRoutes } = midpoint;
+      const { endStation, endStationLine, userRoutes, hot } = midpoint;
 
       const routesWithColor = userRoutes.map((route) => {
         return {
@@ -107,18 +107,52 @@ export default function Page() {
         transferPath: myRoute?.transferPath || [],
         transferPathLines,
         userRoutes: routesWithColor,
+        hot,
       };
     });
   }, [midpointData, myNickname, id]);
 
   // 카테고리 텍스트 생성 함수
-  const getCategoryText = (category: string | undefined): string => {
-    if (!category) return '밍글링 추천 1위';
+  const getCategoryText = (
+    category: string | undefined,
+    hot: boolean | undefined,
+    rank: number,
+  ): string => {
+    const purposeText = '[모임 목적]';
+    const lastChar = purposeText.charCodeAt(purposeText.length - 1);
+    const hasJongseong = (lastChar - 0xac00) % 28 !== 0;
+    const purposeTextWithPostfix = `${purposeText}${hasJongseong ? '이' : '가'} 많은 장소`;
+
+   
+    if (hot === true && rank === 1) {
+      return `밍글링 추천 1위 · ${purposeTextWithPostfix}`;
+    }
+
+    
+    else if (hot === true && rank === 2) {
+      return `밍글링 추천 2위 · ${purposeTextWithPostfix}`;
+    }
+
+    
+    else if (hot === true) {
+      return purposeTextWithPostfix;
+    }
+
+
+    else if (rank === 1) {
+      return '밍글링 추천 1위';
+    }
+
+    else if (rank === 2) {
+      return '밍글링 추천 2위';
+    }
+
+    else if (!category) return '밍글링 추천 1위';
 
     // 카테고리 종성에 따라 "이/가"를 다르게 렌더링
-    const lastChar = category.charCodeAt(category.length - 1);
-    const hasJongseong = (lastChar - 0xac00) % 28 !== 0;
-    return `${category}${hasJongseong ? '이' : '가'} 많은 장소`;
+    const categoryLastChar = category.charCodeAt(category.length - 1);
+    const categoryHasJongseong = (categoryLastChar - 0xac00) % 28 !== 0;
+    return `${category}${categoryHasJongseong ? '이' : '가'} 많은 장소`;
   };
 
   const [selectedResultId, setSelectedResultId] = useState<number>(1);
@@ -151,7 +185,7 @@ export default function Page() {
           <>
             <section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5 md:gap-3">
               <div className="px-5 pt-5 md:p-0">
-                <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
                   <button
                     onClick={handleModifyStart}
                     className="flex items-center justify-center"
@@ -162,14 +196,7 @@ export default function Page() {
                   <div className="text-gray-9 text-[22px] font-semibold tracking-[-1.94%]">
                     최종 위치 결과 Top3
                   </div>
-                  <button
-                    className="text-blue-5 bg-blue-1 hover:bg-blue-2 flex h-7 cursor-pointer items-center gap-1 rounded px-2.5 text-[11px] font-semibold transition-colors"
-                    type="button"
-                    onClick={(e) => openModal('SHARE', { meetingId: id }, e)}
-                  >
-                    <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
-                    결과 공유하기
-                  </button>
+                
                 </div>
               </div>
 
@@ -207,7 +234,7 @@ export default function Page() {
                       locationResults.map((result) => {
                         const category =
                           meetingData?.data?.purposes?.[meetingData.data.purposes.length - 1];
-                        const categoryText = getCategoryText(category);
+                        const categoryText = getCategoryText(category, result.hot, result.id); 
 
                         const handleRecommendClick = (e: React.MouseEvent) => {
                           e.stopPropagation();
@@ -309,12 +336,13 @@ export default function Page() {
                     )}
                   </div>
                 </div>
-
+ 
                 <button
-                  onClick={handleModifyStart}
-                  className="bg-blue-5 hover:bg-blue-8 absolute right-5 bottom-0 left-5 h-12 rounded text-lg font-semibold text-white transition-transform active:scale-[0.98] md:right-0 md:left-0"
+                  onClick={(e) => openModal('SHARE', { meetingId: id }, e)}
+                  className="flex items-center justify-center gap-2.5 bg-blue-5 hover:bg-blue-8 absolute right-5 bottom-0 left-5 h-12 rounded text-lg font-semibold text-white transition-transform active:scale-[0.98] md:right-0 md:left-0"
                 >
-                  내 출발지 수정하기
+                   <Image src="/icon/share-white.svg" alt="공유 아이콘" width={20} height={20} />
+                  결과 공유하기
                 </button>
               </div>
             </section>

components/modal/transferModal.tsx

@@ -116,43 +116,6 @@ export default function TransferModal({
     }
   };
 
-  // stations 배열에서 호선별 경로 추출 함수
-  const extractRouteSteps = (route: UserRoute) => {
-    const steps: Array<{ linenumber: string; station: string; isLast: boolean }> = [];
-
-    if (!route.stations || route.stations.length === 0) {
-      return steps;
-    }
-
-    let currentLine = route.stations[0]?.linenumber || '';
-
-    route.stations.forEach((station, index) => {
-      if (station.linenumber !== currentLine || index === route.stations.length - 1) {
-        if (currentLine) {
-          steps.push({
-            linenumber: currentLine,
-            station: station.station,
-            isLast: index === route.stations.length - 1,
-          });
-        }
-        currentLine = station.linenumber;
-      }
-    });
-
-    if (route.stations.length > 0) {
-      const lastStation = route.stations[route.stations.length - 1];
-      if (steps.length === 0 || steps[steps.length - 1].station !== lastStation.station) {
-        steps.push({
-          linenumber: lastStation.linenumber,
-          station: lastStation.station,
-          isLast: true,
-        });
-      }
-    }
-
-    return steps;
-  };
-
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent
@@ -176,8 +139,6 @@ export default function TransferModal({
             </div>
           ) : (
             userRoutes.map((route, index) => {
-              const routeSteps = extractRouteSteps(route);
-
               return (
                 <div
                   key={index}
@@ -200,34 +161,68 @@ export default function TransferModal({
                   {/* 하단: 환승 경로 (세로 배치) */}
                   <div className="relative flex gap-4 p-5">
                     <div className="flex flex-col items-center gap-[10px]">
-                      {routeSteps.map((step, idx) => (
-                        <div key={idx} className="flex flex-col items-center gap-[10px]">
-                          <div
-                            className={`flex min-w-[60px] items-center justify-center gap-1 rounded-[5px] px-[7px] py-[2px] text-[13px] leading-[1.385] font-normal tracking-[0.252px] text-white ${getLineBadgeStyle(
-                              step.linenumber
-                            )}`}
-                          >
-                            <Image src="/icon/train.svg" alt="train" width={12} height={12} />
-                            <span>{step.linenumber}</span>
-                          </div>
+                      
+                      <div className="flex flex-col items-center gap-[10px]">
+                        <div
+                          className={`flex min-w-[60px] items-center justify-center gap-1 rounded-[5px] px-[7px] py-[2px] text-[13px] leading-[1.385] font-normal tracking-[0.252px] text-white ${getLineBadgeStyle(
+                            route.startStationLine
+                          )}`}
+                        >
+                          <Image src="/icon/train.svg" alt="train" width={12} height={12} />
+                          <span>{route.startStationLine}</span>
+                        </div>
 
+                        {route.transferPath && route.transferPath.length > 0 && (
                           <div className="flex items-center justify-center">
                             <Image src="/icon/down.svg" alt="arrow-down" width={12} height={12} />
                           </div>
-                        </div>
-                      ))}
+                        )}
+                      </div>
 
-                      <div className="bg-gray-8 flex min-w-[60px] items-center justify-center rounded-[5px] px-[7px] py-[2px] text-[13px] leading-[1.385] font-normal tracking-[0.252px] text-white">
-                        하차
+                      
+                      {route.transferPath &&
+                        route.transferPath.map((transfer, idx) => (
+                          <div key={idx} className="flex flex-col items-center gap-[10px]">
+                            <div
+                              className={`flex min-w-[60px] items-center justify-center gap-1 rounded-[5px] px-[7px] py-[2px] text-[13px] leading-[1.385] font-normal tracking-[0.252px] text-white ${getLineBadgeStyle(
+                                transfer.linenumber
+                              )}`}
+                            >
+                              <Image src="/icon/train.svg" alt="train" width={12} height={12} />
+                              <span>{transfer.linenumber}</span>
+                            </div>
+
+                            {idx < route.transferPath.length - 1 && (
+                              <div className="flex items-center justify-center">
+                                <Image src="/icon/down.svg" alt="arrow-down" width={12} height={12} />
+                              </div>
+                            )}
+                          </div>
+                        ))}
+
+                      
+                      <div className="flex flex-col items-center gap-[10px]">
+                        <div className="flex items-center justify-center">
+                          <Image src="/icon/down.svg" alt="arrow-down" width={12} height={12} />
+                        </div>
+                        <div className="bg-gray-8 flex min-w-[60px] items-center justify-center rounded-[5px] px-[7px] py-[2px] text-[13px] leading-[1.385] font-normal tracking-[0.252px] text-white">
+                          하차
+                        </div>
                       </div>
                     </div>
 
                     <div className="text-gray-8 flex flex-col gap-[30px] text-[13px] leading-[1.385] font-normal tracking-[0.252px]">
-                      {routeSteps.map((step, idx) => (
-                        <span key={idx}>{step.station}역</span>
-                      ))}
+                      
+                      <span>{route.startStation}역</span>
+
+                     
+                      {route.transferPath &&
+                        route.transferPath.map((transfer, idx) => (
+                          <span key={idx}>{transfer.station}역</span>
+                        ))}
 
-                      <span>{endStation || routeSteps[routeSteps.length - 1]?.station}역</span>
+                      {/* 종료역 */}
+                      <span>{endStation}역</span>
                     </div>
                   </div>
                 </div>

public/icon/share-white.svg

@@ -70,6 +70,7 @@ export type MeetingStatusResponse = ApiResponse<MeetingStatusData>;
 export interface MidpointData {
   endStation: string;
   endStationLine: string;
+  hot: boolean;
   latitude: number;
   longitude: number;
   userRoutes: {