feat: ✨ add expirationdate ingredients, recommend recipes

유통기한 임박 재료, 재료 기반 추천 레시피 기능 추가
FRIED-NOTE · Dec 27, 2023 · f8730fa · f8730fa
1 parent 610044b
commit f8730fa
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 32 deletions.
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -72,7 +72,7 @@ const mockTagData = [
   { value: 'ingr-5', label: '# 재료 5' },
 ];
 
-const mockRecipeData: RecipeProps[] = Array(14).fill({
+export const mockRecipeData: RecipeProps[] = Array(14).fill({
   author: '해피밀',
   contents: `소스 : 스리라차 소스, 요거트 소스
 반죽 : 밀가루, 계란

diff --git a/src/pages/inventory/components/IngrInputBox.tsx b/src/pages/inventory/components/IngrInputBox.tsx
@@ -62,24 +62,24 @@ function IngrInputBox({
   ...props
 }: IngrInputBoxProps) {
   moment.locale('ko');
-  const [registerDate, setRegisterDate] = useState<Moment>(
+  const [registrationDate, setRegistrationDate] = useState<Moment>(
     moment().locale('ko'),
   );
-  const [bestBefore, setBestBefore] = useState<Moment | null>(null);
+  const [expirationDate, setExpirationDate] = useState<Moment | null>(null);
 
   const [inputData, setInputData] = useState<IngredientDataType>(
     item
       ? {
           name: item.name,
-          number: item.number,
-          registerDate: item.registerDate,
-          bestBefore: item.bestBefore,
+          quantity: item.quantity,
+          registrationDate: item.registrationDate,
+          expirationDate: item.expirationDate,
         }
       : {
           name: '',
-          number: '',
-          registerDate: registerDate,
-          bestBefore: bestBefore,
+          quantity: '',
+          registrationDate: registrationDate,
+          expirationDate: expirationDate,
         },
   );
   const [isComposing, composeProps] = useComposing();
@@ -91,13 +91,13 @@ function IngrInputBox({
 
           if (e.code === 'Enter' && inputData.name) {
             handleDataChange && handleDataChange(inputData);
-            setRegisterDate(moment().locale('ko'));
-            setBestBefore(null);
+            setRegistrationDate(moment().locale('ko'));
+            setExpirationDate(null);
             setInputData({
               name: '',
-              number: '',
-              registerDate: registerDate,
-              bestBefore: bestBefore,
+              quantity: '',
+              registrationDate: registrationDate,
+              expirationDate: expirationDate,
             });
             inputRef.current?.focus();
           }
@@ -151,28 +151,28 @@ function IngrInputBox({
       />
       <input
         type="text"
-        value={inputData.number}
+        value={inputData.quantity}
         onChange={(e) => {
-          setInputData({ ...inputData, number: e.target.value });
+          setInputData({ ...inputData, quantity: e.target.value });
         }}
         onKeyDown={handleKeyDown}
         css={styles.input.default}
         placeholder="수량을 입력해주세요."
         {...composeProps}
       />
       <CustomCalender
-        inputDate={inputData.registerDate}
+        inputDate={inputData.registrationDate}
         setInputDate={(date: Moment) => {
-          setInputData({ ...inputData, registerDate: date });
+          setInputData({ ...inputData, registrationDate: date });
         }}
         targetRef={inputRef}
       >
         등록일자 설정
       </CustomCalender>
       <CustomCalender
-        inputDate={inputData.bestBefore}
+        inputDate={inputData.expirationDate}
         setInputDate={(date: Moment) => {
-          setInputData({ ...inputData, bestBefore: date });
+          setInputData({ ...inputData, expirationDate: date });
         }}
         placeholder="유통기한 날짜를 선택해주세요."
         targetRef={inputRef}
@@ -186,14 +186,14 @@ function IngrInputBox({
         {inputData.name}
       </Typography>
       <Typography variant="body" css={styles.input.default}>
-        {inputData.number}
+        {inputData.quantity}
       </Typography>
       <Typography variant="body" css={styles.input.default}>
-        {inputData.registerDate.format('YYYY/MM/DD').toString()}
+        {inputData.registrationDate.format('YYYY/MM/DD').toString()}
       </Typography>
       <Typography variant="body" css={styles.input.default}>
-        {inputData.bestBefore
-          ? inputData.bestBefore.format('YYYY/MM/DD').toString()
+        {inputData.expirationDate
+          ? inputData.expirationDate.format('YYYY/MM/DD').toString()
           : ''}
       </Typography>
     </Group>

diff --git a/src/pages/inventory/components/ShortExpirationItem.tsx b/src/pages/inventory/components/ShortExpirationItem.tsx
@@ -0,0 +1,50 @@
+import { ReactComponent as IconCaution } from '@/assets/icon-caution.svg';
+import DesignSystem from '@/utils/designSystem';
+import { Group, Stack, Typography } from '@base';
+import { css } from '@emotion/react';
+import moment from 'moment';
+import { IngredientDataType } from '..';
+interface ShortExpirationItemProps {
+  item: IngredientDataType;
+}
+const styles = {
+  infoBox: css({
+    backgroundColor: DesignSystem.Color.background.gray,
+    border: '1px solid',
+    borderColor: DesignSystem.Color.background.black,
+    marginLeft: -1,
+    padding: '17.5px 119px 32px 18.6px',
+  }),
+};
+function ShortExpirationItem({ item }: ShortExpirationItemProps) {
+  return (
+    <Stack>
+      <Group gap={3} css={{ marginBottom: 14 }}>
+        <Typography variant="subtitle">{item.name}</Typography>
+        {item.expirationDate?.isBefore(moment()) && (
+          <IconCaution css={{ width: 24, height: 24 }} />
+        )}
+      </Group>
+      <Stack
+        css={styles.infoBox}
+        style={{
+          backgroundColor: `${
+            item.expirationDate?.isBefore(moment())
+              ? DesignSystem.Color.primary.yellow
+              : DesignSystem.Color.background.gray
+          }`,
+        }}
+      >
+        <Typography variant="body">수량 : {item.quantity}</Typography>
+        <Typography variant="body">
+          등록 일자 : {item.registrationDate?.format('YYYY/MM/DD').toString()}
+        </Typography>
+        <Typography variant="body">
+          유통기한 : {item.expirationDate?.format('YYYY/MM/DD').toString()}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default ShortExpirationItem;
diff --git a/src/pages/inventory/index.tsx b/src/pages/inventory/index.tsx
@@ -4,10 +4,14 @@ import { ReactComponent as IconList } from '@/assets/icon-list.svg';
 import DesignSystem from '@/utils/designSystem';
 import globalStyles from '@/utils/styles';
 import { Group, Stack, Typography } from '@base';
+import Pagenumber from '@copmonents/Pagenumber';
+import Recipe from '@copmonents/Recipe';
 import { css } from '@emotion/react';
 import moment, { Moment } from 'moment';
 import { useEffect, useRef, useState } from 'react';
+import { mockRecipeData } from '../home';
 import IngrInputBox from './components/IngrInputBox';
+import ShortExpirationItem from './components/ShortExpirationItem';
 const styles = {
   wrapper: css({}),
   inventory: {
@@ -54,15 +58,62 @@ const styles = {
 
 export interface IngredientDataType {
   name: string;
-  number: string;
-  registerDate: Moment;
-  bestBefore: Moment | null;
+  quantity: string;
+  registrationDate: Moment;
+  expirationDate: Moment | null;
 }
 
 function Inventory() {
   const [data, setData] = useState<IngredientDataType[]>([]);
   const [isEditing, setIsEditing] = useState(false);
   const [submit, setSubmit] = useState(false);
+  const [isOverflowed, setIsOverflowed] = useState<boolean>(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const checkRef = useRef<HTMLDivElement>(null);
+
+  const mockIngredientData: IngredientDataType[][] = [
+    [
+      {
+        name: '김치',
+        quantity: '3개',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2024-02-05'),
+      },
+      {
+        name: '소고기',
+        quantity: '300g',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2023-02-05'),
+      },
+      {
+        name: '양파',
+        quantity: '5개',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2023-02-05'),
+      },
+      {
+        name: '양파',
+        quantity: '5개',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2023-02-05'),
+      },
+    ],
+    [
+      {
+        name: '양파',
+        quantity: '5개',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2023-02-05'),
+      },
+      {
+        name: '양파',
+        quantity: '5개',
+        registrationDate: moment('2023-02-05'),
+        expirationDate: moment('2023-02-05'),
+      },
+    ],
+  ];
+
   const handleDataChange = (inputData: IngredientDataType) => {
     setData([{ ...inputData }, ...data]);
   };
@@ -72,9 +123,6 @@ function Inventory() {
   const handleDelete = (targetIdx: number) => {
     setData(data.filter((_, idx) => idx !== targetIdx));
   };
-  const checkRef = useRef<HTMLDivElement>(null);
-
-  const [isOverflowed, setIsOverflowed] = useState<boolean>(false);
 
   useEffect(() => {
     setIsOverflowed(
@@ -83,7 +131,7 @@ function Inventory() {
     );
   });
   return (
-    <Stack>
+    <Stack align="center">
       <Stack css={styles.inventory.background}>
         <Group position="apart" style={{ marginBottom: 31, width: 1264 }}>
           <Group gap={11}>
@@ -217,7 +265,7 @@ function Inventory() {
                       handleRemove={() => {
                         handleDelete(idx);
                       }}
-                      key={`${idx}-${item.name}-${item.registerDate}`}
+                      key={`${idx}-${item.name}-${item.registrationDate}`}
                     />
                   );
                 })}
@@ -229,6 +277,41 @@ function Inventory() {
           </Stack>
         </Stack>
       </Stack>
+      <Stack css={{ margin: '148px 0 65px 0', width: 1265 }} spacing={53}>
+        <Typography variant="headline">
+          유통기한이 얼마 남지 않은 재료
+        </Typography>
+        <Group>
+          {mockIngredientData[currentPage - 1].map((item, idx) => {
+            return <ShortExpirationItem item={item} />;
+          })}
+        </Group>
+      </Stack>
+      <Pagenumber
+        pageCount={mockIngredientData.length}
+        onPageChange={(page) => {
+          setCurrentPage(page);
+        }}
+      />
+      <Stack>
+        <Typography variant="headline" css={{ margin: '190px 0 53px 0' }}>
+          재료 기반 추천 레시피
+        </Typography>
+        <div
+          css={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '53px 15px',
+          }}
+        >
+          {mockRecipeData.map((props, index) => (
+            <Recipe
+              {...props}
+              key={`recipe-${props.name}-${props.author}-${index}`}
+            />
+          ))}
+        </div>
+      </Stack>
     </Stack>
   );
 }