lnu8926-web · lnu8926-web · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/src/app/(main)/project/workspace/[id]/page.tsx b/src/app/(main)/project/workspace/[id]/page.tsx
@@ -301,15 +301,24 @@ export default function ProjectPage() {
   };
 
   if (tasksLoading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <p className="text-gray-400 dark:text-gray-500 text-lg">불러오는 중...</p>
-      </div>
+     return (
+      <div className="flex flex-col h-full bg-background pt-16">
+        <div className="flex-1 flex gap-3 p-3 overflow-hidden">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="w-80 shrink-0 bg-card rounded-lg border border-border p-4 flex flex-col gap-3">
+              <div className="h-4 w-24 bg-muted rounded animate-pulse" />
+              {[1, 2, 3].map((j) => (
+                <div key={j} className="h-20 bg-muted rounded-lg animate-pulse" />
+              ))}
+            </div>
+          ))}
+        </div>
+    </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900 pt-14">
+    <div className="flex flex-col h-full bg-background pt-16">
       <div className="flex-1 flex overflow-hidden min-h-0 gap-2 lg:gap-3 p-2 sm:p-3 w-full">
 
         {/* 메인 콘텐츠 */}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -143,48 +143,43 @@
 }
 
 .dark {
-  --background: #0D2530;
-  --foreground: #E8F5F7;
-  --card: #1A4A5A;
-  --card-foreground: #E8F5F7;
-  --popover: #1A4A5A;
-  --popover-foreground: #E8F5F7;
-  --primary: #E8F5F7;
-  --primary-foreground: #0D2530;
-  --secondary: #9DD8E3;
-  --secondary-foreground: #0D2530;
-  --muted: #2A6070;
-  --muted-foreground: #9DD8E3;
-  --accent: #6DD5E8;
-  --accent-foreground: #0D2530;
-  --destructive: #EF9A9A;
-  --destructive-foreground: #0D2530;
-  --border: #2A6070;
-  --input: #1A4A5A;
-  --ring: #6DD5E8;
-  --chart-1: #3a6fd8;
+  --background: #0F1117;
+  --foreground: #C8D4DC;
+  --card: #161B27;
+  --card-foreground: #C8D4DC;
+  --popover: #1E2333;
+  --popover-foreground: #C8D4DC;
+  --primary: #C8D4DC;
+  --primary-foreground: #0F1117;
+  --secondary: #6BBAC8;
+  --secondary-foreground: #0F1117;
+  --muted: #1E2535;
+  --muted-foreground: #7A8FA0;
+  --accent: #4FACBA;
+  --accent-foreground: #C8D4DC;
+  --destructive: #F87171;
+  --destructive-foreground: #0F1117;
+  --border: #252D40;
+  --input: #1E2535;
+  --ring: #4FACBA;
   --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: #4db89a;
   --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: #c8a030;
   --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: #9b4fd8;
   --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: #d84a3a;
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: #0D2530;
-  --sidebar-foreground: #E8F5F7;
-  --sidebar-primary: #6DD5E8;
-  --sidebar-primary-foreground: #0D2530;
-  --sidebar-accent: #2A6070;
-  --sidebar-accent-foreground: #E8F5F7;
-  --sidebar-border: #2A6070;
-  --sidebar-ring: #6DD5E8;
-
-  --dark-title: #E8F5F7;
-  --dark-body: #E8F5F7;
-  --dark-description: #9DD8E3;
-  --dark-border: #2A6070;
+  --sidebar: #0B0F1A;
+  --sidebar-foreground: #C8D4DC;
+  --sidebar-primary: #4FACBA;
+  --sidebar-primary-foreground: #0F1117;
+  --sidebar-accent: #1E2535;
+  --sidebar-accent-foreground: #C8D4DC;
+  --sidebar-border: #252D40;
+  --sidebar-ring: #4FACBA;
+
+  --dark-title: #C8D4DC;
+  --dark-body: #A8B8C2;
+  --dark-description: #7A8FA0;
+  --dark-border: #252D40;
 }
 
 @layer base {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Header } from "@/components/layout/Header";
 import Provider from "@/providers/providers";
