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

@@ -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-6 mb-8">
-            <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
+            {user ? (
-              <User size={24} />
+              <div className="flex items-center">
-            </div>
+                <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
-            <div>
+                  <User size={24} />
-              <h2 className="font-semibold text-lg">
+                </div>
-                {user ? user.user_metadata?.username || '사용자' : '로그인 필요'}
+                <div>
-              </h2>
+                  <h2 className="font-semibold text-lg">
-              <p className="text-sm text-gray-500">
+                    {user.user_metadata?.username || '사용자'}
-                {user ? user.email : '계정에 로그인하세요'}
+                  </h2>
-              </p>
+                  <p className="text-sm text-gray-500">
-            </div>
+                    {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>