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,12 +51,14 @@ export default function Home() {
                 ))}
               </SelectContent>
             </Select>
-          </div>
+            <div className="flex flex-col items-center font-mono text-teal-600">
-          <div className="text-primary font-mono text-lg">
+              <p>Current time: {localNow.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}</p>
-            Current time: {localNow.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}
+              <p>Now: {now.toFormat('yyyy-MM-dd HH:mm:ss (ZZZZ)')}</p>
-          </div>
+              <p>Default date now: {defNow.toISOString()}</p>
-          <div className="text-muted-foreground text-xs">
+            </div>
-            (Luxon: realtime rendering, local timezone support)
+            <div className="text-xs opacity-60">
+              (Luxon: realtime rendering, local timezone support)
+            </div>
           </div>
         </CardContent>
       </Card>

web/src/components/app-header.tsx

@@ -64,19 +64,21 @@ 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>
               ) : (
-                <Link href="/me" className="flex items-center gap-2">
+                <div>
-                  <Avatar className="h-8 w-8">
+                  <Link href="/me" className="flex items-center gap-2">
-                    <AvatarFallback>{initial}</AvatarFallback>
+                    <Avatar className="h-8 w-8">
-                  </Avatar>
+                      <AvatarFallback>{initial}</AvatarFallback>
-                  <span className="max-w-[140px] truncate">{displayName}</span>
+                    </Avatar>
-                </Link>
+                    <span className="max-w-[140px] truncate">{displayName}</span>
+                  </Link>
+                  <Button onClick={onLogout} variant="secondary">
+                    로그아웃
+                  </Button>
+                </div>
               )}
-
-              <Button onClick={onLogout} variant="secondary">
-                로그아웃
-              </Button>
             </div>
           ) : (
             <div className="flex items-center gap-2">