[Feat/#41] 메인 뷰 구현

package.json

@@ -21,6 +21,7 @@
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.5.2",
     "openapi-typescript": "^7.5.2",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",

src/asset/svg/IcClear.tsx

@@ -1,13 +1,6 @@
-import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIcClear = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={21}
-    height={20}
-    fill="none"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width={21} height={20} fill="none" {...props}>
     <path
       stroke="#717171"
       strokeLinecap="round"

src/asset/svg/IcTemporary.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+const SvgIcTemporary = (props: SVGProps<SVGSVGElement>) => (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+  <svg xmlns="http://www.w3.org/2000/svg" width={57} height={56} fill="none" {...props}>
+    <mask
+      id="ic_temporary_svg__a"
+      width={57}
+      height={56}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path
+        fill="#171719"
+        d="M22.055 7.584c0-1.16.94-2.1 2.1-2.1h8.16a2.1 2.1 0 1 1 0 4.2h-8.16a2.1 2.1 0 0 1-2.1-2.1M18.093 7.55a2.1 2.1 0 0 1-2.035 2.163c-2 .06-2.832.219-3.426.524l-.02.01c-.901.451-1.65 1.203-2.158 2.172-.304.592-.461 1.426-.522 3.42a2.1 2.1 0 1 1-4.198-.128c.06-1.99.205-3.697.988-5.219l.006-.013c.88-1.684 2.242-3.104 3.994-3.983 1.52-.778 3.223-.921 5.208-.981a2.1 2.1 0 0 1 2.163 2.035M38.377 7.55a2.1 2.1 0 0 1 2.162-2.035c1.986.06 3.689.203 5.208.981 1.753.88 3.114 2.3 3.995 3.983l.006.013c.783 1.522.927 3.228.987 5.219a2.1 2.1 0 1 1-4.198.127c-.06-1.993-.218-2.826-.52-3.42-.509-.968-1.258-1.72-2.158-2.17l-.022-.01c-.593-.306-1.426-.465-3.425-.525a2.1 2.1 0 0 1-2.035-2.163M7.833 21.805c1.16 0 2.1.94 2.1 2.1v8.16a2.1 2.1 0 1 1-4.2 0v-8.16c0-1.16.94-2.1 2.1-2.1M48.636 21.805c1.16 0 2.1.94 2.1 2.1v8.16a2.1 2.1 0 1 1-4.2 0v-8.16c0-1.16.94-2.1 2.1-2.1M48.73 38.127a2.1 2.1 0 0 1 2.036 2.163c-.06 1.99-.204 3.696-.987 5.219l-.007.012c-.88 1.684-2.242 3.104-3.995 3.983-1.52.778-3.222.922-5.207.982a2.1 2.1 0 0 1-.128-4.198c2-.06 2.832-.22 3.426-.524l.02-.011c.901-.45 1.65-1.202 2.159-2.171.303-.593.46-1.427.52-3.42a2.1 2.1 0 0 1 2.163-2.035M7.77 38.157a2.1 2.1 0 0 1 2.162 2.036c.061 1.999.22 2.832.524 3.425l.011.021c.45.9 1.202 1.65 2.171 2.158.593.303 1.427.46 3.42.52a2.1 2.1 0 0 1-.128 4.199c-1.99-.06-3.696-.204-5.219-.987l-.012-.007c-1.684-.88-3.104-2.242-3.983-3.994-.778-1.52-.921-3.222-.982-5.208a2.1 2.1 0 0 1 2.036-2.163M22.055 48.387c0-1.16.94-2.1 2.1-2.1h8.16a2.1 2.1 0 0 1 0 4.2h-8.16a2.1 2.1 0 0 1-2.1-2.1"
+      />
+    </mask>
+    <g mask="url(#ic_temporary_svg__a)">
+      <path fill="#222" d="M.25 0h56v56h-56z" />
+    </g>
+  </svg>
+);
+export default SvgIcTemporary;

src/asset/svg/index.ts

@@ -1,9 +1,10 @@
 export { default as IcNormal } from "./IcNormal";
 export { default as IcBottomSheetLine } from "./IcBottomSheetLine";
+export { default as IcoMessage } from "./IcoMessage";
+export { default as IcoSkeleton } from "./IcoSkeleton";
+export { default as IcDelete } from "./IcDelete";
 export { default as IcEllipse57 } from "./IcEllipse57";
-export { default as IcShape } from "./IcShape";
 export { default as IcClear } from "./IcClear";
-export { default as IcDelete } from "./IcDelete";
 export { default as IcLogo } from "./IcLogo";
 export { default as IcEllipses } from "./IcEllipses";
 export { default as IcLeftarrow } from "./IcLeftarrow";
@@ -14,9 +15,9 @@ export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
 
 export { default as Check } from "./Check";
 export { default as IcUp } from "./IcUp";
+export { default as IcShape } from "./IcShape";
+export { default as IcTemporary } from "./IcTemporary";
 export { default as IcTest } from "./IcTest";
-export { default as IcoMessage } from "./IcoMessage";
-export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as Plus } from "./Plus";
 export { default as IcToastError } from "./IcToastError";
 export { default as React } from "./React";