@@ -16,11 +16,9 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Taskry",
+  description: "팀 프로젝트 관리 플랫폼",
 };
 
 export default function RootLayout({
@@ -29,9 +27,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-full" suppressHydrationWarning>
+    <html lang="ko" className="h-full" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${inter.className} antialiased h-full overflow-hidden`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full overflow-hidden`}
         suppressHydrationWarning={true}
       >
         <Provider>

diff --git a/src/components/features/kanban/KanbanColumn.tsx b/src/components/features/kanban/KanbanColumn.tsx
@@ -105,7 +105,7 @@ const KanbanColumn = ({
       `}
     >
       {/* 컬럼 헤더 */}
-      <div className="flex items-center justify-between px-3 sm:px-4 py-2.5 border-b border-border rounded-t-lg bg-[#F0F4F5] dark:bg-muted/30">
+      <div className="flex items-center justify-between px-3 sm:px-4 py-2.5 border-b border-border rounded-t-lg bg-muted/40 dark:bg-muted/30">
         <div className="flex items-center gap-2">
           {collapsible && (
             <button

diff --git a/src/components/features/kanban/MemoView.tsx b/src/components/features/kanban/MemoView.tsx
@@ -541,7 +541,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   filter === "all"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 전체
@@ -551,7 +551,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   filter === "mine"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 내 메모
@@ -561,7 +561,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors flex items-center justify-center gap-0.5 ${
                   filter === "pinned"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 <Icon type="pin" size={9} />
@@ -586,7 +586,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 placeholder="메모, 작성자..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-6 pr-6 py-1 text-[11px] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 input-focus-style"
+                className="w-full pl-6 pr-6 py-1 text-[11px] bg-input border border-border rounded text-foreground placeholder:text-muted-foreground input-focus-style"
               />
               {searchTerm && (
                 <button
@@ -610,7 +610,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   sort === "newest"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 최신순
@@ -620,7 +620,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   sort === "oldest"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 오래된순
@@ -661,7 +661,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
             placeholder="메모를 입력하세요..."
             disabled={loadingMemos}
             rows={3}
-            className="w-full pt-(--fluid-textarea-p) pb-(--fluid-textarea-p) pl-(--fluid-textarea-p) pr-8 sm:pr-10 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 rounded-xl resize-none text-sm input-focus-style transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-900 dark:text-gray-100 disabled:opacity-50"
+            className="w-full pt-(--fluid-textarea-p) pb-(--fluid-textarea-p) pl-(--fluid-textarea-p) pr-8 sm:pr-10 border border-border bg-input rounded-xl resize-none text-sm input-focus-style transition-all placeholder:text-muted-foreground text-foreground disabled:opacity-50"
           />
           {newMemo && (
             <button
@@ -806,17 +806,14 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                     {/* 날짜 */}
                     <span className="text-xs text-gray-400 dark:text-gray-400 font-medium">
                       {(() => {
-                        const utcDate = new Date(memo.created_at);
-                        const kstDate = new Date(
-                          utcDate.getTime() - 9 * 60 * 60 * 1000
-                        );
-                        return kstDate.toLocaleString("ko-KR", {
+
+                        return new Date(memo.created_at).toLocaleString("ko-KR", {
+                          timeZone: "Asia/Seoul",
                           year: "2-digit",
                           month: "2-digit",
                           day: "2-digit",
                           hour: "2-digit",
                           minute: "2-digit",
-                          second: "2-digit", // 초 추가
                           hour12: false,
                         });
                       })()}
@@ -892,7 +889,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                       maxLength={MEMO_MAX_LENGTH}
                       disabled={savingEdit}
                       rows={3}
-                      className="w-full p-2 text-sm border border-main-300 dark:border-main-600 bg-white dark:bg-gray-900 rounded-lg resize-none overflow-hidden text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-main-400 dark:focus:ring-main-500 disabled:opacity-50"
+                      className="w-full p-2 text-sm border border-main-300 dark:border-main-600 bg-input rounded-lg resize-none overflow-hidden text-foreground focus:outline-none focus:ring-2 focus:ring-main-400 dark:focus:ring-main-500 disabled:opacity-50"
                     />
                     <div className="flex items-center justify-between mt-1.5">
                       <span className="text-[11px] text-gray-400">{editContent.length} / {MEMO_MAX_LENGTH} · Ctrl+Enter 저장 · Esc 취소</span>

diff --git a/src/components/layout/BottomNavigation.tsx b/src/components/layout/BottomNavigation.tsx
@@ -74,7 +74,7 @@ const BottomNavigation = ({
   ];
 
   return (
-    <div className="border-t bg-white dark:bg-gray-900 shadow-lg h-16">
+    <div className="border-t bg-card border-border shadow-lg h-16">
       <div className="flex justify-center h-full items-center">
         {navItems.map((item) => {
           const isActive = activeView === item.id;
@@ -88,8 +88,8 @@ const BottomNavigation = ({
                 transition-colors duration-200
                 ${
                   isActive
-                    ? "text-main-200 hover:text-main-200/50 dark:text-main-400 dark:hover:text-main-300"
-                    : "text-main-400 hover:text-main-400/50 dark:text-gray-400 dark:hover:text-gray-200"
+                    ? "text-main-600 dark:text-main-400"
+                    : "text-muted-foreground hover:text-foreground"
                 }
               `}
             >
@@ -104,7 +104,7 @@ const BottomNavigation = ({
 
               {/* 하단 보더 */}
               {isActive && (
-                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-main-200 dark:bg-main-400" />
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-main-600 dark:bg-main-400" />
               )}
             </button>
           );

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
@@ -12,12 +12,12 @@ const modalInnerClasses = clsx(
   "relative w-[calc(100%-2rem)] max-w-xl min-h-(--fluid-modal-min-h)",
   "py-(--fluid-modal-py) px-(--fluid-modal-px)",
   "flex flex-col items-center justify-center",
-  "border border-gray-100 dark:border-gray-700 rounded-2xl shadow-sm bg-white dark:bg-gray-800"
+  "border border-border rounded-2xl shadow-sm bg-card"
 );
 const modalIconClasses = clsx(
   "size-15 flex items-center justify-center",
   "absolute -top-8 left-1/2 transform -translate-x-1/2",
-  "shadow-lg rounded-full bg-white dark:bg-gray-800"
+  "shadow-lg rounded-full bg-card"
 );
 
 export default function Modal({
@@ -93,7 +93,7 @@ export default function Modal({
           )}
           <button
             onClick={onClose}
-            className="absolute top-3 right-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
+            className="absolute top-3 right-3 text-muted-foreground hover:text-foreground"
           >
             <Icon type="x" />
           </button>
@@ -103,10 +103,10 @@ export default function Modal({
               children
             ) : (
               <>
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                <h2 className="text-2xl font-bold text-foreground">
                   {finalTitle}
                 </h2>
-                <p className="text-base font-medium mt-2 text-gray-700 dark:text-gray-300">
+                <p className="text-base font-medium mt-2 text-muted-foreground">
                   {finalDescription}
                 </p>