From bf9e5df539610f9de8a1ecbc004e00e3d7ef5bc7 Mon Sep 17 00:00:00 2001 From: "Ahyeon, Jung" <75254185+a-honey@users.noreply.github.com> Date: Thu, 18 Jan 2024 00:56:38 +0900 Subject: [PATCH] Merge MARA-8 into main (#4) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: create FridgeEnterButton mocules and organism * fix: fix name and svg component * feat: 컴포넌트 분리 MARA-8 * style: 스타일링 * feat: 컴포넌트 Link 변경 * chore: icons atoms 삭제 * chore: 배럴파일, SVG 명 변경 * fix: disposable color 인라인으로 변경 --- .eslintrc.js | 2 +- src/components/atoms/.gitkeep | 0 src/components/atoms/GeenButton.tsx | 19 +++++++++ src/components/atoms/GreenLink.tsx | 21 ++++++++++ src/components/atoms/IngredientDateTag.tsx | 42 +++++++++++++++++++ src/components/atoms/WhiteBox.tsx | 15 +++++++ src/components/atoms/icons/FoodIcons.tsx | 6 --- src/components/atoms/index.ts | 4 ++ src/components/molecules/.gitkeep | 0 src/components/molecules/EmptyIngredient.tsx | 15 +++++++ .../molecules/IngredientItemBox.tsx | 28 +++++++++++++ .../molecules/NearExpirationWarnBox.tsx | 26 ++++++++++++ src/components/molecules/SvgAndTextBox.tsx | 26 ++++++++++++ src/components/molecules/index.ts | 4 ++ src/components/organisms/.gitkeep | 0 src/components/organisms/IngredientBoard.tsx | 24 +++++++++++ src/components/organisms/index.ts | 1 + src/pages/home/index.tsx | 39 +++++++++++++++++ src/pages/index.tsx | 2 - src/styles/globals.css | 6 +++ tailwind.config.ts | 30 +++++++++++++ 21 files changed, 301 insertions(+), 9 deletions(-) delete mode 100644 src/components/atoms/.gitkeep create mode 100644 src/components/atoms/GeenButton.tsx create mode 100644 src/components/atoms/GreenLink.tsx create mode 100644 src/components/atoms/IngredientDateTag.tsx create mode 100644 src/components/atoms/WhiteBox.tsx delete mode 100644 src/components/atoms/icons/FoodIcons.tsx create mode 100644 src/components/atoms/index.ts delete mode 100644 src/components/molecules/.gitkeep create mode 100644 src/components/molecules/EmptyIngredient.tsx create mode 100644 src/components/molecules/IngredientItemBox.tsx create mode 100644 src/components/molecules/NearExpirationWarnBox.tsx create mode 100644 src/components/molecules/SvgAndTextBox.tsx create mode 100644 src/components/molecules/index.ts delete mode 100644 src/components/organisms/.gitkeep create mode 100644 src/components/organisms/IngredientBoard.tsx create mode 100644 src/components/organisms/index.ts create mode 100644 src/pages/home/index.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 780a289..60fc3df 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,6 +8,6 @@ module.exports = { ecmaVersion: 'latest', sourceType: 'module', }, - ignorePatterns: ['/src/assets/**'], + ignorePatterns: ['/src/assets/**', '/src/styles/**'], rules: {}, }; diff --git a/src/components/atoms/.gitkeep b/src/components/atoms/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/atoms/GeenButton.tsx b/src/components/atoms/GeenButton.tsx new file mode 100644 index 0000000..fd225e7 --- /dev/null +++ b/src/components/atoms/GeenButton.tsx @@ -0,0 +1,19 @@ +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/GreenLink.tsx b/src/components/atoms/GreenLink.tsx new file mode 100644 index 0000000..9cb796a --- /dev/null +++ b/src/components/atoms/GreenLink.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg'; + +interface GreenLinkProps { + text: string; + linkTo: string; + className: string; +} + +const GreenLink: React.FC = ({ text, className }) => { + return ( + + ); +}; + +export default GreenLink; diff --git a/src/components/atoms/IngredientDateTag.tsx b/src/components/atoms/IngredientDateTag.tsx new file mode 100644 index 0000000..5f6cc68 --- /dev/null +++ b/src/components/atoms/IngredientDateTag.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +interface IngredientDateTagProps { + dDay: number; + className?: string; +} + +const IngredientDateTag: React.FC = ({ dDay }) => { + let className; + let backgroundColor; + let textDay; + + // dDay에 따라서 className 설정 + if (dDay === -1) { + className = 'bg-gray1 text-gray6'; + backgroundColor = ''; + textDay = `D+${dDay}`; + } else if (dDay === 0) { + className = 'bg-pink text-point3'; + backgroundColor = '#FFEBE6'; + textDay = `D-Day`; + } else if (dDay <= 5) { + className = 'text-point3'; + backgroundColor = '#FFEBE6'; + textDay = `D-${dDay}`; + } else { + className = 'text-primary3'; + backgroundColor = '#E1F4EF'; + textDay = `D-${dDay}`; + } + + return ( +
+ {textDay} +
+ ); +}; + +export default IngredientDateTag; diff --git a/src/components/atoms/WhiteBox.tsx b/src/components/atoms/WhiteBox.tsx new file mode 100644 index 0000000..1178a10 --- /dev/null +++ b/src/components/atoms/WhiteBox.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface WhiteBoxProps { + children: React.ReactNode; +} + +const WhiteBox: React.FC = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export default WhiteBox; diff --git a/src/components/atoms/icons/FoodIcons.tsx b/src/components/atoms/icons/FoodIcons.tsx deleted file mode 100644 index 5c682e4..0000000 --- a/src/components/atoms/icons/FoodIcons.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import AppleIconSvg from '../../../assets/icons/Frame 35.svg'; - -export const AppleIcon: React.FC = () => { - return ; -}; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts new file mode 100644 index 0000000..9bc2b71 --- /dev/null +++ b/src/components/atoms/index.ts @@ -0,0 +1,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'; diff --git a/src/components/molecules/.gitkeep b/src/components/molecules/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/molecules/EmptyIngredient.tsx b/src/components/molecules/EmptyIngredient.tsx new file mode 100644 index 0000000..54c125d --- /dev/null +++ b/src/components/molecules/EmptyIngredient.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import IcNothingSVG from '@/assets/icons/ICON/COMMON/ic_nothing.svg'; + +const EmptyIngredient: React.FC = () => { + return ( +
+ +
+ 현재 냉장고에 추가된 식자재가 없어요! +
+
+ ); +}; + +export default EmptyIngredient; diff --git a/src/components/molecules/IngredientItemBox.tsx b/src/components/molecules/IngredientItemBox.tsx new file mode 100644 index 0000000..82f8fbd --- /dev/null +++ b/src/components/molecules/IngredientItemBox.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IngredientDateTag } from '../atoms'; +import AppleSVG from '@/assets/icons/Frame 35.svg'; + +interface IngredientItemBoxProps { + title?: string; + svgUrl?: string; + expiration?: string; + dDay?: number; + className?: string; +} + +const IngredientItemBox: React.FC = ({ dDay }) => { + return ( +
+
+ +
+
사과
+
12월 21일 저장
+
+
+ +
+ ); +}; + +export default IngredientItemBox; diff --git a/src/components/molecules/NearExpirationWarnBox.tsx b/src/components/molecules/NearExpirationWarnBox.tsx new file mode 100644 index 0000000..9d18c22 --- /dev/null +++ b/src/components/molecules/NearExpirationWarnBox.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import IcNowSVG from '@/assets/icons/ICON/COMMON/ic_now.svg'; + +interface NearExpirationWarnBoxProps { + count: number; + className: string; +} + +const NearExpirationWarnBox: React.FC = ({ + count, + className, +}) => { + return ( +
+ +
+ 소비기한이 얼마 안 남은 식자재가{' '} + {count}개 있어요! +
+
+ ); +}; + +export default NearExpirationWarnBox; diff --git a/src/components/molecules/SvgAndTextBox.tsx b/src/components/molecules/SvgAndTextBox.tsx new file mode 100644 index 0000000..c8ac6af --- /dev/null +++ b/src/components/molecules/SvgAndTextBox.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Link from 'next/link'; +import { WhiteBox } from '@/components/atoms'; + +interface SvgAndTextBoxProps { + svgComponent: React.ReactNode; + text: string; + linkTo: string; +} + +const SvgAndTextBox: React.FC = ({ + svgComponent, + text, + linkTo, +}) => { + return ( + + + {svgComponent} +

{text}

+ + + ); +}; + +export default SvgAndTextBox; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts new file mode 100644 index 0000000..bbb51b5 --- /dev/null +++ b/src/components/molecules/index.ts @@ -0,0 +1,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'; diff --git a/src/components/organisms/.gitkeep b/src/components/organisms/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/organisms/IngredientBoard.tsx b/src/components/organisms/IngredientBoard.tsx new file mode 100644 index 0000000..ce83096 --- /dev/null +++ b/src/components/organisms/IngredientBoard.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { WhiteBox } from '@/components/atoms'; +import { EmptyIngredient, IngredientItemBox } from '@/components/molecules'; + +const TermBoard: React.FC = () => { + const isIngredientItem = true; + + return ( + + {isIngredientItem ? ( +
+ + +
+ ) : ( +
+ +
+ )} + + ); +}; + +export default TermBoard; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts new file mode 100644 index 0000000..45e000a --- /dev/null +++ b/src/components/organisms/index.ts @@ -0,0 +1 @@ +export { default as IngredientBoard } from './IngredientBoard'; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..40bd740 --- /dev/null +++ b/src/pages/home/index.tsx @@ -0,0 +1,39 @@ +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 { NearExpirationWarnBox, SvgAndTextBox } from '@/components/molecules'; +import { IngredientBoard } from '@/components/organisms'; + +const Home: NextPage = () => { + const isNearExpirationWarn = true; + return ( +
+ {isNearExpirationWarn && ( + + )} +
+ } + text="내 냉장고" + linkTo="/myfridge" + /> + } + text="친구 냉장고" + linkTo="/friendfridge" + /> +
+
+
소비기한
+ +
+ +
+ ); +}; +export default Home; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 002cf54..1948c72 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,4 @@ import AppleIconSvg from '../assets/icons/Frame 35.svg'; -import { AppleIcon } from '@/components/atoms/icons/FoodIcons'; import { type NextPage } from 'next'; const Home: NextPage = () => { @@ -8,7 +7,6 @@ const Home: NextPage = () => {
mara

web

- ); }; diff --git a/src/styles/globals.css b/src/styles/globals.css index 35f59a7..918ee16 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -9,6 +9,8 @@ @layer base { html, body { + padding: 0; + margin: 0; font-family: Pretendard; } } @@ -80,3 +82,7 @@ font-weight: 400; } } + +* { + box-sizing: border-box; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 304ed04..bfb6f09 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -27,6 +27,36 @@ const config: Config = { white: '#FFFFFF', black: '#000000', }, + spacing: { + '6': '6px', + '9': '9px', + '12': '12px', + '14': '14px', + '18': '18px', + '20': '20px', + '30': '30px', + '32': '32px', + }, + borderRadius: { + '6': '6px', + '12': '12px', + }, + minHeight: { + '268': '268px', + }, + width: { + '64': '64px', + }, + height: { + '48': '48px', + }, + gap: { + '8': '8px', + '8.5': '8.5px', + '10': '10px', + '22': '22px', + '25': '25px', + }, }, }, plugins: [],