이메일

public/images/ico_app_delete.svg

@@ -1,11 +1,5 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="36" height="36" rx="6" fill="#F5F5F5"/>
+<rect x="0.416667" y="0.416667" width="19.1667" height="19.1667" rx="9.58333" fill="white"/>
-<g clip-path="url(#clip0_2269_6765)">
+<rect x="0.416667" y="0.416667" width="19.1667" height="19.1667" rx="9.58333" stroke="#BEBEBE" stroke-width="0.833333"/>
-<rect x="9" y="17" width="18" height="2" rx="1" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.622 6.78854C12.7847 6.62582 13.0485 6.62582 13.2113 6.78854C13.374 6.95126 13.374 7.21508 13.2113 7.3778L10.5892 9.99984L13.2113 12.6219C13.374 12.7846 13.374 13.0484 13.2113 13.2111C13.0485 13.3739 12.7847 13.3739 12.622 13.2111L9.99996 10.5891L7.37792 13.2111C7.2152 13.3739 6.95138 13.3739 6.78866 13.2111C6.62595 13.0484 6.62595 12.7846 6.78866 12.6219L9.4107 9.99984L6.78867 7.3778C6.62595 7.21508 6.62595 6.95126 6.78867 6.78854C6.95138 6.62582 7.2152 6.62582 7.37792 6.78854L9.99996 9.41058L12.622 6.78854Z" fill="white" stroke="#999999" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_2269_6765">
-<rect x="8" y="8" width="20" height="20" rx="10" fill="white"/>
-</clipPath>
-</defs>
 </svg>

public/images/ico_email.svg

@@ -1,17 +1,17 @@
 <svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1692_3422)">
+<g clip-path="url(#clip0_3445_7322)">
-<g clip-path="url(#clip1_1692_3422)">
+<g clip-path="url(#clip1_3445_7322)">
-<rect x="1" y="0.5" width="34" height="23.6111" rx="4" fill="#A4B9FF"/>
+<rect x="1" y="0.5" width="34" height="23.6111" rx="4" fill="#819DFC"/>
 <path d="M1 2.30566C2.08958 3.39525 12.3381 10.5628 17.4638 14.1918C17.8183 14.4428 18.2913 14.4348 18.6391 14.1746L34.5 2.30566" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 <path d="M2.5 23L13.5 12.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 <path d="M34 23.8057L22 11.8057" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </g>
 </g>
 <defs>
-<clipPath id="clip0_1692_3422">
+<clipPath id="clip0_3445_7322">
 <rect width="36" height="24" rx="4" fill="white"/>
 </clipPath>
-<clipPath id="clip1_1692_3422">
+<clipPath id="clip1_3445_7322">
 <rect width="36" height="23" fill="white" transform="translate(0 0.5)"/>
 </clipPath>
 </defs>

public/images/ico_menu_plus.svg

@@ -1,11 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2269_6819)">
+<rect x="1.40002" y="0.5" width="29" height="29" rx="7.5" fill="white" stroke="#043465" stroke-dasharray="2 2"/>
-<rect x="1" y="9" width="18" height="2" rx="1" fill="#999999"/>
+<path d="M17.2495 10V14.6543H21.9019V16.3457H17.2495V21H15.5571V16.3457H10.9048V14.6543H15.5571V10H17.2495Z" fill="#043465"/>
-<rect x="11" y="1" width="18" height="2" rx="1" transform="rotate(90 11 1)" fill="#999999"/>
-</g>
-<defs>
-<clipPath id="clip0_2269_6819">
-<rect width="20" height="20" rx="10" fill="white"/>
-</clipPath>
-</defs>
 </svg>

public/images/ico_pic.svg

@@ -0,0 +1,24 @@
+<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3445_7409)">
+<path d="M34.9005 1.0083H1.08838V22.9274H34.9005V1.0083Z" fill="#43D8AB"/>
+<path d="M8.4873 8.4834L17.5439 18.0137L18.0342 18.5303L17.5439 19.0469L6.64453 30.5166L6.42285 30.75H-2.75V19.167L-2.54395 18.9492L7.39941 8.4834L7.94336 7.91113L8.4873 8.4834Z" fill="#43D8AB" stroke="white" stroke-width="1.5"/>
+<mask id="path-4-outside-1_3445_7409" maskUnits="userSpaceOnUse" x="24" y="5" width="14" height="23" fill="black">
+<rect fill="white" x="24" y="5" width="14" height="23"/>
+<path d="M36 24.0733V9L27 17.1777L36 26"/>
+</mask>
+<path d="M36 24.0733V9L27 17.1777L36 26" fill="#43D8AB"/>
+<path d="M36 9H37.5V5.61032L34.9913 7.88984L36 9ZM27 17.1777L25.9913 16.0675L24.815 17.1363L25.95 18.2489L27 17.1777ZM36 24.0733H37.5V9H36H34.5V24.0733H36ZM36 9L34.9913 7.88984L25.9913 16.0675L27 17.1777L28.0087 18.2879L37.0087 10.1102L36 9ZM27 17.1777L25.95 18.2489L34.95 27.0712L36 26L37.05 24.9288L28.05 16.1065L27 17.1777Z" fill="white" mask="url(#path-4-outside-1_3445_7409)"/>
+<mask id="path-6-outside-2_3445_7409" maskUnits="userSpaceOnUse" x="-1" y="7" width="38" height="22" fill="black">
+<rect fill="white" x="-1" y="7" width="38" height="22"/>
+<path d="M35 25.4792L24.2379 14.8074L19.5557 10L14.0975 15.605L3 27H12.3645H25.1972H35"/>
+</mask>
+<path d="M35 25.4792L24.2379 14.8074L19.5557 10L14.0975 15.605L3 27H12.3645H25.1972H35" fill="#43D8AB"/>
+<path d="M24.2379 14.8074L23.1634 15.854L23.1725 15.8633L23.1818 15.8725L24.2379 14.8074ZM19.5557 10L20.6302 8.95341L19.5556 7.85006L18.481 8.95351L19.5557 10ZM14.0975 15.605L15.1721 16.6515L15.1721 16.6515L14.0975 15.605ZM3 27L1.9254 25.9535L-0.554646 28.5H3V27ZM35 25.4792L36.0562 24.4141L25.2941 13.7423L24.2379 14.8074L23.1818 15.8725L33.9438 26.5443L35 25.4792ZM24.2379 14.8074L25.3125 13.7608L20.6302 8.95341L19.5557 10L18.4811 11.0466L23.1634 15.854L24.2379 14.8074ZM19.5557 10L18.481 8.95351L13.0228 14.5585L14.0975 15.605L15.1721 16.6515L20.6303 11.0465L19.5557 10ZM14.0975 15.605L13.0229 14.5585L1.9254 25.9535L3 27L4.0746 28.0465L15.1721 16.6515L14.0975 15.605ZM3 27V28.5H12.3645V27V25.5H3V27ZM12.3645 27V28.5H25.1972V27V25.5H12.3645V27ZM25.1972 27V28.5H35V27V25.5H25.1972V27Z" fill="white" mask="url(#path-6-outside-2_3445_7409)"/>
+<circle cx="27" cy="7" r="2.25" fill="#43D8AB" stroke="white" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_3445_7409">
+<rect x="1" y="1" width="34" height="22" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/images/mail_download.svg

