hs-shell · 6-keem · Feb 10, 2025 · Feb 10, 2025
diff --git a/manifest.config.ts b/manifest.config.ts
@@ -2,9 +2,9 @@ import { ManifestV3Export } from '@crxjs/vite-plugin';
 
 const manifest = {
   manifest_version: 3,
-  name: '돋부기',
+  name: 'HSU 돋부기',
   version: '2.1.1',
-  description: 'dotbugi',
+  description: '한성대학교 LMS 강의, 과제, 퀴즈를 한 눈에!',
   action: {},
   icons: {
     '16': 'images/icon/icon-16.png',

diff --git a/option.html b/option.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>돋부기 | 설정</title>
+    <title>돋부기</title>
   </head>
   <body>
     <div id="shadow-modal-root" />

diff --git a/public/images/icon/icon-128.png b/public/images/icon/icon-128.png
diff --git a/public/images/icon/icon-16.png b/public/images/icon/icon-16.png
diff --git a/public/images/icon/icon-32.png b/public/images/icon/icon-32.png
diff --git a/public/images/icon/icon-48.png b/public/images/icon/icon-48.png
diff --git a/src/assets/bugi.png b/src/assets/bugi.png
diff --git a/src/assets/close.png b/src/assets/close.png
diff --git a/src/assets/exit.png b/src/assets/exit.png
diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/content/App.tsx b/src/content/App.tsx
@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { useEffect, useMemo, useState } from 'react';
-import Bugi from '@/assets/bugi.png';
-import Close from '@/assets/close.png';
+import icon from '@/assets/icon.png';
+import exit from '@/assets/exit.png';
 import { Assign, Filters, Quiz, TAB_TYPE, Vod } from './types';
 import { ListFilter, RefreshCw, Search } from 'lucide-react';
 import filter from '@/assets/filter.svg';
@@ -153,16 +153,24 @@ export default function App() {
       <PopoverTrigger asChild className="transition-all duration-1000 justify-self-end">
         {isOpen ? (
           <img
-            src={Close}
-            onClick={() => setIsOpen(!isOpen)}
-            className="rounded-2xl w-32 h-32 bg-white border-zinc-500 shadow-xl cursor-pointer"
+            src={exit}
+            onClick={(e) => {
+              setIsOpen(!isOpen);
+              e.preventDefault();
+            }}
+            draggable={false}
+            className="rounded-2xl w-32 h-32 shadow-xl cursor-pointer"
             alt="Close"
           />
         ) : (
           <img
-            src={Bugi}
-            onClick={() => setIsOpen(!isOpen)}
-            className="rounded-2xl w-32 h-32 bg-white border-zinc-500 shadow-xl cursor-pointer"
+            src={icon}
+            onClick={(e) => {
+              setIsOpen(!isOpen);
+              e.preventDefault();
+            }}
+            draggable={false}
+            className="rounded-2xl w-32 h-32 shadow-xl cursor-pointer"
             alt="Open"
           />
         )}

diff --git a/src/option/Header.tsx b/src/option/Header.tsx
@@ -11,21 +11,24 @@ export default function Header({ location }: { location: string }) {
     });
   }, []);
 
