Chore: UI/UX 완성도 조정 체크용 dev merge

client/package.json

@@ -15,11 +15,13 @@
     "axios": "^1.10.0",
     "framer-motion": "^12.18.1",
     "react": "^19.1.0",
+    "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",
     "react-gradient-scroll-indicator": "^1.0.1",
     "react-router-dom": "^7.6.2",
     "react-spring": "^10.0.1",
     "react-spring-bottom-sheet": "3.5.0-alpha.0",
+    "react-use": "^17.6.0",
     "socket.io-client": "^4.8.1",
     "swiper": "^11.2.8",
     "tailwindcss": "^4.1.10"

client/src/App.tsx

@@ -14,12 +14,16 @@ import ComparePage from './pages/ComparePage';
 import TestResultPage from './pages/TestResultPage';
 import MainPage from './pages/MainPage';
 import Footer from './components/common/Footer';
+import ServiceGuidePage from './pages/ServiceGuidePage';
 
 const MainLayout = () => {
   return (
     <>
       <div className=" min-h-screen flex flex-col">
-        <main className="flex-grow mt-[55px]">
+        <main
+          className="flex-1"
+          style={{ minHeight: 'calc(100vh - 50px - 80px)' }}
+        >
           <Outlet />
         </main>
         <Footer />
@@ -40,6 +44,7 @@ function App() {
           <Route path="test-wait" element={<TestWaitingPage />} />
           <Route path="test-result" element={<TestResultPage />} />
           <Route path="compare" element={<ComparePage />} />
+          <Route path="service-guide" element={<ServiceGuidePage />} />
           <Route path="/chat-test" element={<ChatTestPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>

client/src/api/testPlan.ts

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const baseURL = import.meta.env.VITE_API_BASE_URL;
+
+export const getAllPlans = async () => {
+  const response = await axios.get(`${baseURL}/api/plan/explore`);
+  return response.data;
+};

client/src/components/ComparePage/BenefitComparisonRow.tsx

@@ -1,32 +1,91 @@
+import type { ReactNode } from 'react';
+import sorryRobotIcon from '@/assets/icon/sorry_robot_icon.png';
+
 interface BenefitComparisonRowProps {
-  leftContent: string | null;
-  rightContent: string | null;
+  leftContent: ReactNode | null;
+  rightContent: ReactNode | null;
   title: string;
   leftIcon?: string;
   rightIcon?: string;
   iconAlt?: string;
+  hasLeftPlan?: boolean;
+  hasRightPlan?: boolean;
 }
+const ImageWrapper = ({ children }: { children: ReactNode }) => (
+  <div className="w-[80px] h-[68px] flex items-center justify-center">
+    {children}
+  </div>
+);
 
+const TextWrapper = ({ children }: { children: ReactNode }) => (
+  <div className="min-h-[32px] text-xs text-center">{children}</div>
+);
+const SorryMessage = ({ title }: { title: string }) => (
+  <>
+    <ImageWrapper>
+      <img
+        src={sorryRobotIcon}
+        alt="sorry robot"
+        // className="w-[80px] h-[68px]"
+      />
+    </ImageWrapper>
+    <TextWrapper>
+      <div className="text-gray400">
+        {title.includes('혜택')
+          ? '제공되는 혜택이 없습니다'
+          : '제공되는 서비스가 없습니다'}
+      </div>
+    </TextWrapper>
+  </>
+);
 const BenefitComparisonRow: React.FC<BenefitComparisonRowProps> = ({
   leftContent,
   rightContent,
   title,
   leftIcon,
   rightIcon,
   iconAlt = 'benefit icon',
+  hasLeftPlan,
+  hasRightPlan,
 }) => {
   return (
     <div className="flex w-full">
-      <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center">
-        {leftIcon && leftContent && <img src={leftIcon} alt={iconAlt} />}
-        <div className="text-xs text-gray500">{leftContent || '-'}</div>
-      </div>
-      <div className="flex-[1] text-sm flex items-center justify-center">
-        {title}
+      <div className="flex-[2] relative flex flex-col items-center gap-1 ">
+        {leftIcon && leftContent && (
+          <ImageWrapper>
+            <img src={leftIcon} alt={iconAlt} />
+          </ImageWrapper>
+        )}
+        {leftContent ? (
+          <TextWrapper>
+            <div className="text-gray500">{leftContent}</div>
+          </TextWrapper>
+        ) : hasLeftPlan ? (
+          <SorryMessage title={title} />
+        ) : (
+          <TextWrapper>
+            <div className="text-xs text-gray500"></div>
+          </TextWrapper>
+        )}
       </div>
+      <div className="pt-[13%] w-25 text-sm flex justify-center">{title}</div>
       <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center">
-        {rightIcon && rightContent && <img src={rightIcon} alt={iconAlt} />}
-        <div className="text-xs text-gray500">{rightContent || '-'}</div>
+        {rightIcon && rightContent && (
+          <ImageWrapper>
+            <img src={rightIcon} alt={iconAlt} />
+          </ImageWrapper>
+        )}
+        {rightContent ? (
+          <TextWrapper>
+            <div className="text-xs text-gray500">{rightContent}</div>
+          </TextWrapper>
+        ) : hasRightPlan ? (
+          <SorryMessage title={title} />
+        ) : (
+          <TextWrapper>
+            <div className="text-xs text-gray500"></div>
+          </TextWrapper>
+        )}
       </div>
     </div>
   );

client/src/components/ComparePage/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 interface CategoryCarouselProps {
   categoryList: string[];
@@ -58,7 +58,7 @@ const Carousel: React.FC<CategoryCarouselProps> = ({
   return (
     <div
       ref={scrollContainerRef}
-      className="w-full flex gap-2 overflow-x-auto py-3 text-xs select-none"
+      className="w-full flex gap-2 overflow-x-auto py-[5px] px-5 text-xs select-none"
       style={{
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
@@ -69,11 +69,14 @@ const Carousel: React.FC<CategoryCarouselProps> = ({
       {categoryList.map((label, idx) => (
         <div
           key={idx}
-          className={`h-9 rounded-xl shadow-small flex justify-center items-center cursor-pointer transition-colors duration-100 px-[13px] whitespace-nowrap ${
-            activeIndex === idx
-              ? 'bg-secondary-purple-60 text-background-40'
-              : 'bg-white'
-          }`}
+          className={`h-9 rounded-xl shadow-sm flex justify-center items-center cursor-pointer
+    transition-colors duration-200 ease-in-out px-[13px] whitespace-nowrap
+    ${
+      activeIndex === idx
+        ? 'bg-secondary-purple-60 text-background-40'
+        : 'bg-white text-gray-700 hover:bg-gray-100'
+    }
+  `}
           onClick={() => handleCardClick(idx)}
         >
           {label}

client/src/components/ComparePage/ComparisonActionButtons.tsx

@@ -1,3 +1,5 @@
+import Button from '@/components/common/Button';
+
 interface ComparisonActionButtonsProps {
   leftButtonText?: string;
   rightButtonText?: string;
@@ -13,29 +15,31 @@ const ComparisonActionButtons: React.FC<ComparisonActionButtonsProps> = ({
 }) => {
   return (
     <div
-      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[24px] max-w-[560px] h-[116px]"
+      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[50px] max-w-[560px]"
       style={{ width: 'calc(100% - 40px)' }}
     >
       <div className="flex w-full">
-        <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center rounded-[10px]">
+        <div className="flex-[2] relative flex flex-col items-center justify-center rounded-[10px]">
           {leftButtonText && (
-            <button
+            <Button
               onClick={onLeftClick}
               className="text-xs text-background-40 font-semibold bg-primary-pink w-full h-[38px] flex items-center justify-center rounded-[10px] cursor-pointer shadow-basic"
+              variant="custom"
             >
               {leftButtonText}
-            </button>
+            </Button>
           )}
         </div>
         <div className="flex-[1] text-sm flex items-center justify-center" />
         <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center rounded-[10px]">
           {rightButtonText && (
-            <button
+            <Button
               onClick={onRightClick}
               className="text-xs text-background-40 font-semibold bg-primary-pink w-full h-[38px] flex items-center justify-center rounded-[10px] cursor-pointer shadow-basic"
+              variant="custom"
             >
               {rightButtonText}
-            </button>
+            </Button>
           )}
         </div>
       </div>

client/src/components/ComparePage/ComparisonResult.tsx

@@ -1,9 +1,10 @@
-import DataComparisonBar from './DataComparisonBar';
-import BenefitComparisonRow from './BenefitComparisonRow';
-import ComparisonActionButtons from './ComparisonActionButtons';
 import togetherIcon from '@/assets/image/card_family.png';
 import premiumAddonsIcon from '@/assets/icon/special.png';
 import mediaAddonsIcon from '@/assets/icon/media.png';
+import BenefitText from '@/components/common/BenefitText';
+import DataComparisonBar from '@/components/ComparePage/DataComparisonBar';
+import BenefitComparisonRow from '@/components/ComparePage/BenefitComparisonRow';
+import ComparisonActionButtons from '@/components/ComparePage/ComparisonActionButtons';
 import type { Plan } from '@/components/types/Plan';
 
 interface ComparisonResultProps {
@@ -75,40 +76,48 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
             leftLabel={leftDataLabel}
             rightLabel={rightDataLabel}
             title="데이터"
-            // showComparison={hasBothPlans}
           />
           <DataComparisonBar
             leftValue={leftSharedDataValue}
             rightValue={rightSharedDataValue}
             leftLabel={leftSharedDataLabel}
             rightLabel={rightSharedDataLabel}
             title="공유 데이터"
-            // showComparison={hasBothPlans}
           />
         </div>
 
         <div className="w-full bg-gray200 h-[1px] my-5" />
 
         <div className="flex flex-col justify-center items-center text-center w-full gap-6 mb-[106px]">
           <BenefitComparisonRow
-            leftContent={selectedLeft?.bundleBenefit || null}
-            rightContent={selectedRight?.bundleBenefit || null}
+            leftContent={
+              selectedLeft?.bundleBenefit ? (
+                <BenefitText text={selectedLeft.bundleBenefit} />
+              ) : null
+            }
+            rightContent={
+              selectedRight?.bundleBenefit ? (
+                <BenefitText text={selectedRight.bundleBenefit} />
+              ) : null
+            }
             title="결합 할인"
             leftIcon={selectedLeft?.bundleBenefit ? togetherIcon : undefined}
             rightIcon={selectedRight?.bundleBenefit ? togetherIcon : undefined}
             iconAlt="togetherIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
 
           <BenefitComparisonRow
             leftContent={
-              selectedLeft?.premiumAddons
-                ? `(택1) ${selectedLeft?.premiumAddons}`
-                : null
+              selectedLeft?.premiumAddons ? (
+                <BenefitText text={`(택1) ${selectedLeft.premiumAddons}`} />
+              ) : null
             }
             rightContent={
-              selectedRight?.premiumAddons
-                ? `(택1) ${selectedRight?.premiumAddons}`
-                : null
+              selectedRight?.premiumAddons ? (
+                <BenefitText text={`(택1) ${selectedRight.premiumAddons}`} />
+              ) : null
             }
             title="프리미엄 서비스"
             leftIcon={
@@ -118,23 +127,27 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
               selectedRight?.premiumAddons ? premiumAddonsIcon : undefined
             }
             iconAlt="premiumIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
 
           <BenefitComparisonRow
             leftContent={
-              selectedLeft?.mediaAddons
-                ? `(택1) ${selectedLeft?.mediaAddons}`
-                : null
+              selectedLeft?.mediaAddons ? (
+                <BenefitText text={`(택1) ${selectedLeft.mediaAddons}`} />
+              ) : null
             }
             rightContent={
-              selectedRight?.mediaAddons
-                ? `(택1) ${selectedRight?.mediaAddons}`
-                : null
+              selectedRight?.mediaAddons ? (
+                <BenefitText text={`(택1) ${selectedRight.mediaAddons}`} />
+              ) : null
             }
             title="미디어 서비스"
             leftIcon={selectedLeft?.mediaAddons ? mediaAddonsIcon : undefined}
             rightIcon={selectedRight?.mediaAddons ? mediaAddonsIcon : undefined}
             iconAlt="premiumIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
         </div>
       </div>

client/src/components/ComparePage/DataComparisonBar.tsx

@@ -26,7 +26,7 @@ const DataComparisonBar: React.FC<DataComparisonBarProps> = ({
         />
         <div className="text-xs text-gray500">{leftLabel}</div>
       </div>
-      <div className="flex-[1] text-sm">{title}</div>
+      <div className="w-20 text-sm flex justify-center">{title}</div>
       <div className="flex-[2] relative flex flex-col items-start gap-1">
         <div
           className="bg-gradation rounded-r-full h-5 transition-all duration-800"

client/src/components/ComparePage/FilterSection.tsx

@@ -18,14 +18,14 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   onPriceIndexChange,
 }) => {
   return (
-    <div className="w-full pt-2 bg-background-40 z-5">
-      <div className="flex flex-col gap-1">
+    <div className="fixed top-[45px] w-full pt-2 bg-background-40 z-5">
+      <div className="flex flex-col gap-1 px-5">
         <p className="text-[22px] font-semibold">요금제 선택</p>
         <p className="text-[13px] text-gray500">
           비교하고 싶은 요금제를 선택해주세요
         </p>
       </div>
-      <div className="mb-[3px] flex flex-col justify-center ">
+      <div className="pt-2 pb-3 flex flex-col justify-center ">
         <Carousel
           categoryList={dataList}
           activeIndex={activeDataIndex}

client/src/components/ComparePage/PlanDetailInfo.tsx

@@ -1,5 +1,5 @@
+import Button from '@/components/common/Button';
 import type { Plan } from '@/components/types/Plan';
-import Button from '../common/Button';
 
 interface PlanDetailInfoProps {
   plan: Plan;
@@ -18,7 +18,7 @@ const PlanDetailInfo: React.FC<PlanDetailInfoProps> = ({
   const formattedSmsCount =
     plan.smsCount === -1 ? '무제한' : `${plan.smsCount}건`;
   return (
-    <div className="bg-background rounded-b-[7px] p-3 text-[13px] flex flex-col gap-2">
+    <div className="bg-background rounded-b-[7px] p-3 text-[13px] flex flex-col gap-[10px]">
       <div className="flex gap-[5px]">
         <p className="min-w-[90px] text-secondary-purple-80">전화</p>
         <p className="w-full">{formattedVoiceMinutes}</p>
@@ -44,14 +44,15 @@ const PlanDetailInfo: React.FC<PlanDetailInfoProps> = ({
         <p className="w-full">{plan.mediaAddons ? plan.mediaAddons : ' - '}</p>
       </div>
 
-      <div className="h-[43px] mt-2">
+      <div className="mt-">
         <Button
+          className="rounded-[12px] flex items-center justify-center"
           fullWidth
           variant="primary"
           onClick={onClick}
           disabled={disabled}
         >
-          선택하기
+          <span>선택하기</span>
         </Button>
       </div>
     </div>