Feat: "홈페이지 레이아웃 및 UI 수정"

Readme-Monster · May 9, 2024 · 7ccd088 · 7ccd088
1 parent 3a0a06d
commit 7ccd088
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 55 deletions.
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
@@ -14,40 +14,36 @@ interface ButtonProps {
 
 function HomePage() {
   return (
-    <div className="dark:bg-gradient-dark w-full h-[calc(100vh-80px)] flex flex-col items-center justify-center gap-[20px]">
-      <div className="flex-Center flex-col" data-testid="home">
-        <img alt="로고" src="/images/rm-logo.png" width="150" height="150" data-testid="logo" />
-        <span className="text-textPrimary  dark:text-textWhite text-3xl md:text-6xl sm:text-5xl font-bold line-lg" data-testid="title">
-          README-MONSTER
-        </span>
-        <p
-          className="max-w-md mx-auto mt-3 text-textSecondary display-contents sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
-          data-testid="description"
-        >
-          <span>당신의 프로젝트 README를</span>
-          <span>자동으로 만들 수 있는 가장 빠르고 쉬운 방법</span>
+    <div className="bg-gradient-test dark:bg-gradient-dark w-full h-[calc(100vh-80px)]  mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
+      <div className="mx-auto max-w-xl text-center" data-testid="home">
+        <h1 className="text-3xl font-extrabold sm:text-5xl text-textPrimary  dark:text-textWhite" data-testid="title">
+          README-MONSTER<br/>
+          <strong className="font-extrabold text-textBlue sm:block">Builder & Generator</strong>
+        </h1>
+        <p className="mt-4 sm:text-xl/relaxed text-textSecondary" data-testid="description">
+        사용자가 직관적인 인터페이스를 통해 README 파일을 쉽게 구성할 수 있게 도와주고, 생성형 AI를 이용해 적절한 README 구성을 추천합니다
         </p>
-      </div>
-      <div className="flex flex-row gap-[20px]" data-testid="button">
-        <Button
-          url="/editor"
-          color="text-white"
-          backgroundColor="bg-textBlue"
-          dark="bg-darkSecondary"
-          hover="hover:bg-textBlueHover"
-          description="시작하기"
-          testId="firstButton"
-        />
-        <Button
-          url="/signup"
-          color="text-textPrimary"
-          backgroundColor="bg-gray-200"
-          dark="bg-gray-200"
-          hover="hover:bg-textgreyHover"
-          description="더 알아보기"
-          testId="secondButton"
-        />
-        <AiGenerator />
+        <div className="mt-8 flex flex-wrap justify-center gap-4" data-testid="button">
+          <Button
+            url="/editor"
+            color="text-white"
+            backgroundColor="bg-textBlue"
+            dark="bg-darkPrimary"
+            hover="hover:bg-textBlueHover"
+            description="시작하기"
+            testId="firstButton"
+          />
+          <Button
+            url="/signup"
+            color="text-textPrimary"
+            backgroundColor="bg-gray-200"
+            dark="bg-gray-200"
+            hover="hover:bg-textgreyHover"
+            description="더 알아보기"
+            testId="secondButton"
+          />
+          <AiGenerator />
+        </div>
       </div>
     </div>
   );
@@ -62,27 +58,23 @@ export function Button({ url, color, backgroundColor, description, hover, dark,
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <span className="inline-flex rounded-md shadow">
-        <div
-          className={`
-          inline-flex items-center px-4 py-2 
-          font-medium text-xl 
-          ${backgroundColor} 
-          ${hover} 
-          border-transparent rounded-lg 
-          dark:${dark}
-          ${color} 
-          w-[250px] h-[54px] 
-          justify-center
-          cursor-pointer
-          `}
-          onClick={handleClick}
-          data-testid={testId}
-        >
-          {description}
-        </div>
-      </span>
+    <div
+      className={`
+        block w-full rounded shadow 
+        inline-flex items-center px-12 py-3 
+        ${backgroundColor} dark:${dark}
+        ${color} ${hover} 
+        font-medium text-sm 
+        cursor-pointer
+        focus:outline-none focus:ring sm:w-auto
+        w-[270px] h-[54px] 
+        justify-center
+        
+      `}
+      onClick={handleClick}
+      data-testid={testId}
+    >
+      {description}
     </div>
   );
-}
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,9 +15,11 @@ module.exports = {
         textBlack: "#000000",
         darkPrimary: "#1e2937",
         darkSecondary: "#374152",
+        darkTertiary:"#222222",
       },
       backgroundImage: {
         'gradient-dark': 'linear-gradient(#1e2937, #556274) !important', // 새 그라데이션 추가
+        'gradient-test': 'linear-gradient(white, #4B88FF) !important',
       },
       screens: {
         mobile: "768px",