From 6ca475da09a04c58c6d974b36407367b3f9f5fca Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:41:57 +0900 Subject: [PATCH 01/16] =?UTF-8?q?feat:=20=EB=83=89=EC=9E=A5=EA=B3=A0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/BorderTab.tsx | 25 +++++++++++++++++++ src/components/atoms/GrayBox.tsx | 15 +++++++++++ src/components/atoms/GreenLink.tsx | 6 +++-- src/components/atoms/Icon.tsx | 17 +++++++++++++ src/components/atoms/ModalBottom.tsx | 13 ++++++++++ src/components/atoms/ModalCenter.tsx | 13 ++++++++++ src/components/atoms/SearchInput.tsx | 25 +++++++++++++++++++ src/components/atoms/ToastMessage.tsx | 7 ++++++ src/components/atoms/WhiteBox.tsx | 7 ++++-- src/components/atoms/index.ts | 1 + src/components/molecules/EmptyIngredient.tsx | 10 +++++--- .../molecules/FridgeEnterButton.tsx | 23 +++++++++++++++++ src/components/molecules/FridgeTab.tsx | 13 ++++++++++ src/components/molecules/index.ts | 1 + src/components/organisms/FridgeBoard.tsx | 16 ++++++++++++ src/components/organisms/FridgeInfoBox.tsx | 23 +++++++++++++++++ src/components/organisms/IngredientBoard.tsx | 2 +- src/components/organisms/index.ts | 2 ++ src/pages/fridge/index.tsx | 6 ++++- 19 files changed, 215 insertions(+), 10 deletions(-) create mode 100644 src/components/atoms/BorderTab.tsx create mode 100644 src/components/atoms/GrayBox.tsx create mode 100644 src/components/atoms/ModalBottom.tsx create mode 100644 src/components/atoms/ModalCenter.tsx create mode 100644 src/components/atoms/SearchInput.tsx create mode 100644 src/components/atoms/ToastMessage.tsx create mode 100644 src/components/molecules/FridgeEnterButton.tsx create mode 100644 src/components/molecules/FridgeTab.tsx create mode 100644 src/components/organisms/FridgeBoard.tsx create mode 100644 src/components/organisms/FridgeInfoBox.tsx diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx new file mode 100644 index 0000000..249f792 --- /dev/null +++ b/src/components/atoms/BorderTab.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface BorderTabProps { + tabName: string; + isActive: boolean; + clickHandler?: () => void; + className?: string; +} +const BorderTab: React.FC = ({ + tabName, + isActive, + className, +}) => { + return ( +
+ {tabName} +
+ ); +}; + +export default BorderTab; diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx new file mode 100644 index 0000000..9610ca2 --- /dev/null +++ b/src/components/atoms/GrayBox.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface GrayBoxProps { + children: React.ReactNode; +} + +const GrayBox: React.FC = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export default GrayBox; diff --git a/src/components/atoms/GreenLink.tsx b/src/components/atoms/GreenLink.tsx index 9cb796a..c4649d8 100644 --- a/src/components/atoms/GreenLink.tsx +++ b/src/components/atoms/GreenLink.tsx @@ -1,5 +1,6 @@ import React from 'react'; import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg'; +import Link from 'next/link'; interface GreenLinkProps { text: string; @@ -9,12 +10,13 @@ interface GreenLinkProps { const GreenLink: React.FC = ({ text, className }) => { return ( - + ); }; diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index 8eeba6e..a327af8 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -109,3 +109,20 @@ export const Mypage: React.FC> = (props) => ( ); + +export const AllowBottom: React.FC> = (props) => ( + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx new file mode 100644 index 0000000..bb3af19 --- /dev/null +++ b/src/components/atoms/ModalBottom.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const ModalBox: React.FC = () => { + return ( +
+
+
hi
+
+
+ ); +}; + +export default ModalBox; diff --git a/src/components/atoms/ModalCenter.tsx b/src/components/atoms/ModalCenter.tsx new file mode 100644 index 0000000..53569d1 --- /dev/null +++ b/src/components/atoms/ModalCenter.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const ModalCenter: React.FC = () => { + return ( +
+
+
hi
+
+
+ ); +}; + +export default ModalCenter; diff --git a/src/components/atoms/SearchInput.tsx b/src/components/atoms/SearchInput.tsx new file mode 100644 index 0000000..7b58002 --- /dev/null +++ b/src/components/atoms/SearchInput.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface SearchInputProps { + searchKeyword: string; + onChangeHandler: () => void; + onClickHandler: () => void; + className: string; +} + +const SearchInput: React.FC = ({ + searchKeyword, + onClickHandler, + onChangeHandler, + className, +}) => { + return ( +
+ +
+ ); +}; + +export default SearchInput; diff --git a/src/components/atoms/ToastMessage.tsx b/src/components/atoms/ToastMessage.tsx new file mode 100644 index 0000000..699240b --- /dev/null +++ b/src/components/atoms/ToastMessage.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const ToastMessage: React.FC = () => { + return
{'식자재 추가가 완료되었습니다.'}
; +}; + +export default ToastMessage; diff --git a/src/components/atoms/WhiteBox.tsx b/src/components/atoms/WhiteBox.tsx index 1178a10..5ae2a5b 100644 --- a/src/components/atoms/WhiteBox.tsx +++ b/src/components/atoms/WhiteBox.tsx @@ -2,11 +2,14 @@ import React from 'react'; interface WhiteBoxProps { children: React.ReactNode; + className?: string; } -const WhiteBox: React.FC = ({ children }) => { +const WhiteBox: React.FC = ({ children, className }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 9bc2b71..7b64ff4 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -2,3 +2,4 @@ export { default as GreenButton } from './GeenButton'; export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; export { default as IngredientDateTag } from './IngredientDateTag'; +export { default as BorderTab } from './BorderTab'; 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/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx new file mode 100644 index 0000000..964fa74 --- /dev/null +++ b/src/components/molecules/FridgeTab.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { BorderTab } from '../atoms'; + +const FridgeTab: React.FC = () => { + return ( +
+ + +
+ ); +}; + +export default FridgeTab; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index bbb51b5..d14049f 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -2,3 +2,4 @@ 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'; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx new file mode 100644 index 0000000..a96cf60 --- /dev/null +++ b/src/components/organisms/FridgeBoard.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { WhiteBox } from '@/components/atoms'; +import { EmptyIngredient, FridgeTab } from '@/components/molecules'; + +const FridgeBoard: React.FC = () => { + return ( + + +
+ +
+ + ); +}; + +export default FridgeBoard; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx new file mode 100644 index 0000000..471ffa6 --- /dev/null +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { GreenButton } from '../atoms'; +import { AllowBottom } from '../atoms/Icon'; + +const FridgeInfoBox: React.FC = () => { + return ( +
+
+
홍길동님의
+
+
기본 냉장고
+ +
+
+ +
+ ); +}; + +export default FridgeInfoBox; 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..796da5b 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1 +1,3 @@ export { default as IngredientBoard } from './IngredientBoard'; +export { default as FridgeBoard } from './FridgeBoard'; +export { default as FridgeInfoBox } from './FridgeInfoBox'; diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 26342e2..50beb8e 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,11 +1,15 @@ import Header from '@/components/organisms/Header'; +import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; import { type NextPage } from 'next'; const FridgePage: NextPage = () => { return (
-

fridge page

+
+ + +
); }; From 978f99f3bcdd49aabed04a64e922b2fcf7e99744 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:54:19 +0900 Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=ED=83=AD=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC=20=EB=B0=8F=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/BorderTab.tsx | 13 +++++++++---- src/components/molecules/FridgeTab.tsx | 22 +++++++++++++++++++--- src/components/organisms/FridgeBoard.tsx | 18 +++++++++++++++--- src/pages/fridge/index.tsx | 11 ++++++++++- 4 files changed, 53 insertions(+), 11 deletions(-) diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx index 249f792..26bf1a4 100644 --- a/src/components/atoms/BorderTab.tsx +++ b/src/components/atoms/BorderTab.tsx @@ -1,21 +1,26 @@ import React from 'react'; interface BorderTabProps { - tabName: string; - isActive: boolean; + tabName: '냉장' | '냉동'; + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; clickHandler?: () => void; className?: string; } const BorderTab: React.FC = ({ tabName, - isActive, className, + currentTabName, + handleTabNameChange, }) => { return (
{ + handleTabNameChange(tabName); + }} > {tabName}
diff --git a/src/components/molecules/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx index 964fa74..afe9bc2 100644 --- a/src/components/molecules/FridgeTab.tsx +++ b/src/components/molecules/FridgeTab.tsx @@ -1,11 +1,27 @@ import React from 'react'; import { BorderTab } from '../atoms'; -const FridgeTab: React.FC = () => { +interface FridgeTabProps { + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; +} +const FridgeTab: React.FC = ({ + currentTabName, + handleTabNameChange, +}) => { return (
- - + +
); }; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index a96cf60..10c92e0 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -2,12 +2,24 @@ import React from 'react'; import { WhiteBox } from '@/components/atoms'; import { EmptyIngredient, FridgeTab } from '@/components/molecules'; -const FridgeBoard: React.FC = () => { +interface FridgeBoardProps { + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; +} +const FridgeBoard: React.FC = ({ + currentTabName, + handleTabNameChange, +}) => { return ( - +
- +
); diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 50beb8e..c174cae 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,14 +1,23 @@ import Header from '@/components/organisms/Header'; import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; import { type NextPage } from 'next'; +import { useState } from 'react'; const FridgePage: NextPage = () => { + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; return (
- +
); From 396bbf1068f525e6735488ce4b79958802c20d29 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:56:52 +0900 Subject: [PATCH 03/16] =?UTF-8?q?chore:=20=EA=B2=8C=EC=8B=9C=ED=8C=90?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=83=AD=EC=83=81=ED=83=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/FridgeBoard.tsx | 16 +++++++--------- src/pages/fridge/index.tsx | 11 +---------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index 10c92e0..673182c 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -1,15 +1,13 @@ -import React from 'react'; +import React, { useState } from 'react'; import { WhiteBox } from '@/components/atoms'; import { EmptyIngredient, FridgeTab } from '@/components/molecules'; -interface FridgeBoardProps { - currentTabName: '냉장' | '냉동'; - handleTabNameChange: (tabName: '냉장' | '냉동') => void; -} -const FridgeBoard: React.FC = ({ - currentTabName, - handleTabNameChange, -}) => { +const FridgeBoard: React.FC = () => { + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; return ( { - const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); - - const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { - setCurrentTabName(tabName); - }; return (
- +
); From 161af009c549a5337c06a6d8b6fda10bb8762081 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 04:20:53 +0900 Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20=EC=98=A4=ED=94=88=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=8B=AB=EA=B8=B0=20=EC=A0=84?= =?UTF-8?q?=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GeenButton.tsx | 7 +++- src/components/atoms/ModalBottom.tsx | 24 ++++++++++--- src/components/atoms/index.ts | 2 ++ src/components/organisms/FridgeInfoBox.tsx | 5 ++- .../organisms/IngredientAddModal.tsx | 14 ++++++++ src/components/organisms/index.ts | 1 + src/pages/fridge/index.tsx | 36 ++++++++++++++----- 7 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 src/components/organisms/IngredientAddModal.tsx diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx index fd225e7..7bb9d07 100644 --- a/src/components/atoms/GeenButton.tsx +++ b/src/components/atoms/GeenButton.tsx @@ -6,10 +6,15 @@ interface GreenButtonProps { className: string; } -const GreenButton: React.FC = ({ text, className }) => { +const GreenButton: React.FC = ({ + text, + className, + handler, +}) => { return ( diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index bb3af19..3aabea7 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -1,10 +1,26 @@ import React from 'react'; -const ModalBox: React.FC = () => { +interface ModalBoxProps { + children: React.ReactNode; + blackClickHandler: () => void; +} + +const ModalBox: React.FC = ({ children, blackClickHandler }) => { + const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => { + e.stopPropagation(); + console.log('받아온 이벤트를 실행'); + }; + return ( -
-
-
hi
+
+
+ {children}
); diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 7b64ff4..b2b2224 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -3,3 +3,5 @@ export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; +export { default as ModalBottom } from './ModalBottom'; +export { default as ModalCenter } from './ModalCenter'; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 471ffa6..6af8780 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { GreenButton } from '../atoms'; import { AllowBottom } from '../atoms/Icon'; -const FridgeInfoBox: React.FC = () => { +const FridgeInfoBox: React.FC<{ + toggleIsOpenIngredientAddModal: () => void; +}> = ({ toggleIsOpenIngredientAddModal }) => { return (
@@ -15,6 +17,7 @@ const FridgeInfoBox: React.FC = () => {
); diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx new file mode 100644 index 0000000..0559468 --- /dev/null +++ b/src/components/organisms/IngredientAddModal.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { ModalBottom } from '@/components/atoms'; + +const IngredientAddModal: React.FC<{ + toggleIsOpenIngredientAddModal: () => void; +}> = ({ toggleIsOpenIngredientAddModal }) => { + return ( + +
hi
+ + ); +}; + +export default IngredientAddModal; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 796da5b..013a120 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1,3 +1,4 @@ export { default as IngredientBoard } from './IngredientBoard'; export { default as FridgeBoard } from './FridgeBoard'; export { default as FridgeInfoBox } from './FridgeInfoBox'; +export { default as IngredientAddModal } from './IngredientAddModal'; diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 50beb8e..9e8ed83 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,16 +1,36 @@ import Header from '@/components/organisms/Header'; -import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; +import { + FridgeBoard, + FridgeInfoBox, + IngredientAddModal, +} from '@/components/organisms'; import { type NextPage } from 'next'; +import { useState } from 'react'; const FridgePage: NextPage = () => { + const [isOpenIngredientAddModal, setIsOpenIngredientAddModal] = + useState(false); + + const toggleIsOpenIngredientAddModal: () => void = () => { + setIsOpenIngredientAddModal((prev) => !prev); + }; return ( -
-
-
- - -
-
+ <> + {isOpenIngredientAddModal && ( + + )} +
+
+
+ + +
+
+ ); }; export default FridgePage; From eb7c858ff448cfe977a3721efb5af7e3d9d93629 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 05:20:20 +0900 Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20organism?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GeenButton.tsx | 2 +- src/components/atoms/GrayBox.tsx | 2 +- src/components/atoms/Icon.tsx | 72 +++++++++++++++++++ src/components/atoms/IngredientIcons.tsx | 35 +++++++++ src/components/atoms/ModalBottom.tsx | 2 +- src/components/atoms/index.ts | 1 + .../organisms/IngredientAddModal.tsx | 50 ++++++++++++- 7 files changed, 159 insertions(+), 5 deletions(-) create mode 100644 src/components/atoms/IngredientIcons.tsx diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx index 7bb9d07..e32464e 100644 --- a/src/components/atoms/GeenButton.tsx +++ b/src/components/atoms/GeenButton.tsx @@ -3,7 +3,7 @@ import React from 'react'; interface GreenButtonProps { text: string; handler?: () => void; - className: string; + className?: string; } const GreenButton: React.FC = ({ diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx index 9610ca2..8de67fd 100644 --- a/src/components/atoms/GrayBox.tsx +++ b/src/components/atoms/GrayBox.tsx @@ -6,7 +6,7 @@ interface GrayBoxProps { const GrayBox: React.FC = ({ children }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index a327af8..e5c07bf 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -126,3 +126,75 @@ export const AllowBottom: React.FC> = (props) => ( /> ); + +export const CalendarSVG: React.FC> = (props) => ( + + + +); + +export const BoxSVG: React.FC> = (props) => ( + + + + +); + +export const FreezerSVG: React.FC> = (props) => ( + + + +); + +export const MemoSVG: React.FC> = (props) => ( + + + +); diff --git a/src/components/atoms/IngredientIcons.tsx b/src/components/atoms/IngredientIcons.tsx new file mode 100644 index 0000000..d97b930 --- /dev/null +++ b/src/components/atoms/IngredientIcons.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +// 삭제예정 +export const AppleIcon: React.FC> = (props) => ( + + + + + + + + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index 3aabea7..7144749 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -17,7 +17,7 @@ const ModalBox: React.FC = ({ children, blackClickHandler }) => { onClick={blackClickHandler} >
{children} diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index b2b2224..47a1752 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,6 +1,7 @@ export { default as GreenButton } from './GeenButton'; export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; +export { default as GrayBox } from './GrayBox'; export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index 0559468..b4a00cd 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -1,12 +1,58 @@ import React from 'react'; -import { ModalBottom } from '@/components/atoms'; +import { GrayBox, GreenButton, ModalBottom } from '@/components/atoms'; +import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; +import { AppleIcon } from '../atoms/IngredientIcons'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; }> = ({ toggleIsOpenIngredientAddModal }) => { return ( -
hi
+
+
+ +
사과
+
+
+ +
+ +
소비기한
+
+
+
+ 2024년 01월 12일 +
+
~
+
+ 2024년 01월 6일 +
+
+ + +
+ +
수량
+
+
날짜~날짜
+ + +
+ +
냉동 보관
+
+
날짜~날짜
+ + +
+ +
메모
+
+
인풋
+ +
+ +
); }; From 19f3c8e0f4931a7ab0eadf42ba5fd5aa7eb9b852 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 12:19:32 +0900 Subject: [PATCH 06/16] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC-=ED=86=A0?= =?UTF-8?q?=EA=B8=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GrayBox.tsx | 7 +- src/components/atoms/Icon.tsx | 28 ++++++ src/components/atoms/ModalBottom.tsx | 6 +- src/components/atoms/ModalCenter.tsx | 2 +- src/components/atoms/Toggle.tsx | 19 ++++ src/components/atoms/index.ts | 1 + src/components/molecules/Counter.tsx | 22 +++++ .../molecules/IngredientAddItem.tsx | 31 ++++++ src/components/molecules/index.ts | 2 + .../organisms/IngredientAddModal.tsx | 99 ++++++++++++------- src/hooks/useCount.ts | 23 +++++ 11 files changed, 201 insertions(+), 39 deletions(-) create mode 100644 src/components/atoms/Toggle.tsx create mode 100644 src/components/molecules/Counter.tsx create mode 100644 src/components/molecules/IngredientAddItem.tsx create mode 100644 src/hooks/useCount.ts diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx index 8de67fd..60769dd 100644 --- a/src/components/atoms/GrayBox.tsx +++ b/src/components/atoms/GrayBox.tsx @@ -2,11 +2,14 @@ import React from 'react'; interface GrayBoxProps { children: React.ReactNode; + className?: string; } -const GrayBox: React.FC = ({ children }) => { +const GrayBox: React.FC = ({ children, className }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index e5c07bf..e5a0905 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -198,3 +198,31 @@ export const MemoSVG: React.FC> = (props) => ( /> ); + +export const ToggleOffSVG: React.FC> = ( + props, +) => ( + + + + +); + +export const ToggleOnSVG: React.FC> = (props) => ( + + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index 7144749..382a30c 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -7,8 +7,10 @@ interface ModalBoxProps { const ModalBox: React.FC = ({ children, blackClickHandler }) => { const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => { + if (e.target === e.currentTarget) { + blackClickHandler(); + } e.stopPropagation(); - console.log('받아온 이벤트를 실행'); }; return ( @@ -17,7 +19,7 @@ const ModalBox: React.FC = ({ children, blackClickHandler }) => { onClick={blackClickHandler} >
{children} diff --git a/src/components/atoms/ModalCenter.tsx b/src/components/atoms/ModalCenter.tsx index 53569d1..6482a56 100644 --- a/src/components/atoms/ModalCenter.tsx +++ b/src/components/atoms/ModalCenter.tsx @@ -2,7 +2,7 @@ import React from 'react'; const ModalCenter: React.FC = () => { return ( -
+
hi
diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx new file mode 100644 index 0000000..4d93851 --- /dev/null +++ b/src/components/atoms/Toggle.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ToggleOffSVG, ToggleOnSVG } from './Icon'; + +const Toggle: React.FC<{ + isToggleOn: boolean; + toggleState: (e: React.MouseEvent) => void; +}> = ({ isToggleOn, toggleState }) => { + return isToggleOn ? ( +
+ +
+ ) : ( +
+ +
+ ); +}; + +export default Toggle; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 47a1752..ff4c009 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -6,3 +6,4 @@ export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; export { default as ModalCenter } from './ModalCenter'; +export { default as Toggle } from './Toggle'; diff --git a/src/components/molecules/Counter.tsx b/src/components/molecules/Counter.tsx new file mode 100644 index 0000000..cb1111d --- /dev/null +++ b/src/components/molecules/Counter.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import type { CountState } from '@/hooks/useCount'; + +const Counter: React.FC = ({ + currentCount, + handleDecreaseCount, + handleIncreaseCount, +}) => { + return ( +
+ + + +
+ ); +}; + +export default Counter; diff --git a/src/components/molecules/IngredientAddItem.tsx b/src/components/molecules/IngredientAddItem.tsx new file mode 100644 index 0000000..74c4530 --- /dev/null +++ b/src/components/molecules/IngredientAddItem.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { GrayBox } from '../atoms'; + +interface IngredientAddItemProps { + isRow: boolean; + svgComponent: React.ReactNode; + title: string; + children: React.ReactNode; +} +const IngredientAddItem: React.FC = ({ + isRow, + svgComponent, + title, + children, +}) => { + return ( + +
+ {svgComponent} +
{title}
+
+ {children} + + ); +}; + +export default IngredientAddItem; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index d14049f..89b4ed4 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -3,3 +3,5 @@ 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 IngredientAddItem } from './IngredientAddItem'; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index b4a00cd..b4bd81d 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -1,11 +1,27 @@ -import React from 'react'; -import { GrayBox, GreenButton, ModalBottom } from '@/components/atoms'; +import React, { useState } from 'react'; +import { GreenButton, ModalBottom, Toggle } from '@/components/atoms'; import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; import { AppleIcon } from '../atoms/IngredientIcons'; +import { Counter, IngredientAddItem } from '../molecules'; +import useCount from '@/hooks/useCount'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; }> = ({ toggleIsOpenIngredientAddModal }) => { + 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(); + }; + return (
@@ -14,44 +30,59 @@ const IngredientAddModal: React.FC<{
사과
- -
- -
소비기한
-
-
-
+ } + title="소비기한" + > +
+
2024년 01월 12일
-
~
-
+
~
+
2024년 01월 6일
- - -
- -
수량
-
-
날짜~날짜
- - -
- -
냉동 보관
-
-
날짜~날짜
- - -
- -
메모
-
-
인풋
- + + } + title="수량" + > + + + } + title="냉동보관" + > + + + } + title="메모" + > + ) => { + setMemoContent(e.target.value); + }} + className="w-full p-[12px] rounded-[6px] body1-medium" + placeholder="식자재 관련 정보를 입력해 주세요." + /> +
- +
); 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; From c74b22aacd733cdca34d3e07f0842237342304fc Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 12:43:50 +0900 Subject: [PATCH 07/16] =?UTF-8?q?feat:=20=EC=A0=9C=EC=B6=9C=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/ToastMessage.tsx | 24 ++++++++++++++--- src/components/atoms/index.ts | 1 + .../molecules/IngredientItemBox.tsx | 5 ++-- src/components/organisms/FridgeBoard.tsx | 27 ++++++++++++++----- .../organisms/IngredientAddModal.tsx | 4 ++- src/pages/fridge/index.tsx | 13 +++++++++ 6 files changed, 61 insertions(+), 13 deletions(-) diff --git a/src/components/atoms/ToastMessage.tsx b/src/components/atoms/ToastMessage.tsx index 699240b..07e3921 100644 --- a/src/components/atoms/ToastMessage.tsx +++ b/src/components/atoms/ToastMessage.tsx @@ -1,7 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; -const ToastMessage: React.FC = () => { - return
{'식자재 추가가 완료되었습니다.'}
; +interface ToastMessageProps { + text: string; + toggleHandler: () => void; +} +const ToastMessage: React.FC = ({ text, toggleHandler }) => { + useEffect(() => { + const timer = setTimeout(() => { + toggleHandler(); + }, 1000); + + return () => { + clearTimeout(timer); + }; + }, []); + + return ( +
+ {text} +
+ ); }; export default ToastMessage; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index ff4c009..3d63361 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -7,3 +7,4 @@ export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; export { default as ModalCenter } from './ModalCenter'; export { default as Toggle } from './Toggle'; +export { default as ToastMessage } from './ToastMessage'; 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/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index 673182c..9fd3fe7 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -1,6 +1,10 @@ import React, { useState } from 'react'; import { WhiteBox } from '@/components/atoms'; -import { EmptyIngredient, FridgeTab } from '@/components/molecules'; +import { + EmptyIngredient, + FridgeTab, + IngredientItemBox, +} from '@/components/molecules'; const FridgeBoard: React.FC = () => { const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); @@ -8,17 +12,28 @@ const FridgeBoard: React.FC = () => { const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { setCurrentTabName(tabName); }; + + const datas = ['d']; + return ( -
- -
+ {datas.length !== 0 ? ( +
+ + + +
+ ) : ( +
+ +
+ )} ); }; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index b4bd81d..90a7474 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -7,7 +7,8 @@ import useCount from '@/hooks/useCount'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; -}> = ({ toggleIsOpenIngredientAddModal }) => { + toggleIsOppenToastMessage: () => void; +}> = ({ toggleIsOpenIngredientAddModal, toggleIsOppenToastMessage }) => { const [isInFreezer, setIsInFreezer] = useState(false); const [memoContent, setMemoContent] = useState(''); const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount(); @@ -20,6 +21,7 @@ const IngredientAddModal: React.FC<{ const handleSubmit: () => void = () => { console.log({ currentCount, isInFreezer, memoContent }); toggleIsOpenIngredientAddModal(); + toggleIsOppenToastMessage(); }; return ( diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 9e8ed83..cdd87fc 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -6,18 +6,31 @@ import { } 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 [isOpenToastMessage, setIsOpenToastMessage] = useState(false); + + const toggleIsOppenToastMessage: () => void = () => { + setIsOpenToastMessage((prev) => !prev); + }; const toggleIsOpenIngredientAddModal: () => void = () => { setIsOpenIngredientAddModal((prev) => !prev); }; return ( <> + {isOpenToastMessage && ( + + )} {isOpenIngredientAddModal && ( )} From b4a2f8a166353fe4a530c05eaf28d9e4ebe87491 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:41:57 +0900 Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=EB=83=89=EC=9E=A5=EA=B3=A0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/BorderTab.tsx | 25 +++++++++++++++++++ src/components/atoms/GrayBox.tsx | 15 +++++++++++ src/components/atoms/GreenLink.tsx | 6 +++-- src/components/atoms/Icon.tsx | 17 +++++++++++++ src/components/atoms/ModalBottom.tsx | 13 ++++++++++ src/components/atoms/ModalCenter.tsx | 13 ++++++++++ src/components/atoms/SearchInput.tsx | 25 +++++++++++++++++++ src/components/atoms/ToastMessage.tsx | 7 ++++++ src/components/atoms/WhiteBox.tsx | 7 ++++-- src/components/atoms/index.ts | 1 + src/components/molecules/EmptyIngredient.tsx | 10 +++++--- .../molecules/FridgeEnterButton.tsx | 23 +++++++++++++++++ src/components/molecules/FridgeTab.tsx | 13 ++++++++++ src/components/molecules/index.ts | 1 + src/components/organisms/FridgeBoard.tsx | 16 ++++++++++++ src/components/organisms/FridgeInfoBox.tsx | 23 +++++++++++++++++ src/components/organisms/IngredientBoard.tsx | 2 +- src/components/organisms/index.ts | 2 ++ src/pages/fridge/index.tsx | 6 ++++- 19 files changed, 215 insertions(+), 10 deletions(-) create mode 100644 src/components/atoms/BorderTab.tsx create mode 100644 src/components/atoms/GrayBox.tsx create mode 100644 src/components/atoms/ModalBottom.tsx create mode 100644 src/components/atoms/ModalCenter.tsx create mode 100644 src/components/atoms/SearchInput.tsx create mode 100644 src/components/atoms/ToastMessage.tsx create mode 100644 src/components/molecules/FridgeEnterButton.tsx create mode 100644 src/components/molecules/FridgeTab.tsx create mode 100644 src/components/organisms/FridgeBoard.tsx create mode 100644 src/components/organisms/FridgeInfoBox.tsx diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx new file mode 100644 index 0000000..249f792 --- /dev/null +++ b/src/components/atoms/BorderTab.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface BorderTabProps { + tabName: string; + isActive: boolean; + clickHandler?: () => void; + className?: string; +} +const BorderTab: React.FC = ({ + tabName, + isActive, + className, +}) => { + return ( +
+ {tabName} +
+ ); +}; + +export default BorderTab; diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx new file mode 100644 index 0000000..9610ca2 --- /dev/null +++ b/src/components/atoms/GrayBox.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface GrayBoxProps { + children: React.ReactNode; +} + +const GrayBox: React.FC = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export default GrayBox; diff --git a/src/components/atoms/GreenLink.tsx b/src/components/atoms/GreenLink.tsx index 9cb796a..c4649d8 100644 --- a/src/components/atoms/GreenLink.tsx +++ b/src/components/atoms/GreenLink.tsx @@ -1,5 +1,6 @@ import React from 'react'; import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg'; +import Link from 'next/link'; interface GreenLinkProps { text: string; @@ -9,12 +10,13 @@ interface GreenLinkProps { const GreenLink: React.FC = ({ text, className }) => { return ( - + ); }; diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index 8eeba6e..a327af8 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -109,3 +109,20 @@ export const Mypage: React.FC> = (props) => ( ); + +export const AllowBottom: React.FC> = (props) => ( + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx new file mode 100644 index 0000000..bb3af19 --- /dev/null +++ b/src/components/atoms/ModalBottom.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const ModalBox: React.FC = () => { + return ( +
+
+
hi
+
+
+ ); +}; + +export default ModalBox; diff --git a/src/components/atoms/ModalCenter.tsx b/src/components/atoms/ModalCenter.tsx new file mode 100644 index 0000000..53569d1 --- /dev/null +++ b/src/components/atoms/ModalCenter.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const ModalCenter: React.FC = () => { + return ( +
+
+
hi
+
+
+ ); +}; + +export default ModalCenter; diff --git a/src/components/atoms/SearchInput.tsx b/src/components/atoms/SearchInput.tsx new file mode 100644 index 0000000..7b58002 --- /dev/null +++ b/src/components/atoms/SearchInput.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface SearchInputProps { + searchKeyword: string; + onChangeHandler: () => void; + onClickHandler: () => void; + className: string; +} + +const SearchInput: React.FC = ({ + searchKeyword, + onClickHandler, + onChangeHandler, + className, +}) => { + return ( +
+ +
+ ); +}; + +export default SearchInput; diff --git a/src/components/atoms/ToastMessage.tsx b/src/components/atoms/ToastMessage.tsx new file mode 100644 index 0000000..699240b --- /dev/null +++ b/src/components/atoms/ToastMessage.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const ToastMessage: React.FC = () => { + return
{'식자재 추가가 완료되었습니다.'}
; +}; + +export default ToastMessage; diff --git a/src/components/atoms/WhiteBox.tsx b/src/components/atoms/WhiteBox.tsx index 1178a10..5ae2a5b 100644 --- a/src/components/atoms/WhiteBox.tsx +++ b/src/components/atoms/WhiteBox.tsx @@ -2,11 +2,14 @@ import React from 'react'; interface WhiteBoxProps { children: React.ReactNode; + className?: string; } -const WhiteBox: React.FC = ({ children }) => { +const WhiteBox: React.FC = ({ children, className }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 9bc2b71..7b64ff4 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -2,3 +2,4 @@ export { default as GreenButton } from './GeenButton'; export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; export { default as IngredientDateTag } from './IngredientDateTag'; +export { default as BorderTab } from './BorderTab'; 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/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx new file mode 100644 index 0000000..964fa74 --- /dev/null +++ b/src/components/molecules/FridgeTab.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { BorderTab } from '../atoms'; + +const FridgeTab: React.FC = () => { + return ( +
+ + +
+ ); +}; + +export default FridgeTab; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index bbb51b5..d14049f 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -2,3 +2,4 @@ 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'; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx new file mode 100644 index 0000000..a96cf60 --- /dev/null +++ b/src/components/organisms/FridgeBoard.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { WhiteBox } from '@/components/atoms'; +import { EmptyIngredient, FridgeTab } from '@/components/molecules'; + +const FridgeBoard: React.FC = () => { + return ( + + +
+ +
+ + ); +}; + +export default FridgeBoard; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx new file mode 100644 index 0000000..471ffa6 --- /dev/null +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { GreenButton } from '../atoms'; +import { AllowBottom } from '../atoms/Icon'; + +const FridgeInfoBox: React.FC = () => { + return ( +
+
+
홍길동님의
+
+
기본 냉장고
+ +
+
+ +
+ ); +}; + +export default FridgeInfoBox; 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..796da5b 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1 +1,3 @@ export { default as IngredientBoard } from './IngredientBoard'; +export { default as FridgeBoard } from './FridgeBoard'; +export { default as FridgeInfoBox } from './FridgeInfoBox'; diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 26342e2..50beb8e 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,11 +1,15 @@ import Header from '@/components/organisms/Header'; +import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; import { type NextPage } from 'next'; const FridgePage: NextPage = () => { return (
-

fridge page

+
+ + +
); }; From f3aca7c647690c524e9688d415c7c1c02e3d61ed Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:54:19 +0900 Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=ED=83=AD=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC=20=EB=B0=8F=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/BorderTab.tsx | 13 +++++++++---- src/components/molecules/FridgeTab.tsx | 22 +++++++++++++++++++--- src/components/organisms/FridgeBoard.tsx | 18 +++++++++++++++--- src/pages/fridge/index.tsx | 11 ++++++++++- 4 files changed, 53 insertions(+), 11 deletions(-) diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx index 249f792..26bf1a4 100644 --- a/src/components/atoms/BorderTab.tsx +++ b/src/components/atoms/BorderTab.tsx @@ -1,21 +1,26 @@ import React from 'react'; interface BorderTabProps { - tabName: string; - isActive: boolean; + tabName: '냉장' | '냉동'; + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; clickHandler?: () => void; className?: string; } const BorderTab: React.FC = ({ tabName, - isActive, className, + currentTabName, + handleTabNameChange, }) => { return (
{ + handleTabNameChange(tabName); + }} > {tabName}
diff --git a/src/components/molecules/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx index 964fa74..afe9bc2 100644 --- a/src/components/molecules/FridgeTab.tsx +++ b/src/components/molecules/FridgeTab.tsx @@ -1,11 +1,27 @@ import React from 'react'; import { BorderTab } from '../atoms'; -const FridgeTab: React.FC = () => { +interface FridgeTabProps { + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; +} +const FridgeTab: React.FC = ({ + currentTabName, + handleTabNameChange, +}) => { return (
- - + +
); }; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index a96cf60..10c92e0 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -2,12 +2,24 @@ import React from 'react'; import { WhiteBox } from '@/components/atoms'; import { EmptyIngredient, FridgeTab } from '@/components/molecules'; -const FridgeBoard: React.FC = () => { +interface FridgeBoardProps { + currentTabName: '냉장' | '냉동'; + handleTabNameChange: (tabName: '냉장' | '냉동') => void; +} +const FridgeBoard: React.FC = ({ + currentTabName, + handleTabNameChange, +}) => { return ( - +
- +
); diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 50beb8e..c174cae 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,14 +1,23 @@ import Header from '@/components/organisms/Header'; import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; import { type NextPage } from 'next'; +import { useState } from 'react'; const FridgePage: NextPage = () => { + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; return (
- +
); From 00e04a3327270933e9593e44cd9090511db95be8 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 03:56:52 +0900 Subject: [PATCH 10/16] =?UTF-8?q?chore:=20=EA=B2=8C=EC=8B=9C=ED=8C=90?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=83=AD=EC=83=81=ED=83=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/FridgeBoard.tsx | 16 +++++++--------- src/pages/fridge/index.tsx | 11 +---------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index 10c92e0..673182c 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -1,15 +1,13 @@ -import React from 'react'; +import React, { useState } from 'react'; import { WhiteBox } from '@/components/atoms'; import { EmptyIngredient, FridgeTab } from '@/components/molecules'; -interface FridgeBoardProps { - currentTabName: '냉장' | '냉동'; - handleTabNameChange: (tabName: '냉장' | '냉동') => void; -} -const FridgeBoard: React.FC = ({ - currentTabName, - handleTabNameChange, -}) => { +const FridgeBoard: React.FC = () => { + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; return ( { - const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); - - const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { - setCurrentTabName(tabName); - }; return (
- +
); From ae0107df80dddd70a11a586d7bcea6f88469de69 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 04:20:53 +0900 Subject: [PATCH 11/16] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20=EC=98=A4=ED=94=88=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=8B=AB=EA=B8=B0=20=EC=A0=84?= =?UTF-8?q?=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GeenButton.tsx | 7 +++- src/components/atoms/ModalBottom.tsx | 24 ++++++++++--- src/components/atoms/index.ts | 2 ++ src/components/organisms/FridgeInfoBox.tsx | 5 ++- .../organisms/IngredientAddModal.tsx | 14 ++++++++ src/components/organisms/index.ts | 1 + src/pages/fridge/index.tsx | 36 ++++++++++++++----- 7 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 src/components/organisms/IngredientAddModal.tsx diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx index fd225e7..7bb9d07 100644 --- a/src/components/atoms/GeenButton.tsx +++ b/src/components/atoms/GeenButton.tsx @@ -6,10 +6,15 @@ interface GreenButtonProps { className: string; } -const GreenButton: React.FC = ({ text, className }) => { +const GreenButton: React.FC = ({ + text, + className, + handler, +}) => { return ( diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index bb3af19..3aabea7 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -1,10 +1,26 @@ import React from 'react'; -const ModalBox: React.FC = () => { +interface ModalBoxProps { + children: React.ReactNode; + blackClickHandler: () => void; +} + +const ModalBox: React.FC = ({ children, blackClickHandler }) => { + const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => { + e.stopPropagation(); + console.log('받아온 이벤트를 실행'); + }; + return ( -
-
-
hi
+
+
+ {children}
); diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 7b64ff4..b2b2224 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -3,3 +3,5 @@ export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; +export { default as ModalBottom } from './ModalBottom'; +export { default as ModalCenter } from './ModalCenter'; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 471ffa6..6af8780 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { GreenButton } from '../atoms'; import { AllowBottom } from '../atoms/Icon'; -const FridgeInfoBox: React.FC = () => { +const FridgeInfoBox: React.FC<{ + toggleIsOpenIngredientAddModal: () => void; +}> = ({ toggleIsOpenIngredientAddModal }) => { return (
@@ -15,6 +17,7 @@ const FridgeInfoBox: React.FC = () => {
); diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx new file mode 100644 index 0000000..0559468 --- /dev/null +++ b/src/components/organisms/IngredientAddModal.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { ModalBottom } from '@/components/atoms'; + +const IngredientAddModal: React.FC<{ + toggleIsOpenIngredientAddModal: () => void; +}> = ({ toggleIsOpenIngredientAddModal }) => { + return ( + +
hi
+ + ); +}; + +export default IngredientAddModal; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 796da5b..013a120 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1,3 +1,4 @@ export { default as IngredientBoard } from './IngredientBoard'; export { default as FridgeBoard } from './FridgeBoard'; export { default as FridgeInfoBox } from './FridgeInfoBox'; +export { default as IngredientAddModal } from './IngredientAddModal'; diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 50beb8e..9e8ed83 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,16 +1,36 @@ import Header from '@/components/organisms/Header'; -import { FridgeBoard, FridgeInfoBox } from '@/components/organisms'; +import { + FridgeBoard, + FridgeInfoBox, + IngredientAddModal, +} from '@/components/organisms'; import { type NextPage } from 'next'; +import { useState } from 'react'; const FridgePage: NextPage = () => { + const [isOpenIngredientAddModal, setIsOpenIngredientAddModal] = + useState(false); + + const toggleIsOpenIngredientAddModal: () => void = () => { + setIsOpenIngredientAddModal((prev) => !prev); + }; return ( -
-
-
- - -
-
+ <> + {isOpenIngredientAddModal && ( + + )} +
+
+
+ + +
+
+ ); }; export default FridgePage; From 0cd7c9e2e65fd3fcb6cdc4937d0bb611e39897cd Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 05:20:20 +0900 Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20organism?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GeenButton.tsx | 2 +- src/components/atoms/GrayBox.tsx | 2 +- src/components/atoms/Icon.tsx | 72 +++++++++++++++++++ src/components/atoms/IngredientIcons.tsx | 35 +++++++++ src/components/atoms/ModalBottom.tsx | 2 +- src/components/atoms/index.ts | 1 + .../organisms/IngredientAddModal.tsx | 50 ++++++++++++- 7 files changed, 159 insertions(+), 5 deletions(-) create mode 100644 src/components/atoms/IngredientIcons.tsx diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx index 7bb9d07..e32464e 100644 --- a/src/components/atoms/GeenButton.tsx +++ b/src/components/atoms/GeenButton.tsx @@ -3,7 +3,7 @@ import React from 'react'; interface GreenButtonProps { text: string; handler?: () => void; - className: string; + className?: string; } const GreenButton: React.FC = ({ diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx index 9610ca2..8de67fd 100644 --- a/src/components/atoms/GrayBox.tsx +++ b/src/components/atoms/GrayBox.tsx @@ -6,7 +6,7 @@ interface GrayBoxProps { const GrayBox: React.FC = ({ children }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index a327af8..e5c07bf 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -126,3 +126,75 @@ export const AllowBottom: React.FC> = (props) => ( /> ); + +export const CalendarSVG: React.FC> = (props) => ( + + + +); + +export const BoxSVG: React.FC> = (props) => ( + + + + +); + +export const FreezerSVG: React.FC> = (props) => ( + + + +); + +export const MemoSVG: React.FC> = (props) => ( + + + +); diff --git a/src/components/atoms/IngredientIcons.tsx b/src/components/atoms/IngredientIcons.tsx new file mode 100644 index 0000000..d97b930 --- /dev/null +++ b/src/components/atoms/IngredientIcons.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +// 삭제예정 +export const AppleIcon: React.FC> = (props) => ( + + + + + + + + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index 3aabea7..7144749 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -17,7 +17,7 @@ const ModalBox: React.FC = ({ children, blackClickHandler }) => { onClick={blackClickHandler} >
{children} diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index b2b2224..47a1752 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,6 +1,7 @@ export { default as GreenButton } from './GeenButton'; export { default as GreenLink } from './GreenLink'; export { default as WhiteBox } from './WhiteBox'; +export { default as GrayBox } from './GrayBox'; export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index 0559468..b4a00cd 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -1,12 +1,58 @@ import React from 'react'; -import { ModalBottom } from '@/components/atoms'; +import { GrayBox, GreenButton, ModalBottom } from '@/components/atoms'; +import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; +import { AppleIcon } from '../atoms/IngredientIcons'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; }> = ({ toggleIsOpenIngredientAddModal }) => { return ( -
hi
+
+
+ +
사과
+
+
+ +
+ +
소비기한
+
+
+
+ 2024년 01월 12일 +
+
~
+
+ 2024년 01월 6일 +
+
+ + +
+ +
수량
+
+
날짜~날짜
+ + +
+ +
냉동 보관
+
+
날짜~날짜
+ + +
+ +
메모
+
+
인풋
+ +
+ +
); }; From 2a4fb7c874cf82b235d3d81b612d3be07a654012 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 12:19:32 +0900 Subject: [PATCH 13/16] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC-=ED=86=A0?= =?UTF-8?q?=EA=B8=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GrayBox.tsx | 7 +- src/components/atoms/Icon.tsx | 28 ++++++ src/components/atoms/ModalBottom.tsx | 6 +- src/components/atoms/ModalCenter.tsx | 2 +- src/components/atoms/Toggle.tsx | 19 ++++ src/components/atoms/index.ts | 1 + src/components/molecules/Counter.tsx | 22 +++++ .../molecules/IngredientAddItem.tsx | 31 ++++++ src/components/molecules/index.ts | 2 + .../organisms/IngredientAddModal.tsx | 99 ++++++++++++------- src/hooks/useCount.ts | 23 +++++ 11 files changed, 201 insertions(+), 39 deletions(-) create mode 100644 src/components/atoms/Toggle.tsx create mode 100644 src/components/molecules/Counter.tsx create mode 100644 src/components/molecules/IngredientAddItem.tsx create mode 100644 src/hooks/useCount.ts diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx index 8de67fd..60769dd 100644 --- a/src/components/atoms/GrayBox.tsx +++ b/src/components/atoms/GrayBox.tsx @@ -2,11 +2,14 @@ import React from 'react'; interface GrayBoxProps { children: React.ReactNode; + className?: string; } -const GrayBox: React.FC = ({ children }) => { +const GrayBox: React.FC = ({ children, className }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index e5c07bf..e5a0905 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -198,3 +198,31 @@ export const MemoSVG: React.FC> = (props) => ( /> ); + +export const ToggleOffSVG: React.FC> = ( + props, +) => ( + + + + +); + +export const ToggleOnSVG: React.FC> = (props) => ( + + + + +); diff --git a/src/components/atoms/ModalBottom.tsx b/src/components/atoms/ModalBottom.tsx index 7144749..382a30c 100644 --- a/src/components/atoms/ModalBottom.tsx +++ b/src/components/atoms/ModalBottom.tsx @@ -7,8 +7,10 @@ interface ModalBoxProps { const ModalBox: React.FC = ({ children, blackClickHandler }) => { const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => { + if (e.target === e.currentTarget) { + blackClickHandler(); + } e.stopPropagation(); - console.log('받아온 이벤트를 실행'); }; return ( @@ -17,7 +19,7 @@ const ModalBox: React.FC = ({ children, blackClickHandler }) => { onClick={blackClickHandler} >
{children} diff --git a/src/components/atoms/ModalCenter.tsx b/src/components/atoms/ModalCenter.tsx index 53569d1..6482a56 100644 --- a/src/components/atoms/ModalCenter.tsx +++ b/src/components/atoms/ModalCenter.tsx @@ -2,7 +2,7 @@ import React from 'react'; const ModalCenter: React.FC = () => { return ( -
+
hi
diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx new file mode 100644 index 0000000..4d93851 --- /dev/null +++ b/src/components/atoms/Toggle.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ToggleOffSVG, ToggleOnSVG } from './Icon'; + +const Toggle: React.FC<{ + isToggleOn: boolean; + toggleState: (e: React.MouseEvent) => void; +}> = ({ isToggleOn, toggleState }) => { + return isToggleOn ? ( +
+ +
+ ) : ( +
+ +
+ ); +}; + +export default Toggle; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 47a1752..ff4c009 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -6,3 +6,4 @@ export { default as IngredientDateTag } from './IngredientDateTag'; export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; export { default as ModalCenter } from './ModalCenter'; +export { default as Toggle } from './Toggle'; diff --git a/src/components/molecules/Counter.tsx b/src/components/molecules/Counter.tsx new file mode 100644 index 0000000..cb1111d --- /dev/null +++ b/src/components/molecules/Counter.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import type { CountState } from '@/hooks/useCount'; + +const Counter: React.FC = ({ + currentCount, + handleDecreaseCount, + handleIncreaseCount, +}) => { + return ( +
+ + + +
+ ); +}; + +export default Counter; diff --git a/src/components/molecules/IngredientAddItem.tsx b/src/components/molecules/IngredientAddItem.tsx new file mode 100644 index 0000000..74c4530 --- /dev/null +++ b/src/components/molecules/IngredientAddItem.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { GrayBox } from '../atoms'; + +interface IngredientAddItemProps { + isRow: boolean; + svgComponent: React.ReactNode; + title: string; + children: React.ReactNode; +} +const IngredientAddItem: React.FC = ({ + isRow, + svgComponent, + title, + children, +}) => { + return ( + +
+ {svgComponent} +
{title}
+
+ {children} + + ); +}; + +export default IngredientAddItem; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index d14049f..89b4ed4 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -3,3 +3,5 @@ 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 IngredientAddItem } from './IngredientAddItem'; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index b4a00cd..b4bd81d 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -1,11 +1,27 @@ -import React from 'react'; -import { GrayBox, GreenButton, ModalBottom } from '@/components/atoms'; +import React, { useState } from 'react'; +import { GreenButton, ModalBottom, Toggle } from '@/components/atoms'; import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; import { AppleIcon } from '../atoms/IngredientIcons'; +import { Counter, IngredientAddItem } from '../molecules'; +import useCount from '@/hooks/useCount'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; }> = ({ toggleIsOpenIngredientAddModal }) => { + 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(); + }; + return (
@@ -14,44 +30,59 @@ const IngredientAddModal: React.FC<{
사과
- -
- -
소비기한
-
-
-
+ } + title="소비기한" + > +
+
2024년 01월 12일
-
~
-
+
~
+
2024년 01월 6일
- - -
- -
수량
-
-
날짜~날짜
- - -
- -
냉동 보관
-
-
날짜~날짜
- - -
- -
메모
-
-
인풋
- + + } + title="수량" + > + + + } + title="냉동보관" + > + + + } + title="메모" + > + ) => { + setMemoContent(e.target.value); + }} + className="w-full p-[12px] rounded-[6px] body1-medium" + placeholder="식자재 관련 정보를 입력해 주세요." + /> +
- +
); 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; From 519661f2c5b050f507ebfcdc250081c379fdb49b Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 18 Jan 2024 12:43:50 +0900 Subject: [PATCH 14/16] =?UTF-8?q?feat:=20=EC=A0=9C=EC=B6=9C=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/ToastMessage.tsx | 24 ++++++++++++++--- src/components/atoms/index.ts | 1 + .../molecules/IngredientItemBox.tsx | 5 ++-- src/components/organisms/FridgeBoard.tsx | 27 ++++++++++++++----- .../organisms/IngredientAddModal.tsx | 4 ++- src/pages/fridge/index.tsx | 13 +++++++++ 6 files changed, 61 insertions(+), 13 deletions(-) diff --git a/src/components/atoms/ToastMessage.tsx b/src/components/atoms/ToastMessage.tsx index 699240b..07e3921 100644 --- a/src/components/atoms/ToastMessage.tsx +++ b/src/components/atoms/ToastMessage.tsx @@ -1,7 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; -const ToastMessage: React.FC = () => { - return
{'식자재 추가가 완료되었습니다.'}
; +interface ToastMessageProps { + text: string; + toggleHandler: () => void; +} +const ToastMessage: React.FC = ({ text, toggleHandler }) => { + useEffect(() => { + const timer = setTimeout(() => { + toggleHandler(); + }, 1000); + + return () => { + clearTimeout(timer); + }; + }, []); + + return ( +
+ {text} +
+ ); }; export default ToastMessage; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index ff4c009..3d63361 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -7,3 +7,4 @@ export { default as BorderTab } from './BorderTab'; export { default as ModalBottom } from './ModalBottom'; export { default as ModalCenter } from './ModalCenter'; export { default as Toggle } from './Toggle'; +export { default as ToastMessage } from './ToastMessage'; 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/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index 673182c..9fd3fe7 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/src/components/organisms/FridgeBoard.tsx @@ -1,6 +1,10 @@ import React, { useState } from 'react'; import { WhiteBox } from '@/components/atoms'; -import { EmptyIngredient, FridgeTab } from '@/components/molecules'; +import { + EmptyIngredient, + FridgeTab, + IngredientItemBox, +} from '@/components/molecules'; const FridgeBoard: React.FC = () => { const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); @@ -8,17 +12,28 @@ const FridgeBoard: React.FC = () => { const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { setCurrentTabName(tabName); }; + + const datas = ['d']; + return ( -
- -
+ {datas.length !== 0 ? ( +
+ + + +
+ ) : ( +
+ +
+ )} ); }; diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index b4bd81d..90a7474 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -7,7 +7,8 @@ import useCount from '@/hooks/useCount'; const IngredientAddModal: React.FC<{ toggleIsOpenIngredientAddModal: () => void; -}> = ({ toggleIsOpenIngredientAddModal }) => { + toggleIsOppenToastMessage: () => void; +}> = ({ toggleIsOpenIngredientAddModal, toggleIsOppenToastMessage }) => { const [isInFreezer, setIsInFreezer] = useState(false); const [memoContent, setMemoContent] = useState(''); const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount(); @@ -20,6 +21,7 @@ const IngredientAddModal: React.FC<{ const handleSubmit: () => void = () => { console.log({ currentCount, isInFreezer, memoContent }); toggleIsOpenIngredientAddModal(); + toggleIsOppenToastMessage(); }; return ( diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 9e8ed83..cdd87fc 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -6,18 +6,31 @@ import { } 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 [isOpenToastMessage, setIsOpenToastMessage] = useState(false); + + const toggleIsOppenToastMessage: () => void = () => { + setIsOpenToastMessage((prev) => !prev); + }; const toggleIsOpenIngredientAddModal: () => void = () => { setIsOpenIngredientAddModal((prev) => !prev); }; return ( <> + {isOpenToastMessage && ( + + )} {isOpenIngredientAddModal && ( )} From 34f494e6d618bb5f5e7a001efad15f10ca5caae5 Mon Sep 17 00:00:00 2001 From: a-honey Date: Fri, 19 Jan 2024 02:43:34 +0900 Subject: [PATCH 15/16] =?UTF-8?q?feat:=20=EB=83=89=EC=9E=A5=EA=B3=A0=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GrayBox.tsx | 4 +- src/components/atoms/Icon.tsx | 99 ++++++++++++++++++++ src/components/molecules/FridgeListItem.tsx | 32 +++++++ src/components/molecules/index.ts | 1 + src/components/organisms/FridgeInfoBox.tsx | 8 +- src/components/organisms/FridgeListModal.tsx | 45 +++++++++ src/components/organisms/index.ts | 1 + src/pages/fridge/index.tsx | 13 +++ 8 files changed, 200 insertions(+), 3 deletions(-) create mode 100644 src/components/molecules/FridgeListItem.tsx create mode 100644 src/components/organisms/FridgeListModal.tsx diff --git a/src/components/atoms/GrayBox.tsx b/src/components/atoms/GrayBox.tsx index 60769dd..fe1d029 100644 --- a/src/components/atoms/GrayBox.tsx +++ b/src/components/atoms/GrayBox.tsx @@ -3,12 +3,14 @@ import React from 'react'; interface GrayBoxProps { children: React.ReactNode; className?: string; + onClick?: () => void; } -const GrayBox: React.FC = ({ children, className }) => { +const GrayBox: React.FC = ({ children, className, onClick }) => { return (
{children}
diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index e5a0905..99f8ac5 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -226,3 +226,102 @@ export const ToggleOnSVG: React.FC> = (props) => ( ); + +export const EditSVG: React.FC> = (props) => ( + + + +); + +export const EmptyRadioSVG: React.FC> = ( + props, +) => ( + + + +); + +export const FullRadioSVG: React.FC> = ( + props, +) => ( + + + + +); + +export const PlusSVG: React.FC> = (props) => ( + + + +); + +export const TrashcanSVG: React.FC> = (props) => ( + + + + + + + + + + +); 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/index.ts b/src/components/molecules/index.ts index 89b4ed4..0371c2c 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -5,3 +5,4 @@ export { default as SvgAndTextBox } from './SvgAndTextBox'; export { default as FridgeTab } from './FridgeTab'; export { default as Counter } from './Counter'; export { default as IngredientAddItem } from './IngredientAddItem'; +export { default as FridgeListItem } from './FridgeListItem'; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 6af8780..639a1f6 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -3,13 +3,17 @@ import { GreenButton } from '../atoms'; import { AllowBottom } from '../atoms/Icon'; const FridgeInfoBox: React.FC<{ + toggleIsOpenFridgeListModal: () => void; toggleIsOpenIngredientAddModal: () => void; -}> = ({ toggleIsOpenIngredientAddModal }) => { +}> = ({ toggleIsOpenFridgeListModal, toggleIsOpenIngredientAddModal }) => { return (
홍길동님의
-
+
기본 냉장고
diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx new file mode 100644 index 0000000..e2f9773 --- /dev/null +++ b/src/components/organisms/FridgeListModal.tsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { GreenButton, 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/index.ts b/src/components/organisms/index.ts index 013a120..f157fc2 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -2,3 +2,4 @@ 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/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index cdd87fc..7c1a986 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -2,6 +2,7 @@ import Header from '@/components/organisms/Header'; import { FridgeBoard, FridgeInfoBox, + FridgeListModal, IngredientAddModal, } from '@/components/organisms'; import { type NextPage } from 'next'; @@ -11,6 +12,7 @@ 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 = () => { @@ -20,8 +22,18 @@ const FridgePage: NextPage = () => { const toggleIsOpenIngredientAddModal: () => void = () => { setIsOpenIngredientAddModal((prev) => !prev); }; + + const toggleIsOpenFridgeListModal: () => void = () => { + setIsOpenFridgeListModal((prev) => !prev); + }; + return ( <> + {isOpenFridgeListModal && ( + + )} {isOpenToastMessage && ( {
From d064f762e561ff78094e8e08b387c175aa5ae2a1 Mon Sep 17 00:00:00 2001 From: a-honey Date: Thu, 25 Jan 2024 03:49:55 +0900 Subject: [PATCH 16/16] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20Button=20props=20=EC=88=98=EC=A0=95=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Button.tsx | 20 ++++++++++++++ src/components/atoms/GeenButton.tsx | 24 ----------------- .../{GreenLink.tsx => GreenArrowButton.tsx} | 19 ++++++++------ src/components/atoms/index.ts | 4 +-- ...tem.tsx => IngredientAddItemContainer.tsx} | 6 ++--- src/components/molecules/index.ts | 2 +- src/components/organisms/FridgeInfoBox.tsx | 8 +++--- src/components/organisms/FridgeListModal.tsx | 4 +-- .../organisms/IngredientAddModal.tsx | 26 +++++++++---------- src/pages/home/index.tsx | 11 ++++---- 10 files changed, 61 insertions(+), 63 deletions(-) create mode 100644 src/components/atoms/Button.tsx delete mode 100644 src/components/atoms/GeenButton.tsx rename src/components/atoms/{GreenLink.tsx => GreenArrowButton.tsx} (58%) rename src/components/molecules/{IngredientAddItem.tsx => IngredientAddItemContainer.tsx} (75%) 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 e32464e..0000000 --- a/src/components/atoms/GeenButton.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -interface GreenButtonProps { - text: string; - handler?: () => void; - className?: string; -} - -const GreenButton: React.FC = ({ - text, - className, - handler, -}) => { - return ( - - ); -}; - -export default GreenButton; diff --git a/src/components/atoms/GreenLink.tsx b/src/components/atoms/GreenArrowButton.tsx similarity index 58% rename from src/components/atoms/GreenLink.tsx rename to src/components/atoms/GreenArrowButton.tsx index c4649d8..47a4d8f 100644 --- a/src/components/atoms/GreenLink.tsx +++ b/src/components/atoms/GreenArrowButton.tsx @@ -1,23 +1,26 @@ import React from 'react'; import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg'; -import Link from 'next/link'; -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 ( - {text} - + ); }; -export default GreenLink; +export default GreenArrowButton; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 3d63361..0388947 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,5 +1,5 @@ -export { default as GreenButton } from './GeenButton'; -export { default as GreenLink } from './GreenLink'; +export { default as Button } from './Button'; +export { default as GreenArrowButton } from './GreenArrowButton'; export { default as WhiteBox } from './WhiteBox'; export { default as GrayBox } from './GrayBox'; export { default as IngredientDateTag } from './IngredientDateTag'; diff --git a/src/components/molecules/IngredientAddItem.tsx b/src/components/molecules/IngredientAddItemContainer.tsx similarity index 75% rename from src/components/molecules/IngredientAddItem.tsx rename to src/components/molecules/IngredientAddItemContainer.tsx index 74c4530..8e7b918 100644 --- a/src/components/molecules/IngredientAddItem.tsx +++ b/src/components/molecules/IngredientAddItemContainer.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { GrayBox } from '../atoms'; -interface IngredientAddItemProps { +interface IngredientAddItemContainerProps { isRow: boolean; svgComponent: React.ReactNode; title: string; children: React.ReactNode; } -const IngredientAddItem: React.FC = ({ +const IngredientAddItemContainer: React.FC = ({ isRow, svgComponent, title, @@ -28,4 +28,4 @@ const IngredientAddItem: React.FC = ({ ); }; -export default IngredientAddItem; +export default IngredientAddItemContainer; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 0371c2c..97de41a 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -4,5 +4,5 @@ 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 IngredientAddItem } from './IngredientAddItem'; +export { default as IngredientAddItemContainer } from './IngredientAddItemContainer'; export { default as FridgeListItem } from './FridgeListItem'; diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 639a1f6..b650d07 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { GreenButton } from '../atoms'; +import { Button } from '../atoms'; import { AllowBottom } from '../atoms/Icon'; const FridgeInfoBox: React.FC<{ @@ -18,10 +18,10 @@ const FridgeInfoBox: React.FC<{
-
); diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index e2f9773..4d9a6dd 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/src/components/organisms/FridgeListModal.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { GreenButton, ModalBottom } from '../atoms'; +import { Button, ModalBottom } from '../atoms'; import { FridgeListItem } from '../molecules'; import { PlusSVG, TrashcanSVG } from '../atoms/Icon'; @@ -36,7 +36,7 @@ const FridgeListModal: React.FC<{ - +
); diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index 90a7474..93ff459 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientAddModal.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { GreenButton, ModalBottom, Toggle } from '@/components/atoms'; +import { Button, ModalBottom, Toggle } from '@/components/atoms'; import { BoxSVG, CalendarSVG, FreezerSVG, MemoSVG } from '../atoms/Icon'; import { AppleIcon } from '../atoms/IngredientIcons'; -import { Counter, IngredientAddItem } from '../molecules'; +import { Counter, IngredientAddItemContainer } from '../molecules'; import useCount from '@/hooks/useCount'; const IngredientAddModal: React.FC<{ @@ -32,7 +32,7 @@ const IngredientAddModal: React.FC<{
사과
- } title="소비기한" @@ -46,8 +46,8 @@ const IngredientAddModal: React.FC<{ 2024년 01월 6일
- - + } title="수량" @@ -57,15 +57,15 @@ const IngredientAddModal: React.FC<{ handleIncreaseCount={handleIncreaseCount} handleDecreaseCount={handleDecreaseCount} /> - - + } title="냉동보관" > - - + } title="메모" @@ -78,12 +78,12 @@ const IngredientAddModal: React.FC<{ className="w-full p-[12px] rounded-[6px] body1-medium" placeholder="식자재 관련 정보를 입력해 주세요." /> - +
-
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 = () => {
- + + +
);