Merge branch 'dev' into feature/Q-CAST-III-T-22

2024-11-05 17:25:59 +09:00 · 2024-11-05 17:25:59 +09:00 · f581fdc5dd
commit f581fdc5dd
parent 0a74ef01cb c54fb521bf
14 changed files with 3285 additions and 14016 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@ -39,6 +39,7 @@ export default function Playground() {
  const [color, setColor] = useState('#ff0000')

  const [textInput, setTextInput] = useState('')
+  const [numberInput, setNumberInput] = useState(null)
  const [radioInput, setRadioInput] = useState('')
  const [checkboxInput, setCheckboxInput] = useState([])
  const [selectedValue, setSelectedValue] = useState('')
@ -48,6 +49,9 @@ export default function Playground() {
  useEffect(() => {
    console.log('textInput:', textInput)
  }, [textInput])
+  useEffect(() => {
+    console.log('numberInput:', numberInput)
+  }, [numberInput])
  useEffect(() => {
    console.log('radioInput:', radioInput)
  }, [radioInput])
@ -161,8 +165,19 @@ export default function Playground() {
          >
            QInput TextInput DATA RESET
          </button>
-          <QInput type="text" value={textInput} onChange={setTextInput} />
-          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
+          <QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
+          <QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setNumberInput(null)
+            }}
+          >
+            QInput NumberInput DATA RESET
+          </button>
+          <QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
+          <QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
          <br />
          <button
            className="btn-frame deepgray"
@ -185,7 +200,7 @@ export default function Playground() {
          <button
            className="btn-frame deepgray"
            onClick={() => {
-              setCheckboxInput('')
+              setCheckboxInput([])
            }}
          >
            QInput Checkbox DATA RESET
--- a/src/components/common/input/QInput.jsx
+++ b/src/components/common/input/QInput.jsx
@ -2,7 +2,7 @@

 import { useCallback } from 'react'

-export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
+export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
  // options = options || [
  //   {
  //     id: 'one',
@ -21,11 +21,11 @@ export default function QInput({ type, readOnly = false, options = [], value, on
  //   },
  // ]

-  const handleChange = useCallback(
+  const handleRadioCheckboxChange = useCallback(
    (e, optionValue) => {
      if (type === 'radio') {
        onChange(e.target.value)
-      } else {
+      } else if (type === 'checkbox') {
        const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
        onChange(newValue)
      }
@ -33,36 +33,77 @@ export default function QInput({ type, readOnly = false, options = [], value, on
    [type, value, onChange],
  )

-  const handleTextChange = useCallback(
+  const handleTextNumberChange = useCallback(
    (e) => {
-      onChange(e.target.value)
+      if (type === 'text') {
+        onChange(e.target.value)
+      } else if (type === 'number') {
+        onChange(Number(e.target.value))
+      }
    },
-    [onChange],
+    [type, onChange],
  )

-  return (
-    <>
-      {type === 'text' ? (
-        <div className="mb5">
-          <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
-        </div>
-      ) : type === 'radio' || type === 'checkbox' ? (
-        <div className="flx mb5">
-          {options?.map((option) => (
-            <div key={option.name} className={`d-${type}-radio light mr5`}>
-              <input
-                type={type}
-                name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
-                value={option.value}
-                id={option.id}
-                checked={type === 'radio' ? value === option.value : value.includes(option.value)}
-                onChange={(e) => handleChange(e, option.value)}
-              />
-              <label htmlFor={option.id}>{option.name}</label>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </>
-  )
+  // type=number 정수 부호, 소수점 검사, 일부 키 허용
+  const checkInputNumber = (e) => {
+    const value = e.target.value
+    const key = e.key
+    const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
+    if (key >= '0' && key <= '9') {
+      return
+    }
+    if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
+      return
+    }
+    if (key === '-' && !value.includes('-') && value.length > 0) {
+      return
+    }
+    if (allowKeys.includes(key)) {
+      return
+    }
+    if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
+      return
+    }
+    e.preventDefault()
+  }
+
+  // input type : text, number
+  const inputTextNumber = () => {
+    return (
+      <input
+        type={type}
+        className={`input-light ${className ? className : ''}`}
+        ref={ref}
+        id={id}
+        readOnly={readOnly ? true : false}
+        placeholder={placeholder}
+        value={value === 0 ? 0 : value || ''}
+        onChange={handleTextNumberChange}
+        onKeyDown={type === 'number' ? checkInputNumber : undefined}
+      />
+    )
+  }
+
+  // input type : radio, checkbox
+  const inputRadioCheckbox = () => {
+    return (
+      <div className="flx">
+        {options?.map((option) => (
+          <div key={option.name} className={`d-${type}-radio light mr5`}>
+            <input
+              type={type}
+              name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
+              value={option.value}
+              id={option.id}
+              checked={type === 'radio' ? value === option.value : value.includes(option.value)}
+              onChange={(e) => handleRadioCheckboxChange(e, option.value)}
+            />
+            <label htmlFor={option.id}>{option.name}</label>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return <>{type === 'text' || type === 'number' ? inputTextNumber() : type === 'radio' || type === 'checkbox' ? inputRadioCheckbox() : null}</>
 }
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useEffect, useState } from 'react'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRecoilValue } from 'recoil'
@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
  }, [compasDeg])
  return (
    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx mount`}>
+      <div className={`modal-pop-wrap ml mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
@ -103,28 +103,30 @@ export default function FlowDirectionSetting(props) {
                  <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
                </div>
              </div>
-              <div className="compas-box">
-                <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (12 + index))}
-                    >
-                      <i>{13 - index}</i>
+              <div className="draw-flow-wrap">
+                <div className="compas-box">
+                  <div className="compas-box-inner">
+                    {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (12 + index))}
+                      >
+                        <i>{13 - index}</i>
+                      </div>
+                    ))}
+                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (index + 1))}
+                      >
+                        <i>{24 - index}</i>
+                      </div>
+                    ))}
+                    <div className="compas">
+                      <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                    </div>
-                  ))}
-                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (index + 1))}
-                    >
-                      <i>{24 - index}</i>
-                    </div>
-                  ))}
-                  <div className="compas">
-                    <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                  </div>
                </div>
              </div>
--- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
+++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useMessage } from '@/hooks/useMessage'
--- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
--- a/src/components/floor-plan/modal/module/row/RowInsert.jsx
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
--- a/src/components/floor-plan/modal/module/row/RowRemove.jsx
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@ -2,7 +2,7 @@

 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'

 export default function PanelBatchStatistics() {
  const { getMessage } = useMessage()
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@ -197,8 +197,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                </tr>
                <tr>
                  <th>
-                    {getMessage('modal.placement.initial.setting.size')}
-                    <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.size')}
+                      <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    </div>
                  </th>
                  <td>
                    <div className="pop-form-radio">
@ -269,8 +271,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                </tr>
                <tr>
                  <th>
-                    {getMessage('modal.placement.initial.setting.roof.material')}
-                    <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.roof.material')}
+                      <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    </div>
                  </th>
                  <td>
                    <div className="placement-option">
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@ -228,7 +228,8 @@ export default function Stuff() {
    if (isObjectNotEmpty(session)) {
      if (stuffSearchParams?.code === 'S') {
        const params = {
-          saleStoreId: stuffSearchParams.schSelSaleStoreId,
+          // saleStoreId: stuffSearchParams.schSelSaleStoreId,
+          saleStoreId: session.storeId,
          schObjectNo: stuffSearchParams?.schObjectNo,
          schAddress: stuffSearchParams?.schAddress,
          schObjectName: stuffSearchParams?.schObjectName,
@ -245,7 +246,6 @@ export default function Stuff() {
            : stuffSearchParams.schSelSaleStoreId,
          schSortType: stuffSearchParams.schSortType,
        }
-
        async function fetchData() {
          const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
          await get({
@ -299,8 +299,7 @@ export default function Stuff() {
      async function fetchData() {
        let saleStoreId
        saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
-        // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
-        const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
        await get({ url: apiUrl }).then((res) => {
          if (!isEmptyArray(res)) {
            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -333,8 +332,7 @@ export default function Stuff() {
    setPageNo(1)
    let saleStoreId
    saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
-    // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
-    const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
    get({ url: apiUrl }).then((res) => {
      if (!isEmptyArray(res)) {
        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -368,8 +366,7 @@ export default function Stuff() {
    setPageNo(1)
    let saleStoreId
    saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
-    // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
-    const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
    get({ url: apiUrl }).then((res) => {
      if (!isEmptyArray(res)) {
        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@ -1,10 +1,11 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE } from '@/common/common'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'

 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@ -16,6 +17,7 @@ export function useMovementSetting(id) {
  const { initEvent, addCanvasMouseEventListener } = useEvent()
  const { closePopup } = usePopup()
  const { getMessage } = useMessage()
+  const currentObject = useRecoilValue(currentObjectState)
  const buttonType = [
    { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
    { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
@ -39,18 +41,47 @@ export function useMovementSetting(id) {

  useEffect(() => {
    typeRef.current = type
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.set({ stroke: 'black' })
+      line.set({ visible: false })
+    })
+    canvas.getObjects().forEach((obj) => {
+      obj.set({ selectable: false })
+    })
+    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // 기존 wallLine의 visible false
+    roofs.forEach((roof) => {
+      roof.innerLines.forEach((line) => {
+        line.bringToFront()
+        line.set({ selectable: false })
+        line.set({ strokeWidth: 1 })
+      })
+    })
+    if (type === TYPE.FLOW_LINE) {
+      roofs.forEach((roof) => {
+        roof.innerLines.forEach((line) => {
+          line.bringToFront()
+          line.set({ selectable: true })
+          line.set({ strokeWidth: 4 })
+        })
+      })
+    } else if (type === TYPE.UP_DOWN) {
+      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+      outerLines.forEach((line) => {
+        line.set({ stroke: 'black' })
+        line.set({ visible: true })
+        line.bringToFront()
+        line.set({ selectable: true })
+      })
+    }
+    canvas.renderAll()
  }, [type])

  useEffect(() => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
+    /*const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
    wallLines.forEach((line) => {
      line.set({ visible: false })
-    })
-    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
-    outerLines.forEach((line) => {
-      line.bringToFront()
-      line.set({ selectable: true })
-    })
+    })*/

    canvas.renderAll()
    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
@ -60,10 +91,49 @@ export function useMovementSetting(id) {
      wallLines.forEach((line) => {
        line.set({ visible: true })
      })
+
+      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+      outerLines.forEach((line) => {
+        line.set({ stroke: 'black' })
+        line.set({ visible: false })
+      })
+
      canvas.renderAll()
    }
  }, [])

+  useEffect(() => {
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.set({ stroke: 'black' })
+    })
+    clearRef()
+    if (!currentObject) {
+      return
+    }
+
+    if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
+      currentObject.set({ stroke: '#EA10AC' })
+      currentObject.bringToFront()
+    }
+    canvas.renderAll()
+  }, [currentObject])
+
+  const clearRef = () => {
+    if (type === TYPE.FLOW_LINE) {
+      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = false
+      FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
+    }
+    if (type === TYPE.UP_DOWN) {
+      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+      UP_DOWN_REF.UP_RADIO_REF.current.checked = false
+      UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
+    }
+  }
+
  const mouseMoveEvent = (e) => {
    if (typeRef.current === TYPE.FLOW_LINE) {
      flowLineEvent(e)
@ -71,7 +141,45 @@ export function useMovementSetting(id) {
      updownEvent(e)
    }
  }
-  const flowLineEvent = (e) => {}
+  const flowLineEvent = (e) => {
+    const target = canvas.getActiveObject()
+    if (!target) {
+      return
+    }
+    const direction = target.direction
+    const { top: targetTop, left: targetLeft } = target
+    const currentX = canvas.getPointer(e.e).x
+    const currentY = Math.floor(canvas.getPointer(e.e).y)
+
+    if (direction === 'left' || direction === 'right') {
+      if (targetTop > currentY) {
+        console.log('targetTop > currentY')
+        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      } else {
+        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      }
+    } else {
+      if (targetLeft > currentX) {
+        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      } else {
+        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      }
+    }
+
+    canvas?.renderAll()
+  }

  const updownEvent = (e) => {
    const target = canvas.getActiveObject()
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss