Merge Mara-22 into main

src/components/atoms/BorderTab.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface BorderTabProps {
+  tabName: '냉장' | '냉동';
+  currentTabName: '냉장' | '냉동';
+  handleTabNameChange: (tabName: '냉장' | '냉동') => void;
+  clickHandler?: () => void;
+  className?: string;
+}
+const BorderTab: React.FC<BorderTabProps> = ({
+  tabName,
+  className,
+  currentTabName,
+  handleTabNameChange,
+}) => {
+  return (
+    <div
+      className={`bg-white w-full border-2 p-[8px] text-center rounded-[24px] ${className} ${
+        currentTabName === tabName ? 'border-primary2 z-10' : 'border-gray-200'
+      }`}
+      onClick={() => {
+        handleTabNameChange(tabName);
+      }}
+    >
+      {tabName}
+    </div>
+  );
+};
+
+export default BorderTab;

src/components/atoms/GeenButton.tsx

@@ -3,13 +3,18 @@ import React from 'react';
 interface GreenButtonProps {
   text: string;
   handler?: () => void;
-  className: string;
+  className?: string;
 }
 
-const GreenButton: React.FC<GreenButtonProps> = ({ text, className }) => {
+const GreenButton: React.FC<GreenButtonProps> = ({
+  text,
+  className,
+  handler,
+}) => {
   return (
     <button
       className={`bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
+      onClick={handler}
     >
       {text}
     </button>

src/components/atoms/GrayBox.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface GrayBoxProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const GrayBox: React.FC<GrayBoxProps> = ({ children, className }) => {
+  return (
+    <div
+      className={`flex ${className ?? 'flex-col'} justify-center items-start bg-[#F5F6F7] gap-22 p-[16px] w-full bg-[#F5F6F7] rounded-12`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default GrayBox;

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

src/components/atoms/Icon.tsx

@@ -109,3 +109,120 @@ export const Mypage: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     </defs>
   </svg>
 );
+
+export const AllowBottom: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="12"
+    height="7"
+    viewBox="0 0 12 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.784544 0.597105C1.11063 0.271017 1.63932 0.271017 1.96541 0.597105L5.99998 4.63167L10.0345 0.597105C10.3606 0.271017 10.8893 0.271017 11.2154 0.597105C11.5415 0.923193 11.5415 1.45189 11.2154 1.77797L5.99998 6.99341L0.784544 1.77797C0.458456 1.45189 0.458456 0.923193 0.784544 0.597105Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export const CalendarSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.375 0.95752C6.83616 0.95752 7.21 1.33136 7.21 1.79252V3.04252H13.54V1.79252C13.54 1.33136 13.9138 0.95752 14.375 0.95752C14.8362 0.95752 15.21 1.33136 15.21 1.79252V3.04252H16.58C17.5023 3.04252 18.25 3.7902 18.25 4.71252V7.16748H2.25V4.71252C2.25 3.7902 2.99768 3.04252 3.92 3.04252H5.54V1.79252C5.54 1.33136 5.91384 0.95752 6.375 0.95752ZM2.25 8.66748H18.25V17.3725C18.25 18.2948 17.5023 19.0425 16.58 19.0425H3.92C2.99768 19.0425 2.25 18.2948 2.25 17.3725V8.66748ZM6.25 13.9175C7.07843 13.9175 7.75 13.2459 7.75 12.4175C7.75 11.5891 7.07843 10.9175 6.25 10.9175C5.42157 10.9175 4.75 11.5891 4.75 12.4175C4.75 13.2459 5.42157 13.9175 6.25 13.9175Z"
+      fill="#3CAA8D"
+    />
+  </svg>
+);
+
+export const BoxSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.25 3.0251C1.25 2.03099 2.05589 1.2251 3.05 1.2251H17.45C18.4441 1.2251 19.25 2.03099 19.25 3.0251V5.7251H1.25V3.0251Z"
+      fill="#3CAA8D"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.5506 18.775C17.5447 18.775 18.3506 17.969 18.3506 16.975V7.07495H2.15063V16.975C2.15063 17.969 2.95654 18.775 3.95063 18.775H16.5506ZM7.38189 8.98745C6.82268 8.98745 6.36938 9.44097 6.36938 9.99995C6.36938 10.5589 6.82268 11.0125 7.38189 11.0125H13.1194C13.6786 11.0125 14.1319 10.5589 14.1319 9.99995C14.1319 9.44097 13.6786 8.98745 13.1194 8.98745H7.38189Z"
+      fill="#3CAA8D"
+    />
+  </svg>
+);
+
+export const FreezerSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 1C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V3C19 1.89543 18.1046 1 17 1H3ZM10.7501 5.84619V5.09619H9.25009V5.84619V8.55153L6.97251 7.09204L6.34104 6.68738L5.53174 7.95033L6.16321 8.35498L8.62149 9.93027L6.17974 11.5314L5.55256 11.9427L6.37509 13.197L7.00227 12.7858L9.25009 11.3118V14V14.75H10.7501V14V11.2943L13.0284 12.7543L13.6599 13.1589L14.4692 11.896L13.8377 11.4913L11.3791 9.91578L13.8209 8.31461L14.4481 7.90334L13.6255 6.64897L12.9983 7.06023L10.7501 8.53448V5.84619Z"
+      fill="#3CAA8D"
+    />
+  </svg>
+);
+
+export const MemoSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.66992 1.67969C2.74805 1.67969 2 2.38064 2 3.2453V16.7547C2 17.6194 2.74805 18.3203 3.66992 18.3203H16.3301C17.252 18.3203 18 17.6194 18 16.7547V3.2453C18 2.38064 17.252 1.67969 16.3301 1.67969H3.66992ZM5.79199 5.46717C5.33105 5.46717 4.95703 5.81764 4.95703 6.25C4.95703 6.68236 5.33105 7.03283 5.79199 7.03283H14.333C14.7939 7.03283 15.168 6.68236 15.168 6.25C15.168 5.81764 14.7939 5.46717 14.333 5.46717H5.79199ZM4.95703 10C4.95703 9.56764 5.33105 9.21717 5.79199 9.21717H14.333C14.7939 9.21717 15.168 9.56764 15.168 10C15.168 10.4324 14.7939 10.7828 14.333 10.7828H5.79199C5.59961 10.7828 5.42285 10.7218 5.28125 10.6194C5.08398 10.4762 4.95703 10.2521 4.95703 10ZM5.79199 12.9672C5.33105 12.9672 4.95703 13.3176 4.95703 13.75C4.95703 14.1824 5.33105 14.5328 5.79199 14.5328H10C10.4609 14.5328 10.835 14.1824 10.835 13.75C10.835 13.3176 10.4609 12.9672 10 12.9672H5.79199Z"
+      fill="#3CAA8D"
+    />
+  </svg>
+);
+
+export const ToggleOffSVG: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    width="52"
+    height="42"
+    viewBox="0 0 52 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="8" y="9" width="44" height="24" rx="12" fill="#E0E1E6" />
+    <rect x="12" y="12" width="18" height="18" rx="9" fill="white" />
+  </svg>
+);
+
+export const ToggleOnSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="53"
+    height="42"
+    viewBox="0 0 53 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect y="9" width="44" height="24" rx="12" fill="#3CAA8D" />
+    <rect x="23" y="12" width="18" height="18" rx="9" fill="white" />
+  </svg>
+);