-  console.log(location);
   let title = '안녕하세요';
 
   switch (location) {
     case '/vod':
       title = '동영상 강의 목록';
+      window.document.title = '돋부기 | 강의 목록';
       break;
     case '/assignment':
       title = '과제 목록';
+      window.document.title = '돋부기 | 과제 목록';
       break;
     case '/quiz':
       title = '퀴즈 목록';
+      window.document.title = '돋부기 | 퀴즈 목록';
       break;
     default:
       title = '대시보드 🚀';
+      window.document.title = '돋부기 | 대시보드';
       break;
   }
   return (

diff --git a/src/option/Sidebar.tsx b/src/option/Sidebar.tsx
@@ -1,20 +1,25 @@
 import { Home, LayoutDashboard, NotebookText, NotepadText, Video, Zap } from 'lucide-react';
 import type React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import bugi from '@/assets/bugi.png';
+import icon from '@/assets/icon.png';
 
 const Sidebar: React.FC = () => {
   return (
-    <aside className="hidden lg:block w-60 bg-slate-50 text-gray-800 h-screen shadow-lg border-r border-slate-100">
+    <aside className="hidden lg:block w-60 min-w-60 bg-slate-50 text-gray-800 h-screen shadow-lg border-r border-slate-100">
       <div className="flex flex-col h-full py-6 px-4">
         <div className="flex items-center mb-8">
           <div className="shrink-0">
-            <a
-              className="flex items-center justify-center w-14 h-14 text-white text-2xl font-bold rounded-full"
-              href="/"
+            <div
+              className="flex items-center justify-center w-14 h-14 text-white text-2xl font-bold rounded-full cursor-pointer"
+              onClick={() => {
+                window.open('https://learn.hansung.ac.kr/', '_blank');
+              }}
             >
-              <img src={bugi} className="rounded-full" />
-            </a>
+              <img
+                src={icon}
+                className="rounded-full hover:shadow-lg hover:shadow-zinc-400 transition-all duration-500"
+              />
+            </div>
           </div>
           <div className="ml-4">
             <div className="text-xl font-bold text-gray-900">한성대학교</div>

diff --git a/src/option/SummaryCard.tsx b/src/option/SummaryCard.tsx
@@ -4,12 +4,14 @@ import useCardData from '@/hooks/useCardData';
 import { Zap, Video, NotebookTextIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import clsx from 'clsx';
+import { Link } from 'react-router-dom';
 
 interface CardItemProps {
   title: string;
   icon: ReactNode;
   data: { done: number; total: number }[];
   color: string;
+  link: string;
 }
 
 const colorMap: Record<string, string> = {
@@ -23,50 +25,62 @@ const colorMap: Record<string, string> = {
 export default function SummaryCard() {
   const { vodSummary, assignSummary, quizSummary } = useCardData();
 
-  const CardItem = ({ title, icon, data, color }: CardItemProps) => {
+  const CardItem = ({ title, icon, data, color, link }: CardItemProps) => {
     const done = data.length > 0 ? data[0].done : 0;
     const total = data.length > 0 ? data[0].total : 1;
     const percentage = Math.round((done / total) * 100);
     const bgColorClass = colorMap[color] || 'bg-gray-500'; // 기본값 설정
 
     return (
-      <Card className="w-full shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer transform hover:-translate-y-1 pt-0">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <h3 className="font-semibold text-sm text-muted-foreground">{title}</h3>
-          {icon}
-        </CardHeader>
-        <CardContent>
-          {title.includes('퀴즈') ? (
-            <div className="text-2xl font-bold">{data.length > 0 ? `${total} 개` : '0 개'}</div>
-          ) : (
-            <div className="text-2xl font-bold">{data.length > 0 ? `${done} / ${total}` : '0 개'}</div>
-          )}
-          {title.includes('퀴즈') ? (
-            <div />
-          ) : (
-            <Progress value={percentage} className={clsx('h-2 mt-2')} indicatorColor={bgColorClass} />
-          )}
-          <p className="text-xs text-muted-foreground mt-2">
-            {title.includes('퀴즈') ? '직접 확인' : percentage + '% 완료'}
-          </p>
-        </CardContent>
-      </Card>
+      <Link to={link}>
+        <Card className="w-full shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer transform hover:-translate-y-1 pt-0">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <h3 className="font-semibold text-sm text-muted-foreground">{title}</h3>
+            {icon}
+          </CardHeader>
+          <CardContent>
+            {title.includes('퀴즈') ? (
+              <div className="text-2xl font-bold">{data.length > 0 ? `${total} 개` : '0 개'}</div>
+            ) : (
+              <div className="text-2xl font-bold">{data.length > 0 ? `${done} / ${total}` : '0 개'}</div>
+            )}
+            {title.includes('퀴즈') ? (
+              <div />
+            ) : (
+              <Progress value={percentage} className={clsx('h-2 mt-2')} indicatorColor={bgColorClass} />
+            )}
+            <p className="text-xs text-muted-foreground mt-2">
+              {title.includes('퀴즈') ? '직접 확인' : percentage + '% 완료'}
+            </p>
+          </CardContent>
+        </Card>
+      </Link>
     );
   };
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
-      {/* <CardItem title="동영상 강의" icon={<Video className="h-4 w-4 text-blue-500" />} data={[]} color="blue" />
-      <CardItem title="과제" icon={<NotebookTextIcon className="h-4 w-4 text-violet-500" />} data={[]} color="violet" />
-      <CardItem title="퀴즈" icon={<Zap className="h-4 w-4 text-amber-500" />} data={[]} color="amber" /> */}
-      <CardItem title="동영상 강의" icon={<Video className="h-4 w-4 text-blue-500" />} data={vodSummary} color="blue" />
+      <CardItem
+        title="동영상 강의"
+        icon={<Video className="h-4 w-4 text-blue-500" />}
+        data={vodSummary}
+        color="blue"
+        link={'vod'}
+      />
       <CardItem
         title="과제"
         icon={<NotebookTextIcon className="h-4 w-4 text-violet-500" />}
         data={assignSummary}
         color="violet"
+        link={'assignment'}
+      />
+      <CardItem
+        title="퀴즈"
+        icon={<Zap className="h-4 w-4 text-amber-500" />}
+        data={quizSummary}
+        color="amber"
+        link={'quiz'}
       />
-      <CardItem title="퀴즈" icon={<Zap className="h-4 w-4 text-amber-500" />} data={quizSummary} color="amber" />
     </div>
   );
 }
diff --git a/src/option/calendar.tsx b/src/option/calendar.tsx
@@ -161,15 +161,15 @@ export function Calendar() {
 
           if (rangePosition === 'single') {
             return (
-              <div key={event.id} className="flex items-center px-1">
-                <span className="px-0.5">
+              <div key={event.id} className="flex items-center px-1 w-full">
+                <span className="px-0.5 flex-shrink-0">
                   {event.type === 'assign' ? (
                     <NotebookText className={`w-3 h-3 ${isCurrent ? 'text-violet-900' : ''}`} />
                   ) : (
                     <Zap className={`w-3 h-3 ${isCurrent ? 'text-amber-500' : ''}`} />
                   )}
                 </span>
-                <span className="text-xs text-ellipsis line-clamp-1 overflow-hidden">
+                <span className="flex-1 text-xs whitespace-nowrap overflow-hidden text-ellipsis">
                   {event.title} - {event.subject}
                 </span>
               </div>
@@ -312,10 +312,12 @@ export function Calendar() {
               <div
                 className={cn(
                   'absolute top-0 rounded-md left-1 right-1',
-                  isTodayDate ? 'border-t-1 border-blue-500' : 'border-t-1 border-zinc-200'
+                  isTodayDate ? 'border-t-1.5 border-blue-600' : 'border-t-1.5 border-zinc-200'
                 )}
               />
-              <div className={`text-sm px-4 justify-self-end ${isCurrent && sunday ? 'text-red-700' : ''}`}>
+              <div
+                className={`text-sm px-4 justify-self-end ${!isTodayDate && isCurrent && sunday ? 'text-red-700' : ''}`}
+              >
                 {format(dayItem, 'd')}
               </div>
               {renderEvents(dayItem, isCurrent)}

diff --git a/src/option/components/SidebarHeader.tsx b/src/option/components/SidebarHeader.tsx
@@ -1,9 +1,9 @@
-import bugi from '@/assets/bugi.png';
+import icon from '@/assets/icon.png';
 
 export function SidebarHeader() {
   return (
     <div className="sticky top-0 z-10 flex items-center justify-center bg-white zinc-900">
-      <img src={bugi} width={80} height={80} className="p-4 rounded-full" />
+      <img src={icon} width={80} height={80} className="p-4 rounded-full" />
     </div>
   );
 }