src/common/component/Nav/Nav.css.ts

@@ -15,11 +15,13 @@ export const container = style([
 
 export const navItem = recipe({
   base: {
+    width: "5.6rem",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
     padding: "0 1.2rem",
+    whiteSpace: "nowrap",
   },
   variants: {
     state: {

src/common/component/TextField/index.tsx

@@ -4,11 +4,11 @@ import { IcClear } from "@asset/svg";
 
 interface TextFieldProps {
   icon?: React.ReactNode;
-  state?: "default" | "error";
+  state?: "default" | "error" | "search";
   active?: boolean;
   placeholder?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onClick?: () => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onClearClick?: () => void;

src/common/component/TextField/styles.css.ts

@@ -1,5 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
-import { color, font } from "@style/styles.css.ts";
+import { color, font, semanticColor } from "@style/styles.css.ts";
 
 export const styles = {
   wrapper: recipe({
@@ -19,6 +19,14 @@ export const styles = {
         error: {
           border: `0.1rem solid ${color.red.warning_red200}`,
         },
+        search: {
+          display: "flex",
+          width: "33.5rem",
+          marginLeft: "2rem",
+          border: `0.1rem solid ${semanticColor.line.strong}`,
+          backgroundColor: semanticColor.neutral.normal,
+          boxShadow: " 0px 2px 10px 0px rgba(0, 0, 0, 0.15)",
+        },
       },
       active: {
         true: {},

src/page/main/index/Main.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+export const mainContainer = style({
+  width: "37.5rem",
+  margin: "0 auto",
+  position: "relative", 
+});
+
+export const headerContainer = style({
+  position: "absolute", 
+  top: "18rem",
+  zIndex: 4,
+});

src/page/main/index/Main.tsx

@@ -1,55 +1,50 @@
+import MainFooter from "./mainFooter/MainFooter";
 import Divider from "@common/component/Divider/Divider";
-import Spacing from "@common/component/Spacing/Spacing";
-import { Button } from "@common/component/Button";
-import { IcTest } from "@asset/svg";
-import SimpleBottomSheet from "@common/component/SimpleBottomSheet/SimpleBottomSheet";
-import CommentList from "@common/component/Comment/CommentList";
-import { mockComments } from "../../../shared/constant/mockComment";
+import HotPost from "./hotPost/HotPost";
+import MainHeader from "./mainHeader/mainHeader";
+import Symptom from "./symptom/Symptom";
+import { TextField } from "@common/component/TextField";
+import { useNavigate } from "react-router-dom";
+import { IcSearch } from "@asset/svg";
+import * as styles from "./Main.css";
+import Nav from "@common/component/Nav/Nav";
+
+const postsData = [
+  { id: 1, title: "실시간 심장병 질문 1위" },
+  { id: 2, title: "가장 인기 있는 산책 코스" },
+  { id: 3, title: "반려동물 먹이 추천" },
+  { id: 4, title: "집에서 하는 셀프 미용 팁" },
+  { id: 5, title: "반려동물과 함께하는 여행 준비" },
+];
+
+const petName = "연진이";
+
 const Main = () => {
-  // const { category, categoryData, setOpen, toggleOpen } = useFilterStore();
+  const navigate = useNavigate();
 
-  return (
-    <>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="solidPrimary" disabled={true} />
-        <Button label="Button" size="small" variant="solidPrimary" disabled={false} />
-        <Button label="Button" size="medium" variant="solidPrimary" disabled={false} />
-        <Button label="Button" size="large" variant="solidPrimary" disabled={false} />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="solidNeutral" disabled={true} />
-        <Button label="Button" size="small" variant="solidNeutral" disabled={false} />
-        <Button label="Button" size="medium" variant="solidNeutral" disabled={false} />
-        <Button label="Button" size="large" variant="solidNeutral" disabled={false} />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="outlinePrimary" disabled={true} />
-        <Button label="Button" size="small" variant="outlinePrimary" disabled={false} />
-        <Button label="Button" size="medium" variant="outlinePrimary" disabled={false} />
-        <Button label="Button" size="large" variant="outlinePrimary" disabled={false} />
-      </div>
+  const handleSearchClick = () => {
+    navigate("/search");
+  };
 
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" leftIcon={<IcTest />} size="medium" variant="solidPrimary" disabled={false} />
-        <Button label="Button" rightIcon={<IcTest />} size="medium" variant="solidPrimary" disabled={false} />
-        <Button
-          label="Button"
-          leftIcon={<IcTest />}
-          rightIcon={<IcTest />}
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.headerContainer}>
+        <TextField
+          state="search"
+          placeholder="심장병, 백내장"
+          onClick={handleSearchClick}
+          value=""
+          icon={<IcSearch />}
         />
       </div>
-
-      <span>main</span>
-      <SimpleBottomSheet />
-      <Spacing marginBottom="10" />
-      <Divider size="small" />
-      <Spacing marginBottom="10" />
+      <MainHeader />
+      <Symptom />
+      <Divider />
+      <HotPost petName={petName} posts={postsData} />
       <Divider />
-      <CommentList comments={mockComments} />
-    </>
+      <MainFooter />
+      <Nav />
+    </div>
   );
 };
 

src/page/main/index/hotPost/HotPost.css.ts

@@ -0,0 +1,71 @@
+import { color, font, semanticColor } from "@style/styles.css";
+import { style } from "@vanilla-extract/css";
+
+export const hotPostContainer = style({
+  display: "flex",
+  width: "37.5rem",
+  flexDirection: "column",
+  padding: "2rem",
+  marginTop: "3rem",
+});
+
+export const p = style([
+  font.label01,
+  {
+    color: semanticColor.text.normal,
+    fontWeight: "500",
+    letterSpacing: "-0.24rem",
+  },
+]);
+
+export const petName = style([
+  font.heading02,
+  {
+    fontWeight: "600",
+    color: color.primary.blue700,
+  },
+]);
+
+export const title = style([
+  { marginBottom: "1.2rem" },
+  font.heading02,
+  {
+    letterSpacing: "-0.18rem",
+    color: semanticColor.text.normal,
+  },
+]);
+
+export const hotPostListContainer = style({
+  display: "flex",
+  padding: "1.6rem 1.6rem 0rem 1.6rem",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  alignSelf: "stretch",
+  gap: "1.2rem",
+  borderRadius: "16px",
+  border: `0.1rem solid ${semanticColor.text.normal}`,
+  borderColor: "#f0f0f0",
+});
+
+export const postContent = style({
+  display: "flex",
+  gap: "0.4rem",
+  marginBottom: "1.2rem",
+  width: "30.3rem",
+});
+
+export const contentId = style([
+  { gap: "1.2rem" },
+  font.body01,
+  {
+    color: semanticColor.primary.strong,
+  },
+]);
+
+export const contentTitle = style([
+  font.body01,
+  {
+    letterSpacing: "-0.28rem",
+    color: semanticColor.text.normal,
+  },
+]);