fix: 포스트헤더 레이아웃 padding 대신 flex 사용해서 가운데 정렬

Author: ShipFriend0516

app/entities/common/Profile.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 const Profile = ({ profileThumbnail, username }: Props) => {
   return (
-    <div className={'flex items-center text-nowrap'}>
+    <div className={'flex items-center text-nowrap mr-2 sm:mr-0'}>
       <div
         className={
           'w-8 h-8 aspect-square rounded-full bg-gray-300 overflow-hidden'

app/entities/post/detail/PostHeader.tsx

@@ -62,50 +62,54 @@ const PostHeader = ({
           />
         </div>
       )}
-      <div className="relative h-full z-20 bg-gray-400/40  px-6">
-        <h1
-          className={
-            'font-bold mb-4 pt-10 md:pt-20 text-3xl md:text-5xl z-10 px-2 break-keep'
-          }
-        >
-          <TypingText
-            title={title}
-            delay={50}
-            onComplete={() => setIsTypingComplete(true)}
-          />
-        </h1>
-        <h2
-          className={`md:text-2xl font-bold mb-4 transition-opacity duration-500 ${
-            isTypingComplete ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          {subTitle}
-        </h2>
-        <div
-          className={`pb-10 inline-flex items-center transition-opacity duration-500 ${
-            isTypingComplete ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          <div className={'items-center post-author flex'}>
-            <Profile
-              profileThumbnail={'/images/profile/profile.jpg'}
-              username={author}
+      <div className="relative flex justify-center items-center h-full z-20 bg-gray-400/40  px-6">
+        <div>
+          <h1
+            className={
+              'font-bold mb-4 text-3xl md:text-5xl z-10 px-2 break-keep'
+            }
+          >
+            <TypingText
+              title={title}
+              delay={50}
+              onComplete={() => setIsTypingComplete(true)}
             />
-          </div>
-          <span className={'post-date'}>
-            {new Date(date).toLocaleDateString('ko-KR')}
-          </span>
-          <span
-            className={'post-time-to-read mx-2 inline-flex items-center gap-2'}
+          </h1>
+          <h2
+            className={`md:text-2xl font-bold mb-4 transition-opacity duration-500 ${
+              isTypingComplete ? 'opacity-100' : 'opacity-0'
+            }`}
           >
-            <FaBook />
-            {timeToRead} min read
-          </span>
-          {isAdmin && (
-            <button onClick={handleEditClick}>
-              <span className="underline">Edit</span>
-            </button>
-          )}
+            {subTitle}
+          </h2>
+          <div
+            className={`inline-flex items-center transition-opacity duration-500 ${
+              isTypingComplete ? 'opacity-100' : 'opacity-0'
+            }`}
+          >
+            <div className={'items-center post-author flex'}>
+              <Profile
+                profileThumbnail={'/images/profile/profile.jpg'}
+                username={author}
+              />
+            </div>
+            <span className={'post-date'}>
+              {new Date(date).toLocaleDateString('ko-KR')}
+            </span>
+            <span
+              className={
+                'post-time-to-read mx-2 inline-flex items-center gap-2'
+              }
+            >
+              <FaBook />
+              {timeToRead} min read
+            </span>
+            {isAdmin && (
+              <button onClick={handleEditClick}>
+                <span className="underline">Edit</span>
+              </button>
+            )}
+          </div>
         </div>
       </div>
     </div>