Merge pull request #58 from Strong-Potato/41-feat-create-search-page

Feat: create search page
Strong-Potato · Jan 10, 2024 · eb6df5b · eb6df5b
2 parents 0ae90b4 + 9c6627e
commit eb6df5b
Show file tree

Hide file tree

Showing 55 changed files with 1,694 additions and 38 deletions.
diff --git a/src/components/Detail/Main/Swiper/Swiper.module.scss b/src/components/Detail/Main/Swiper/Swiper.module.scss
@@ -0,0 +1,10 @@
+.container {
+  width: 100%;
+  height: 24.8rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: #efefef;
+}
diff --git a/src/components/Detail/Main/Swiper/Swiper.tsx b/src/components/Detail/Main/Swiper/Swiper.tsx
@@ -0,0 +1,7 @@
+import styles from "./Swiper.module.scss";
+
+function Swiper() {
+  return <div className={styles.container}>Swiper</div>;
+}
+
+export default Swiper;
diff --git a/src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.tsx b/src/components/Home/RecommendedItemList/RecommendedItem/RecommendedItem.tsx
@@ -10,32 +10,27 @@ interface PropsType {
 }
 
 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>
+    <Link to={`/detail/${data.data.id}`} className={styles.container}>
+      <img
+        className={styles.item_img}
+        src={data.data.imageURL}
+        alt={`${data.data.title}의 사진`}
+      />
+      <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>
-      </Link>
-    </div>
+      </div>
+    </Link>
   );
 }
 

