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

* [URECA-80] fix: 추천 페이지 상품 UI 수정

* [URECA-80] fix: 상품 UI 수정

* [URECA-80] feat: 스플래시 페이지 setTimeout 시간 변경

* [URECA-80] chore: 불필요한 주석 제거

* [URECA-80] fix: 테스트 주석 및 css 문법 수정

Author: joonhyong

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 />