From de18805f621455f306c9af4aa96745d68167d0e7 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:17:35 +0000
Subject: [PATCH] Adjust Settings Page Layout

Align text in the first card on the settings page to match the layout of other cards.
---
 src/pages/Settings.tsx | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 2da0be5..f970af6 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -73,18 +73,30 @@ const Settings = () => {
           <h1 className="text-2xl font-bold neuro-text mb-6">설정</h1>
           
           {/* User Profile */}
-          <div className="neuro-flat p-6 mb-8 flex items-center">
-            <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
-              <User size={24} />
-            </div>
-            <div>
-              <h2 className="font-semibold text-lg">
-                {user ? user.user_metadata?.username || '사용자' : '로그인 필요'}
-              </h2>
-              <p className="text-sm text-gray-500">
-                {user ? user.email : '계정에 로그인하세요'}
-              </p>
-            </div>
+          <div className="neuro-flat p-6 mb-8">
+            {user ? (
+              <div className="flex items-center">
+                <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
+                  <User size={24} />
+                </div>
+                <div>
+                  <h2 className="font-semibold text-lg">
+                    {user.user_metadata?.username || '사용자'}
+                  </h2>
+                  <p className="text-sm text-gray-500">
+                    {user.email}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center text-center py-3">
+                <div className="neuro-flat p-3 rounded-full mb-3 text-neuro-income">
+                  <User size={24} />
+                </div>
+                <h2 className="font-semibold text-lg">로그인 필요</h2>
+                <p className="text-sm text-gray-500">계정에 로그인하세요</p>
+              </div>
+            )}
           </div>
         </header>