From b4e587cfd9c639ac850d9890c79be526754b5bc1 Mon Sep 17 00:00:00 2001 From: chocoboy08 Date: Mon, 12 Feb 2024 00:28:14 +0900 Subject: [PATCH] refactor: :recycle: reflect code reviews MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 코드 리뷰에서 언급된 수정사항들을 수정했습니다 --- .../inventory/components/IngrInputBox.tsx | 62 ++--- .../components/ShortExpirationItem.tsx | 25 +- src/pages/inventory/index.tsx | 216 +++++++++--------- src/pages/inventory/react_dates_overrides.css | 1 + 4 files changed, 150 insertions(+), 154 deletions(-) diff --git a/src/pages/inventory/components/IngrInputBox.tsx b/src/pages/inventory/components/IngrInputBox.tsx index cdbbfec..9a94cac 100644 --- a/src/pages/inventory/components/IngrInputBox.tsx +++ b/src/pages/inventory/components/IngrInputBox.tsx @@ -44,7 +44,7 @@ const styles = { }), }; interface IngrInputBoxProps extends HTMLAttributes { - type: string; + type: 'input' | 'edit' | 'list'; item?: IngredientDataType; submit?: boolean; handleDataChange?: (inputData: IngredientDataType) => void; @@ -67,21 +67,12 @@ function IngrInputBox({ ); const [expirationDate, setExpirationDate] = useState(null); - const [inputData, setInputData] = useState( - item - ? { - name: item.name, - quantity: item.quantity, - registrationDate: item.registrationDate, - expirationDate: item.expirationDate, - } - : { - name: '', - quantity: '', - registrationDate: registrationDate, - expirationDate: expirationDate, - }, - ); + const [inputData, setInputData] = useState({ + 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(null); - return type === 'input' || type === 'edit' ? ( + + return ( {type === 'edit' && ( { 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} > 유통기한 설정 - ) : ( - - - {inputData.name} - - - {inputData.quantity} - - - {inputData.registrationDate.format('YYYY/MM/DD').toString()} - - - {inputData.expirationDate - ? inputData.expirationDate.format('YYYY/MM/DD').toString() - : ''} - - ); } @@ -207,6 +186,7 @@ interface CustomCalenderProps extends HTMLAttributes { inputDate: Moment | null; setInputDate: (date: Moment) => void; targetRef: React.RefObject; + type: 'input' | 'edit' | 'list'; } const CustomCalender = ({ @@ -214,10 +194,15 @@ const CustomCalender = ({ inputDate, setInputDate, targetRef, + type, ...props }: CustomCalenderProps) => { const [focus, setFocus] = useState(false); - return ( + return type === 'list' ? ( + + {inputDate?.format('YYYY/MM/DD').toString()} + + ) : ( { @@ -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 index cce7ce7..225d1bf 100644 --- 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 ( - + {item.name} {item.expirationDate?.isBefore(moment()) && ( )} - + 수량 : {item.quantity} 등록 일자 : {item.registrationDate?.format('YYYY/MM/DD').toString()} @@ -44,7 +43,7 @@ function ShortExpirationItem({ item }: ShortExpirationItemProps) { 유통기한 : {item.expirationDate?.format('YYYY/MM/DD').toString()} - + ); } diff --git a/src/pages/inventory/index.tsx b/src/pages/inventory/index.tsx index 18ced6d..b3b7acd 100644 --- a/src/pages/inventory/index.tsx +++ b/src/pages/inventory/index.tsx @@ -13,7 +13,7 @@ import { mockRecipeData } from '../home'; import IngrInputBox from './components/IngrInputBox'; import ShortExpirationItem from './components/ShortExpirationItem'; const styles = { - wrapper: css({}), + wrapper: css({ paddingBottom: 100 }), inventory: { background: css( { @@ -39,6 +39,37 @@ const styles = { boxSizing: 'border-box', overflow: 'hidden', }), + scrollBox: css({ + overflowX: 'hidden', + overflowY: 'scroll', + marginRight: 37, + zIndex: 2, + '&::-webkit-scrollbar': { + borderRadius: 19, + width: 10, + zIndex: 1, + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: DesignSystem.Color.text.gray, + borderRadius: 19, + }, + '&::-webkit-scrollbar-track': { + backgroundColor: 'transparent', + }, + + '&::-webkit-scrollbar-track-piece:end': { + backgroundColor: 'transparent', + marginBottom: 13, + }, + }), + scrollTrackStart: (isEditing: boolean) => { + return { + '&::-webkit-scrollbar-track-piece:start': { + backgroundColor: 'transparent', + marginTop: isEditing ? 125 : 38, + }, + }; + }, scrollBar: css({ backgroundColor: DesignSystem.Color.background.disabled, position: 'absolute', @@ -55,7 +86,48 @@ const styles = { }, }, }; - +const mockIngredientData: IngredientDataType[][] = [ + [ + { + name: '김치', + quantity: '3개', + registrationDate: moment('2023-02-05'), + expirationDate: moment('2026-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'), + }, + ], +]; export interface IngredientDataType { name: string; quantity: string; @@ -71,88 +143,48 @@ function Inventory() { const [currentPage, setCurrentPage] = useState(1); const checkRef = useRef(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]); }; - const handleEditing = (targetIdx: number, inputData: IngredientDataType) => { + const handleEdit = () => { + setIsEditing(!isEditing); + setSubmit(false); + }; + const handleContentEdit = ( + targetIdx: number, + inputData: IngredientDataType, + ) => { setData(data.map((item, idx) => (targetIdx === idx ? inputData : item))); }; const handleDelete = (targetIdx: number) => { setData(data.filter((_, idx) => idx !== targetIdx)); }; + const handleComplete = () => { + setIsEditing(!isEditing); + setSubmit(true); + }; useEffect(() => { setIsOverflowed( !!checkRef.current && - checkRef?.current.scrollHeight > checkRef.current?.clientHeight, + checkRef.current?.scrollHeight > checkRef.current?.clientHeight, ); - }); + }, [checkRef.current?.clientHeight]); + return ( - + INVENTORY - {isEditing ? ( - { - setIsEditing(!isEditing); - setSubmit(true); - }} - /> - ) : ( - { - data.length !== 0 && setIsEditing(!isEditing); - setSubmit(false); - }} - /> - )} + {data.length !== 0 && + (isEditing ? ( + + ) : ( + + ))} @@ -223,32 +255,10 @@ function Inventory() { /> )} { - handleEditing(idx, input); + handleContentEdit(idx, input); }} handleRemove={() => { handleDelete(idx); }} - key={`${idx}-${item.name}-${item.registrationDate}`} + key={`ingredient-${item.name}-${item.registrationDate}`} /> ); })} @@ -281,17 +291,16 @@ function Inventory() { 유통기한이 얼마 남지 않은 재료 -
- {mockIngredientData[currentPage - 1].map((item, idx) => { - return ; + + {mockIngredientData[currentPage - 1].map((item) => { + return ( + + ); })} -
+ ( ))} diff --git a/src/pages/inventory/react_dates_overrides.css b/src/pages/inventory/react_dates_overrides.css index 4872389..85f8438 100644 --- a/src/pages/inventory/react_dates_overrides.css +++ b/src/pages/inventory/react_dates_overrides.css @@ -9,6 +9,7 @@ font-style: normal; } .SingleDatePicker_picker { + position: fixed; z-index: 3; } /*인풋박스*/