왼쪽메뉴에 어드민 메뉴의 트리구조 리스트 api 값을 사용하도록 기능 추가
This commit is contained in:
@@ -642,7 +642,7 @@ const AdminMenuManagement: React.FC = () => {
|
||||
</CCard>
|
||||
|
||||
{/* 추가/수정 모달 */}
|
||||
<CModal visible={modalVisible} onClose={() => { setModalVisible(false); setIconPickerVisible(false); }}>
|
||||
<CModal visible={modalVisible} onClose={() => { setModalVisible(false); setIconPickerVisible(false); }} backdrop="static">
|
||||
<CModalHeader>
|
||||
<CModalTitle>{isEditMode ? '메뉴 수정' : '메뉴 추가'}</CModalTitle>
|
||||
</CModalHeader>
|
||||
@@ -785,7 +785,7 @@ const AdminMenuManagement: React.FC = () => {
|
||||
</CModal>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
<CModal visible={deleteModalVisible} onClose={() => setDeleteModalVisible(false)}>
|
||||
<CModal visible={deleteModalVisible} onClose={() => setDeleteModalVisible(false)} backdrop="static">
|
||||
<CModalHeader>
|
||||
<CModalTitle>메뉴 삭제</CModalTitle>
|
||||
</CModalHeader>
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { useEffect, useState, createRef } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classNames from 'classnames'
|
||||
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { rgbToHex } from '@coreui/utils'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const ThemeView = () => {
|
||||
const [color, setColor] = useState('rgb(255, 255, 255)')
|
||||
const ref = createRef()
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current.parentNode.firstChild
|
||||
const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
|
||||
setColor(varColor)
|
||||
}, [ref])
|
||||
|
||||
return (
|
||||
<table className="table w-100" ref={ref}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-body-secondary">HEX:</td>
|
||||
<td className="font-weight-bold">{rgbToHex(color)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-body-secondary">RGB:</td>
|
||||
<td className="font-weight-bold">{color}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
const ThemeColor = ({ className, children }) => {
|
||||
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
||||
return (
|
||||
<CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
|
||||
<div className={classes} style={{ paddingTop: '75%' }}></div>
|
||||
{children}
|
||||
<ThemeView />
|
||||
</CCol>
|
||||
)
|
||||
}
|
||||
|
||||
ThemeColor.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
const Colors = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Theme colors
|
||||
<DocsLink href="https://coreui.io/docs/utilities/colors/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ThemeColor className="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-secondary">
|
||||
<h6>Brand Secondary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-success">
|
||||
<h6>Brand Success Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-danger">
|
||||
<h6>Brand Danger Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-warning">
|
||||
<h6>Brand Warning Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-info">
|
||||
<h6>Brand Info Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-light">
|
||||
<h6>Brand Light Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-dark">
|
||||
<h6>Brand Dark Color</h6>
|
||||
</ThemeColor>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Colors
|
||||
@@ -1,229 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const Typography = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Headings
|
||||
<DocsLink href="https://coreui.io/docs/content/typography/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Documentation and examples for Bootstrap typography, including global settings,
|
||||
headings, body text, lists, and more.
|
||||
</p>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h1></h1></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h1">h1. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h2></h2></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h2">h2. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h3></h3></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h3">h3. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h4></h4></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h4">h4. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h5></h5></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h5">h5. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h6></h6></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h6">h6. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Headings</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<code className="highlighter-rouge">.h1</code> through
|
||||
<code className="highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font styling of a heading but
|
||||
cannot use the associated HTML element.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p className="h1">h1. Bootstrap heading</p>
|
||||
<p className="h2">h2. Bootstrap heading</p>
|
||||
<p className="h3">h3. Bootstrap heading</p>
|
||||
<p className="h4">h4. Bootstrap heading</p>
|
||||
<p className="h5">h5. Bootstrap heading</p>
|
||||
<p className="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<div className="card-header">Display headings</div>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example bd-example-type">
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-1">Display 1</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-2">Display 2</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-3">Display 3</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-4">Display 4</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Inline text elements</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p>
|
||||
You can use the mark tag to <mark>highlight</mark> text.
|
||||
</p>
|
||||
<p>
|
||||
<del>This line of text is meant to be treated as deleted text.</del>
|
||||
</p>
|
||||
<p>
|
||||
<s>This line of text is meant to be treated as no longer accurate.</s>
|
||||
</p>
|
||||
<p>
|
||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
||||
</p>
|
||||
<p>
|
||||
<u>This line of text will render as underlined</u>
|
||||
</p>
|
||||
<p>
|
||||
<small>This line of text is meant to be treated as fine print.</small>
|
||||
</p>
|
||||
<p>
|
||||
<strong>This line rendered as bold text.</strong>
|
||||
</p>
|
||||
<p>
|
||||
<em>This line rendered as italicized text.</em>
|
||||
</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Description list alignment</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s predefined classes
|
||||
(or semantic mixins). For longer terms, you can optionally add a{' '}
|
||||
<code className="highlighter-rouge">.text-truncate</code> class to truncate the text
|
||||
with an ellipsis.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-3">Description lists</dt>
|
||||
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt className="col-sm-3">Euismod</dt>
|
||||
<dd className="col-sm-9">
|
||||
<p>
|
||||
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
|
||||
</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Malesuada porta</dt>
|
||||
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd className="col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
|
||||
fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Nesting</dt>
|
||||
<dd className="col-sm-9">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4">Nested definition list</dt>
|
||||
<dd className="col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Typography
|
||||
Reference in New Issue
Block a user