few i

web/src/app/page.tsx

@@ -13,26 +13,31 @@ import {
 } from '@/components/ui/select';
 
 const TIMEZONE_LIST = ['Asia/Seoul', 'America/New_York', 'Europe/London', 'Asia/Tokyo'];
+const INTERVAL = 500;
 
 export default function Home() {
   const [now, setNow] = useState(DateTime.now());
   const [timezone, setTimezone] = useState('Asia/Seoul');
+  const [defNow, setDefNow] = useState(new Date());
 
   useEffect(() => {
-    const timer = setInterval(() => setNow(DateTime.now()), 10);
+    const timer = setInterval(() => {
+      setNow(DateTime.now());
+      setDefNow(new Date());
+    }, INTERVAL);
     return () => clearInterval(timer);
   }, []);
 
-  const localNow = now.setZone(timezone);
+  const localNow = timezone ? now.setZone(timezone) : now;
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-6">
+    <main className="flex min-h-screen flex-col items-center justify-center space-y-10 p-6">
       <Card className="w-full max-w-md">
-        <CardHeader>
+        <CardHeader className="flex justify-center">
-          <CardTitle className="text-2xl">DateTime UI Sample</CardTitle>
+          <CardTitle className="text-3xl font-bold">DateTime UI Sample</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent>
-          <div className="flex flex-col justify-center">
+          <div className="flex flex-col items-center justify-center space-y-4">
             <Label htmlFor="tz">Select timezone</Label>
             <Select value={timezone} onValueChange={setTimezone}>
               <SelectTrigger id="tz" className="mt-1">
@@ -46,13 +51,15 @@ export default function Home() {
                 ))}
               </SelectContent>
             </Select>
+            <div className="flex flex-col items-center font-mono text-teal-600">
+              <p>Current time: {localNow.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}</p>
+              <p>Now: {now.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}</p>
+              <p>Default date now: {defNow.toISOString()}</p>
             </div>
-          <div className="text-primary font-mono text-lg">
+            <div className="text-xs opacity-60">
-            Current time: {localNow.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}
-          </div>
-          <div className="text-muted-foreground text-xs">
               (Luxon: realtime rendering, local timezone support)
             </div>
+          </div>
         </CardContent>
       </Card>
       <h1 className="mb-6 text-3xl font-bold">DateTime UI Sample</h1>

web/src/components/app-header.tsx

@@ -64,20 +64,22 @@ export default function AppHeader() {
                 <div className="flex items-center gap-2">
                   <div className="h-8 w-8 animate-pulse rounded-full bg-white/20" />
                   <div className="h-4 w-28 animate-pulse rounded bg-white/20" />
+                  <div className="h-4 w-28 animate-pulse rounded bg-white/20" />
                 </div>
               ) : (
+                <div>
                   <Link href="/me" className="flex items-center gap-2">
                     <Avatar className="h-8 w-8">
                       <AvatarFallback>{initial}</AvatarFallback>
                     </Avatar>
                     <span className="max-w-[140px] truncate">{displayName}</span>
                   </Link>
-              )}
-
                   <Button onClick={onLogout} variant="secondary">
                     로그아웃
                   </Button>
                 </div>
+              )}
+            </div>
           ) : (
             <div className="flex items-center gap-2">
               <Button asChild>