Merge branch 'develop' into 'main'

src/entities/home/plansCard/PlansCard.tsx

@@ -13,7 +13,7 @@ export function PlansCard({
   return (
     <>
       <div className='flex min-h-[48rem] flex-col justify-between rounded-12 border border-stroke-border-neutral-default bg-background-gray-default p-32 md:last:col-span-2 lg:last:col-span-1'>
-        <div className='felx h-fit w-full flex-col gap-32'>
+        <div className='flex h-fit w-full flex-col gap-xl'>
           <div className='flex h-fit w-full flex-col gap-12'>
             {/* 플랜 이름 ex. Free  */}
             <span className='= text-ibm-title-lg-normal text-text-and-icon-default'>

src/shared/ui/LockTooltip.tsx

@@ -42,7 +42,7 @@ export function LockTooltip({
           <TooltipPrimitive.Positioner
             side={side}
             align={align}
-            sideOffset={20}>
+            sideOffset={12}>
             <TooltipPrimitive.Popup
               className={cn(
                 'relative flex items-center justify-center gap-10 rounded-lg bg-white px-20 py-16 text-noto-caption-lg-bold whitespace-pre-wrap text-text-and-icon-primary shadow-[0px_2px_6px_rgba(14,38,70,0.24)]',

src/widgets/home/ui/HeroMain.tsx

@@ -21,9 +21,9 @@ export function HeroMain() {
           className='object-cover'
         />
         <div className='absolute top-[10.6rem] left-0 flex w-full flex-col items-center gap-24'>
-          <h3 className='text-center text-heading-md leading-heading-md text-white'>
+          <h3 className='text-center text-heading-sm leading-heading-sm text-white'>
             인플루언서와 마케터가 만나는 공간,
-            <strong className='bg-gradient-to-b from-[#BBBDF8] to-[#B9CCF6] bg-clip-text text-transparent drop-shadow-[0_0_100px_#5942F8] filter'>
+            <strong className='ml-6 bg-gradient-to-b from-[#BBBDF8] to-[#B9CCF6] bg-clip-text text-heading-md leading-heading-md text-transparent drop-shadow-[0_0_100px_#5942F8] filter'>
               인플레이스
             </strong>
           </h3>

src/widgets/videoDetail/stats/ui/VideoStatsCard.tsx

@@ -2,7 +2,8 @@ import { type ReactNode } from 'react'
 import { cn } from '@/shared/lib/utils'
 import { formatKoreanUnit } from '@/shared/lib/format'
 import type { KpiMetric } from '@/entities/video'
-import InfoIcon from '@/shared/assets/info-bold.svg'
+import IconQuestion from '@/shared/assets/question-bold.svg'
+import { LockTooltip } from '@/shared/ui/LockTooltip'
 
 type ValueFormat = 'korean' | 'percent' | 'float'
 
@@ -11,11 +12,13 @@ interface VideoStatsCardProps {
   label: string
   description?: string
   hasTooltip?: boolean
+  tooltipLabel?: string
   metric?: KpiMetric | null
   valueFormat: ValueFormat
 }
 
-const NO_DATA_MESSAGE = '데이터가 충분히 모이지 않아 분석 결과를 제공할 수 없어요'
+const NO_DATA_MESSAGE =
+  '데이터가 충분히 모이지 않아 분석 결과를 제공할 수 없어요'
 
 function formatValue(value: number, format: ValueFormat): string {
   switch (format) {
@@ -63,11 +66,12 @@ export function VideoStatsCard({
   label,
   description,
   hasTooltip = false,
+  tooltipLabel,
   metric,
   valueFormat,
 }: VideoStatsCardProps) {
   return (
-    <div className='flex w-full flex-1 items-center gap-24 rounded-12 bg-white p-32 shadow-[0px_2px_6px_0px_rgba(13,13,13,0.04)] sm:min-w-[37.4rem] sm:max-w-[55.8rem]'>
+    <div className='flex w-full flex-1 items-center gap-24 rounded-12 bg-white p-32 shadow-[0px_2px_6px_0px_rgba(13,13,13,0.04)] sm:max-w-[55.8rem] sm:min-w-[37.4rem]'>
       {/* 왼쪽: 아이콘 + 레이블 */}
       <div className='flex min-w-0 flex-1 items-center gap-16'>
         <div className='flex shrink-0 items-center rounded-[1.5rem] bg-background-neutral-default p-5'>
@@ -80,12 +84,16 @@ export function VideoStatsCard({
             {label}
           </p>
           {description && (
-            <div className='flex items-center gap-4'>
-              <p className='whitespace-nowrap text-noto-caption-md-normal text-text-and-icon-secondary'>
+            <div className='z-2 flex items-center gap-2'>
+              <p className='text-noto-caption-md-normal whitespace-nowrap text-text-and-icon-secondary'>
                 {description}
               </p>
               {hasTooltip && (
-                <InfoIcon className='size-12 shrink-0 text-text-and-icon-secondary' />
+                <LockTooltip side='top' align='center' label={tooltipLabel}>
+                  <button type='button' aria-label={`${label} 지표 안내 보기`}>
+                    <IconQuestion className='size-16 text-text-and-icon-disabled' />
+                  </button>
+                </LockTooltip>
               )}
             </div>
           )}

src/widgets/videoDetail/stats/ui/VideoStatsSection.tsx

@@ -16,7 +16,7 @@ import ParticipationIcon from '@/shared/assets/participation-bold.svg'
 import VphIcon from '@/shared/assets/vph-bold.svg'
 import OutlierIcon from '@/shared/assets/outlier-bold.svg'
 
-const ICON_CLASS = 'size-20 text-btn-primary-text-disabled'
+const ICON_CLASS = 'size-30 text-btn-primary-text-disabled '
 
 function buildGroups(data?: VideoStatsDto) {
   const collected = data ? formatDate(data.collectedAt) : null
@@ -63,6 +63,7 @@ function buildGroups(data?: VideoStatsDto) {
           label: 'CTR',
           description: '썸네일 클릭률',
           hasTooltip: true,
+          tooltipLabel: '클릭 수 / 노출 수 *100',
           metric: data?.ctr,
           valueFormat: 'percent' as const,
         },
@@ -71,14 +72,15 @@ function buildGroups(data?: VideoStatsDto) {
           label: '신규 유입 비율',
           description: '구독자가 아닌 신규 시청자 비율',
           hasTooltip: true,
+          tooltipLabel: '비구독자(신규 유입)가 본 조회수/총조회수',
           metric: data?.newViewerRate,
           valueFormat: 'percent' as const,
         },
         {
           icon: <SubscribeIcon className={ICON_CLASS} />,
           label: '구독 전환 수',
           description: '영상 시청 후 구독으로 이어진 수',
-          hasTooltip: true,
+          hasTooltip: false,
           metric: data?.subscribersGained,
           valueFormat: 'korean' as const,
         },
@@ -92,6 +94,7 @@ function buildGroups(data?: VideoStatsDto) {
           label: '영상 참여율',
           description: '개별 영상 참여율',
           hasTooltip: true,
+          tooltipLabel: '좋아요+댓글 / 조회수',
           metric: data?.engagementRate,
           valueFormat: 'percent' as const,
         },
@@ -105,6 +108,7 @@ function buildGroups(data?: VideoStatsDto) {
           label: 'VPH',
           description: '시간 당 조회수',
           hasTooltip: true,
+          tooltipLabel: '총 조회수 / 업로드 후 경과 시간',
           metric: data?.vph,
           valueFormat: 'float' as const,
         },
@@ -113,6 +117,7 @@ function buildGroups(data?: VideoStatsDto) {
           label: 'Outlier',
           description: '채널 평균 조회수 대비 상승배수',
           hasTooltip: true,
+          tooltipLabel: '증가한 조회수 / 채널 평균 조회수',
           metric: data?.outlier,
           valueFormat: 'float' as const,
         },