Feat: create home

src/components/GlobalNavigationBar/GlobalNavigationBar.module.scss

@@ -4,14 +4,17 @@
   position: fixed;
   bottom: 0;
 
-  max-width: 500px;
+  max-width: 45rem;
   width: 100%;
-  height: 56px;
+  height: 5.6rem;
 
   display: flex;
   box-shadow:
     0px -2px 8px 0px rgba(20, 20, 20, 0.04),
     0px -1px 1px 0px rgba(20, 20, 20, 0.02);
+
+  background-color: $neutral0;
+
   a {
     flex-grow: 1;
 

src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.module.scss

@@ -0,0 +1,48 @@
+@use "@/sass" as *;
+
+.container {
+  min-width: 14.4rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .item_img {
+    width: 100%;
+    height: 14.4rem;
+
+    border-radius: 1.6rem;
+  }
+
+  .text_box {
+    display: flex;
+    flex-direction: column;
+
+    @include typography(captionSmall);
+
+    .gray {
+      color: $neutral400;
+    }
+
+    .item_title {
+      @include typography(titleSmall);
+    }
+
+    .item_score {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .score {
+        display: flex;
+        align-items: center;
+
+        @include typography(captionMidium);
+      }
+      .star {
+        padding: 2px;
+        color: $etc0;
+      }
+    }
+  }
+}

src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.tsx

@@ -0,0 +1,42 @@
+import { FaStar } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+import styles from "./RecommendedItem.module.scss";
+
+import { RecommendedItemDataType } from "@/types/home";
+
+interface PropsType {
+  data: RecommendedItemDataType;
+}
+
+function RecommendedItem(data: PropsType) {
+  const linkURL = `/detail/${data.data.id}`;
+  const imageAlt = `${data.data.title}의 사진`;
+
+  return (
+    <div className={styles.container}>
+      <Link to={linkURL}>
+        <img
+          className={styles.item_img}
+          src={data.data.imageURL}
+          alt={imageAlt}
+        />
+        <div className={styles.text_box}>
+          <span className={styles.item_title}>{data.data.title}</span>
+          <span className={styles.gray}>{data.data.location}</span>
+          <div className={styles.item_score}>
+            <p className={styles.score}>
+              <span className={styles.star}>
+                <FaStar />
+              </span>
+              <span>{data.data.score}</span>
+            </p>
+            <span className={styles.gray}>({data.data.reviewNumber})</span>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default RecommendedItem;

src/components/Home/RecommendedItemList/RecommendedItemList.module.scss

@@ -0,0 +1,10 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  gap: 16px;
+
+  padding: 0 20px;
+
+  overflow-x: scroll;
+}

src/components/Home/RecommendedItemList/RecommendedItemList.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+import styles from "./RecommendedItemList.module.scss";
+
+import { getData } from "@/mocks/handlers/home";
+
+import RecommendedItem from "./RecommendedItem/RecommendedItem";
+
+import { RecommendedItemDataType } from "@/types/home";
+
+interface PropsType {
+  apiNum: number;
+}
+
+function RecommendedItemList(apiNum: PropsType) {
+  const [data, setData] = useState<RecommendedItemDataType[]>();
+
+  useEffect(() => {
+    getData<RecommendedItemDataType[] | undefined>(
+      `home/recommendedItem/${apiNum.apiNum}`,
+      setData,
+    );
+  }, [apiNum]);
+
+  return (
+    <div className={styles.container}>
+      {data &&
+        data.map((data, i) => (
+          <RecommendedItem data={data} key={data.title + i} />
+        ))}
+    </div>
+  );
+}
+
+export default RecommendedItemList;

src/components/Home/RecommendedLocationList/RecommendedLocation/RecommendedLocation.module.scss

@@ -0,0 +1,39 @@
+@use "@/sass" as *;
+
+.container {
+  position: relative;
+
+  min-width: 12.2rem;
+  height: 12.2rem;
+
+  border-radius: 12.2rem;
+
+  overflow: hidden;
+
+  color: $neutral0;
+
+  @include typography(titleMedium);
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .text_wall {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    background-color: rgba(0, 0, 0, 0.2);
+
+    width: 100%;
+    height: 100%;
+  }
+
+  span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/components/Home/RecommendedLocationList/RecommendedLocation/RecommendedLocation.tsx

@@ -0,0 +1,26 @@
+import { Link } from "react-router-dom";
+
+import styles from "./RecommendedLocation.module.scss";
+
+import { LocationDataType } from "@/types/home";
+
+interface PropsType {
+  data: LocationDataType;
+}
+
+function RecommendedLocation(data: PropsType) {
+  const link = `/search/${data.data.location}`;
+  const imageAlt = `${data.data.location}의 사진`;
+
+  return (
+    <div className={styles.container}>
+      <Link to={link}>
+        <img src={data.data.imageURL} alt={imageAlt}></img>
+        <div className={styles.text_wall} />
+        <span>{data.data.location}</span>
+      </Link>
+    </div>
+  );
+}
+
+export default RecommendedLocation;

src/components/Home/RecommendedLocationList/RecommendedLocationList.module.scss

@@ -0,0 +1,10 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  gap: 8px;
+
+  padding: 0 20px;
+
+  overflow-x: scroll;
+}

src/components/Home/RecommendedLocationList/RecommendedLocationList.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+import styles from "./RecommendedLocationList.module.scss";
+
+import { getData } from "@/mocks/handlers/home";
+
+import RecommendedLocation from "./RecommendedLocation/RecommendedLocation";
+
+import { LocationDataType } from "@/types/home";
+
+function RecommendedLocationList() {
+  const [data, setData] = useState<LocationDataType[]>();
+
+  useEffect(() => {
+    getData<LocationDataType[] | undefined>(
+      `home/recommendedLocation`,
+      setData,
+    );
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      {data &&
+        data.map((data, i) => (
+          <RecommendedLocation data={data} key={data.location + i} />
+        ))}
+    </div>
+  );
+}
+
+export default RecommendedLocationList;

src/components/Home/SearchBarAtHome/SearchBarAtHome.module.scss

@@ -0,0 +1,26 @@
+@use "@/sass" as *;
+
+.container {
+  width: 100%;
+
+  padding: 0 20px;
+
+  .search_bar {
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+
+    padding: 12px 24px;
+
+    border: 1px solid $primary300;
+    border-radius: 10rem;
+    color: $neutral300;
+
+    @include typography(subTitle);
+
+    .search_icon {
+      font-size: 2.4rem;
+    }
+  }
+}

src/components/Home/SearchBarAtHome/SearchBarAtHome.tsx

@@ -0,0 +1,19 @@
+import { IoSearchSharp } from "react-icons/io5";
+import { Link } from "react-router-dom";
+
+import styles from "./SearchBarAtHome.module.scss";
+
+function SearchBarAtHome() {
+  return (
+    <div className={styles.container}>
+      <Link to="/search" className={styles.search_bar}>
+        <span>어디로 떠나시나요?</span>
+        <p className={styles.search_icon}>
+          <IoSearchSharp />
+        </p>
+      </Link>
+    </div>
+  );
+}
+
+export default SearchBarAtHome;

src/components/Home/TabBar/TabBar.module.scss

@@ -0,0 +1,24 @@
+@use "@/sass" as *;
+
+.container {
+  position: fixed;
+  top: 0;
+
+  width: 100%;
+  max-width: 45rem;
+  height: 5.6rem;
+
+  padding: 20px 16px;
+
+  background-color: $neutral0;
+
+  z-index: 10;
+
+  .icons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+
+    font-size: 2.4rem;
+  }
+}

src/components/Home/TabBar/TabBar.tsx

@@ -0,0 +1,20 @@
+import { AiOutlineBell } from "react-icons/ai";
+import { IoSearchSharp } from "react-icons/io5";
+import { Link } from "react-router-dom";
+
+import styles from "./TabBar.module.scss";
+
+function TabBar() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.icons}>
+        <Link to="/search">
+          <IoSearchSharp />
+        </Link>
+        <AiOutlineBell />
+      </div>
+    </div>
+  );
+}
+
+export default TabBar;

src/components/Home/TripSpaceAtHome/TripSpaceAtHome.module.scss

@@ -0,0 +1,10 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  gap: 8px;
+
+  padding: 0 20px;
+
+  overflow-x: scroll;
+}