[JR-714] 검색 페이지 구현

apps/jurumarble/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
     styledComponents: true,
   },
   transpilePackages: ["@monorepo/ui, @monorepo/hooks"],
+  images: {
+    domains: ["shopping-phinf.pstatic.net"],
+  },
 };
 
 module.exports = nextConfig;

apps/jurumarble/src/app/search/components/ChipContainer.tsx

@@ -0,0 +1,66 @@
+import { UseMutateFunction } from "@tanstack/react-query";
+import Chip from "components/Chip";
+import React from "react";
+import SvgIcBookmarkActive from "src/assets/icons/components/IcBookmarkActive";
+import SvgIcBookmark from "src/assets/icons/components/IcBookmark";
+import styled from "styled-components";
+
+interface Props {
+  title: string;
+  date: string;
+  region: string;
+  mutateBookMark: UseMutateFunction;
+  isBookmark: boolean;
+}
+
+const ChipContainer = ({ date, title, region, mutateBookMark, isBookmark }: Props) => {
+  return (
+    <>
+      <TagRow>
+        <FlexRow>
+          {region && <Chip variant="region">{region}</Chip>}
+          <Chip variant="numberOfParticipants">122명이 즐겼어요</Chip>
+        </FlexRow>
+        <FlexRow>
+          {isBookmark ? (
+            <SvgIcBookmarkActive width={20} height={20} onClick={() => mutateBookMark()} />
+          ) : (
+            <SvgIcBookmark width={20} height={20} onClick={() => mutateBookMark()} />
+          )}
+        </FlexRow>
+      </TagRow>
+      <TitleRow>
+        {title}
+        {/* <DateText>{date.slice(0, 10)}</DateText> */}
+      </TitleRow>
+      <DateText>{date}</DateText>
+    </>
+  );
+};
+
+const TagRow = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  margin-top: 20px;
+  ${({ theme }) => theme.typography.body01};
+`;
+
+const DateText = styled.div`
+  color: ${({ theme }) => theme.colors.black_04};
+  ${({ theme }) => theme.typography.body_long03}
+  text-align: right;
+  margin: 8px 0 20px;
+`;
+
+const FlexRow = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+export default ChipContainer;

apps/jurumarble/src/app/search/components/DrinkList.tsx

@@ -0,0 +1,58 @@
+import { Button } from "components/button";
+import DrinkItem from "components/DrinkItem";
+import { SortType } from "src/types/common";
+import styled, { css } from "styled-components";
+import useSearchDrinkService from "../services/useDrinkService";
+
+interface Props {
+  searchText: string;
+  sortOption: string;
+  regionOption: string;
+  isSelectedTab: boolean;
+}
+
+function DrinkList({ searchText, sortOption, regionOption, isSelectedTab }: Props) {
+  const { drinkList, fetchNextPage, hasNextPage } = useSearchDrinkService({
+    page: 0,
+    size: 3,
+    keyword: searchText,
+    region: regionOption,
+    sortBy: sortOption as SortType,
+  });
+
+  if (!drinkList) {
+    return <></>;
+  }
+
+  const onClickFetchNextPage = () => {
+    hasNextPage && fetchNextPage();
+  };
+
+  return (
+    <Container>
+      {drinkList.map((drinkInfo) => (
+        <DrinkItem key={drinkInfo.id} drinkInfo={drinkInfo} />
+      ))}
+      {!isSelectedTab && (
+        <MoreButton variant="outline" width="100%" height="48px" onClick={onClickFetchNextPage}>
+          우리술 정보 더보기
+        </MoreButton>
+      )}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 24px;
+`;
+
+const MoreButton = styled(Button)`
+  ${({ theme }) => css`
+    ${theme.typography.body01}
+    margin: 24px 0 40px 0;
+  `};
+`;
+export default DrinkList;

apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx

