refactor: ♻️ reflect code reviews

코드 리뷰에서 언급된 수정사항들을 수정했습니다
FRIED-NOTE · Feb 11, 2024 · b4e587c · b4e587c
1 parent 5ec4a64
commit b4e587c
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 154 deletions.
diff --git a/src/pages/inventory/components/IngrInputBox.tsx b/src/pages/inventory/components/IngrInputBox.tsx
@@ -44,7 +44,7 @@ const styles = {
   }),
 };
 interface IngrInputBoxProps extends HTMLAttributes<HTMLDivElement> {
-  type: string;
+  type: 'input' | 'edit' | 'list';
   item?: IngredientDataType;
   submit?: boolean;
   handleDataChange?: (inputData: IngredientDataType) => void;
@@ -67,21 +67,12 @@ function IngrInputBox({
   );
   const [expirationDate, setExpirationDate] = useState<Moment | null>(null);
 
-  const [inputData, setInputData] = useState<IngredientDataType>(
-    item
-      ? {
-          name: item.name,
-          quantity: item.quantity,
-          registrationDate: item.registrationDate,
-          expirationDate: item.expirationDate,
-        }
-      : {
-          name: '',
-          quantity: '',
-          registrationDate: registrationDate,
-          expirationDate: expirationDate,
-        },
-  );
+  const [inputData, setInputData] = useState<IngredientDataType>({
+    name: item?.name || '',
+    quantity: item?.quantity || '',
+    registrationDate: item?.registrationDate || registrationDate,
+    expirationDate: item?.expirationDate || expirationDate,
+  });
   const [isComposing, composeProps] = useComposing();
 
   const handleKeyDown =
@@ -110,7 +101,8 @@ function IngrInputBox({
     }
   }, [type]);
   const inputRef = useRef<HTMLInputElement>(null);
-  return type === 'input' || type === 'edit' ? (
+
+  return (
     <Group css={styles.box} position="apart" style={style}>
       {type === 'edit' && (
         <motion.div
@@ -146,7 +138,8 @@ function IngrInputBox({
         onKeyDown={handleKeyDown}
         ref={inputRef}
         css={styles.input.default}
-        placeholder="재료를 입력해주세요."
+        readOnly={type === 'list'}
+        placeholder={type === 'list' ? undefined : '재료를 입력해주세요.'}
         {...composeProps}
       />
       <input
@@ -157,14 +150,16 @@ function IngrInputBox({
         }}
         onKeyDown={handleKeyDown}
         css={styles.input.default}
-        placeholder="수량을 입력해주세요."
+        readOnly={type === 'list'}
+        placeholder={type === 'list' ? undefined : '수량을 입력해주세요.'}
         {...composeProps}
       />
       <CustomCalender
         inputDate={inputData.registrationDate}
         setInputDate={(date: Moment) => {
           setInputData({ ...inputData, registrationDate: date });
         }}
+        type={type}
         targetRef={inputRef}
       >
         등록일자 설정
@@ -174,29 +169,13 @@ function IngrInputBox({
         setInputDate={(date: Moment) => {
           setInputData({ ...inputData, expirationDate: date });
         }}
+        type={type}
         placeholder="유통기한 날짜를 선택해주세요."
         targetRef={inputRef}
       >
         유통기한 설정
       </CustomCalender>
     </Group>
-  ) : (
-    <Group css={styles.box} gap={48}>
-      <Typography variant="body" css={styles.input.default}>
-        {inputData.name}
-      </Typography>
-      <Typography variant="body" css={styles.input.default}>
-        {inputData.quantity}
-      </Typography>
-      <Typography variant="body" css={styles.input.default}>
-        {inputData.registrationDate.format('YYYY/MM/DD').toString()}
-      </Typography>
-      <Typography variant="body" css={styles.input.default}>
-        {inputData.expirationDate
-          ? inputData.expirationDate.format('YYYY/MM/DD').toString()
-          : ''}
-      </Typography>
-    </Group>
   );
 }
 
@@ -207,17 +186,23 @@ interface CustomCalenderProps extends HTMLAttributes<HTMLDivElement> {
   inputDate: Moment | null;
   setInputDate: (date: Moment) => void;
   targetRef: React.RefObject<HTMLInputElement>;
+  type: 'input' | 'edit' | 'list';
 }
 
 const CustomCalender = ({
   children,
   inputDate,
   setInputDate,
   targetRef,
+  type,
   ...props
 }: CustomCalenderProps) => {
   const [focus, setFocus] = useState(false);
-  return (
+  return type === 'list' ? (
+    <Typography variant="body" css={styles.input.default}>
+      {inputDate?.format('YYYY/MM/DD').toString()}
+    </Typography>
+  ) : (
     <SingleDatePicker
       date={inputDate}
       onDateChange={(date) => {
@@ -281,8 +266,9 @@ const CustomCalender = ({
       appendToBody
       disableScroll
       daySize={48}
+      verticalSpacing={9}
       {...props}
-      id="unique-id"
+      id={`${children}-${type}`}
     />
   );
 };
diff --git a/src/pages/inventory/components/ShortExpirationItem.tsx b/src/pages/inventory/components/ShortExpirationItem.tsx
@@ -2,7 +2,7 @@ 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 moment, { Moment } from 'moment';
 import { IngredientDataType } from '..';
 interface ShortExpirationItemProps {
   item: IngredientDataType;
@@ -12,30 +12,29 @@ const styles = {
     backgroundColor: DesignSystem.Color.background.gray,
     border: '1px solid',
     borderColor: DesignSystem.Color.background.black,
+    marginLeft: -1,
     boxSizing: 'border-box',
     width: 317,
     padding: '17.5px 119px 32px 18.6px',
   }),
+  bgColor: (expirationDate: Moment | null) => {
+    return {
+      backgroundColor: expirationDate?.isBefore(moment())
+        ? DesignSystem.Color.primary.yellow
+        : DesignSystem.Color.background.gray,
+    };
+  },
 };
 function ShortExpirationItem({ item }: ShortExpirationItemProps) {
   return (
-    <td style={{ padding: 0 }}>
+    <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
-          }`,
-        }}
-      >
+      <Stack css={[styles.infoBox, styles.bgColor(item.expirationDate)]}>
         <Typography variant="body">수량 : {item.quantity}</Typography>
         <Typography variant="body">
           등록 일자 : {item.registrationDate?.format('YYYY/MM/DD').toString()}
@@ -44,7 +43,7 @@ function ShortExpirationItem({ item }: ShortExpirationItemProps) {
           유통기한 : {item.expirationDate?.format('YYYY/MM/DD').toString()}
         </Typography>
       </Stack>
-    </td>
+    </Stack>
   );
 }