[URECA-80] Feat: 상품 UI 수정 및 주석 제거

src/app/(policy)/policy/_components/policy-agree/index.tsx

@@ -16,9 +16,9 @@ export const PolicyAgree = () => {
 
   const [agreements, setAgreements] = useState({
     all: false,
-    terms: false, // 이용약관 동의(필수)
-    privacy: false, // 개인정보 수집 및 이용동의(필수)
-    service: false, // 서비스 이용 안내 동의 (필수)
+    terms: false,
+    privacy: false,
+    service: false,
   });
 
   const isAllRequiredChecked = agreements.terms && agreements.privacy && agreements.service;

src/app/(private)/help/page.tsx

@@ -39,17 +39,10 @@ const HelpPage = () => {
   return (
     <div className="min-h-dvh bg-[#FFF6FA]">
       <div className="relative flex h-21 items-center bg-[#A86B8F] pl-4">
-        <button
-          type="button"
-          // className="text-bg-[#FFF6FA] absolute top-5 left-4 flex h-10 w-10 items-center justify-center text-2xl font-semibold hover:opacity-50"
-          className="w-fit"
-          onClick={() => router.back()}
-          aria-label="닫기"
-        >
+        <button type="button" className="w-fit" onClick={() => router.back()} aria-label="닫기">
           <X className="h-9 w-9" />
         </button>
         <div className="absolute top-13 right-4 h-14 w-14">
-          {/* <Image src={Mooner} alt="" fill className="object-contain" /> */}
           <Moono />
         </div>
       </div>

src/app/(private)/mypage/page.tsx

@@ -7,7 +7,6 @@ import { AnimatePresence } from 'framer-motion';
 
 import { SettingsGroup } from '@/app/(private)/mypage/_components/settings-group';
 import { SettingsRow } from '@/app/(private)/mypage/_components/settings-row';
-import ThemeIcon from '@/assets/icons/mypage/accessibility.svg';
 import LogoutIcon from '@/assets/icons/mypage/account.svg';
 import BookmarkIcon from '@/assets/icons/mypage/bookmark.svg';
 import GroupIcon from '@/assets/icons/mypage/group.svg';
@@ -97,17 +96,6 @@ const Mypage = () => {
     },
   ];
 
-  const 설정Rows = [
-    {
-      label: '테마 변경',
-      icon: <ThemeIcon width="18px" height="18px" />,
-    },
-    {
-      label: '언어 설정',
-      icon: <GroupIcon width="18px" height="18px" />,
-    },
-  ];
-
   const 지원Rows = [
     {
       label: '약관',
@@ -185,12 +173,6 @@ const Mypage = () => {
             ))}
           </SettingsGroup>
 
-          <SettingsGroup title="설정">
-            {설정Rows.map((row) => (
-              <SettingsRow key={row.label} icon={row.icon} label={row.label} onClick={noop} />
-            ))}
-          </SettingsGroup>
-
           <SettingsGroup title="지원">
             {지원Rows.map((row) => (
               <SettingsRow

src/app/(private)/page.tsx

@@ -2,6 +2,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+
 import { useQueryClient } from '@tanstack/react-query';
 
 import FileIcon from '@/assets/icons/summary/File1.png';
@@ -124,24 +125,6 @@ const Home = () => {
           })}
         </section>
 
-        <section className="space-y-3">
-          <p className="text-sm font-semibold text-gray-900">LG 유플러스 new 상담 챗봇</p>
-
-          <button
-            type="button"
-            onClick={() => router.push('/call')}
-            className="flex w-full items-center gap-3 rounded-2xl border border-[#E6E2F4] bg-[#F5F3FF] px-4 py-3 shadow-sm"
-          >
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-xs font-semibold text-gray-700 shadow-sm">
-              CHAT
-            </div>
-            <div>
-              <p className="text-xs text-gray-600">유플러스만의 상담 요약 서비스</p>
-              <p className="text-sm font-semibold text-gray-900">요플이를 지금 당장 만나보세요!</p>
-            </div>
-          </button>
-        </section>
-
         <section className="space-y-3">
           <div className="flex items-center justify-between">
             <p className="text-sm font-semibold text-gray-900">최근 상담</p>
@@ -162,21 +145,21 @@ const Home = () => {
 
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <p className="text-sm font-semibold text-gray-900">5G 요금제 변경 상담</p>
+                  <p className="text-sm font-semibold text-gray-900">유럽 여행 로밍 캐스터</p>
                   <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] text-gray-500">
                     오늘
                   </span>
                 </div>
                 <p className="mt-1 text-xs text-gray-500">
-                  현재 사용 중인 요금제에서 5G 프리미어 에센셜로 변경 시 월 69,000원으로 데이터
-                  무제한 사용 가능합니다.
+                  유럽으로 출국하는 고객이 이탈리아, 스위스, 벨기에에서 사용할 데이터 중심 로밍
+                  요금제 "로밍캐스터"를 신청했습니다.
                 </p>
                 <div className="mt-2 flex gap-2">
                   <span className="rounded-full bg-pink-50 px-2 py-0.5 text-[10px] text-pink-600">
                     요금제
                   </span>
                   <span className="rounded-full bg-pink-50 px-2 py-0.5 text-[10px] text-pink-600">
-                    5G
+                    로밍
                   </span>
                 </div>
               </div>

src/app/(private)/recommend/page.tsx

@@ -14,7 +14,7 @@ const page = () => {
   const products = data?.products ?? [];
 
   return (
-    <div className="mx-auto w-full overflow-hidden pb-10">
+    <div className="mx-auto w-full overflow-hidden pb-24">
       <Header />
       {isLoading && (
         <div className="mt-4">

src/app/(private)/summary/_components/SummaryFailPage.tsx

@@ -11,24 +11,19 @@ export const SummaryFailPage = () => {
 
   return (
     <>
-      {/* 헤더 */}
       <div className="relative flex h-14 items-center bg-white">
-        {/* 뒤로가기 */}
         <button type="button" onClick={() => router.push('/summary')} className="ml-4">
           <Image src={Back} alt="돌아가기" width={20} height={20} priority />
         </button>
 
-        {/* 중앙 타이틀 */}
         <p className="absolute left-1/2 -translate-x-1/2 text-sm font-semibold">상담 요약</p>
       </div>
 
-      {/* 본문 */}
       <div className="mx-auto mt-10 flex min-h-[450px] w-[335px] flex-col items-center justify-center rounded-2xl bg-white p-6 shadow-lg">
         <Image src={SummaryFail} alt="요약 실패" width={201} height={223} priority />
 
         <p className="mt-4 text-sm font-semibold text-[#6E1E3D]">요청을 다시 시도해주세요</p>
 
-        {/* 로딩 스피너 */}
         <div className="mt-4 h-6 w-6 animate-spin rounded-full border-2 border-[#6E1E3D] border-t-transparent" />
       </div>
     </>

src/app/(private)/summary/bookmarks/page.tsx

@@ -41,7 +41,7 @@ export default function BookmarkedSummaryPage() {
     );
   }
 
-  // 2. 인증 실패/미로그인(= userId 없음 포함)
+  // 2. 인증 실패/미로그인
   if (meError || !Number.isFinite(userId)) {
     return (
       <>

src/app/(public)/oauth/callback/[provider]/page.tsx

@@ -93,7 +93,7 @@ export default function OAuthCallbackPage() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center p-12">
       <Loading />
-      <p className="text-sm text-gray-500">로그인 처리 중입니다...</p>
+      <p className="text-lg font-semibold text-gray-500">로그인 처리 중입니다...</p>
     </div>
   );
 }

src/app/(public)/onboarding/page.tsx

@@ -15,16 +15,12 @@ export default function OnboardingPage() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-evenly">
-      {/* 인디케이터 */}
       <OnboardingIndicator currentIndex={currentIndex} onChangeIndex={setCurrentIndex} />
 
-      {/* 슬라이드 영역 */}
       <OnboardingSlider currentIndex={currentIndex} onChangeIndex={setCurrentIndex} />
 
-      {/* 버튼 영역 */}
       <OnboardingButton onClick={() => setIsLoginOpen(true)} />
 
-      {/* 로그인 모달 */}
       <AnimatePresence>
         {isLoginOpen && <LoginModal onClose={() => setIsLoginOpen(false)} />}
       </AnimatePresence>

src/app/(public)/splash/page.tsx

@@ -21,7 +21,7 @@ export default function SplashPage() {
 
   return (
     <div className="relative h-dvh w-full overflow-hidden bg-[#FFF7F8]">
-      <div className="relative z-20 mt-[112px] ml-6 flex flex-col items-start">
+      <div className="relative z-20 mt-28 ml-6 flex flex-col items-start">
         <p className="text-[18px] leading-[1.45] font-medium text-[#111111]">
           내 손안에
           <br />

src/app/layout.tsx

@@ -17,12 +17,6 @@ const geistMono = Geist_Mono({
   subsets: ['latin'],
 });
 
-// const pretendard = localFont({
-//   src: '../assets/fonts/PretendardVariable.woff2',
-//   variable: '--font-pretendard',
-//   display: 'swap',
-// });
-
 const gowunDodum = localFont({
   src: '../assets/fonts/GowunDodum.ttf',
   variable: '--font-gowun-dodum',

src/components/chat/call-modal/index.tsx

@@ -53,7 +53,7 @@ export const CallModal = ({ content }: { content: ChatProps[] }) => {
           size={'m'}
           className="w-32.75"
           onClick={() => {
-            // TODO: 전화 로직 구현
+            // 전화 로직
           }}
         >
           연결하기

src/components/counseling-recommend/recommend-card/index.tsx

@@ -16,9 +16,19 @@ export const RecommendCard = ({ product, best }: RecommendCardProps) => {
   const content = (
     <div className={`grid w-[160px] rounded-2xl ${best} `}>
       <div className="mx-4 my-4 grid gap-2">
-        <div className="line-clamp-3 text-[14px] font-semibold break-keep">{product.name}</div>
-        <div className="text-primary-500 text-[20px] font-bold">
-          {priceLabel ?? <span className="text-gray-400">TBD</span>}
+        <div className="line-clamp-3 text-center text-[14px] font-semibold break-keep">
+          {product.name}
+        </div>
+        <div className="text-primary-500 text-center text-[16px] font-bold">
+          {priceLabel ? (
+            <>
+              <span className="text-sm text-black">월 </span>
+              <span>{priceLabel}</span>
+              <span className="text-sm text-black">원 부터</span>
+            </>
+          ) : (
+            <span className="text-gray-400">상담 시 안내</span>
+          )}
         </div>
         <div className="grid gap-1">
           {product.content?.split(', ').map((text, idx) => (

src/components/counseling-recommend/recommend-cardlist/index.tsx

@@ -6,15 +6,18 @@ import { RecommendCard } from '../recommend-card';
 
 export const RecommendCardList = ({ products }: { products: ProductProps[] }) => {
   return (
-    <div className="mt-3 grid w-full grid-cols-3 justify-items-center gap-4 md:grid-cols-4 lg:grid-cols-5">
-      {products.map((product, idx) => (
-        <RecommendCard
-          key={product.productId}
-          is_monthly={true}
-          product={product}
-          best={idx === 0 ? 'border border-primary-500 bg-white' : 'border border-gray bg-white'}
-        />
-      ))}
+    <div className="mt-3">
+      <div className="no-scrollbar flex gap-4 overflow-x-auto overscroll-x-contain scroll-smooth px-1">
+        {products.map((product) => (
+          <div key={product.productId} className="shrink-0">
+            <RecommendCard
+              product={product}
+              is_monthly={true}
+              best=" border border-primary-500 bg-white"
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

src/components/layout/header/index.tsx

@@ -14,7 +14,6 @@ export const Header = () => {
       </Link>
 
       <Link href="/call">
-        {/* <Image src={Call} alt="상담하기" width={40} height={40} className="cursor-pointer" /> */}
         <Call className="cursor-pointer" />
       </Link>
     </header>

src/components/map/map-footer/index.tsx

@@ -8,7 +8,7 @@ interface MapFooterProps {
   children: React.ReactNode;
 }
 
-const DRAG_THRESHOLD = 30; // 살짝만 움직여도 반응
+const DRAG_THRESHOLD = 30;
 
 export const MapFooter = ({ children }: MapFooterProps) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -27,11 +27,9 @@ export const MapFooter = ({ children }: MapFooterProps) => {
         aria-label={isOpen ? '매장 정보 접기' : '매장 정보 펼치기'}
         onDragEnd={(_, info) => {
           if (info.offset.y > DRAG_THRESHOLD && isOpen) {
-            // 아래로 살짝 → 닫기
             setIsOpen(false);
           }
           if (info.offset.y < -DRAG_THRESHOLD && !isOpen) {
-            // 위로 살짝 → 열기
             setIsOpen(true);
           }
         }}

src/components/recommend/product-goods/index.tsx

@@ -9,7 +9,7 @@ export const ProductGoods = ({ product }: { product: ProductProps }) => {
 
   return (
     <Link href={product.link || '#'} target="_blank" rel="noopener noreferrer">
-      <div className="bg-white-light flex h-full w-full cursor-pointer flex-col items-center justify-between gap-1 rounded-[20px] p-3 shadow-[0_0_4px_rgba(0,0,0,0.25)]">
+      <div className="bg-white-light flex h-full w-full cursor-pointer flex-col items-center justify-between gap-2 rounded-[20px] p-2 shadow-[0_0_4px_rgba(0,0,0,0.25)]">
         {product.img && (
           <div className="relative h-28 w-28 overflow-hidden rounded-[20px]">
             <Image
@@ -23,11 +23,11 @@ export const ProductGoods = ({ product }: { product: ProductProps }) => {
           </div>
         )}
 
-        <div className="flex w-full max-w-[50px] min-w-[30px] px-2 text-center leading-none wrap-break-word break-keep">
+        <div className="text-md line-clamp-3 w-full max-w-[90px] px-2 text-center leading-snug break-keep">
           {product.name}
         </div>
-        <div className="flex text-sm font-normal">
-          {priceLabel ? <>월 {priceLabel}원 ~</> : <span className="text-gray-400">TBD</span>}
+        <div className="flex text-sm font-semibold text-black">
+          {priceLabel ? <>월 {priceLabel}원 ~</> : <span className="text-black">상담 시 안내</span>}
         </div>
       </div>
     </Link>

src/components/recommend/product-list/index.tsx

@@ -4,6 +4,7 @@ import type { ProductProps } from '@/types/product/dto';
 import type { CategoryInfo } from '@/types/product/mapper';
 
 import { ProductGoods } from '../product-goods';
+import { ProductPlans } from '../product-plans';
 
 export const ProductList = ({
   category,
@@ -15,9 +16,14 @@ export const ProductList = ({
   return (
     <div className="mt-4 ml-6 text-lg font-bold">
       {category.label}
+
       <div className="no-scrollbar mt-1 flex gap-2 overflow-x-auto overscroll-x-contain scroll-smooth p-0.5">
         {products.map((p) =>
+          p.img ? (
             <ProductGoods key={p.productId} product={p} />
+          ) : (
+            <ProductPlans key={p.productId} product={p} />
+          ),
         )}
       </div>
     </div>

src/components/recommend/product-plans/index.tsx

@@ -2,22 +2,18 @@ import Link from 'next/link';
 
 import type { ProductProps } from '@/types/product/dto';
 
-export const ProductPlans = ({ product }: { product: ProductProps; monthly: boolean }) => {
+export const ProductPlans = ({ product }: { product: ProductProps }) => {
   const priceLabel = typeof product.price === 'number' ? product.price.toLocaleString() : null;
+  console.log('PLAN PRODUCT', product);
 
   return (
     <Link href={product.link || '#'} target="_blank" rel="noopener noreferrer">
-      <div className="bg-white-light border-primary-500 flex h-21.25 w-50 cursor-pointer flex-col justify-between gap-1 truncate rounded-[20px] border-2 p-3">
-        <div className="text-sm leading-none font-normal">{product.desc ?? ''}</div>
-        <div className="line-clamp-2 leading-none wrap-break-word break-keep">{product.name}</div>
-        <div className="flex leading-none text-black">
-          {priceLabel ? (
-            <>
-              {priceLabel}
-            </>
-          ) : (
-            <span className="text-gray-400">TBD</span>
-          )}
+      <div className="bg-white-light border-primary-500 flex h-21.25 w-50 cursor-pointer flex-col justify-evenly gap-1 truncate rounded-[20px] border-2 p-3">
+        <div className="line-clamp-2 text-center text-base leading-none wrap-break-word break-keep">
+          {product.name}
+        </div>
+        <div className="text-center text-sm leading-none text-black">
+          {priceLabel ? <>월 {priceLabel}원 부터</> : <span>상담 시 안내</span>}
         </div>
       </div>
     </Link>

src/hooks/call/useAgora.ts

@@ -10,11 +10,9 @@ import { callApi } from '@/services/call/callApi';
 import { useAppSelector } from '@/store/hooks';
 import type { TokenResponse } from '@/types/call/dto';
 
-//===== 싱글톤 영역 =====
 const tokenRequestCache = new Map<string, Promise<{ data: TokenResponse }>>();
 let globalClient: IAgoraRTCClient | null = null;
 
-//join 상태
 type JoinState = 'IDLE' | 'JOINING' | 'JOINED';
 
 interface UseAgoraReturn {