Merge pull request #220 from choooz/JR-899-refactor-search-page

[JR-899] 검색 페이지 리팩토링
choooz · Jul 28, 2024 · 2a7ca32 · 2a7ca32
2 parents 42db088 + 883741a
commit 2a7ca32
Show file tree

Hide file tree

Showing 36 changed files with 665 additions and 421 deletions.
diff --git a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx
@@ -1,7 +1,7 @@
 import { useToggle } from '@monorepo/hooks';
 import Chip from 'components/Chip';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import VoteHeader from 'components/VoteHeader';
 import { Button } from 'components/button';
 import Path from 'lib/Path';

diff --git a/apps/jurumarble/src/app/main/components/Carousel.tsx b/apps/jurumarble/src/app/main/components/Carousel.tsx
@@ -54,7 +54,7 @@ function Carousel({ hotDrinkList }: Props) {
               >
                 <Box>
                   <DrinkImageContainer>
-                    <RankginMark>{index + 1}</RankginMark>
+                    <RankingMark>{index + 1}</RankingMark>
                     <DrinkImageWrapper
                       alt={name}
                       src={image}
@@ -119,7 +119,7 @@ const DrinkImageContainer = styled.div`
   left: 20px;
 `;
 
-const RankginMark = styled.div`
+const RankingMark = styled.div`
   ${({ theme }) =>
     css`
       background-color: ${theme.colors.main_01};

diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useToggle } from '@react-hookz/web';
 import DrinkItem from 'app/stamp/components/DrinkItem';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import { Button } from 'components/button';
 import Path from 'lib/Path';
 import Image from 'next/image';

diff --git a/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx b/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { TAB_LIST, TabList } from 'src/types/my';
 import styled, { css } from 'styled-components';
 
+import { TAB_LIST, TabList } from '../constants';
 import useGetTheNumberOfMyVoteService from '../services/useGetCountedVoteService';
 
 interface Props {
@@ -31,7 +31,7 @@ function VoteCountContainer({ selectedTab, onClickSelectedTab }: Props) {
             <VoteCount>
               {id === 'created-vote'
                 ? writtenVoteCnt
-                : id === 'paticipated-vote'
+                : id === 'participated-vote'
                 ? joinedVoteCnt
                 : id === 'bookmarked-vote'
                 ? bookmarkedVoteCnt

diff --git a/apps/jurumarble/src/app/my/components/VoteListContainer.tsx b/apps/jurumarble/src/app/my/components/VoteListContainer.tsx
@@ -2,11 +2,11 @@
 
 import { useCreateQueryString } from 'hooks/useCreateQueryString';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { TabList } from 'src/types/my';
 import styled, { css } from 'styled-components';
 
 import VoteCountContainer from './VoteCountContainer';
 import VoteItem from './VoteItem';
+import { TabList } from '../constants';
 import useGetMyBookmarkedVoteListService from '../services/useGetMyBookmarkedVoteListService';
 import useGetMyCreatedVoteListService from '../services/useGetMyCreatedVoteListService';
 import useGetMyParticipatedVoteListService from '../services/useGetMyParticipatedVoteListService';
@@ -18,7 +18,7 @@ import useGetMyParticipatedVoteListService from '../services/useGetMyParticipate
 const MY_VOTE_LIST_SERVICE = {
   'created-vote': useGetMyCreatedVoteListService,
   'bookmarked-vote': useGetMyBookmarkedVoteListService,
-  'paticipated-vote': useGetMyParticipatedVoteListService,
+  'participated-vote': useGetMyParticipatedVoteListService,
 };
 
 function VoteListContainer() {

diff --git a/apps/jurumarble/src/types/my.ts → .../jurumarble/src/app/my/constants/index.ts b/apps/jurumarble/src/types/my.ts → .../jurumarble/src/app/my/constants/index.ts
@@ -1,6 +1,6 @@
 export const TAB_LIST = [
   { id: 'created-vote', name: '작성한 투표' },
-  { id: 'paticipated-vote', name: '참여한 투표' },
+  { id: 'participated-vote', name: '참여한 투표' },
   { id: 'bookmarked-vote', name: '북마크 투표' },
 ] as const;
 

diff --git a/apps/jurumarble/src/app/search/components/DrinkInfoList.tsx b/apps/jurumarble/src/app/search/components/DrinkInfoList.tsx
@@ -0,0 +1,42 @@
+import Path from 'lib/Path';
+import { useRouter } from 'next/navigation';
+import styled from 'styled-components';
+
+import DrinkItem from './DrinkItem';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkInfoList() {
+  const router = useRouter();
+
+  const { drinkList, selectedTab } = useSearchValueContext();
+
+  const { onToggleReplaceLoginPageModal, drinkSubscribe } =
+    useSearchChangeContext();
+
+  const onClickDrinkItem = (id: number) => {
+    router.push(`${Path.DRINK_INFO_PAGE}/${id}`);
+  };
+
+  return (
+    <Container>
+      {drinkList.map((drinkInfo) => (
+        <DrinkItem
+          key={drinkInfo.id}
+          drinkInfo={drinkInfo}
+          onClickDrinkItem={() => onClickDrinkItem(drinkInfo.id)}
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
+      ))}
+      {selectedTab === 'drinkInfo' && <div ref={drinkSubscribe} />}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 24px;
+`;
+
+export default DrinkInfoList;
diff --git a/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
@@ -0,0 +1,34 @@
+import { DRINK_INFO_SORT_LIST } from 'lib/constants';
+import styled from 'styled-components';
+
+import DrinkInfoList from './DrinkInfoList';
+import RegionSmallSelect from './RegionSmallSelect';
+import SortSelect from './SortSelect';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkInfoTopSectionItem() {
+  const { drinkInfoSortOption } = useSearchValueContext();
+  const { onChangeDrinkInfoSortOption } = useSearchChangeContext();
+
+  return (
+    <>
+      <SelectContainer>
+        <SortSelect
+          defaultOption={drinkInfoSortOption}
+          onChangeSortOption={onChangeDrinkInfoSortOption}
+          options={DRINK_INFO_SORT_LIST}
+        />
+        <RegionSmallSelect />
+      </SelectContainer>
+      <DrinkInfoList />
+    </>
+  );
+}
+
+const SelectContainer = styled.div`
+  display: flex;
+  margin-top: 40px;
+  gap: 4px;
+`;
+
+export default DrinkInfoTopSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/DrinkList.tsx b/apps/jurumarble/src/app/search/components/DrinkList.tsx
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
@@ -0,0 +1,34 @@
+import { DRINK_VOTE_SORT_LIST } from 'lib/constants';
+import styled from 'styled-components';
+
+import DrinkVoteList from './DrinkVoteList';
+import RegionSmallSelect from './RegionSmallSelect';
+import SortSelect from './SortSelect';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkVoteBottomSectionItem() {
+  const { drinkVoteSortOption } = useSearchValueContext();
+  const { onChangeDrinkVoteSortOption } = useSearchChangeContext();
+
+  return (
+    <>
+      <SelectContainer>
+        <SortSelect
+          defaultOption={drinkVoteSortOption}
+          onChangeSortOption={onChangeDrinkVoteSortOption}
+          options={DRINK_VOTE_SORT_LIST}
+        />
+        <RegionSmallSelect />
+      </SelectContainer>
+      <DrinkVoteList />
+    </>
+  );
+}
+
+const SelectContainer = styled.div`
+  display: flex;
+  margin-top: 40px;
+  gap: 4px;
+`;
+
+export default DrinkVoteBottomSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx
@@ -1,35 +1,17 @@
-import { useSearchParams } from 'next/navigation';
 import styled from 'styled-components';
 
 import DrinkVoteItem from './DrinkVoteItem';
-import useVoteDrinkService from '../services/useVoteDrinkService';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
-interface Props {
-  searchText: string;
-  sortOption: string;
-  regionOption: string;
-  isSelectedTab: boolean;
-  onToggleReplaceLoginPageModal: () => void;
-}
-function DrinkVoteList({
-  searchText,
-  sortOption,
-  regionOption,
-  onToggleReplaceLoginPageModal,
-}: Props) {
-  const searchParams = useSearchParams();
-  const selectedTab = searchParams.get('selectedTab');
+function DrinkVoteList() {
+  const { voteDrinkList, selectedTab } = useSearchValueContext();
+  const { onToggleReplaceLoginPageModal, drinkVoteSubscribe } =
+    useSearchChangeContext();
 
-  const { voteDrinkList, subscribe } = useVoteDrinkService({
-    page: 0,
-    size: 3,
-    keyword: searchText,
-    region: regionOption,
-    sortBy: sortOption,
-  });
   if (!voteDrinkList) {
     return <></>;
   }
+
   return (
     <Container>
       {voteDrinkList.map((voteDrink, index) => (
@@ -39,7 +21,7 @@ function DrinkVoteList({
           onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
         />
       ))}
-      {selectedTab === 'drinkVote' && <div ref={subscribe} />}
+      {selectedTab === 'drinkVote' && <div ref={drinkVoteSubscribe} />}
     </Container>
   );
 }

diff --git a/apps/jurumarble/src/app/search/components/NoSearchResult.tsx b/apps/jurumarble/src/app/search/components/NoSearchResult.tsx
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import { noSearchResult } from 'public/images';
+import styled from 'styled-components';
+
+function NoSearchResult() {
+  return (
+    <Container>
+      <Image
+        alt="검색 결과가 없습니다."
+        src={noSearchResult}
+        width={140}
+        height={140}
+      />
+      <Text>검색 결과가 없어요. 다른 검색어를 입력해보세요.</Text>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const Text = styled.p``;
+
+export default NoSearchResult;
diff --git a/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx b/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx
@@ -4,19 +4,19 @@ import { REGION_LIST } from 'lib/constants';
 import SvgIcExpandMore from 'src/assets/icons/components/IcExpandMore';
 import styled, { css } from 'styled-components';
 
-interface Props {
-  defaultOption: string;
-  onChangeSortOption: (id: string) => void;
-}
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
-function RegionSmallSelect({ defaultOption, onChangeSortOption }: Props) {
+function RegionSmallSelect() {
   const [isOpen, onToggleOpen] = useToggle();
 
+  const { regionOption } = useSearchValueContext();
+  const { onChangeRegionOption } = useSearchChangeContext();
+
   return (
     <SelectStyled isOpen={isOpen}>
       <Select
-        defaultValue={defaultOption}
-        onChangeSelectedOption={onChangeSortOption}
+        defaultValue={regionOption}
+        onChangeSelectedOption={onChangeRegionOption}
         options={[
           { value: '', label: '지역', lat: 0, long: 0 },
           ...REGION_LIST,