📖
Update |
🔍 How To Use
import { } from "mcm-js";
export default function ExamplePage() {
return (
);
}📝 Example
기본 (Basic)
return (
);전환 시간 (Delay) 조절
return (
);스타일 설정
return (
); return (
);리스트 관련
return (
); return (
); return (
); return (
);스와이프 적용
return (
);리스트 선택 이벤트
// 현재 선택되어 있는 리스트의 인덱스 값을 저장합니다.
const [select, setSelect] = useState(0);
// 현재 선택되어 있는 리스트의 인덱스 값을 가져와 select state 값을 변경하는 함수입니다.
const changeSelect = (idx) => {
// 함수의 props로 해당 리스트의 인덱스 값이 기본값으로 전달됩니다.
setSelect(idx);
};
return (
<div>
<p> 현재 선택되어 있는 리스트의 인덱스 번호는? {select} </p>
<Popular
list={list}
minHeight={{ web: 40 }}
/>
</div>
);최소 높이값 설정
return (
);❗ 모듈 호출시 에러 발생 예시
📤 Props List
필수 Props
| 이름 | 설명 | 기본값 (Type) |
| list | Popular에 적용할 나열되는 컴포넌트들을 나타냅니다. list props에 직접 전달할 경우에는 반드시 배열에 담아야 합니다. 문자열 또는 컴포넌트 형태로만 전달할 수 있으며, 문자열이 전달되면 p태그가 자동으로 적용됩니다. list로 전달된 배열은 컴포넌트가 재렌더 되더라도 데이터가 변경되지 않도록 useState 또는 전역 변수로 관리하는 것을 권장합니다. | [ ] ([String | Node]) |
| minHeight | Popular의 높이값을 지정합니다. 웹(768px 이상)과 모바일(767px 이하) 환경에 따라 다른 높이값을 지정할 수 있습니다. 웹 환경의 높이값은 반드시 설정해야 하며, 모바일 환경의 높이값은 옵션으로 설정이 가능합니다. | { web : 0, mobile : 0 } (Object) |
| id | 모듈에 id 선택자 값을 지정합니다. id는 wrapper 태그에 적용됩니다. | "" (String) |
| className | 모듈에 class 선택자 값을 지정합니다. className은 wrapper 태그에 적용됩니다. | "" (String) |
| delay | Popular 리스트의 전환 속도를 조절합니다. Millisecond(1/1000)로 적용되며, 최소 2초(2000)부터 적용됩니다. | 2000 (Number) |
| popularStyles | Popular 외부에 대한 스타일을 지정합니다. 전달된 스타일은 웹과 모바일 환경에 동일하게 적용됩니다. | {} (Object) |
| popularResponsiveStyles | Popular의 외부 스타일을 웹과 모바일 환경으로 분리하여 적용합니다. web의 값으로 전달된 스타일은 웹(768px 이상)에만 적용이 되며 mobile의 값으로 전달된 스타일은 모바일(767px 이하)부터 적용이 됩니다. popularStyles props와 중복으로 적용될 경우 더 우선순위로 스타일이 적용됩니다. | { web : {}, mobile : {} } (Object) |
| setList | Popular의 전체 리스트에 관한 기능들을 관리하는 객체입니다. 전체 리스트 보이기/가리기, 순위도 표시, 스타일 적용등의 기능을 사용할 수 있습니다.
| { hide : false, showRating : false, hoverStyles: {}, styles : {}, responsiveStyles: { web : {}, mobile : {} } } (Object) |
| useSwipeMode | Popular 스와이프 모드 사용 여부를 결정합니다. true를 전달하면 현재 리스트 창을 상, 하로 이동해 리스트를 선택할 수 있습니다. | false (Boolean) |
| changeListEvent | Popular의 리스트가 변경될 때마다 실행되는 이벤트를 설정합니다. 설정된 이벤트에는 선택되어 있는 리스트의 인덱스 값을 반환하는 props가 제공됩니다. | (idx) => {} (Function) |
📂 Module Tree
태그를 클릭해보세요.