Merge pull request #147 from sullog-official/142-fix-myrecords-api-연동-누락

sullog-official · Jun 28, 2023 · ab37734 · ab37734
2 parents 004dd56 + e846ad6
commit ab37734
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 87 deletions.
diff --git a/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.tsx b/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.tsx
@@ -1,35 +1,33 @@
 import classNames from 'classnames/bind';
+import { Dispatch, SetStateAction } from 'react';
 
 import AlcoholCategoryTabItem from '@/features/search/components/AlcoholCategoryTabItem';
-import { AlcoholTag } from '@/shared/types/alcohol';
+import { ALCOHOL_CATEGORIES } from '@/shared/constants/alcohol';
 
 import styles from './AlcoholCategoryTab.module.scss';
 
 const cx = classNames.bind(styles);
+const ALL = '전체';
 
 type AlcoholCategoryTabProps = {
-  alcoholCategories: (keyof typeof AlcoholTag)[];
   selectedTab: string;
-  onTabChange: (alcohol: keyof typeof AlcoholTag) => void;
+  onTabChange: Dispatch<SetStateAction<string>>;
 };
 
 const AlcoholCategoryTab = ({
-  alcoholCategories,
   selectedTab,
   onTabChange,
 }: AlcoholCategoryTabProps) => {
   return (
     <div className={cx('wrapper')}>
-      {alcoholCategories.map((category: any) => {
-        return (
-          <AlcoholCategoryTabItem
-            key={category}
-            alcohol={category}
-            isSelected={selectedTab === category}
-            setSelectedTab={onTabChange}
-          />
-        );
-      })}
+      {[...ALCOHOL_CATEGORIES, ALL].map((category: string) => (
+        <AlcoholCategoryTabItem
+          key={category}
+          alcohol={category}
+          isSelected={selectedTab === category}
+          setSelectedTab={onTabChange}
+        />
+      ))}
     </div>
   );
 };

