Merge pull request #56 from MBTips/feature/Home-페이지-컴포넌트-반응형-추가

Feature/home 페이지 컴포넌트 반응형 추가

Author: junjeeong

.prettierrc

@@ -8,5 +8,12 @@
   "trailingComma": "none",
   "printWidth": 80,
   "arrowParens": "always",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/index.css",
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": ["clsx", "cn", "tw"],
+  "tailwindPreserveWhitespace": true,
+  "tailwindPreserveDuplicates": false
 }

package-lock.json

@@ -29,7 +29,8 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.0.5"

package.json

@@ -31,7 +31,7 @@ const Banner = () => {
   }, []);
 
   return (
-    <div className="relative flex w-full h-[184px]">
+    <div className="relative flex h-[184px] w-full">
       {images.map((image, index) => (
         // a -> Link로 바꿀 예정
         <a href={`/contents/${index}`}>
@@ -46,7 +46,7 @@ const Banner = () => {
           />
         </a>
       ))}
-      <div className="right-[20px] bottom-[12px] absolute">
+      <div className="absolute right-[20px] bottom-[12px]">
         <Indicator order={order} setOrder={setOrder} />
       </div>
     </div>

public/image/home_banner_lg_3.png

@@ -1,6 +1,6 @@
 const NavBar = () => {
   return (
-    <div className="flex flex-row items-center justify-center w-[500px] h-[56px]">
+    <div className="flex h-[56px] w-full justify-between">
       <img
         src="/public/icon/mbtipslogo.svg"
         alt="Logo"

src/components/Banner.tsx

@@ -1,6 +1,6 @@
 const StrokeBanner = () => {
   return (
-    <div className="flex flex-col justify-center px-[38px] py-6 border border-gray-200 border-dashed rounded-lg w-[335px] h-[178px] text-center">
+    <div className="flex h-[178px] w-[320px] flex-col justify-center rounded-lg border border-dashed border-gray-200 px-[38px] py-6 text-center md:w-[335px] lg:w-[460px]">
       {/* "상대방 정보 선택" 페이지 생성되면되면 Link로 쓸 예정*/}
       <a href="/setting-friends">
         <img
@@ -11,10 +11,10 @@ const StrokeBanner = () => {
           height={40}
         />
       </a>
-      <strong className="mt-4 font-bold text-4 text-gray-900">
+      <strong className="text-4 mt-4 font-bold text-gray-900">
         친구 정보를 저장하고 대화할 수 있어요
       </strong>
-      <p className="mt-2 font-light text-gray-900 text-sm">
+      <p className="mt-2 text-sm font-light text-gray-900">
         로그인 시 기억하고 싶은 친구의 MBTI와 특징을 입력해서 빠르게 대화할 수
         있어요
       </p>

src/components/NavBar.tsx

@@ -16,18 +16,19 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
 
   return (
     <div className="flex items-center">
-      <h2 className="font-bold text-gray-900 text-xl">
+      <h2 className="text-xl font-bold text-gray-900">
         {titleList[mode].title}
       </h2>
-      <p className="ml-1.5 font-light text-md">{titleList[mode].description}</p>
+      <p className="ml-1.5 flex-1 text-sm font-light text-gray-800">
+        {titleList[mode].description}
+      </p>
       {mode === "친구목록" && (
         <button onClick={() => navigate("/setting-friends")}>
           <img
-            className="ml-[78px]"
             src="/icon/plus.svg"
             alt="친구 추가 버튼"
-            width={14}
-            height={14}
+            width={20}
+            height={20}
           />
         </button>
       )}

src/components/StrokeBanner.tsx

@@ -1,11 +1,14 @@
-import PrimaryButton from "@/components/button/PrimaryButton";
+import { MouseEvent } from "react";
 
-const ChatStartButton = () => {
-    return (
-        <PrimaryButton size="md">
-            대화 시작하기
-      </PrimaryButton>
-  )
-}
+const ChatStartButton = ({ onClick }: { onClick: (e: MouseEvent) => void }) => {
+  return (
+    <button
+      className="flex h-[56px] w-[320px] items-center justify-center rounded-lg bg-primary-normal font-bold text-white md:w-[335px] lg:w-[460px]"
+      onClick={onClick}
+    >
+      대화 시작하기
+    </button>
+  );
+};
 
-export default ChatStartButton;
+export default ChatStartButton;

src/components/SubTitle.tsx

@@ -1,42 +1,5 @@
 @import "tailwindcss";
-
-@theme {
-  --color-primary-normal: #5C4AE8;
-  --color-primary-light: #C8CDFF;
-  --color-primary-pale: #EBEDFF;
-  --color-secondary-normal: #ADE700;
-  --color-secondary-light: #D3EF7F;
-  --color-secondary-pale: #DEF599;
-  --color-gray-50: #F0F2F5;
-  --color-gray-100: #E6E8ED;
-  --color-gray-200: #CFD4DB;
-  --color-gray-300: #AEB4BD;
-  --color-gray-400: #929AA4;
-  --color-gray-500: #848C96;
-  --color-gray-600: #585D65;
-  --color-gray-700: #43474E;
-  --color-gray-800: #353940;
-  --color-gray-900: #2B2E33;
-  --color-background: #D0D5DD;
-  --color-foreground: #000000;
-
-  --text-2xl: 20px;
-  --text-2xl--line-height: 30px;
-  --text-xl: 18px;
-  --text-xl--line-height: 27px;
-  --text-2lg: 16px;
-  --text-2lg--line-height: 24px;
-  --text-lg: 14px;
-  --text-lg--line-height: 21px;
-  --text-md: 12px;
-  --text-md--line-height: 18px;
-  --text-sm: 10px;
-  --text-sm--line-height: 15px;
-
-  —breakpoint-sm: 345px;
-  —breakpoint-md: 375px;
-  —breakpoint-lg: 500px;
-}
+@config "../tailwind.config.ts";
 
 :root {
   font-family: "Pretendard";