🤍 은지log 🤍

🎣 1. Modal Background CSS (기본적인) import styled from 'styled-components' const Modal = () => { return ( Modal ) } const Backdrop = styled.div` width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); ` const Container = styled.div` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; min-width: 300px; border-radius: 4px; `..

🎣 1. Bootstrap.jsx 컴포넌트 생성 import Dropdown from './Dropdown' const Bootstrap = () => { return ( ) } export default Bootstrap 🎣 2. Dropdown.jsx 컴포넌트 생성 import { useEffect, useState, useRef } from 'react' import styled from 'styled-components' const Dropdown = () => { const [showList, setShowList] = useState(false) const btnEl = useRef(null) useEffect(() => { const onClick = (e) => { if (btnEl.cur..

🎣 1. Bootstrap.jsx 컴포넌트 생성 import Accordion from './Accordion' import { accordionData } from '../../datas/bootstrap' const Bootstrap = () => { return ( ) } // 아코디언컴포넌트를 데이터만 갈아끼우면 안에 내용을 교체하면서 재활용가능 export default Bootstrap 🎣 2. Accordion.jsx 컴포넌트 생성 import { useState } from 'react' import styled from 'styled-components' import { ReactComponent as Arrow } from './arrow.svg' const Accordion = ({ ..