diff --git a/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.tsx b/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.tsx
@@ -10,7 +10,7 @@ const cx = classNames.bind(styles);
 type AlcoholCategoryTabItemProps = {
   alcohol: keyof typeof AlcoholTag;
   isSelected: boolean;
-  setSelectedTab: (alcohol: AlcoholCategoryTabItemProps['alcohol']) => void;
+  setSelectedTab: (alcohol: string) => void;
 };
 
 const AlcoholCategoryTabItem = ({
@@ -30,12 +30,12 @@ const AlcoholCategoryTabItem = ({
       onClick={onClickTab}
       className={cx('button', isSelected && 'clicked')}
     >
-      {alcohol === 'All' ? (
+      {alcohol === '전체' ? (
         <div>all</div>
       ) : (
-        <Icon name={alcohol} size={20} color={svgColor} />
+        <Icon name={AlcoholTag[alcohol]} size={20} color={svgColor} />
       )}
-      <span className={cx('name')}>{AlcoholTag[alcohol]}</span>
+      <span className={cx('name')}>{alcohol}</span>
     </button>
   );
 };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import Icon from '@/shared/components/Icon';
 import PageLayout from '@/shared/components/PageLayout';
 import TopNavigator from '@/shared/components/TopNavigator';
 import { useModal } from '@/shared/hooks/useModal';
+import { alcoholTagToKor } from '@/shared/types/alcohol';
 
 import styles from './index.module.scss';
 
@@ -33,9 +34,7 @@ export default function Home() {
 
   const [showFilter, setShowFilter] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-
-  // 소주/증류주 -> 소주
-  // 탁주 -> 막걸리
+
   const filteredRecords = useMemo(() => {
     return selectedFilters.includes('전체') || !selectedFilters.length
       ? records

diff --git a/src/pages/my/records/index.tsx b/src/pages/my/records/index.tsx
@@ -1,87 +1,60 @@
 import classNames from 'classnames/bind';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import AlcoholPreview from '@/features/alcohol/components/AlcoholPreview';
 import AlcoholCategoryTab from '@/features/search/components/AlcoholCategoryTab';
+import { useGetMyRecords } from '@/shared/apis/records/getMyRecords';
 import BottomNavigator from '@/shared/components/BottomNavigator';
 import PageLayout from '@/shared/components/PageLayout';
 import TopNavigator from '@/shared/components/TopNavigator';
-import { AlcoholTag } from '@/shared/types/alcohol';
 
 import styles from './index.module.scss';
 
 const cx = classNames.bind(styles);
 
-// TODO: apis 연결시 삭제
-const sampleDescription =
-  '테이스팅, 시식, 시음, 맛 평가. 식품의 질을 맛으로 평가하는 것. 특히버터, 오일, 푸아그라, 초콜릿 등은 전문 맛 감정사가 있다. 파리 시 연구소에';
-
-const alcoholCategories = Object.keys(
-  AlcoholTag
-) as (keyof typeof AlcoholTag)[];
-
 const MyRecords = () => {
-  const [selectedTab, setSelectedTab] =
-    useState<keyof typeof AlcoholTag>('Soju');
+  const { data: records = [] } = useGetMyRecords();
+  const [selectedTab, setSelectedTab] = useState<string>('전체');
+
+  const filteredRecords = useMemo(
+    () =>
+      selectedTab === '전체'
+        ? records
+        : records.filter(
+            (record) => {
+              if (record.alcoholType === '소주/증류주') {
+                return selectedTab.includes('소주');
+              } else if (record.alcoholType === '탁주') {
+                return selectedTab.includes('막걸리');
+              } else if (record.alcoholType !== '과실주') {
+                return selectedTab.includes('기타');
+              } else {
+                return selectedTab.includes(record.alcoholType);
+              }
+            },
+            [records, selectedTab]
+          ),
+    [records, selectedTab]
+  );
 
   return (
     <PageLayout className={cx('main')} hasBottomNavigatorPadding>
       <TopNavigator title={'나의 술로그'} highlighted>
         <AlcoholCategoryTab
-          alcoholCategories={alcoholCategories}
           selectedTab={selectedTab}
           onTabChange={setSelectedTab}
         />
       </TopNavigator>
       <div className={cx('preview-wrapper')}>
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
-        <AlcoholPreview
-          name={'술 이름'}
-          brand={'브랜드'}
-          description={sampleDescription}
-          imgSrc={'https://via.placeholder.com/100'}
-        />
+        {filteredRecords.map((record) => (
+          <AlcoholPreview
+            key={record.recordId}
+            name={record.alcoholName}
+            brand={record.brandName}
+            description={record.description}
+            imgSrc={record.mainPhotoPath}
+          />
+        ))}
       </div>
       <BottomNavigator />
     </PageLayout>

diff --git a/src/shared/types/alcohol.ts b/src/shared/types/alcohol.ts
@@ -6,13 +6,25 @@ export type Alcohol = {
   productionLocation: string;
   productionLatitude: number;
   productionLongitude: number;
+  alcoholTag: keyof typeof alcoholTagToKor;
   alcoholType: string;
 };
 
+export const alcoholTagToKor = {
+  SOJU: '소주',
+  FRUIT_WINE: '과실주',
+  MAKGEOLLI: '막걸리',
+  ETC: '기타',
+};
+
+export const alcoholTagToEng = Object.fromEntries(
+  Object.entries(alcoholTagToKor).map(([key, value]) => [value, key])
+);
+
 export enum AlcoholTag {
-  'Soju' = '소주',
-  'FruitWine' = '과실주',
-  'Makgeolli' = '막걸리',
-  'Etc' = '기타',
-  'All' = '전체',
+  '소주' = 'Soju',
+  '과실주' = 'FruitWine',
+  '막걸리' = 'Makgeolli',
+  '기타' = 'Etc',
+  '전체' = 'All',
 }