src/components/atoms/ModalBottom.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface ModalBoxProps {
+  children: React.ReactNode;
+  blackClickHandler: () => void;
+}
+
+const ModalBox: React.FC<ModalBoxProps> = ({ children, blackClickHandler }) => {
+  const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => {
+    if (e.target === e.currentTarget) {
+      blackClickHandler();
+    }
+    e.stopPropagation();
+  };
+
+  return (
+    <div
+      className="fixed top-0 left-0 w-full h-full flex items-end justify-center bg-black bg-opacity-50 z-[9999]"
+      onClick={blackClickHandler}
+    >
+      <div
+        className="w-full max-w-[480px] min-h-[500px] pt-[40px] mb-[-24px] bg-white p-[20px] rounded-[24px]"
+        onClick={handleWhiteContentClick}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalBox;

src/components/atoms/ModalCenter.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ModalCenter: React.FC = () => {
+  return (
+    <div className="fixed top-0 left-0 max-w-[480px] w-full h-full flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white p-4">
+        <div>hi</div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalCenter;

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<SearchInputProps> = ({
+  searchKeyword,
+  onClickHandler,
+  onChangeHandler,
+  className,
+}) => {
+  return (
+    <div
+      className={`flex items-center justify-center w-full bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
+    >
+      <input onChange={onChangeHandler} value={searchKeyword} />
+    </div>
+  );
+};
+
+export default SearchInput;

src/components/atoms/ToastMessage.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+interface ToastMessageProps {
+  text: string;
+  toggleHandler: () => void;
+}
+const ToastMessage: React.FC<ToastMessageProps> = ({ text, toggleHandler }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      toggleHandler();
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <div className="fixed bottom-[90px] left-[20px] right-[20px] p-[16px] rounded-[12px] text-center text-white body1-regular bg-black bg-opacity-70">
+      {text}
+    </div>
+  );
+};
+
+export default ToastMessage;

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 ? (
+    <div className="mr-[-10px]" onClick={toggleState}>
+      <ToggleOnSVG />
+    </div>
+  ) : (
+    <div onClick={toggleState}>
+      <ToggleOffSVG />
+    </div>
+  );
+};
+
+export default Toggle;

src/components/atoms/WhiteBox.tsx

@@ -2,11 +2,14 @@ import React from 'react';
 
 interface WhiteBoxProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-const WhiteBox: React.FC<WhiteBoxProps> = ({ children }) => {
+const WhiteBox: React.FC<WhiteBoxProps> = ({ children, className }) => {
   return (
-    <div className="flex flex-col justify-center items-center gap-22 p-32 w-full bg-white rounded-12">
+    <div
+      className={`flex flex-col justify-center items-center gap-22 p-32 w-full bg-white rounded-12 ${className}`}
+    >
       {children}
     </div>
   );

src/components/atoms/index.ts

@@ -1,4 +1,10 @@
 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';
+export { default as ModalCenter } from './ModalCenter';
+export { default as Toggle } from './Toggle';
+export { default as ToastMessage } from './ToastMessage';

src/components/molecules/Counter.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { CountState } from '@/hooks/useCount';
+
+const Counter: React.FC<CountState> = ({
+  currentCount,
+  handleDecreaseCount,
+  handleIncreaseCount,
+}) => {
+  return (
+    <div className="flex items-center h-[32px] bg-white rounded-[6px]">
+      <button className="w-[30px] text-center" onClick={handleDecreaseCount}>
+        -
+      </button>
+      <input className="w-[30px] text-center" value={currentCount} />
+      <button className="w-[30px] text-center" onClick={handleIncreaseCount}>
+        +
+      </button>
+    </div>
+  );
+};
+
+export default Counter;