@@ -0,0 +1,51 @@
+import { Vote } from "lib/apis/vote";
+import Path from "lib/Path";
+import { useRouter } from "next/navigation";
+import useBookmarkService from "services/useBookmarkService";
+import styled from "styled-components";
+import ChipContainer from "./ChipContainer";
+import VoteDescription from "./VoteDescription";
+
+interface Props {
+  voteDrink: Vote;
+}
+/**
+ *
+ * @Todo 타입 더 깔끔하게 정의 필요
+ */
+function DrinkVoteItem({ voteDrink }: Props) {
+  const { voteId, region, title, imageA, imageB } = voteDrink;
+
+  const { mutateBookMark, bookMarkCheckQuery } = useBookmarkService(voteId);
+
+  const { data: bookmarkCheck } = bookMarkCheckQuery;
+
+  const isBookmark = bookmarkCheck?.bookmarked || false;
+
+  const router = useRouter();
+  const onClickDrinkVoteItem = () => {
+    router.push(`${Path.VOTE_DETAIL_PAGE}/${voteId}`);
+  };
+
+  return (
+    <Container onClick={onClickDrinkVoteItem}>
+      <ChipContainer
+        title={title}
+        date="20.08.22"
+        region={region}
+        mutateBookMark={mutateBookMark}
+        isBookmark={isBookmark}
+      />
+      <VoteDescription imageA={imageA} imageB={imageB} />
+    </Container>
+  );
+}
+
+const Container = styled.button`
+  border-radius: 10px;
+  border: 1px solid ${({ theme }) => theme.colors.line_02};
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 10px 25px 0px rgba(0, 0, 0, 0.06);
+  padding: 20px;
+`;
+
+export default DrinkVoteItem;

apps/jurumarble/src/app/search/components/DrinkVoteList.tsx

@@ -0,0 +1,58 @@
+import { Button } from "components/button";
+import styled, { css } from "styled-components";
+import useVoteDrinkService from "../services/useVoteDrinkService";
+import DrinkVoteItem from "./DrinkVoteItem";
+
+interface Props {
+  searchText: string;
+  sortOption: string;
+  regionOption: string;
+  isSelectedTab: boolean;
+}
+
+function DrinkVoteList({ searchText, sortOption, regionOption, isSelectedTab }: Props) {
+  const { voteDrinkList, fetchNextPage, hasNextPage } = useVoteDrinkService({
+    page: 0,
+    size: 3,
+    keyword: searchText,
+    region: regionOption,
+    sortBy: sortOption,
+  });
+
+  if (!voteDrinkList) {
+    return <></>;
+  }
+
+  const onClickFetchNextPage = () => {
+    hasNextPage && fetchNextPage();
+  };
+
+  return (
+    <Container>
+      {voteDrinkList.map((voteDrink, index) => (
+        <DrinkVoteItem key={`drinkVoteItem_${index}`} voteDrink={voteDrink} />
+      ))}
+      {!isSelectedTab && (
+        <MoreButton variant="outline" width="100%" height="48px" onClick={onClickFetchNextPage}>
+          우리술 투표 더보기
+        </MoreButton>
+      )}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  gap: 8px;
+`;
+
+const MoreButton = styled(Button)`
+  ${({ theme }) => css`
+    ${theme.typography.body01}
+    margin: 24px 0 40px 0;
+  `};
+`;
+
+export default DrinkVoteList;

apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx

@@ -0,0 +1,62 @@
+import { REGION_LIST, SORT_LIST } from "lib/constants";
+import styled, { css } from "styled-components";
+import { useToggle } from "@monorepo/hooks";
+import SvgIcExpandMore from "src/assets/icons/components/IcExpandMore";
+import { Select } from "components/selectBox";
+
+interface Props {
+  defaultOption: string;
+  onChangeSortOption: (id: string) => void;
+}
+
+REGION_LIST.unshift({ value: "", label: "지역" });
+
+function RegionSmallSelect({ defaultOption, onChangeSortOption }: Props) {
+  const [isOpen, onToggleOpen] = useToggle();
+
+  return (
+    <SelectStyled isOpen={isOpen}>
+      <Select
+        defaultValue={defaultOption}
+        onChangeSelectedOption={onChangeSortOption}
+        options={REGION_LIST}
+        isOpen={isOpen}
+        onToggleOpen={onToggleOpen}
+      >
+        <SvgIcExpandMore width={20} height={20} />
+      </Select>
+    </SelectStyled>
+  );
+}
+
+const SelectStyled = styled.span<{ isOpen: boolean }>`
+  ${({ theme, isOpen }) => css`
+    ${theme.typography.button01};
+    color: ${theme.colors.black_03};
+    width: 80px;
+    height: 40px;
+    .selected-label {
+      border: 1px solid ${theme.colors.line_01};
+      border-radius: 8px;
+      padding: 10px 12px;
+      width: 96px;
+    }
+    svg {
+      ${isOpen && "transform: rotateX( 180deg )"}
+    }
+  `}
+  #select-list {
+    width: 100px;
+    height: 200px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px 0;
+  }
+  #indicator {
+    display: flex;
+  }
+`;
+
+export default RegionSmallSelect;