chore: Release 4.7.0

CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.7.0](https://github.com/naver/egjs-infinitegrid/compare/4.6.0...4.7.0) (2022-09-02)
+### :sparkles: Packages
+* `@egjs/infinitegrid` 4.7.0
+* `@egjs/react-infinitegrid` 4.7.0
+* `@egjs/svelte-infinitegrid` 4.7.0
+* `@egjs/vue-infinitegrid` 4.7.0
+* `@egjs/vue3-infinitegrid` 4.7.0
+* `@egjs/ngx-infinitegrid` 4.7.0
+
+
+### :rocket: New Features
+
+* `@egjs/ngx-infinitegrid`, `@egjs/infinitegrid`
+    * add scrollContainer option (#511) ([78043ad](https://github.com/naver/egjs-infinitegrid/commit/78043ada3f65c54ed26b04bf2e4655d74961d449))
+
+
+### :bug: Bug Fix
+
+* `@egjs/react-infinitegrid`, `@egjs/infinitegrid`
+    * add cjs file (#506) ([63fea02](https://github.com/naver/egjs-infinitegrid/commit/63fea02a34ed2e4c7702929cdef87191ce2208dc))
+* `@egjs/infinitegrid`
+    * fix placholder key (#514) ([af62a98](https://github.com/naver/egjs-infinitegrid/commit/af62a98c5f0562e929e09bf976298e8e29aa94e7))
+* `@egjs/svelte-infinitegrid`
+    * fix types (#510) ([96adfd7](https://github.com/naver/egjs-infinitegrid/commit/96adfd7bd66c6d77015818417990339da1b59311))
+
+
+### :mega: Other
+
+* All
+    * update packages versions ([e438c00](https://github.com/naver/egjs-infinitegrid/commit/e438c00929ba28bd001d6174bd57efd918144686))
+
+
+
 ## [4.6.0](https://github.com/naver/egjs-infinitegrid/compare/4.5.0...4.6.0) (2022-07-26)
 ### :sparkles: Packages
 * `@egjs/infinitegrid` 4.6.0

packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.7.0/api/Component.mdx

@@ -0,0 +1,211 @@
+---
+custom_edit_url: null
+---
+
+```ts
+class Component
+```
+
+<div>
+
+</div>
+
+컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
+
+<div className="container">
+  <div className="row mb-2"><div className="col col--6"><strong>Properties</strong></div><div className="col col--6"><strong>Methods</strong></div></div>
+  <div className="row"><div className="col col--6"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span></div><div className="col col--6"><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div></div>
+</div>
+
+## Properties
+### VERSION {#VERSION}
+
+<div>
+  <span className="badge badge--info">static</span>
+</div>
+
+버전정보 문자열
+
+**Type**: string
+
+Component.VERSION;  // ex) 3.0.0
+
+## Methods
+
+### trigger {#trigger}
+
+<div>
+
+</div>
+
+커스텀 이벤트를 발생시킨다
+
+**Returns**: this
+- 컴포넌트 자신의 인스턴스
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|event|string \| ComponentEvent|||발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스|
+|params|Array&lt;any&gt; \| $ts:...|||커스텀 이벤트가 발생할 때 전달할 데이터|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
+  hi: { foo: { a: number; b: boolean } };
+  someEvent: (foo: number, bar: string) => void;
+  someOtherEvent: void; // When there's no event argument
+}> {
+  some(){
+    if(this.trigger("beforeHi")){ // When event call to stop return false.
+      this.trigger("hi");// fire hi event.
+    }
+  }
+}
+
+const some = new Some();
+some.on("beforeHi", e => {
+  if(condition){
+    e.stop(); // When event call to stop, `hi` event not call.
+  }
+  // `currentTarget` is component instance.
+  console.log(some === e.currentTarget); // true
+
+  typeof e.foo; // number
+  typeof e.bar; // string
+});
+some.on("hi", e => {
+  typeof e.foo.b; // boolean
+});
+// If you want to more know event design. You can see article.
+// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
+```
+
+### once {#once}
+
+<div>
+
+</div>
+
+이벤트가 한번만 실행된다.
+
+**Returns**: this
+- 컴포넌트 자신의 인스턴스
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트|
+|handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: ComponentEvent;
+}> {
+  hi() {
+    alert("hi");
+  }
+  thing() {
+    this.once("hi", this.hi);
+  }
+}
+
+var some = new Some();
+some.thing();
+some.trigger(new ComponentEvent("hi"));
+// fire alert("hi");
+some.trigger(new ComponentEvent("hi"));
+// Nothing happens
+```
+
+### hasOn {#hasOn}
+
+<div>
+
+</div>
+
+컴포넌트에 이벤트가 등록됐는지 확인한다.
+
+**Returns**: boolean
+- 이벤트 등록 여부
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string|||등록 여부를 확인할 이벤트의 이름|
+
+```ts
+import Component from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  some() {
+    this.hasOn("hi");// check hi event.
+  }
+}
+```
+
+### on {#on}
+
+<div>
+
+</div>
+
+컴포넌트에 이벤트를 등록한다.
+
+**Returns**: this
+- 컴포넌트 자신의 인스턴스
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트|
+|handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.on("hi",this.hi); //attach event
+  }
+}
+```
+
+### off {#off}
+
+<div>
+
+</div>
+
+컴포넌트에 등록된 이벤트를 해제한다.<br/>`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.<br/>`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다.
+
+**Returns**: this
+- 컴포넌트 자신의 인스턴스
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|✔️||해제할 이벤트의 이름|
+|handlerToDetach|function \| $ts:...|✔️||해제할 이벤트의 핸들러 함수|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.off("hi",this.hi); //detach event
+  }
+}
+```
+