diff --git a/src/components/Home/SearchBarAtHome/SearchBarAtHome.tsx b/src/components/Home/SearchBarAtHome/SearchBarAtHome.tsx
@@ -6,7 +6,7 @@ import styles from "./SearchBarAtHome.module.scss";
 function SearchBarAtHome() {
   return (
     <div className={styles.container}>
-      <Link to="/search" className={styles.search_bar}>
+      <Link to="/home/search" className={styles.search_bar}>
         <span>어디로 떠나시나요?</span>
         <p className={styles.search_icon}>
           <IoSearchSharp />

diff --git a/src/components/Home/TabBar/TabBar.tsx b/src/components/Home/TabBar/TabBar.tsx
@@ -8,7 +8,7 @@ function TabBar() {
   return (
     <div className={styles.container}>
       <div className={styles.icons}>
-        <Link to="/search">
+        <Link to="/home/search">
           <IoSearchSharp />
         </Link>
         <Link to="/alarm">

diff --git a/src/components/Review/Review.module.scss b/src/components/Review/Review.module.scss
@@ -0,0 +1,47 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  gap: 8px;
+  padding: 24px 20px;
+  border-bottom: 1px solid $neutral100;
+
+  &__contentsBox {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &__name {
+      @include typography(button);
+    }
+
+    &__secondItems {
+      display: flex;
+      align-items: center;
+
+      &__star {
+        display: inline;
+        font-size: 1.6rem;
+        color: $etc0;
+      }
+
+      &__point {
+        margin-left: 2px;
+        @include typography(captionSmall);
+      }
+
+      &__visitedAt {
+        margin-left: 9px;
+        color: $primary300;
+        @include typography(captionSmall);
+      }
+    }
+
+    &__content {
+      @include typography(bodySmall);
+      text-overflow: ellipsis;
+    }
+  }
+}
diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx
@@ -0,0 +1,52 @@
+import { Avatar } from "@chakra-ui/react";
+import { GoStarFill } from "react-icons/go";
+
+import styles from "./Review.module.scss";
+
+import ReviewImageSlider from "./ReviewImageSlider/ReviewImageSlider";
+
+import { ReviewPropsTypes } from "@/types/detail";
+
+function Review({
+  name,
+  isGoogle = false,
+  point,
+  visitedAt,
+  content,
+  images,
+}: ReviewPropsTypes) {
+  return (
+    <div className={styles.container}>
+      <div>
+        <Avatar
+          size="sm"
+          name="Dan Abrahmov"
+          src="https://bit.ly/dan-abramov"
+        />
+      </div>
+      <div className={styles.container__contentsBox}>
+        <div className={styles.container__contentsBox__name}>
+          <span>{name}</span>
+          {isGoogle && <span>구글</span>}
+        </div>
+        <div className={styles.container__contentsBox__secondItems}>
+          <GoStarFill
+            className={styles.container__contentsBox__secondItems__star}
+          />
+          <span className={styles.container__contentsBox__secondItems__point}>
+            {point}
+          </span>
+          <span
+            className={styles.container__contentsBox__secondItems__visitedAt}
+          >
+            {visitedAt}
+          </span>
+        </div>
+        <div className={styles.container__contentsBox__content}>{content}</div>
+        {images && <ReviewImageSlider images={images} />}
+      </div>
+    </div>
+  );
+}
+
+export default Review;
diff --git a/src/components/Review/ReviewImageSlider/ReviewImageSlider.module.scss b/src/components/Review/ReviewImageSlider/ReviewImageSlider.module.scss
@@ -0,0 +1,56 @@
+.container {
+  overflow: hidden;
+  position: relative;
+
+  &__imgWrapper {
+    position: relative;
+    display: flex;
+    gap: 8px;
+
+    transition: all 1s;
+    img {
+      width: 7.6rem;
+      height: 7.6rem;
+    }
+  }
+
+  &__leftBtn {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translate(-10px, -50%);
+
+    width: 2.4rem;
+    height: 2.2rem;
+    border-radius: 1.2rem;
+
+    background-color: #ffffff;
+    z-index: 2;
+    &__icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__rightBtn {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translate(-10px, -50%);
+
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 1.2rem;
+
+    background-color: #ffffff;
+    z-index: 2;
+    &__icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
diff --git a/src/components/Review/ReviewImageSlider/ReviewImageSlider.tsx b/src/components/Review/ReviewImageSlider/ReviewImageSlider.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+
+import styles from "./ReviewImageSlider.module.scss";
+
+import useComponentSize from "@/hooks/useComponetSize";
+
+function ReviewImageSlider({ images }: { images: string[] }) {
+  const [slideLocation, setSlideLocation] = useState<number>(0);
+  const [componentRef, size] = useComponentSize();
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.container__leftBtn}
+        style={{ display: slideLocation === 0 ? "none" : "block" }}
+        onClick={() => {
+          setSlideLocation(slideLocation + 84);
+        }}
+      >
+        <AiOutlineLeft className={styles.container__leftBtn__icon} />
+      </div>
+      <div
+        className={styles.container__rightBtn}
+        style={{
+          display:
+            -slideLocation >= 84 * images.length - 1 - size.width
+              ? "none"
+              : "block",
+        }}
+        onClick={() => {
+          setSlideLocation(slideLocation - 84);
+        }}
+      >
+        <AiOutlineRight className={styles.container__rightBtn__icon} />
+      </div>
+      <div
+        className={styles.container__imgWrapper}
+        style={{ left: slideLocation + "px" }}
+        ref={componentRef}
+      >
+        {images.map((data) => (
+          <img src={data} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ReviewImageSlider;
diff --git a/src/components/SearchFromHome/SearchBar/SearchBar.module.scss b/src/components/SearchFromHome/SearchBar/SearchBar.module.scss
@@ -0,0 +1,66 @@
+@use "@/sass" as *;
+
+@mixin icon {
+  position: absolute;
+  top: calc(50% - 1.5px);
+
+  width: 24px;
+  height: 24px;
+
+  font-size: 24px;
+
+  transform: translateY(-50%);
+}
+
+.container {
+  width: 100%;
+  height: 4.8rem;
+
+  padding: 0 20px 8px 20px;
+
+  .search_container {
+    position: relative;
+
+    padding: 5px 32px 8px 32px;
+
+    .bottom_line {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      width: 100%;
+      height: 2px;
+
+      background-color: $primary300;
+    }
+  }
+
+  .searchBar {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    @include typography(subTitle);
+
+    &__input {
+      width: 100%;
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .return {
+    left: 0;
+
+    @include icon;
+  }
+  .enter {
+    right: 0;
+
+    @include icon;
+
+    cursor: pointer;
+  }
+}