feat. alert, confirm 모달 추가

app/app.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { useNuxtApp } from 'nuxt/app'
-import LoadingFull from '#layers/components/blocks/loading/Full.vue'
-import LoadingLocal from '#layers/components/blocks/loading/Local.vue'
-import BlocksModalYouTube from '#layers/components/blocks/modal/YouTube.vue'
 import type { GameDataMetaTag, GameDataValue } from '#layers/types/api/gameData'
 
 const nuxtApp = useNuxtApp()
@@ -11,9 +8,9 @@ const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
 const scrollStore = useScrollStore()
 
-const { youtube, handleResetYoutube } = modalStore
 const { setGameData } = gameDataStore
 const { gameData } = storeToRefs(gameDataStore)
+const { youtube, confirm, alert, handleResetYoutube } = modalStore
 
 const metaData = ref<GameDataMetaTag | null>(null)
 
@@ -113,6 +110,7 @@ if (serverGameData) {
   setGameData(serverGameData)
   setupMetaData(serverGameData)
 }
+
 const { gtag, initialize } = useGtag()
 initialize(gameData.value?.ga_code)
 gtag('event', 'screen_view', {
@@ -135,15 +133,36 @@ onBeforeUnmount(() => {
 
   <!-- 공통 모달 컴포넌트 -->
   <BlocksModalYouTube
-    :is-open="youtube.storeIsOpen"
+    v-model:is-open="youtube.storeIsOpen"
     :youtube-url="youtube.storeYoutubeUrl"
+    :is-outside-close="youtube.storeIsOutsideClose"
     :class-name="youtube.storeClassName"
     @close-button-event="handleResetYoutube"
   />
+  <BlocksModalConfirm
+    v-model:is-open="confirm.storeIsOpen"
+    :is-show-dimmed="confirm.storeIsShowDimmed"
+    :content-text="confirm.storeContentText"
+    :confirm-button-text="confirm.storeConfirmButtonText"
+    :cancel-button-text="confirm.storeCancelButtonText"
+    :is-outside-close="confirm.storeIsOutsideClose"
+    :class-name="confirm.storeClassName"
+    @confirm-button-event="confirm.storeConfirmButtonEvent"
+    @cancel-button-event="confirm.storeCancelButtonEvent"
+  />
+  <BlocksModalAlert
+    v-model:is-open="alert.storeIsOpen"
+    :is-show-dimmed="alert.storeIsShowDimmed"
+    :content-text="alert.storeContentText"
+    :confirm-button-text="alert.storeConfirmButtonText"
+    :is-outside-close="alert.storeIsOutsideClose"
+    :class-name="alert.storeClassName"
+    @confirm-button-event="alert.storeConfirmButtonEvent"
+  />
 
   <!-- 로딩 컴포넌트 -->
-  <LoadingFull />
+  <BlocksLoadingFull />
-  <LoadingLocal />
+  <BlocksLoadingLocal />
 </template>
 
 <style>

layers/assets/css/app.css

@@ -1,9 +1,10 @@
 @import './base/_theme.css';
 @import './base/_reset.css';
 
-@import './components/_splide.css';
 @import './components/_button.css';
 @import './components/_layout.css';
+@import './components/_modal.css';
+@import './components/_splide.css';
 
 @import '@splidejs/vue-splide/css';
 

layers/assets/css/base/_reset.css

@@ -1,21 +1,21 @@
 /* CSS 리셋 및 기본 스타일 */
 @layer base {
   body {
-    background-color: #000;
+    @apply min-w-[320px] bg-black;
   }
   body.scroll-lock {
-    overflow: hidden;
+    @apply overflow-hidden;
   }
 
   button,
   a {
-    outline: none;
+    @apply outline-none;
   }
 
   /* 라이트 테마 색상 */
   [data-theme='light'] {
     body {
-      background-color: #fff;
+      @apply bg-white;
     }
   }
 }

layers/assets/css/base/_theme.css

@@ -1,4 +1,5 @@
 :root {
+  /* 다크 테마 색상  */
   --foreground: #191919;
   --foreground-10: #292929;
 

layers/assets/css/components/_button.css

@@ -28,7 +28,7 @@
   }
 
   .size-extra-small {
-    @apply before:rounded after:rounded
+    @apply px-6 h-10 text-sm rounded
-    px-6 h-10 text-sm rounded;
+    before:rounded after:rounded;
   }
 }

layers/assets/css/components/_modal.css

@@ -0,0 +1,22 @@
+/* Button Size Classes */
+@layer components {
+  .modal-wrap {
+    @apply fixed inset-0 flex p-5 z-[500];
+  }
+
+  .modal-wrap.dimmed {
+    @apply bg-black/60;
+  }
+
+  .modal-area {
+    @apply relative w-full max-w-[312px] m-auto p-6 bg-white rounded-[20px];
+  }
+
+  .content-btns {
+    @apply flex gap-2 mt-6;
+  }
+
+  .content-text {
+    @apply text-center text-[15px] text-[#333333] leading-6 tracking-[-0.45px];
+  }
+}

layers/assets/css/components/_splide.css

@@ -1,102 +1,42 @@
 /*  페이지네이션 버튼 - 모바일 퍼스트 */
+@layer components {
   .splide-pagination-bullets {
-  width: 100%;
+    @apply w-full flex justify-center items-center gap-3 mt-6 z-[5] md:mt-8 md:gap-6;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  margin-top: 24px;
-  z-index: 5;
   }
 
   .splide-pagination-bullets.type-full {
-  position: absolute;
+    @apply absolute bottom-8 left-0;
-  bottom: 32px;
-  left: 0;
   }
 
   .splide-pagination-bullet {
-  position: relative;
+    @apply relative w-2 h-2 rounded-full bg-[var(--primary)] opacity-100 md:w-3 md:h-3
-  width: 8px;
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
-  height: 8px;
-  background: var(--primary);
-  border-radius: 50%;
-  opacity: 1;
   }
 
-.splide-pagination-bullet:after {
+  .splide-pagination-bullet.is-active {
-  content: '';
+    @apply after:opacity-100;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
   }
-
-.splide-pagination-bullet.is-active:after {
-  opacity: 0;
-}
-
-/* 네비게이션 버튼 - 모바일 퍼스트 */
   .splide-arrow {
-  display: none;
+    @apply hidden absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5] md:block
-  /* position: absolute;
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
-  top: 50%;
+    hover:after:opacity-10;
-  width: 40px;
-  height: 40px;
-  transform: translateY(-50%);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  z-index: 5;
-  background-color: var(--primary); */
   }
-
+  .arrow-prev {
-/* .type-full .arrow-prev {
+    @apply bg-[image:var(--arrow-left)];
-  left: 20px;
   }
-.type-full.arrow-next {
+  .arrow-next {
-  right: 20px;
+    @apply bg-[image:var(--arrow-right)];
-} */
-
-/* 데스크톱 스타일 */
-@media (min-width: 1024px) {
-  .splide-pagination-bullets {
-    gap: 24px;
-    margin-top: 32px;
-  }
-
-  .splide-pagination-bullets.position-absolute {
-    bottom: 48px;
-  }
-
-  .splide-pagination-bullet {
-    width: 12px;
-    height: 12px;
-  }
-
-  .splide-arrow {
-    display: block;
-    position: absolute;
-    top: 50%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: var(--primary);
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 5;
   }
 
   .type-full .arrow-prev {
-    left: 40px;
+    @apply left-10;
   }
 
   .type-full .arrow-next {
-    right: 40px;
+    @apply right-10;
+  }
+
+  .splide-arrow svg {
+    @apply hidden;
   }
 }

layers/components/atoms/Button/Modal.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ButtonVariant } from '#layers/types/components/button'
+
+interface props {
+  variant?: ButtonVariant
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<props>(), {
+  variant: 'filled',
+  disabled: false,
+})
+</script>
+
+<template>
+  <button :class="['btn-modal', props.variant]" :disabled="props.disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn-modal {
+  @apply relative w-full py-[14px] px-5 text-sm font-medium rounded-lg
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg before:transition-all before:duration-300 before:ease-in-out;
+}
+
+.btn-modal.filled {
+  @apply bg-[var(--primary)] text-[var(--text-secondary)]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
+  hover:after:opacity-20;
+}
+
+.btn-modal.outlined {
+  @apply bg-white text-[#333333]
+  hover:before:border-[#999];
+}
+
+.btn-modal:disabled {
+  @apply cursor-default bg-[#EBEBEB] text-[#999]
+  before:border-[#D9D9D9]
+  after:hidden
+  hover:before:border-[#D9D9D9];
+}
+</style>

layers/components/blocks/modal/Alert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event?: () => void | void) => {
+  if (typeof event === 'function') {
+    return event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="opacity-on">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonModal
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonModal>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

layers/components/blocks/modal/Confirm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event: () => void | void) => {
+  if (event) {
+    return event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="opacity-on">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonModal
+              variant="outlined"
+              @click="setButtonEvent(() => emit('cancelButtonEvent'))"
+            >
+              {{ props.cancelButtonText || '취소' }}
+            </AtomsButtonModal>
+            <AtomsButtonModal
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonModal>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

layers/components/blocks/modal/YouTube.vue

@@ -1,3 +1,52 @@
+<script setup lang="ts">
+import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
+
+interface Props {
+  youtubeUrl: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  youtubeUrl: '',
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['closeButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const embedUrl = computed(() => {
+  return getYouTubeEmbedUrl(props.youtubeUrl)
+})
+
+const handleCloseModal = () => {
+  isOpen.value = false
+  emit('closeButtonEvent')
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    handleCloseModal()
+  }
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    handleCloseModal()
+  }
+}
+
+// 키보드 이벤트 리스너 등록/해제
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
 <template>
   <Transition
     enter-active-class="transition duration-300 ease-out"
@@ -10,10 +59,10 @@
     <div
       v-if="isOpen"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
-      @click="handleBackdropClick"
+      :class="props.className"
+      @click="handleOutsideClick"
     >
       <div
-        v-if="isOpen"
         class="relative mx-4 my-4"
         style="
           width: min(896px, 90vw, calc((90vh - 2rem) * 16 / 9));
@@ -26,7 +75,7 @@
           <button
             class="text-white rounded-full transition-colors"
             aria-label="모달 닫기"
-            @click="closeModal"
+            @click="handleCloseModal"
           >
             <AtomsIconsCloseLine />
           </button>
@@ -48,61 +97,3 @@
     </div>
   </Transition>
 </template>
-
-<script setup lang="ts">
-import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
-
-interface Props {
-  isOpen: boolean
-  youtubeUrl: string
-  title?: string
-  description?: string
-  closeOnBackdrop?: boolean
-}
-
-interface Emits {
-  (e: 'closeButtonEvent'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isOpen: false,
-  youtubeUrl: '',
-  title: '',
-  description: '',
-  closeOnBackdrop: true,
-})
-
-const emit = defineEmits<Emits>()
-
-const embedUrl = computed(() => {
-  return getYouTubeEmbedUrl(props.youtubeUrl)
-})
-
-// ESC 키로 모달 닫기
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && props.isOpen) {
-    closeModal()
-  }
-}
-
-// 배경 클릭으로 모달 닫기
-const handleBackdropClick = () => {
-  if (props.closeOnBackdrop) {
-    closeModal()
-  }
-}
-
-// 모달 닫기 함수
-const closeModal = () => {
-  emit('closeButtonEvent')
-}
-
-// 키보드 이벤트 리스너 등록/해제
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-})
-</script>

layers/stores/useModalStore.ts

@@ -4,7 +4,6 @@ import type {
   YoutubeParams,
 } from '#layers/types/components/modal'
 
-// [TODO] 모달 상태 관리 개선
 const createModalState = () => ({
   storeIsOpen: ref(false),
   storeIsShowDimmed: ref(false),
@@ -13,20 +12,8 @@ const createModalState = () => ({
   storeContentText: ref(''),
   storeConfirmButtonText: ref(''),
   storeConfirmButtonEvent: skipHydrate(ref<() => void>(() => {})),
-  storeCloseButtonEvent: skipHydrate(ref<() => void>(() => {})),
 })
 
-const resetModalState = (type: ReturnType<typeof createModalState>) => {
-  type.storeIsOpen.value = false
-  type.storeIsShowDimmed.value = false
-  type.storeClassName.value = ''
-  type.storeIsOutsideClose.value = true
-  type.storeContentText.value = ''
-  type.storeConfirmButtonText.value = ''
-  type.storeConfirmButtonEvent.value = () => {}
-  type.storeCloseButtonEvent.value = () => {}
-}
-
 export const useModalStore = defineStore('modalStore', () => {
   const scrollStore = useScrollStore()
 
@@ -41,8 +28,7 @@ export const useModalStore = defineStore('modalStore', () => {
     isOutsideClose = true,
     contentText,
     confirmButtonText = '',
-    confirmButtonEvent,
+    confirmButtonEvent = () => {},
-    closeButtonEvent,
   }: DialogParams) => {
     alert.storeIsOpen.value = true
     alert.storeIsShowDimmed.value = isShowDimmed
@@ -50,12 +36,7 @@ export const useModalStore = defineStore('modalStore', () => {
     alert.storeContentText.value = contentText
     alert.storeConfirmButtonText.value = confirmButtonText
     alert.storeIsOutsideClose.value = isOutsideClose
-    alert.storeConfirmButtonEvent.value = confirmButtonEvent ?? handleResetAlert
+    alert.storeConfirmButtonEvent.value = confirmButtonEvent
-    alert.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetAlert
-  }
-
-  const handleResetAlert = () => {
-    resetModalState(alert)
   }
 
   // confirm ------------------
@@ -72,9 +53,8 @@ export const useModalStore = defineStore('modalStore', () => {
     contentText,
     confirmButtonText = '',
     cancelButtonText = '',
-    confirmButtonEvent,
+    confirmButtonEvent = () => {},
-    cancelButtonEvent,
+    cancelButtonEvent = () => {},
-    closeButtonEvent,
   }: DialogParams) => {
     confirm.storeIsOpen.value = true
     confirm.storeIsShowDimmed.value = isShowDimmed
@@ -83,29 +63,26 @@ export const useModalStore = defineStore('modalStore', () => {
     confirm.storeConfirmButtonText.value = confirmButtonText
     confirm.storeCancelButtonText.value = cancelButtonText
     confirm.storeIsOutsideClose.value = isOutsideClose
-    confirm.storeConfirmButtonEvent.value =
+    confirm.storeConfirmButtonEvent.value = confirmButtonEvent
-      confirmButtonEvent ?? handleResetConfirm
+    confirm.storeCancelButtonEvent.value = cancelButtonEvent
-    confirm.storeCancelButtonEvent.value =
-      cancelButtonEvent ?? handleResetConfirm
-    confirm.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetConfirm
-  }
-
-  const handleResetConfirm = () => {
-    resetModalState(confirm)
-    confirm.storeCancelButtonText.value = ''
-    confirm.storeCancelButtonEvent.value = () => {}
   }
 
   // youtube ------------------
   const youtube = {
     storeIsOpen: ref(false),
     storeYoutubeUrl: ref(''),
+    storeIsOutsideClose: ref(true),
     storeClassName: ref(''),
   }
 
-  const handleOpenYoutube = ({ youtubeUrl, className = '' }: YoutubeParams) => {
+  const handleOpenYoutube = ({
+    youtubeUrl,
+    isOutsideClose = true,
+    className = '',
+  }: YoutubeParams) => {
     youtube.storeIsOpen.value = true
     youtube.storeYoutubeUrl.value = youtubeUrl
+    youtube.storeIsOutsideClose.value = isOutsideClose
     youtube.storeClassName.value = className
     scrollStore.controlScrollLock(true)
   }
@@ -113,6 +90,7 @@ export const useModalStore = defineStore('modalStore', () => {
   const handleResetYoutube = () => {
     youtube.storeIsOpen.value = false
     youtube.storeYoutubeUrl.value = ''
+    youtube.storeIsOutsideClose.value = true
     youtube.storeClassName.value = ''
     scrollStore.controlScrollLock(false)
   }
@@ -123,8 +101,6 @@ export const useModalStore = defineStore('modalStore', () => {
     youtube,
     handleOpenAlert,
     handleOpenConfirm,
-    handleResetAlert,
-    handleResetConfirm,
     handleOpenYoutube,
     handleResetYoutube,
   }

layers/types/components/modal.ts

@@ -12,5 +12,6 @@ export interface DialogParams {
 
 export interface YoutubeParams {
   youtubeUrl: string
+  isOutsideClose?: boolean
   className?: string
 }

public/images/common/dark/Frame.svg

@@ -1,13 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5105_3183)">
-<path d="M9.86253 9.63379L2.8042 17.013C3.03337 17.7921 3.7667 18.388 4.63753 18.388C5.0042 18.388 5.32503 18.2963 5.60003 18.113L13.575 13.5755L9.86253 9.63379Z" fill="#EA4335"/>
-<path d="M17.0126 8.35023L13.5751 6.37939L9.7251 9.77106L13.6209 13.5752L17.0584 11.6502C17.6543 11.3294 18.0668 10.6877 18.0668 10.0002C18.0209 9.31273 17.6084 8.67106 17.0126 8.35023Z" fill="#FBBC04"/>
-<path d="M2.80426 2.98779C2.75842 3.12529 2.75842 3.30863 2.75842 3.49196V16.5545C2.75842 16.7378 2.75842 16.8753 2.80426 17.0586L10.1376 9.86279L2.80426 2.98779Z" fill="#4285F4"/>
-<path d="M9.90836 10.0003L13.575 6.37946L5.64587 1.88779C5.37087 1.70446 5.0042 1.61279 4.63753 1.61279C3.7667 1.61279 2.98753 2.20863 2.8042 2.98779L9.90836 10.0003Z" fill="#34A853"/>
-</g>
-<defs>
-<clipPath id="clip0_5105_3183">
-<rect width="18.3333" height="18.3333" fill="white" transform="translate(0.833374 0.833496)"/>
-</clipPath>
-</defs>
-</svg>

public/images/common/dark/ic-v2-content-option-horizontal-fill.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" fill="#EBEBEB"/>
-</svg>

public/images/common/dark/ic-v2-control-arrow-right-line.svg

@@ -1,3 +0,0 @@
-<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="M6.91082 3.57757C6.58539 3.90301 6.58539 4.43065 6.91082 4.75609L12.1549 10.0002L6.91082 15.2442C6.58539 15.5697 6.58539 16.0973 6.91082 16.4228C7.23626 16.7482 7.7639 16.7482 8.08934 16.4228L13.9227 10.5894C14.2481 10.264 14.2481 9.73634 13.9227 9.41091L8.08934 3.57757C7.7639 3.25214 7.23626 3.25214 6.91082 3.57757Z" fill="#7F7F7F"/>
-</svg>

public/images/common/dark/ic-v2-control-close-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z" fill="#EBEBEB"/>
-</svg>

public/images/common/dark/ic-v2-control-select-arrow-down-fill.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.29499 8.215L2.39999 5.375C2.07499 5.055 2.29999 4.5 2.75999 4.5L9.23499 4.5C9.69499 4.5 9.91999 5.055 9.59499 5.375L6.69999 8.215C6.30999 8.595 5.68999 8.595 5.29999 8.215H5.29499Z" fill="#7F7F7F"/>
-</svg>

public/images/common/dark/ic-v2-control-web-link-line.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.63636 3.33333C3.469 3.33333 3.33333 3.469 3.33333 3.63636L3.33333 12.3636C3.33333 12.531 3.469 12.6667 3.63636 12.6667H12.3636C12.531 12.6667 12.6667 12.531 12.6667 12.3636V9.93939C12.6667 9.5712 12.9651 9.27273 13.3333 9.27273C13.7015 9.27273 14 9.5712 14 9.93939V12.3636C14 13.2674 13.2674 14 12.3636 14H3.63636C2.73262 14 2 13.2674 2 12.3636L2 3.63636C2 2.73263 2.73262 2 3.63636 2L6.06061 2C6.4288 2 6.72727 2.29848 6.72727 2.66667C6.72727 3.03486 6.4288 3.33333 6.06061 3.33333H3.63636Z" fill="#7F7F7F"/>
-<path d="M12.6667 4.27614V6.54545C12.6667 6.91364 12.9651 7.21212 13.3333 7.21212C13.7015 7.21212 14 6.91364 14 6.54545V2.66667C14 2.29848 13.7015 2 13.3333 2L9.45455 2C9.08636 2 8.78788 2.29848 8.78788 2.66667C8.78788 3.03486 9.08636 3.33333 9.45455 3.33333L11.7239 3.33333L7.28616 7.77103C7.02581 8.03138 7.02581 8.45349 7.28616 8.71384C7.54651 8.97419 7.96862 8.97419 8.22897 8.71384L12.6667 4.27614Z" fill="#7F7F7F"/>
-</svg>

public/images/common/dark/ic-v2-logo-apple-fill.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.237 3.76397C12.7632 3.09926 13.1113 2.17037 13.0142 1.25C12.2613 1.28409 11.3545 1.77836 10.8121 2.44307C10.3264 3.03109 9.90542 3.97702 10.0188 4.88035C10.8526 4.94852 11.7108 4.42868 12.237 3.76397Z" fill="#EBEBEB"/>
-<path d="M13.4325 5.21408L13.248 5.19858C12.5336 5.14288 11.8799 5.34976 11.3277 5.55942L10.7675 5.77674C10.5095 5.87346 10.2861 5.9429 10.1039 5.9429C9.90183 5.9429 9.66519 5.87108 9.40315 5.77314L8.73016 5.51131C8.31461 5.35663 7.86368 5.2224 7.40258 5.23403C6.01207 5.25175 4.73671 6.04037 4.01931 7.28977C2.57567 9.79743 3.64733 13.5013 5.05555 15.5393L5.29985 15.8859L5.46886 16.1166L5.64325 16.343C6.20438 17.0495 6.8521 17.6387 7.64171 17.6128C8.06839 17.5946 8.38546 17.4772 8.69864 17.3454L8.96859 17.2308C9.33383 17.0787 9.73346 16.9394 10.3253 16.9394C10.8395 16.9394 11.2021 17.0535 11.5273 17.186L11.934 17.3589C12.2483 17.4894 12.5744 17.5972 13.0266 17.5862C13.964 17.5713 14.6139 16.8687 15.2021 16.0508L15.3687 15.8144L15.6157 15.4515C15.6967 15.3285 15.7724 15.2063 15.8431 15.0862L15.9778 14.8492C15.9992 14.8102 16.02 14.7716 16.0402 14.7334L16.1554 14.5088C16.1735 14.4723 16.1911 14.4361 16.2082 14.4006L16.3046 14.1935L16.3888 14.0008L16.4613 13.8249L16.5485 13.5971L16.6111 13.4194L16.6667 13.2443L16.6024 13.2177L16.4408 13.1398L16.27 13.0449L16.138 12.9632L15.9949 12.8661C15.3552 12.4107 14.4871 11.5037 14.4702 9.93034C14.4579 8.4852 15.2845 7.56519 15.8136 7.12531L15.9441 7.02142C15.9645 7.00591 15.9841 6.9913 16.0029 6.97759L16.1467 6.87828L16.2416 6.82014C15.5921 5.86906 14.7104 5.48115 14.0399 5.31771L13.8455 5.27508L13.6665 5.24388L13.5054 5.22208C13.4803 5.21912 13.4559 5.21647 13.4325 5.21408Z" fill="#EBEBEB"/>
-</svg>

public/images/common/dark/ic-v2-navigation-menu-bold-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 16C20.7594 16 21.375 16.6156 21.375 17.375C21.375 18.1344 20.7594 18.75 20 18.75H4C3.24061 18.75 2.625 18.1344 2.625 17.375C2.625 16.6156 3.24061 16 4 16H20ZM20 10.5C20.7594 10.5 21.375 11.1156 21.375 11.875C21.375 12.6344 20.7594 13.25 20 13.25H4C3.24061 13.25 2.625 12.6344 2.625 11.875C2.625 11.1156 3.24061 10.5 4 10.5H20ZM20 5C20.7594 5 21.375 5.61561 21.375 6.375C21.375 7.13439 20.7594 7.75 20 7.75H4C3.24061 7.75 2.625 7.13439 2.625 6.375C2.625 5.61561 3.24061 5 4 5H20Z" fill="#EBEBEB"/>
-</svg>

public/images/common/dark/ic-v2-stove-s-color.svg

@@ -1,3 +0,0 @@
-<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="M10.1017 0.90918L10.4045 0.913291C11.9002 0.952388 14.4916 1.28038 15.5523 2.32323C15.9914 2.75485 16.2077 3.28804 16.2077 3.97366C16.2077 5.04013 15.4683 5.83518 14.2801 5.83518C14.0487 5.83518 13.7651 5.77777 13.4329 5.69509L12.6484 5.49098L12.2949 5.40343C11.6265 5.24464 10.8475 5.10286 9.97258 5.10286L9.84545 5.10354L9.59838 5.10924C9.51773 5.11217 9.43885 5.11618 9.36194 5.12139L9.13735 5.14078C8.33708 5.22611 7.80063 5.47324 7.80063 6.05628C7.80063 6.21288 7.84333 6.36401 7.96719 6.54628C8.01569 6.61772 8.07818 6.68849 8.15471 6.75733L8.24073 6.82937C8.3729 6.93934 8.54119 7.03723 8.73902 7.12717L8.91566 7.20241L9.10586 7.27433C9.13863 7.28607 9.17194 7.2977 9.20575 7.30922L9.41453 7.37725L9.63457 7.44341L9.98368 7.54039L10.4799 7.66855L11.4122 7.90261L11.8286 8.0118L12.1095 8.08899L12.392 8.17038L12.6751 8.25655C12.7223 8.27134 12.7695 8.28635 12.8166 8.3016L13.099 8.39601L13.3797 8.49664C15.4299 9.25882 17.2725 10.5694 17.2725 13.4541C17.2725 17.2883 13.9244 19.091 9.76596 19.091C9.56983 19.091 9.36794 19.0859 9.16197 19.0755L8.85017 19.0561L8.53352 19.0289C8.4273 19.0185 8.32048 19.0068 8.21327 18.9937L7.8907 18.9506C5.35803 18.5819 2.72705 17.478 2.72705 15.5361C2.72705 14.419 3.45993 13.4555 4.64808 13.4555C4.99219 13.4555 5.3796 13.5796 5.83145 13.7526L6.71895 14.1005C7.63152 14.4483 8.76701 14.807 10.2294 14.807C11.7902 14.807 12.5281 14.4752 12.5281 13.7841C12.5281 13.4541 12.3989 13.266 12.1923 13.0628C11.9581 12.8431 11.6124 12.6589 11.1911 12.4893L10.9743 12.4055L10.7458 12.3237L10.5067 12.2431L10.1303 12.1233L8.76156 11.7101L8.32963 11.5744L7.89382 11.4298L7.60276 11.3275L7.31244 11.2198C7.0711 11.1276 6.83156 11.0292 6.59641 10.9231L6.31649 10.7919C4.55912 9.93633 3.11456 8.59871 3.11456 6.11604C3.11456 2.89126 5.99488 0.90918 10.1017 0.90918Z" fill="#FC4420"/>
-</svg>

public/images/common/light/Frame.svg

@@ -1,13 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5105_5120)">
-<path d="M9.86253 9.63379L2.8042 17.013C3.03337 17.7921 3.7667 18.388 4.63753 18.388C5.0042 18.388 5.32503 18.2963 5.60003 18.113L13.575 13.5755L9.86253 9.63379Z" fill="#EA4335"/>
-<path d="M17.0126 8.35023L13.5751 6.37939L9.7251 9.77106L13.6209 13.5752L17.0584 11.6502C17.6543 11.3294 18.0668 10.6877 18.0668 10.0002C18.0209 9.31273 17.6084 8.67106 17.0126 8.35023Z" fill="#FBBC04"/>
-<path d="M2.80413 2.98779C2.7583 3.12529 2.7583 3.30863 2.7583 3.49196V16.5545C2.7583 16.7378 2.7583 16.8753 2.80413 17.0586L10.1375 9.86279L2.80413 2.98779Z" fill="#4285F4"/>
-<path d="M9.90836 10.0003L13.575 6.37946L5.64587 1.88779C5.37087 1.70446 5.0042 1.61279 4.63753 1.61279C3.7667 1.61279 2.98753 2.20863 2.8042 2.98779L9.90836 10.0003Z" fill="#34A853"/>
-</g>
-<defs>
-<clipPath id="clip0_5105_5120">
-<rect width="18.3333" height="18.3333" fill="white" transform="translate(0.833496 0.833496)"/>
-</clipPath>
-</defs>
-</svg>

public/images/common/light/ic-v2-content-option-horizontal-fill.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" fill="#1F1F1F"/>
-</svg>

public/images/common/light/ic-v2-control-arrow-right-line.svg

@@ -1,3 +0,0 @@
-<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="M6.91058 3.57709C6.58514 3.90252 6.58514 4.43016 6.91058 4.7556L12.1547 9.99967L6.91058 15.2438C6.58514 15.5692 6.58514 16.0968 6.91058 16.4223C7.23602 16.7477 7.76366 16.7477 8.08909 16.4223L13.9224 10.5889C14.2479 10.2635 14.2479 9.73586 13.9224 9.41042L8.08909 3.57709C7.76366 3.25165 7.23602 3.25165 6.91058 3.57709Z" fill="#999999"/>
-</svg>

public/images/common/light/ic-v2-control-close-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z" fill="#1F1F1F"/>
-</svg>

public/images/common/light/ic-v2-control-select-arrow-down-fill.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.29499 8.215L2.39999 5.375C2.07499 5.055 2.29999 4.5 2.75999 4.5L9.23499 4.5C9.69499 4.5 9.91999 5.055 9.59499 5.375L6.69999 8.215C6.30999 8.595 5.68999 8.595 5.29999 8.215H5.29499Z" fill="#999999"/>
-</svg>

public/images/common/light/ic-v2-control-web-link-line.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.63636 3.33333C3.469 3.33333 3.33333 3.469 3.33333 3.63636L3.33333 12.3636C3.33333 12.531 3.469 12.6667 3.63636 12.6667H12.3636C12.531 12.6667 12.6667 12.531 12.6667 12.3636V9.93939C12.6667 9.5712 12.9651 9.27273 13.3333 9.27273C13.7015 9.27273 14 9.5712 14 9.93939V12.3636C14 13.2674 13.2674 14 12.3636 14H3.63636C2.73262 14 2 13.2674 2 12.3636L2 3.63636C2 2.73263 2.73262 2 3.63636 2L6.06061 2C6.4288 2 6.72727 2.29848 6.72727 2.66667C6.72727 3.03486 6.4288 3.33333 6.06061 3.33333H3.63636Z" fill="#999999"/>
-<path d="M12.6667 4.27614V6.54545C12.6667 6.91364 12.9651 7.21212 13.3333 7.21212C13.7015 7.21212 14 6.91364 14 6.54545V2.66667C14 2.29848 13.7015 2 13.3333 2L9.45455 2C9.08636 2 8.78788 2.29848 8.78788 2.66667C8.78788 3.03486 9.08636 3.33333 9.45455 3.33333L11.7239 3.33333L7.28616 7.77103C7.02581 8.03138 7.02581 8.45349 7.28616 8.71384C7.54651 8.97419 7.96862 8.97419 8.22897 8.71384L12.6667 4.27614Z" fill="#999999"/>
-</svg>

public/images/common/light/ic-v2-logo-apple-fill.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.2371 3.76397C12.7633 3.09926 13.1114 2.17037 13.0143 1.25C12.2614 1.28409 11.3547 1.77836 10.8123 2.44307C10.3265 3.03109 9.90554 3.97702 10.0189 4.88035C10.8527 4.94852 11.7109 4.42868 12.2371 3.76397Z" fill="#1F1F1F"/>
-<path d="M13.4326 5.21408L13.2481 5.19858C12.5337 5.14288 11.88 5.34976 11.3278 5.55942L10.7676 5.77674C10.5096 5.87346 10.2862 5.9429 10.104 5.9429C9.90196 5.9429 9.66532 5.87108 9.40327 5.77314L8.73028 5.51131C8.31473 5.35663 7.8638 5.2224 7.4027 5.23403C6.01219 5.25175 4.73683 6.04037 4.01943 7.28977C2.57579 9.79743 3.64745 13.5013 5.05567 15.5393L5.29997 15.8859L5.46899 16.1166L5.64337 16.343C6.2045 17.0495 6.85222 17.6387 7.64183 17.6128C8.06852 17.5946 8.38558 17.4772 8.69876 17.3454L8.96871 17.2308C9.33396 17.0787 9.73358 16.9394 10.3254 16.9394C10.8396 16.9394 11.2022 17.0535 11.5274 17.186L11.9341 17.3589C12.2484 17.4894 12.5745 17.5972 13.0267 17.5862C13.9641 17.5713 14.614 16.8687 15.2022 16.0508L15.3688 15.8144L15.6159 15.4515C15.6968 15.3285 15.7725 15.2063 15.8432 15.0862L15.9779 14.8492C15.9993 14.8102 16.0201 14.7716 16.0404 14.7334L16.1555 14.5088C16.1737 14.4723 16.1913 14.4361 16.2083 14.4006L16.3047 14.1935L16.389 14.0008L16.4614 13.8249L16.5487 13.5971L16.6113 13.4194L16.6668 13.2443L16.6025 13.2177L16.441 13.1398L16.2701 13.0449L16.1381 12.9632L15.995 12.8661C15.3553 12.4107 14.4872 11.5037 14.4704 9.93034C14.458 8.4852 15.2846 7.56519 15.8137 7.12531L15.9442 7.02142C15.9646 7.00591 15.9843 6.9913 16.003 6.97759L16.1469 6.87828L16.2417 6.82014C15.5922 5.86906 14.7105 5.48115 14.04 5.31771L13.8456 5.27508L13.6666 5.24388L13.5056 5.22208C13.4804 5.21912 13.456 5.21647 13.4326 5.21408Z" fill="#1F1F1F"/>
-</svg>

public/images/common/light/ic-v2-navigation-menu-bold-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 16C20.7594 16 21.375 16.6156 21.375 17.375C21.375 18.1344 20.7594 18.75 20 18.75H4C3.24061 18.75 2.625 18.1344 2.625 17.375C2.625 16.6156 3.24061 16 4 16H20ZM20 10.5C20.7594 10.5 21.375 11.1156 21.375 11.875C21.375 12.6344 20.7594 13.25 20 13.25H4C3.24061 13.25 2.625 12.6344 2.625 11.875C2.625 11.1156 3.24061 10.5 4 10.5H20ZM20 5C20.7594 5 21.375 5.61561 21.375 6.375C21.375 7.13439 20.7594 7.75 20 7.75H4C3.24061 7.75 2.625 7.13439 2.625 6.375C2.625 5.61561 3.24061 5 4 5H20Z" fill="#1F1F1F"/>
-</svg>

public/images/common/light/ic-v2-stove-s-color.svg

@@ -1,3 +0,0 @@
-<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="M10.1017 0.90918L10.4045 0.913291C11.9002 0.952388 14.4916 1.28038 15.5523 2.32323C15.9914 2.75485 16.2077 3.28804 16.2077 3.97366C16.2077 5.04013 15.4683 5.83518 14.2801 5.83518C14.0487 5.83518 13.7651 5.77777 13.4329 5.69509L12.6484 5.49098L12.2949 5.40343C11.6265 5.24464 10.8475 5.10286 9.97258 5.10286L9.84545 5.10354L9.59838 5.10924C9.51773 5.11217 9.43885 5.11618 9.36194 5.12139L9.13735 5.14078C8.33708 5.22611 7.80063 5.47324 7.80063 6.05628C7.80063 6.21288 7.84333 6.36401 7.96719 6.54628C8.01569 6.61772 8.07818 6.68849 8.15471 6.75733L8.24073 6.82937C8.3729 6.93934 8.54119 7.03723 8.73902 7.12717L8.91566 7.20241L9.10586 7.27433C9.13863 7.28607 9.17194 7.2977 9.20575 7.30922L9.41453 7.37725L9.63457 7.44341L9.98368 7.54039L10.4799 7.66855L11.4122 7.90261L11.8286 8.0118L12.1095 8.08899L12.392 8.17038L12.6751 8.25655C12.7223 8.27134 12.7695 8.28635 12.8166 8.3016L13.099 8.39601L13.3797 8.49664C15.4299 9.25882 17.2725 10.5694 17.2725 13.4541C17.2725 17.2883 13.9244 19.091 9.76596 19.091C9.56983 19.091 9.36794 19.0859 9.16197 19.0755L8.85017 19.0561L8.53352 19.0289C8.4273 19.0185 8.32048 19.0068 8.21327 18.9937L7.8907 18.9506C5.35803 18.5819 2.72705 17.478 2.72705 15.5361C2.72705 14.419 3.45993 13.4555 4.64808 13.4555C4.99219 13.4555 5.3796 13.5796 5.83145 13.7526L6.71895 14.1005C7.63152 14.4483 8.76701 14.807 10.2294 14.807C11.7902 14.807 12.5281 14.4752 12.5281 13.7841C12.5281 13.4541 12.3989 13.266 12.1923 13.0628C11.9581 12.8431 11.6124 12.6589 11.1911 12.4893L10.9743 12.4055L10.7458 12.3237L10.5067 12.2431L10.1303 12.1233L8.76156 11.7101L8.32963 11.5744L7.89382 11.4298L7.60276 11.3275L7.31244 11.2198C7.0711 11.1276 6.83156 11.0292 6.59641 10.9231L6.31649 10.7919C4.55912 9.93633 3.11456 8.59871 3.11456 6.11604C3.11456 2.89126 5.99488 0.90918 10.1017 0.90918Z" fill="#FC4420"/>
-</svg>