Merge pull request #4 from Team-Stracker/feature/3-main-page-publishing

Feature/3 main page publishing

Author: seungw0o

apps/web/public/assets/logoWithTexts.svg

@@ -1,3 +1,54 @@
+"use client";
+import { Button, SearchInput, Contents } from "@web/components";
+
+import { useRouter } from "next/navigation";
+
 export default function Home() {
-  return <></>;
+  const router = useRouter();
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between pl-5 pr-7 pt-4 pb-4 border-b border-solid border-zinc-300">
+        <img src="/assets/logoWithTexts.svg" />
+        <Button
+          size="small"
+          backColor="blue"
+          borderColor="blue"
+          onClick={() => {
+            router.push(`/login`);
+          }}
+        >
+          시작하기
+        </Button>
+      </div>
+      <div className="flex flex-col pt-6 pl-32 gap-10">
+        <SearchInput />
+        <div className="grid grid-cols-2 gap-10">
+          <Contents
+            img=""
+            title="test"
+            date="2025-06-01"
+            tags={["test", "test", "test"]}
+          />
+          <Contents
+            img=""
+            title="test"
+            date="2025-06-01"
+            tags={["test", "test", "test"]}
+          />
+          <Contents
+            img=""
+            title="test"
+            date="2025-06-01"
+            tags={["test", "test", "test"]}
+          />
+          <Contents
+            img=""
+            title="test"
+            date="2025-06-01"
+            tags={["test", "test", "test"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
 }

apps/web/src/app/page.tsx

@@ -8,6 +8,7 @@ interface ButtonProps {
   backColor?: string;
   textColor?: string;
   borderColor?: string;
+  onClick?: () => void;
 }
 
 const Button = ({
@@ -16,19 +17,21 @@ const Button = ({
   backColor,
   textColor,
   borderColor,
+  onClick,
 }: ButtonProps) => {
   return (
     <div
       className={clsx(
-        "flex items-center justify-center rounded-lg cursor-pointer hover:bg-blue-500",
+        "flex items-center justify-center rounded-lg cursor-pointer hover:bg-blue-400",
         {
-          "px-4 py-2 text-b2": size === "small",
-          "px-6 py-3 text-b2": size === "medium",
+          "w-[7rem] h-[3rem] text-b2": size === "small",
+          "w-[10rem] h-[3rem] text-b2": size === "medium",
           "w-[27rem] h-[3rem] text-b2": size === "large",
         },
-        { "bg-blue-600 text-white": backColor === "blue" },
-        { "border border-blue-600": borderColor === "blue" },
+        { "bg-blue-500 text-white": backColor === "blue" },
+        { "border border-blue-500": borderColor === "blue" },
       )}
+      onClick={onClick}
     >
       {children}
     </div>

apps/web/src/components/button.tsx

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+
+interface ContentsProps {
+  img: string;
+  title: string;
+  date: string;
+  tags: string[];
+}
+
+const Contents = ({ img, title, date, tags }: ContentsProps) => {
+  return (
+    <div className="flex gap-11 rounded-2xl border border-solid border-zinc-200 hover:border-blue-200 cursor-pointer pl-4 pb-24 pt-6 w-[38rem] h-[15rem] ">
+      <div
+        className={clsx(
+          "w-[20rem] h-[9rem] flex items-center justify-center rounded-lg",
+          img === "" ? "bg-zinc-100" : "bg-white",
+        )}
+      >
+        <img
+          src={img === "" ? "/assets/baseImg.svg" : img}
+          alt="contentImg"
+          className="w-[6rem] h-[6rem]"
+        />
+      </div>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col">
+          <div className="text-h3">{title}</div>
+          <div className="text-b2 text-zinc-500">생성일자 | {date}</div>
+        </div>
+        <div className="flex gap-4">
+          {tags.map((tag, index) => (
+            <div key={index} className="text-b2 text-blue-500">
+              {tag}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contents;

apps/web/src/components/contents.tsx

@@ -1,2 +1,4 @@
 export { default as Input } from "./input";
 export { default as Button } from "./button";
+export { default as SearchInput } from "./searchInput";
+export { default as Contents } from "./contents";

apps/web/src/components/index.ts

@@ -0,0 +1,14 @@
+const SearchInput = () => {
+  return (
+    <div className="flex items-center bg-zinc-50 border border-solid border-zinc-200 rounded-lg py-3 pl-4 w-[24rem] gap-2">
+      <img src="./assets/search.svg" alt="searchIcon" />
+      <input
+        type="text"
+        className="text-t1 focus:outline-none bg-zinc-50 w-[20rem]"
+        placeholder="검색"
+      />
+    </div>
+  );
+};
+
+export default SearchInput;