@@ -1,21 +1,20 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40" height="48" viewBox="0 0 40 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 22H53L63 43H7L17 22Z" fill="url(#paint0_linear_2456_7153)"/>
+<path d="M8.71429 16.5723H31.2857L37 28.5723H3L8.71429 16.5723Z" fill="#175AA4"/>
-<path d="M17 8C17 5.79086 18.7909 4 21 4H49C51.2091 4 53 5.79086 53 8V41H17V8Z" fill="#D9D9D9"/>
+<path d="M8.71423 7.57087C8.71423 6.3085 9.73758 5.28516 10.9999 5.28516H28.9999C30.2623 5.28516 31.2857 6.30851 31.2857 7.57087V26.428H8.71423V7.57087Z" fill="#166DCA"/>
-<path d="M20 6.5H50C51.933 6.5 53.5 8.067 53.5 10V50.5H16.5V10C16.5 8.067 18.067 6.5 20 6.5Z" fill="url(#paint1_linear_2456_7153)" stroke="#D9D9D9"/>
+<path d="M8.14282 9.71345C8.14282 8.45108 9.16617 7.42773 10.4285 7.42773H29.5714C30.8338 7.42773 31.8571 8.45108 31.8571 9.71345V33.142H8.14282V9.71345Z" fill="#4394E5"/>
-<path d="M63 60C63 62.2091 61.2091 64 59 64H11C8.79086 64 7 62.2091 7 60V43H25.5L26.5049 47.4414C26.7111 48.3528 27.5207 48.9999 28.4551 49H41.5449C42.4793 48.9999 43.2889 48.3528 43.4951 47.4414L44.5 43H63V60Z" fill="url(#paint2_linear_2456_7153)"/>
+<path d="M37 38.2852C36.9998 39.5473 35.9761 40.5703 34.7139 40.5703H5.28613C4.02391 40.5703 3.00023 39.5473 3 38.2852V28.5703H37V38.2852ZM13.5713 28.5713L14.1455 31.1094C14.2633 31.6301 14.7259 31.9998 15.2598 32H22.7402C23.2741 31.9998 23.7367 31.6301 23.8545 31.1094L24.4287 28.5713H13.5713Z" fill="#7FC1FF"/>
-<path d="M39.5334 27.6143C39.5334 27.8904 39.7573 28.1143 40.0334 28.1143H42.6231C43.0786 28.1143 43.2968 28.6737 42.9617 28.9821L35.5 35.8504C35.3086 36.0266 35.0141 36.0266 34.8228 35.8504L27.3611 28.9821C27.0259 28.6737 27.2442 28.1143 27.6997 28.1143H30.2903C30.5664 28.1143 30.7903 27.8904 30.7903 27.6143V17.5C30.7903 17.2239 31.0141 17 31.2903 17H39.0334C39.3096 17 39.5334 17.2239 39.5334 17.5V27.6143Z" fill="#429AFF"/>
+<g filter="url(#filter0_d_2778_10451)">
+<path d="M23.3359 19.9718C23.3359 20.1767 23.502 20.3428 23.7069 20.3428H25.6275C25.9654 20.3428 26.1273 20.7578 25.8787 20.9866L20.343 26.0822C20.201 26.2129 19.9826 26.2129 19.8406 26.0822L14.3049 20.9866C14.0563 20.7578 14.2182 20.3428 14.5561 20.3428H16.4787C16.6835 20.3428 16.8496 20.1767 16.8496 19.9718V12.4686C16.8496 12.2637 17.0157 12.0977 17.2205 12.0977H22.965C23.1699 12.0977 23.3359 12.2637 23.3359 12.4686V19.9718Z" fill="white"/>
+</g>
 <defs>
-<linearGradient id="paint0_linear_2456_7153" x1="35" y1="22" x2="35" y2="43" gradientUnits="userSpaceOnUse">
+<filter id="filter0_d_2778_10451" x="12.8862" y="12.0977" width="13.1129" height="15.3803" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<stop stop-color="#3D76C1"/>
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<stop offset="1" stop-color="#2966B5"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-</linearGradient>
+<feOffset dx="-1.29825" dy="1.29825"/>
-<linearGradient id="paint1_linear_2456_7153" x1="35" y1="6" x2="35" y2="51" gradientUnits="userSpaceOnUse">
+<feComposite in2="hardAlpha" operator="out"/>
-<stop stop-color="white"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-<stop offset="1" stop-color="#F1F1F1"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2778_10451"/>
-</linearGradient>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2778_10451" result="shape"/>
-<linearGradient id="paint2_linear_2456_7153" x1="35" y1="43" x2="35" y2="64" gradientUnits="userSpaceOnUse">
+</filter>
-<stop stop-color="#8FC1FC"/>
-<stop offset="1" stop-color="#5798E3"/>
-</linearGradient>
 </defs>
 </svg>

public/images/radio_off.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="9" cy="9" r="8.5" fill="white" stroke="#CCCCCC"/>
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#BEBEBE"/>
 </svg>

public/images/radio_on.svg

@@ -1,4 +1,4 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="9" cy="9" r="8.5" fill="white" stroke="#4968BD"/>
+<rect width="20" height="20" rx="10" fill="#3E6AFC"/>
-<circle cx="9" cy="9" r="4.5" fill="#4968BD"/>
+<circle cx="10" cy="10" r="4" fill="white"/>
 </svg>

src/entities/common/ui/email-bottom-sheet.tsx

@@ -0,0 +1,98 @@
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+
+export interface EmailBottomSheetProps {
+  bottomSheetOn: boolean;
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+  callPurposeUpdate: () => void;
+};
+
+export const EmailBottomSheet = ({
+  bottomSheetOn,
+  setBottomSheetOn,
+}: EmailBottomSheetProps) => {
+  
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  
+  
+  return (
+    <>
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>이메일 주소를 선택하세요</h2>
+            <button
+              className="close-btn"
+              type="button"
+            >
+              <img 
+                src={ IMAGE_ROOT + '/ico_close.svg' }
+                alt="닫기"
+                onClick={ () => onClickToClose() }
+              />
+            </button>
+          </div>
+        </div>
+
+        <div className="bottomsheet-content">
+          <div className="email-section">
+            <div className="email-label mb-10">
+              <div className="mail-icon">
+                <div className="mail-icon-bg"></div>
+                <img 
+                  src={ IMAGE_ROOT + '/ico_pic.svg' } 
+                  alt="이미지"
+                />
+              </div>
+              <span className="label-text">이미지 저장</span>
+            </div>
+            <div className="email-label">
+              <div className="mail-icon">
+                <div className="mail-icon-bg"></div>
+                <img 
+                  src={ IMAGE_ROOT + '/ico_email.svg' } 
+                  alt='메일'
+                />
+              </div>
+              <span className="label-text">메일로 받기</span>
+            </div>
+          
+            <div className="email-select">
+              <div className="select-wrapper">
+                <select>
+                  <option>test@nicepay.co.kr</option>
+                  <option>test@nicepay.co.kr</option>
+                  <option>선택2</option>
+                </select>
+              </div>
+            </div>
+          
+            <div className="error-message">
+              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1" 
+            type="button" 
+            disabled
+          >신청</button>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/shared/ui/assets/images/ico_pic.svg

@@ -0,0 +1,24 @@
+<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3445_7409)">
+<path d="M34.9005 1.0083H1.08838V22.9274H34.9005V1.0083Z" fill="#43D8AB"/>
+<path d="M8.4873 8.4834L17.5439 18.0137L18.0342 18.5303L17.5439 19.0469L6.64453 30.5166L6.42285 30.75H-2.75V19.167L-2.54395 18.9492L7.39941 8.4834L7.94336 7.91113L8.4873 8.4834Z" fill="#43D8AB" stroke="white" stroke-width="1.5"/>
+<mask id="path-4-outside-1_3445_7409" maskUnits="userSpaceOnUse" x="24" y="5" width="14" height="23" fill="black">
+<rect fill="white" x="24" y="5" width="14" height="23"/>
+<path d="M36 24.0733V9L27 17.1777L36 26"/>
+</mask>
+<path d="M36 24.0733V9L27 17.1777L36 26" fill="#43D8AB"/>
+<path d="M36 9H37.5V5.61032L34.9913 7.88984L36 9ZM27 17.1777L25.9913 16.0675L24.815 17.1363L25.95 18.2489L27 17.1777ZM36 24.0733H37.5V9H36H34.5V24.0733H36ZM36 9L34.9913 7.88984L25.9913 16.0675L27 17.1777L28.0087 18.2879L37.0087 10.1102L36 9ZM27 17.1777L25.95 18.2489L34.95 27.0712L36 26L37.05 24.9288L28.05 16.1065L27 17.1777Z" fill="white" mask="url(#path-4-outside-1_3445_7409)"/>
+<mask id="path-6-outside-2_3445_7409" maskUnits="userSpaceOnUse" x="-1" y="7" width="38" height="22" fill="black">
+<rect fill="white" x="-1" y="7" width="38" height="22"/>
+<path d="M35 25.4792L24.2379 14.8074L19.5557 10L14.0975 15.605L3 27H12.3645H25.1972H35"/>
+</mask>
+<path d="M35 25.4792L24.2379 14.8074L19.5557 10L14.0975 15.605L3 27H12.3645H25.1972H35" fill="#43D8AB"/>
+<path d="M24.2379 14.8074L23.1634 15.854L23.1725 15.8633L23.1818 15.8725L24.2379 14.8074ZM19.5557 10L20.6302 8.95341L19.5556 7.85006L18.481 8.95351L19.5557 10ZM14.0975 15.605L15.1721 16.6515L15.1721 16.6515L14.0975 15.605ZM3 27L1.9254 25.9535L-0.554646 28.5H3V27ZM35 25.4792L36.0562 24.4141L25.2941 13.7423L24.2379 14.8074L23.1818 15.8725L33.9438 26.5443L35 25.4792ZM24.2379 14.8074L25.3125 13.7608L20.6302 8.95341L19.5557 10L18.4811 11.0466L23.1634 15.854L24.2379 14.8074ZM19.5557 10L18.481 8.95351L13.0228 14.5585L14.0975 15.605L15.1721 16.6515L20.6303 11.0465L19.5557 10ZM14.0975 15.605L13.0229 14.5585L1.9254 25.9535L3 27L4.0746 28.0465L15.1721 16.6515L14.0975 15.605ZM3 27V28.5H12.3645V27V25.5H3V27ZM12.3645 27V28.5H25.1972V27V25.5H12.3645V27ZM25.1972 27V28.5H35V27V25.5H25.1972V27Z" fill="white" mask="url(#path-6-outside-2_3445_7409)"/>
+<circle cx="27" cy="7" r="2.25" fill="#43D8AB" stroke="white" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_3445_7409">
+<rect x="1" y="1" width="34" height="22" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>