fix: 레이아웃 폭 깨짐·입력 UI 정비 — tailwind content glob에 src 추가

trz-21 · claude · trz-21 · commit cf0da05f0650 · 2026-06-16T07:03:44.000+09:00
스크린샷 리뷰에서 발견한 실제 결함 수정. - tailwind.config: content glob에 ./src/** 누락 → Container의 max-w-5xl 등 src 전용 클래스가 purge되어 본문이 전폭으로 펼쳐지고 헤더가 잘림. ./src/** 추가로 max-w-5xl·min-w-0·액센트 보더 등 전부 정상 생성 - AnalysisCard: 긴 쿠팡 URL이 truncate 안 돼 가로 오버플로 → Link·내부 flex에 min-w-0, 날짜 shrink-0 whitespace-nowrap로 잘림 처리 - UrlInput: 삭제 버튼 줄바꿈("삭 제") → ✕ 아이콘 버튼, URL 추가 + 아이콘, 리뷰수 select 폭 제한(sm:w-48), 제출 w-full sm:w-auto, 간격 정돈 - dashboard: 히어로 inner 카드 패딩·그리드 min-w-0 정돈 - 분석 상세: ResultHeader 스탯 3열 그리드로 위계 정리, InsightReport 긴 텍스트 break-words/min-w-0, AnalysisProgress 패딩 반응형 검증: type-check 통과, 테스트 76/76 통과, 생성 CSS에 64rem 확인 Refs #28 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/frontend/app/(dashboard)/analyses/[id]/page.tsx b/frontend/app/(dashboard)/analyses/[id]/page.tsx
@@ -40,21 +40,23 @@ function ResultHeader({
   );
   return (
     <div className="rounded-2xl bg-gradient-to-br from-brand-700 to-brand-900 p-6 text-white shadow-md">
-      <p className="text-sm font-medium text-brand-100">분석 완료</p>
-      <div className="mt-4 grid grid-cols-3 gap-4">
-        <div>
-          <p className="text-2xl font-bold sm:text-3xl">{result.products.length}</p>
-          <p className="mt-0.5 text-xs text-brand-100">분석 상품</p>
+      <p className="text-sm font-semibold text-brand-100">분석 완료</p>
+      <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3 sm:gap-6">
+        <div className="min-w-0">
+          <p className="text-2xl font-bold leading-none sm:text-3xl">
+            {result.products.length}
+          </p>
+          <p className="mt-2 text-xs font-medium text-brand-100">분석 상품</p>
         </div>
-        <div>
-          <p className="text-2xl font-bold sm:text-3xl">{totalReviews}</p>
-          <p className="mt-0.5 text-xs text-brand-100">총 리뷰 수</p>
+        <div className="min-w-0">
+          <p className="text-2xl font-bold leading-none sm:text-3xl">{totalReviews}</p>
+          <p className="mt-2 text-xs font-medium text-brand-100">총 리뷰 수</p>
         </div>
-        <div>
-          <p className="text-base font-semibold sm:text-lg">
+        <div className="min-w-0">
+          <p className="break-words text-sm font-semibold leading-snug sm:text-base">
             {completedAt ? formatCompletedAt(completedAt) : '—'}
           </p>
-          <p className="mt-0.5 text-xs text-brand-100">생성 시각</p>
+          <p className="mt-2 text-xs font-medium text-brand-100">생성 시각</p>
         </div>
       </div>
     </div>
diff --git a/frontend/app/(dashboard)/dashboard/page.tsx b/frontend/app/(dashboard)/dashboard/page.tsx
@@ -57,7 +57,7 @@ export default function DashboardPage() {
         <p className="mt-3 max-w-2xl text-sm leading-relaxed text-brand-100">
           경쟁 상품의 쿠팡 URL을 입력하면 AI가 리뷰를 분석해 개선 포인트를 알려드립니다.
         </p>
-        <div className="mt-5 rounded-xl bg-white p-4 shadow-sm sm:p-5">
+        <div className="mt-5 rounded-xl bg-white p-5 shadow-sm sm:p-6">
           <UrlInput onSubmit={handleSubmit} loading={submitting} />
           {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
         </div>
@@ -80,7 +80,7 @@ export default function DashboardPage() {
             description="위에서 경쟁 상품 URL을 입력해 첫 분석을 시작해 보세요."
           />
         ) : (
-          <div className="grid gap-4 sm:grid-cols-2">
+          <div className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
             {analyses.map((analysis) => (
               <AnalysisCard key={analysis.id} analysis={analysis} />
             ))}
diff --git a/frontend/src/features/analysis/components/AnalysisCard.tsx b/frontend/src/features/analysis/components/AnalysisCard.tsx
@@ -46,16 +46,16 @@ export function AnalysisCard({ analysis }: AnalysisCardProps) {
   return (
     <Link
       href={`/analyses/${analysis.id}`}
-      className="group block rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-md"
+      className="group block min-w-0 rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-md"
     >
       <div className="flex items-center justify-between gap-2">
         <Badge variant={STATUS_VARIANT[analysis.status]} className="inline-flex items-center gap-1.5">
           <span className={`h-1.5 w-1.5 rounded-full ${STATUS_DOT[analysis.status]}`} aria-hidden="true" />
           {STATUS_LABEL[analysis.status]}
         </Badge>
-        <span className="text-xs text-gray-400">{formatDate(analysis.created_at)}</span>
+        <span className="shrink-0 whitespace-nowrap text-xs text-gray-400">{formatDate(analysis.created_at)}</span>
       </div>
-      <div className="mt-3 flex items-center gap-2">
+      <div className="mt-3 flex min-w-0 items-center gap-2">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
diff --git a/frontend/src/features/analysis/components/AnalysisProgress.tsx b/frontend/src/features/analysis/components/AnalysisProgress.tsx
@@ -87,7 +87,7 @@ export function AnalysisProgress({ status }: { status: AnalysisStatus }) {
   const isActive = status !== 'completed' && status !== 'failed';
 
   return (
-    <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm">
+    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8">
       <ol className="flex items-start">
         {STEPS.map((step, index) => {
           const state = stepStateFor(index, status);
diff --git a/frontend/src/features/analysis/components/InsightReport.tsx b/frontend/src/features/analysis/components/InsightReport.tsx
@@ -189,8 +189,10 @@ function RatingDistribution({ product }: { product: ProductSummary }) {
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center justify-between gap-2">
-        <h3 className="text-sm font-medium text-gray-900">{product.product_name}</h3>
-        <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">
+        <h3 className="min-w-0 break-words text-sm font-medium text-gray-900">
+          {product.product_name}
+        </h3>
+        <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">
           <span className="text-amber-400">
             <svg viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5" aria-hidden="true">
               <path d="M10 1.5l2.4 4.9 5.4.8-3.9 3.8.92 5.4L10 13.9 5.18 16.4l.92-5.4L2.2 7.2l5.4-.8L10 1.5z" />
@@ -251,9 +253,11 @@ export function InsightReport({ result }: InsightReportProps) {
                 <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-600 text-sm font-bold text-white shadow-sm shadow-brand-600/30">
                   {point.rank}
                 </span>
-                <div>
-                  <p className="font-medium text-gray-900">{point.title}</p>
-                  <p className="mt-0.5 text-sm text-gray-600">{point.detail}</p>
+                <div className="min-w-0">
+                  <p className="font-medium text-gray-900 break-words">{point.title}</p>
+                  <p className="mt-0.5 text-sm leading-relaxed text-gray-600 break-words">
+                    {point.detail}
+                  </p>
                 </div>
               </li>
             ))}
@@ -276,14 +280,14 @@ export function InsightReport({ result }: InsightReportProps) {
                 key={i}
                 className="rounded-lg border border-amber-100 bg-amber-50/50 p-3.5 transition-colors hover:bg-amber-50"
               >
-                <p className="font-medium text-gray-900">{weakness.title}</p>
-                <p className="mt-1 flex items-start gap-1.5 text-sm text-amber-800">
-                  <span className="mt-0.5 text-amber-500" aria-hidden="true">
+                <p className="font-medium text-gray-900 break-words">{weakness.title}</p>
+                <p className="mt-1 flex items-start gap-1.5 text-sm leading-relaxed text-amber-800">
+                  <span className="mt-0.5 shrink-0 text-amber-500" aria-hidden="true">
                     <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
                       <path d="M10 1l2.5 5.5L18 7l-4 4 1 6-5-2.8L5 17l1-6-4-4 5.5-.5L10 1z" />
                     </svg>
                   </span>
-                  {weakness.opportunity}
+                  <span className="min-w-0 break-words">{weakness.opportunity}</span>
                 </p>
               </li>
             ))}
@@ -304,9 +308,9 @@ export function InsightReport({ result }: InsightReportProps) {
             {insights.purchase_drivers.map((driver, i) => (
               <li
                 key={i}
-                className="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-700"
+                className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-700"
               >
-                <span className="text-emerald-500" aria-hidden="true">
+                <span className="shrink-0 text-emerald-500" aria-hidden="true">
                   <svg viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5">
                     <path fillRule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0l-3.5-3.5a1 1 0 111.4-1.4l2.8 2.79 6.8-6.79a1 1 0 011.4 0z" clipRule="evenodd" />
                   </svg>
@@ -324,7 +328,7 @@ export function InsightReport({ result }: InsightReportProps) {
         accent="brand"
         icon={<ScaleIcon />}
       >
-        <div className="grid gap-5 sm:grid-cols-2">
+        <div className="grid gap-4 sm:grid-cols-2">
           <div className="rounded-lg border border-red-100 bg-red-50/40 p-4">
             <h3 className="mb-3 flex items-center gap-1.5 text-sm font-semibold text-red-700">
               <span className="text-red-400" aria-hidden="true">
@@ -340,7 +344,7 @@ export function InsightReport({ result }: InsightReportProps) {
               <ul className="flex flex-col gap-2">
                 {insights.top_complaints.map((c, i) => (
                   <li key={i} className="flex items-center justify-between gap-2">
-                    <span className="text-sm text-gray-800">{c.text}</span>
+                    <span className="min-w-0 break-words text-sm text-gray-800">{c.text}</span>
                     <span className="flex shrink-0 items-center gap-2">
                       <Badge variant={severityVariant(c.severity)}>
                         {severityLabel(c.severity)}
@@ -367,8 +371,8 @@ export function InsightReport({ result }: InsightReportProps) {
               <ul className="flex flex-col gap-2">
                 {insights.top_positives.map((p, i) => (
                   <li key={i} className="flex items-center justify-between gap-2">
-                    <span className="text-sm text-gray-800">{p.text}</span>
-                    <span className="text-xs text-gray-500">{p.count}회</span>
+                    <span className="min-w-0 break-words text-sm text-gray-800">{p.text}</span>
+                    <span className="shrink-0 text-xs text-gray-500">{p.count}회</span>
                   </li>
                 ))}
               </ul>
diff --git a/frontend/src/features/analysis/components/UrlInput.tsx b/frontend/src/features/analysis/components/UrlInput.tsx
@@ -38,7 +38,7 @@ export function UrlInput({ onSubmit, loading = false }: UrlInputProps) {
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2.5">
         {urls.map((url, index) => (
           <div key={index} className="flex items-center gap-2">
             <Input
@@ -47,40 +47,64 @@ export function UrlInput({ onSubmit, loading = false }: UrlInputProps) {
               onChange={(e) => updateUrl(index, e.target.value)}
               placeholder="경쟁 상품 쿠팡 URL"
               aria-label={`URL ${index + 1}`}
-              className="flex-1"
+              className="min-w-0 flex-1"
             />
-            <Button
+            <button
               type="button"
-              variant="outline"
-              size="sm"
               onClick={() => removeUrl(index)}
               disabled={urls.length <= 1}
               aria-label={`URL ${index + 1} 삭제`}
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-gray-300 text-gray-400 transition hover:border-gray-400 hover:bg-gray-50 hover:text-gray-600 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400"
             >
-              삭제
-            </Button>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+                aria-hidden="true"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
           </div>
         ))}
       </div>
 
-      <Button
+      <button
         type="button"
-        variant="ghost"
-        size="sm"
         onClick={addUrl}
         disabled={urls.length >= MAX_URLS}
-        className="self-start border border-dashed border-gray-300"
+        className="inline-flex items-center justify-center gap-1.5 self-start rounded-md border border-dashed border-gray-300 px-3 py-2 text-sm font-medium text-gray-600 transition hover:border-brand-400 hover:text-brand-600 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-gray-300 disabled:hover:text-gray-600"
       >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-4 w-4"
+          aria-hidden="true"
+        >
+          <path d="M12 5v14" />
+          <path d="M5 12h14" />
+        </svg>
         URL 추가
-      </Button>
+      </button>
 
-      <label className="flex flex-col gap-1 text-sm font-medium text-gray-700">
+      <label className="flex flex-col gap-1.5 text-sm font-medium text-gray-700">
         분석할 리뷰 수
         <select
           value={reviewLimit}
           onChange={(e) => setReviewLimit(Number(e.target.value))}
           aria-label="분석할 리뷰 수"
-          className="rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
+          className="w-full rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-200 sm:w-48"
         >
           {REVIEW_LIMIT_OPTIONS.map((opt) => (
             <option key={opt} value={opt}>
@@ -90,7 +114,7 @@ export function UrlInput({ onSubmit, loading = false }: UrlInputProps) {
         </select>
       </label>
 
-      <Button type="submit" disabled={!canSubmit} className="mt-2">
+      <Button type="submit" disabled={!canSubmit} className="mt-1 w-full sm:w-auto sm:self-start">
         {loading ? '분석 중...' : '분석 시작'}
       </Button>
     </form>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -5,6 +5,7 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
