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/Button.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, className, onClick }) => {
+  return (
+    <button
+      className={` text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;

src/components/atoms/GrayBox.tsx

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

src/components/atoms/GreenLink.tsx → src/components/atoms/GreenArrowButton.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import EnterAllowLightSVG from '@/assets/icons/ICON/COMMON/ic_more-1.svg';
 
-interface GreenLinkProps {
+interface GreenArrowButtonProps {
   text: string;
-  linkTo: string;
+  onClick?: () => void;
   className: string;
 }
 
-const GreenLink: React.FC<GreenLinkProps> = ({ text, className }) => {
+const GreenArrowButton: React.FC<GreenArrowButtonProps> = ({
+  text,
+  className,
+  onClick,
+}) => {
   return (
     <button
+      onClick={onClick}
       className={`flex items-center justify-center w-full bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
     >
       {text}
@@ -18,4 +23,4 @@ const GreenLink: React.FC<GreenLinkProps> = ({ text, className }) => {
   );
 };
 
-export default GreenLink;
+export default GreenArrowButton;

src/components/atoms/Icon.tsx

@@ -109,3 +109,219 @@ 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>
+);
+
+export const EditSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="13"
+    height="13"
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.98597 2.78906L0.88774 9.88728L0.946665 12.3032L3.36261 12.3622L10.4608 5.26393L7.98597 2.78906ZM11.1679 4.55682L12.4371 3.28762C12.6324 3.09236 12.6324 2.77578 12.4371 2.58051L10.6694 0.812748C10.4741 0.617485 10.1575 0.617486 9.96228 0.812747L8.69307 2.08195L11.1679 4.55682Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export const EmptyRadioSVG: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    width="23"
+    height="22"
+    viewBox="0 0 23 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="11.25"
+      cy="11"
+      r="9.18182"
+      stroke="#E0E1E6"
+      stroke-width="1.63636"
+    />
+  </svg>
+);
+
+export const FullRadioSVG: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    width="23"
+    height="22"
+    viewBox="0 0 23 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="11.25"
+      cy="11"
+      r="9.18182"
+      stroke="#3CAA8D"
+      stroke-width="1.63636"
+    />
+    <circle cx="11.25" cy="11" r="6" fill="#3CAA8D" />
+  </svg>
+);
+
+export const PlusSVG: 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="M11.1159 2.74091C11.1159 2.26268 10.7282 1.875 10.25 1.875C9.77177 1.875 9.38409 2.26268 9.38409 2.74091V9.13409H2.99091C2.51268 9.13409 2.125 9.52177 2.125 10C2.125 10.4782 2.51268 10.8659 2.99091 10.8659H9.38409V17.2591C9.38409 17.7373 9.77177 18.125 10.25 18.125C10.7282 18.125 11.1159 17.7373 11.1159 17.2591V10.8659H17.5091C17.9873 10.8659 18.375 10.4782 18.375 10C18.375 9.52177 17.9873 9.13409 17.5091 9.13409H11.1159V2.74091Z"
+      fill="#CCCFD7"
+    />
+  </svg>
+);
+
+export const TrashcanSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="23"
+    height="22"
+    viewBox="0 0 23 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_716_10977)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.685 3.22924C7.685 2.76809 8.05884 2.39424 8.52 2.39424H13.98C14.4412 2.39424 14.815 2.76809 14.815 3.22924V3.75924H7.685V3.22924ZM6.015 3.75924V3.22924C6.015 1.84577 7.13653 0.724243 8.52 0.724243H13.98C15.3635 0.724243 16.485 1.84577 16.485 3.22924V3.75924H17.7443H21.4167C21.8769 3.75924 22.25 4.13234 22.25 4.59258V5.12591C22.25 5.58615 21.8769 5.95924 21.4167 5.95924H19.3854L18.6656 19.7793C18.6195 20.6648 17.888 21.3592 17.0012 21.3592H5.49879C4.612 21.3592 3.8805 20.6649 3.83438 19.7793L3.11458 5.95924H1.08333C0.623097 5.95924 0.25 5.58615 0.25 5.12591V4.59258C0.25 4.13234 0.623096 3.75924 1.08333 3.75924H4.75573H6.015ZM7.41517 8.15924C6.8859 8.15924 6.45684 8.5883 6.45684 9.11758V17.1009C6.45684 17.6302 6.8859 18.0592 7.41517 18.0592C7.94444 18.0592 8.3735 17.6302 8.3735 17.1009V9.11758C8.3735 8.5883 7.94444 8.15924 7.41517 8.15924ZM10.2902 9.11758C10.2902 8.5883 10.7192 8.15924 11.2485 8.15924C11.7778 8.15924 12.2069 8.5883 12.2069 9.11758V17.1009C12.2069 17.6302 11.7778 18.0592 11.2485 18.0592C10.7192 18.0592 10.2902 17.6302 10.2902 17.1009V9.11758ZM15.0819 8.15924C14.5526 8.15924 14.1235 8.5883 14.1235 9.11758V17.1009C14.1235 17.6302 14.5526 18.0592 15.0819 18.0592C15.6111 18.0592 16.0402 17.6302 16.0402 17.1009V9.11758C16.0402 8.5883 15.6111 8.15924 15.0819 8.15924Z"
+        fill="#CCCFD7"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_716_10977">
+        <rect width="22" height="22" fill="white" transform="translate(0.25)" />
+      </clipPath>
+    </defs>
+  </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;