style: 스타일 정리 및 스타일 변경으로 인한 버전 업데이트

Author: yeonjin719

README.md

@@ -21,6 +21,12 @@ eCampus 페이지에서 과목별 학습 항목(과제/퀴즈/강의/토론/자
 
 ## 버전별 업데이트
 
+### v1.2.5 (업데이트: 2026-04-13)
+
+- 대시보드 카드에서 `확인필요` 같은 상태 라벨과 자료 다운로드/숨기기 버튼이 겹치지 않도록 액션 영역 레이아웃을 다시 정리했습니다.
+- 카드 액션 버튼 배경이 카드 hover 톤과 자연스럽게 이어지도록 타입별 액션 스타일을 맞췄습니다.
+- 랜딩페이지와 README의 최신 업데이트 내역을 `v1.2.5` 기준으로 갱신했습니다.
+
 ### v1.2.4 (업데이트: 2026-04-13)
 
 - 설치 전에 대시보드와 VOD 화면을 바로 확인할 수 있도록 랜딩/프리뷰 페이지를 새로 구성하고, 버전별 업데이트 영역도 리스트형 타임라인으로 정리했습니다.

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "eHelper",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "description": "eCampus 과목별 과제/퀴즈/강의/토론/자료를 한눈에 보는 확장 프로그램",
     "permissions": ["storage", "downloads"],
     "host_permissions": [

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ecampus-dashboard-smu",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -49,10 +49,6 @@ function LoadingOverlay({ message }: { message: string }) {
             role="status"
             aria-live="polite"
         >
-            <div
-                className="absolute left-1/2 top-0 h-28 w-[min(360px,calc(100%-32px))] -translate-x-1/2 -translate-y-6 rounded-[28px] bg-white shadow-[0_20px_48px_rgba(255,255,255,0.92)] blur-[8px]"
-                aria-hidden="true"
-            />
             <div className="relative shrink-0 flex min-w-[220px] max-w-[320px] flex-col items-center gap-3 rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-center shadow-[0_18px_40px_rgba(15,23,42,0.18)]">
                 <LoadingSpinner />
                 <div className="space-y-1 text-[12px] font-semibold text-zinc-900">

src/content/ui/components/DashboardContent.tsx

@@ -1,6 +1,7 @@
 import type { DashboardItem, DashboardRuntime } from '../types';
 import { MdOutlineFileDownload, MdOutlineVisibilityOff } from 'react-icons/md';
 import {
+    itemCardActionToneClass,
     itemCardToneClass,
     stateBadgeClass,
     typeBadgeClass,
@@ -40,7 +41,7 @@ export function DashboardItemCard({
             role={canOpenItem ? 'button' : undefined}
             tabIndex={canOpenItem ? 0 : undefined}
             className={[
-                'w-full relative rounded-xl border px-3 py-3 text-left shadow-[0_4px_10px_rgba(15,23,42,0.05)] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100',
+                'group w-full relative rounded-xl border px-3 py-3 text-left shadow-[0_4px_10px_rgba(15,23,42,0.05)] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100',
                 canOpenItem ? 'cursor-pointer' : 'cursor-default',
                 itemCardToneClass(item.type),
             ].join(' ')}
@@ -80,7 +81,6 @@ export function DashboardItemCard({
                         )}
                     </div>
                 </div>
-
                 <div className="mb-[2px] flex items-center gap-1.5">
                     <span
                         className={[
@@ -97,39 +97,46 @@ export function DashboardItemCard({
                         {item.title}
                     </span>
                 </div>
+                <div className="flex justify-between w-full">
+                    <div className="flex flex-col gap-0.5">
+                        {detailMetaLines.map((line, index) => (
+                            <p
+                                key={`detail-${item.id}-${index}`}
+                                className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
+                            >
+                                {line}
+                            </p>
+                        ))}
 
-                <div className="flex flex-col gap-0.5">
-                    {detailMetaLines.map((line, index) => (
-                        <p
-                            key={`detail-${item.id}-${index}`}
-                            className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
-                        >
-                            {line}
-                        </p>
-                    ))}
-
-                    {extraMetaLines.map((line, index) => (
-                        <p
-                            key={`extra-${item.id}-${index}`}
-                            className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
-                        >
-                            {line}
-                        </p>
-                    ))}
+                        {extraMetaLines.map((line, index) => (
+                            <p
+                                key={`extra-${item.id}-${index}`}
+                                className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
+                            >
+                                {line}
+                            </p>
+                        ))}
 
-                    {periodMetaLines.map((line, index) => (
-                        <p
-                            key={`period-${item.id}-${index}`}
-                            className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
-                        >
-                            {line}
-                        </p>
-                    ))}
-                    <div className="flex w-fit absolute right-2 bottom-3">
+                        {periodMetaLines.map((line, index) => (
+                            <p
+                                key={`period-${item.id}-${index}`}
+                                className="mb-0 mt-0.5 text-[12px] leading-5 break-words whitespace-normal text-zinc-500"
+                            >
+                                {line}
+                            </p>
+                        ))}
+                    </div>
+                    <div
+                        className="flex w-fit h-full self-end gap-[2px] mt-auto"
+                        style={{ alignSelf: 'end', backgroundColor: 'inherit' }}
+                    >
                         {item.type === 'RESOURCE' && item.url && (
                             <button
                                 type="button"
-                                className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-none bg-white p-0 text-[14px] text-zinc-700 transition hover:border-zinc-300 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100"
+                                className={[
+                                    'inline-flex h-7 w-7 items-center justify-center rounded-md border border-none p-0 text-[14px] text-zinc-700 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100 hover:cursor-pointer',
+                                    itemCardActionToneClass(item.type),
+                                ].join(' ')}
                                 title="자료 다운로드"
                                 aria-label="자료 다운로드"
                                 onClick={(event) => {
@@ -147,7 +154,10 @@ export function DashboardItemCard({
                         )}
                         <button
                             type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-none bg-white p-0 text-[14px] text-zinc-700 transition hover:border-zinc-300 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100"
+                            className={[
+                                'inline-flex h-7 w-7 items-center justify-center rounded-md border border-none p-0 text-[14px] text-zinc-700 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-100 hover:cursor-pointer',
+                                itemCardActionToneClass(item.type),
+                            ].join(' ')}
                             title="이 항목 숨기기"
                             aria-label="이 항목 숨기기"
                             onClick={(event) => {

src/content/ui/components/DashboardItemCard.tsx

@@ -64,6 +64,16 @@ export function itemCardToneClass(type: ItemType) {
     return 'border-solid border-zinc-200 bg-white hover:border-zinc-300 hover:bg-zinc-50';
 }
 
+export function itemCardActionToneClass(type: ItemType) {
+    if (type === 'ASSIGNMENT') return 'bg-white group-hover:bg-rose-50/35';
+    if (type === 'QUIZ') return 'bg-white group-hover:bg-indigo-50/35';
+    if (type === 'LECTURE') return 'bg-white group-hover:bg-sky-50/35';
+    if (type === 'FORUM') return 'bg-white group-hover:bg-amber-50/35';
+    if (type === 'RESOURCE') return 'bg-white group-hover:bg-emerald-50/35';
+    if (type === 'NOTICE') return 'bg-white group-hover:bg-violet-50/35';
+    return 'bg-white group-hover:bg-zinc-50';
+}
+
 export function ddayBadgeClass(dueAt?: number) {
     if (typeof dueAt !== 'number') {
         return 'bg-zinc-100 text-zinc-600 ring-1 ring-zinc-200';

src/content/ui/utils/itemAppearance.ts

@@ -6,6 +6,8 @@ function getReleaseTone(label: string) {
     switch (label) {
         case 'Latest':
             return 'border-sky-300/20 bg-sky-400/12 text-sky-100';
+        case 'UI':
+            return 'border-violet-300/20 bg-violet-400/12 text-violet-100';
         case 'Infra':
             return 'border-amber-300/20 bg-amber-400/12 text-amber-100';
         case 'Launch':

src/preview/components/landing/LandingVersionsSection.tsx

@@ -91,10 +91,25 @@ export const previewFixHighlights: LandingFixHighlight[] = [
 ];
 
 export const previewReleaseNotes: LandingReleaseNote[] = [
+    {
+        version: '1.2.5',
+        date: '2026-04-13',
+        label: 'UI',
+        title: '대시보드 카드 액션 정렬 보정',
+        summary:
+            '상태 라벨과 카드 액션 버튼이 겹치던 레이아웃을 정리하고, 버튼 배경 톤도 카드 hover 흐름에 맞춰 다시 맞췄습니다.',
+        changes: [
+            '확인필요 라벨과 다운로드/숨기기 버튼이 겹치지 않도록 카드 액션 영역 구조 조정',
+            '카드 액션 버튼이 타입별 카드 hover 톤을 함께 따라가도록 스타일 정리',
+            '랜딩페이지와 README의 최신 업데이트 내역을 1.2.5 기준으로 동기화',
+        ],
+        benefit:
+            '자료 카드처럼 우측 메타 요소가 많은 경우에도 화면이 덜 깨지고, 카드 상호작용이 더 일관되게 보입니다.',
+    },
     {
         version: '1.2.4',
         date: '2026-04-13',
-        label: 'Latest',
+        label: 'Core',
         title: '랜딩, 크롤링, VOD 흐름 정리',
         summary:
             '설치 전 체험용 랜딩/프리뷰를 새로 구성하고, 과목별 증분 갱신과 자료 예외 처리, CMS VOD 대응까지 전체 흐름을 함께 다듬었습니다.',