diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx new file mode 100644 index 0000000..26bf1a4 --- /dev/null +++ b/src/components/atoms/BorderTab.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +interface BorderTabProps { + tabName: '냉장' | '냉동'; + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; + clickHandler?: () => void; + className?: string; +} +const BorderTab: React.FC = ({ + tabName, + className, + currentTabName, + handleTabNameChange, +}) => { + return ( +
{ + handleTabNameChange(tabName); + }} + > + {tabName} +
+ ); +}; + +export default BorderTab; diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx new file mode 100644 index 0000000..7e51223 --- /dev/null +++ b/src/components/atoms/Button.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +interface ButtonProps { + text: string; + onClick?: () => void; + className?: string; +} + +const Button: React.FC = ({ text, className, onClick }) => { + return ( + + ); +}; + +export default Button; diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx deleted file mode 100644 index fd225e7..0000000 --- a/src/components/atoms/GeenButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -interface GreenButtonProps { - text: string; - handler?: () => void; - className: string; -} - -const GreenButton: React.FC = ({ text, className }) => { - return ( - - ); -}; - -export default GreenButton; diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx new file mode 100644 index 0000000..fe1d029 --- /dev/null +++ b/src/components/atoms/GrayBox.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +interface GrayBoxProps { + children: React.ReactNode; + className?: string; + onClick?: () => void; +} + +const GrayBox: React.FC = ({ children, className, onClick }) => { + return ( +
+ {children} +
+ ); +}; + +export default GrayBox; diff --git a/src/components/atoms/GreenLink.tsx b/src/components/atoms/GreenArrowButton.tsx similarity index 63% rename from src/components/atoms/GreenLink.tsx rename to src/components/atoms/GreenArrowButton.tsx index 9cb796a..47a4d8f 100644 --- a/src/components/atoms/GreenLink.tsx +++ b/src/components/atoms/GreenArrowButton.tsx @@ -1,15 +1,20 @@ import React from 'react'; import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg'; -interface GreenLinkProps { +interface GreenArrowButtonProps { text: string; - linkTo: string; + onClick?: () => void; className: string; } -const GreenLink: React.FC = ({ text, className }) => { +const GreenArrowButton: React.FC = ({ + text, + className, + onClick, +}) => { return ( + + + + ); +}; + +export default Counter; diff --git a/src/components/molecules/EmptyIngredient.tsx b/src/components/molecules/EmptyIngredient.tsx index 54c125d..7446efc 100644 --- a/src/components/molecules/EmptyIngredient.tsx +++ b/src/components/molecules/EmptyIngredient.tsx @@ -1,13 +1,15 @@ import React from 'react'; import IcNothingSVG from '@/assets/icons/ICON/COMMON/ic_nothing.svg'; -const EmptyIngredient: React.FC = () => { +interface EmptyIngredientProps { + text: string; +} + +const EmptyIngredient: React.FC = ({ text }) => { return (
-
- 현재 냉장고에 추가된 식자재가 없어요! -
+
{text}
); }; diff --git a/src/components/molecules/FridgeEnterButton.tsx b/src/components/molecules/FridgeEnterButton.tsx new file mode 100644 index 0000000..0ae0a97 --- /dev/null +++ b/src/components/molecules/FridgeEnterButton.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Link from 'next/link'; + +interface FridgeEnterButtonProps { + svgComponent: React.ReactNode; + text: string; + linkTo: string; +} + +const FridgeEnterButton: React.FC = ({ + svgComponent, + text, + linkTo, +}) => { + return ( + + {svgComponent} +

{text}

+ + ); +}; + +export default FridgeEnterButton; diff --git a/src/components/molecules/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx new file mode 100644 index 0000000..c9084ea --- /dev/null +++ b/src/components/molecules/FridgeListItem.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { GrayBox } from '../atoms'; +import { EditSVG, EmptyRadioSVG, FullRadioSVG } from '../atoms/Icon'; + +interface FridgeListItemProps { + isCurrentFridge: boolean; + fridgeName: string; + onClick: () => void; +} + +const FridgeListItem: React.FC = ({ + isCurrentFridge, + fridgeName, + onClick, +}) => { + return ( + +
+
{fridgeName}
+
+ +
+
+ {isCurrentFridge ? : } + + ); +}; + +export default FridgeListItem; diff --git a/src/components/molecules/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx new file mode 100644 index 0000000..afe9bc2 --- /dev/null +++ b/src/components/molecules/FridgeTab.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { BorderTab } from '../atoms'; + +interface FridgeTabProps { + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; +} +const FridgeTab: React.FC = ({ + currentTabName, + handleTabNameChange, +}) => { + return ( +
+ + +
+ ); +}; + +export default FridgeTab; diff --git a/src/components/molecules/IngredientAddItemContainer.tsx b/src/components/molecules/IngredientAddItemContainer.tsx new file mode 100644 index 0000000..8e7b918 --- /dev/null +++ b/src/components/molecules/IngredientAddItemContainer.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { GrayBox } from '../atoms'; + +interface IngredientAddItemContainerProps { + isRow: boolean; + svgComponent: React.ReactNode; + title: string; + children: React.ReactNode; +} +const IngredientAddItemContainer: React.FC = ({ + isRow, + svgComponent, + title, + children, +}) => { + return ( + +
+ {svgComponent} +
{title}
+
+ {children} + + ); +}; + +export default IngredientAddItemContainer; diff --git a/src/components/molecules/IngredientItemBox.tsx b/src/components/molecules/IngredientItemBox.tsx index 82f8fbd..dfd04c5 100644 --- a/src/components/molecules/IngredientItemBox.tsx +++ b/src/components/molecules/IngredientItemBox.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { IngredientDateTag } from '../atoms'; -import AppleSVG from '@/assets/icons/Frame 35.svg'; - +import { AppleIcon } from '@/components/atoms/IngredientIcons'; interface IngredientItemBoxProps { title?: string; svgUrl?: string; @@ -14,7 +13,7 @@ const IngredientItemBox: React.FC = ({ dDay }) => { return (
- +
사과
12월 21일 저장
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index bbb51b5..97de41a 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -2,3 +2,7 @@ export { default as EmptyIngredient } from './EmptyIngredient'; export { default as IngredientItemBox } from './IngredientItemBox'; export { default as NearExpirationWarnBox } from './NearExpirationWarnBox'; export { default as SvgAndTextBox } from './SvgAndTextBox'; +export { default as FridgeTab } from './FridgeTab'; +export { default as Counter } from './Counter'; +export { default as IngredientAddItemContainer } from './IngredientAddItemContainer'; +export { default as FridgeListItem } from './FridgeListItem'; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx new file mode 100644 index 0000000..9fd3fe7 --- /dev/null +++ b/src/components/organisms/FridgeBoard.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { WhiteBox } from '@/components/atoms'; +import { + EmptyIngredient, + FridgeTab, + IngredientItemBox, +} from '@/components/molecules'; + +const FridgeBoard: React.FC = () => { + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; + + const datas = ['d']; + + return ( + + + {datas.length !== 0 ? ( +
+ + + +
+ ) : ( +
+ +
+ )} + + ); +}; + +export default FridgeBoard; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx new file mode 100644 index 0000000..b650d07 --- /dev/null +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Button } from '../atoms'; +import { AllowBottom } from '../atoms/Icon'; + +const FridgeInfoBox: React.FC<{ + toggleIsOpenFridgeListModal: () => void; + toggleIsOpenIngredientAddModal: () => void; +}> = ({ toggleIsOpenFridgeListModal, toggleIsOpenIngredientAddModal }) => { + return ( +
+
+
홍길동님의
+
+
기본 냉장고
+ +
+
+
+ ); +}; + +export default FridgeInfoBox; diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx new file mode 100644 index 0000000..4d9a6dd --- /dev/null +++ b/src/components/organisms/FridgeListModal.tsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { Button, ModalBottom } from '../atoms'; +import { FridgeListItem } from '../molecules'; +import { PlusSVG, TrashcanSVG } from '../atoms/Icon'; + +const FridgeListModal: React.FC<{ + toggleIsOpenFridgeListModal: () => void; +}> = ({ toggleIsOpenFridgeListModal }) => { + const [currentFridgeName, setCurrentFridgeName] = useState('기본 냉장고'); + const FRIDGE_NAME_LIST = ['기본 냉장고', '김치 냉장고', '주류 냉장고']; + return ( + +
+
냉장고 목록
+
+ 자유롭게 여러 냉장고를 정리할 수 있어요 +
+
+
+ {FRIDGE_NAME_LIST.map((fridgeName) => ( + { + setCurrentFridgeName(fridgeName); + }} + /> + ))} + + +
+
+ +
+ + ); +}; + +export default FridgeListModal; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx new file mode 100644 index 0000000..93ff459 --- /dev/null +++ b/src/components/organisms/IngredientAddModal.tsx @@ -0,0 +1,93 @@ +import React, { useState } from 'react'; +import { Button, ModalBottom, Toggle } from '@/components/atoms'; +import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; +import { AppleIcon } from '../atoms/IngredientIcons'; +import { Counter, IngredientAddItemContainer } from '../molecules'; +import useCount from '@/hooks/useCount'; + +const IngredientAddModal: React.FC<{ + toggleIsOpenIngredientAddModal: () => void; + toggleIsOppenToastMessage: () => void; +}> = ({ toggleIsOpenIngredientAddModal, toggleIsOppenToastMessage }) => { + const [isInFreezer, setIsInFreezer] = useState(false); + const [memoContent, setMemoContent] = useState(''); + const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount(); + + const toggleIsInFreezer: (e: React.MouseEvent) => void = (e) => { + e.stopPropagation(); + setIsInFreezer((prev) => !prev); + }; + + const handleSubmit: () => void = () => { + console.log({ currentCount, isInFreezer, memoContent }); + toggleIsOpenIngredientAddModal(); + toggleIsOppenToastMessage(); + }; + + return ( + +
+
+ +
사과
+
+
+ } + title="소비기한" + > +
+
+ 2024년 01월 12일 +
+
~
+
+ 2024년 01월 6일 +
+
+ + } + title="수량" + > + + + } + title="냉동보관" + > + + + } + title="메모" + > + ) => { + setMemoContent(e.target.value); + }} + className="w-full p-[12px] rounded-[6px] body1-medium" + placeholder="식자재 관련 정보를 입력해 주세요." + /> + +
+
+ + ); +}; + +export default IngredientAddModal; diff --git a/src/components/organisms/IngredientBoard.tsx b/src/components/organisms/IngredientBoard.tsx index ce83096..b590ebd 100644 --- a/src/components/organisms/IngredientBoard.tsx +++ b/src/components/organisms/IngredientBoard.tsx @@ -14,7 +14,7 @@ const TermBoard: React.FC = () => {
) : (
- +
)} diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 45e000a..f157fc2 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1 +1,5 @@ export { default as IngredientBoard } from './IngredientBoard'; +export { default as FridgeBoard } from './FridgeBoard'; +export { default as FridgeInfoBox } from './FridgeInfoBox'; +export { default as IngredientAddModal } from './IngredientAddModal'; +export { default as FridgeListModal } from './FridgeListModal'; diff --git a/src/hooks/useCount.ts b/src/hooks/useCount.ts new file mode 100644 index 0000000..d5e495a --- /dev/null +++ b/src/hooks/useCount.ts @@ -0,0 +1,23 @@ +import { useState } from 'react'; + +export interface CountState { + currentCount: number; + handleIncreaseCount: () => void; + handleDecreaseCount: () => void; +} + +const useCount = (): CountState => { + const [currentCount, setCurrentCount] = useState(1); + + const handleIncreaseCount: () => void = () => { + setCurrentCount((prev) => prev + 1); + }; + + const handleDecreaseCount: () => void = () => { + setCurrentCount((prev) => prev - 1); + }; + + return { currentCount, handleDecreaseCount, handleIncreaseCount }; +}; + +export default useCount; diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 26342e2..7c1a986 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,12 +1,62 @@ import Header from '@/components/organisms/Header'; +import { + FridgeBoard, + FridgeInfoBox, + FridgeListModal, + IngredientAddModal, +} from '@/components/organisms'; import { type NextPage } from 'next'; +import { useState } from 'react'; +import { ToastMessage } from '@/components/atoms'; const FridgePage: NextPage = () => { + const [isOpenIngredientAddModal, setIsOpenIngredientAddModal] = + useState(false); + const [isOpenFridgeListModal, setIsOpenFridgeListModal] = useState(false); + const [isOpenToastMessage, setIsOpenToastMessage] = useState(false); + + const toggleIsOppenToastMessage: () => void = () => { + setIsOpenToastMessage((prev) => !prev); + }; + + const toggleIsOpenIngredientAddModal: () => void = () => { + setIsOpenIngredientAddModal((prev) => !prev); + }; + + const toggleIsOpenFridgeListModal: () => void = () => { + setIsOpenFridgeListModal((prev) => !prev); + }; + return ( -
-
-

fridge page

-
+ <> + {isOpenFridgeListModal && ( + + )} + {isOpenToastMessage && ( + + )} + {isOpenIngredientAddModal && ( + + )} +
+
+
+ + +
+
+ ); }; export default FridgePage; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 2454c45..d7185f6 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,11 +1,12 @@ import { type NextPage } from 'next'; import MyFridgeIconSvg from '@/assets/icons/IMG/Home/img_home_my.svg'; import FriendsFridgeIconSvg from '@/assets/icons/IMG/Home/img_home_friend.svg'; -import { GreenLink } from '@/components/atoms'; +import { GreenArrowButton } from '@/components/atoms'; import { NearExpirationWarnBox, SvgAndTextBox } from '@/components/molecules'; import { IngredientBoard } from '@/components/organisms'; import Header from '@/components/organisms/Header'; import AlarmIcon from '@/assets/icons/ICON/COMMON/ic_alert.svg'; +import Link from 'next/link'; const Home: NextPage = () => { const isNearExpirationWarn = true; @@ -42,11 +43,9 @@ const Home: NextPage = () => {
- + + + );