Merge MARA-8 into main (#4)

* 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

@@ -8,6 +8,6 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  ignorePatterns: ['/src/assets/**'],
+  ignorePatterns: ['/src/assets/**', '/src/styles/**'],
   rules: {},
 };

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<GreenButtonProps> = ({ text, className }) => {
+  return (
+    <button
+      className={`bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default GreenButton;

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<GreenLinkProps> = ({ text, className }) => {
+  return (
+    <button
+      className={`flex items-center justify-center w-full bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
+    >
+      {text}
+      <EnterAllowLightSVG />
+    </button>
+  );
+};
+
+export default GreenLink;

src/components/atoms/IngredientDateTag.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface IngredientDateTagProps {
+  dDay: number;
+  className?: string;
+}
+
+const IngredientDateTag: React.FC<IngredientDateTagProps> = ({ 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 (
+    <div
+      className={`w-64 p-9 rounded-6 text-center body1-semibold ${className}`}
+      style={{ backgroundColor }}
+    >
+      {textDay}
+    </div>
+  );
+};
+
+export default IngredientDateTag;

src/components/atoms/WhiteBox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface WhiteBoxProps {
+  children: React.ReactNode;
+}
+
+const WhiteBox: React.FC<WhiteBoxProps> = ({ children }) => {
+  return (
+    <div className="flex flex-col justify-center items-center gap-22 p-32 w-full bg-white rounded-12">
+      {children}
+    </div>
+  );
+};
+
+export default WhiteBox;

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';

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 (
+    <div className="flex flex-col items-center justify-center gap-12 min-h-268">
+      <IcNothingSVG />
+      <div className="body1-medium text-gray3">
+        현재 냉장고에 추가된 식자재가 없어요!
+      </div>
+    </div>
+  );
+};
+
+export default EmptyIngredient;

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<IngredientItemBoxProps> = ({ dDay }) => {
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center gap-8">
+        <AppleSVG width={38} height={38} />
+        <div className="flex flex-col gap-8">
+          <div className="heading4-semibold">사과</div>
+          <div className="body2-medium text-gray5 ">12월 21일 저장</div>
+        </div>
+      </div>
+      <IngredientDateTag dDay={4} />
+    </div>
+  );
+};
+
+export default IngredientItemBox;

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<NearExpirationWarnBoxProps> = ({
+  count,
+  className,
+}) => {
+  return (
+    <div
+      className={`flex items-center gap-8.5 h-45 bg-gray8 p-12 rounded-12 ${className}`}
+    >
+      <IcNowSVG />
+      <div className="text-gray2 body1-regular">
+        소비기한이 얼마 안 남은 식자재가{' '}
+        <span className="text-white body1-semibold">{count}개</span> 있어요!
+      </div>
+    </div>
+  );
+};
+
+export default NearExpirationWarnBox;

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<SvgAndTextBoxProps> = ({
+  svgComponent,
+  text,
+  linkTo,
+}) => {
+  return (
+    <Link className="w-full" href={linkTo}>
+      <WhiteBox>
+        {svgComponent}
+        <p className="heading4-semibold text-gray6">{text}</p>
+      </WhiteBox>
+    </Link>
+  );
+};
+
+export default SvgAndTextBox;

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';

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 (
+    <WhiteBox>
+      {isIngredientItem ? (
+        <div className={`flex flex-col w-full gap-25`}>
+          <IngredientItemBox />
+          <IngredientItemBox />
+        </div>
+      ) : (
+        <div className={`flex flex-col items-center`}>
+          <EmptyIngredient />
+        </div>
+      )}
+    </WhiteBox>
+  );
+};
+
+export default TermBoard;

src/components/organisms/index.ts

@@ -0,0 +1 @@
+export { default as IngredientBoard } from './IngredientBoard';

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 (
+    <section className={`flex flex-col min-h-screen p-20 bg-gray1`}>
+      {isNearExpirationWarn && (
+        <NearExpirationWarnBox className="mt-12" count={4} />
+      )}
+      <div className="flex gap-8.5 mt-12">
+        <SvgAndTextBox
+          svgComponent={<MyFridgeIconSvg width={72} height={72} />}
+          text="내 냉장고"
+          linkTo="/myfridge"
+        />
+        <SvgAndTextBox
+          svgComponent={<FriendsFridgeIconSvg width={97} height={72} />}
+          text="친구 냉장고"
+          linkTo="/friendfridge"
+        />
+      </div>
+      <div>
+        <div className="text-gray6 mt-30 mb-12 heading4-semibold">소비기한</div>
+        <IngredientBoard />
+      </div>
+      <GreenLink
+        className="mt-14"
+        text="내 냉장고 확인하기"
+        linkTo="myfridge"
+      />
+    </section>
+  );
+};
+export default Home;

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 = () => {
       <div className="heading1-bold text-primary2">mara</div>
       <p className="body2-semibold text-point1">web</p>
       <AppleIconSvg />
-      <AppleIcon />
     </main>
   );
 };

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;
+}

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: [],