From 0101005bf5bab0b37ad65ef9efa7db7e6d40d9c2 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Sun, 4 Jun 2023 21:58:05 +0900 Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=8E=A8=20Change=20width=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/molecules/archive-menu/archive-menu.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/molecules/archive-menu/archive-menu.ts b/client/src/components/molecules/archive-menu/archive-menu.ts index bdbe1d06..cc08e546 100644 --- a/client/src/components/molecules/archive-menu/archive-menu.ts +++ b/client/src/components/molecules/archive-menu/archive-menu.ts @@ -26,7 +26,7 @@ template.innerHTML = ` grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); gap: 10px 15px; - width: 220px; + width: 200px; height: 270px; overflow-x: scroll; } From aec0484109856889facd2e8844e3490764fccaaa Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Sun, 4 Jun 2023 21:59:13 +0900 Subject: [PATCH 02/16] =?UTF-8?q?=F0=9F=8E=A8=20Change=20anchor=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/molecules/canvas-layer/image-layer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/molecules/canvas-layer/image-layer.ts b/client/src/components/molecules/canvas-layer/image-layer.ts index 53a54be2..ba8d9268 100644 --- a/client/src/components/molecules/canvas-layer/image-layer.ts +++ b/client/src/components/molecules/canvas-layer/image-layer.ts @@ -471,7 +471,7 @@ function findAnchorInPath({ } function drawDeleteAnchor({ context, point }: { context: CanvasRenderingContext2D; point: Point }) { - const ANCHOR_RADIUS = 24 + const ANCHOR_RADIUS = 26 const path2d = drawCircle({ context, @@ -485,7 +485,7 @@ function drawDeleteAnchor({ context, point }: { context: CanvasRenderingContext2 } function drawResizeAnchor({ context, point }: { context: CanvasRenderingContext2D; point: Point }) { - const ANCHOR_RADIUS = 24 + const ANCHOR_RADIUS = 26 const path2d = drawCircle({ context, From a75ee13bfc48be8f2902a7046d21cbfcb36dd224 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Mon, 5 Jun 2023 22:53:42 +0900 Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=8E=A8=20Add=20global=20colorset=20?= =?UTF-8?q?(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/global.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/src/global.css b/client/src/global.css index c5a917b6..c62c034a 100644 --- a/client/src/global.css +++ b/client/src/global.css @@ -1,10 +1,13 @@ :root { /** component design unit */ --color-black: #0a0a0a; + --color-davy-gray: #555555; --color-gray: #f3f3f3; --color-white: #fafafa; --color-neutral: #cbd2e1; --color-platinum: #e4e5e7; + --color-azure: rgba(70, 130, 252, 1); + --color-azure15: rgba(70, 130, 252, 0.15); --color-primary: rgba(145, 181, 253, 1); --color-primary40: rgba(151, 222, 255, 0.4); --color-primary30: rgba(151, 222, 255, 0.3); From c69b3bbbc66632c98b23ca381da5b83a2b83362f Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Mon, 5 Jun 2023 22:57:07 +0900 Subject: [PATCH 04/16] =?UTF-8?q?=E2=9C=A8=20Add=20button=20mode=20and=20v?= =?UTF-8?q?ariant=20attribute=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/atoms/button/button.ts | 58 ++++++++++++++++---- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/client/src/components/atoms/button/button.ts b/client/src/components/atoms/button/button.ts index c9ab5b4b..7de78e01 100644 --- a/client/src/components/atoms/button/button.ts +++ b/client/src/components/atoms/button/button.ts @@ -7,8 +7,29 @@ template.innerHTML = ` :host { display: block; } + + :host button { + width: 100%; + border-radius: 16px; + border: none; + cursor: pointer; + padding: 13px 16px; + font-size: 14px; + line-height: 14px; + } + + :host button[data-variant="primary"][data-mode="fill"] { + color: var(--color-white); + background-color: var(--color-azure); + } + + :host button[data-variant="primary"][data-mode="outline"] { + color: var(--color-azure); + background-color: var(--color-azure15); + } + - ` @@ -21,29 +42,44 @@ export default class VButton extends VComponent { } static get observedAttributes() { - return ['color'] + return ['mode', 'variant'] } - get color() { - return this.getAttribute('color') || 'red' + get mode() { + return this.getAttribute('mode') || 'fill' } - set color(newValue: string) { - this.setAttribute('color', newValue) + set mode(newValue: string) { + this.setAttribute('mode', newValue) + } + + get variant() { + return this.getAttribute('variant') || 'primary' + } + set variant(newValue: string) { + this.setAttribute('variant', newValue) } bindInitialProp() { - this.reflectAttribute({ attribute: 'color', value: this.color }) + this.reflectAttribute({ attribute: 'mode', value: this.mode }) + this.reflectAttribute({ attribute: 'variant', value: this.variant }) } protected reflectAttribute({ attribute, value }: ReflectAttributeParam) { switch (attribute) { - case 'color': - this.updateColorStyle(value) + case 'mode': + this.updateMode(value) + break + case 'variant': + this.updateVariant(value) break } } - private updateColorStyle(value: string) { - this.$root.style.color = value + private updateMode(value: string) { + this.$root.dataset.mode = value + } + + private updateVariant(value: string) { + this.$root.dataset.variant = value } } From ad6ea1f63275bfb8ff73030f72fdf3c840388303 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Mon, 5 Jun 2023 22:57:55 +0900 Subject: [PATCH 05/16] =?UTF-8?q?=E2=9C=A8=20Fix=20story=20to=20support=20?= =?UTF-8?q?new=20attribute:=20mode,=20variant=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/atoms/button/button.stories.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/src/components/atoms/button/button.stories.ts b/client/src/components/atoms/button/button.stories.ts index 0355af8a..ff7c1a80 100644 --- a/client/src/components/atoms/button/button.stories.ts +++ b/client/src/components/atoms/button/button.stories.ts @@ -5,15 +5,17 @@ export default { } interface Props { - color: string + mode: 'fill' | 'outline' + variant: 'primary' children: string onClick: () => void } -export const Basic = ({ color, children, onClick }: Props) => - html`${children}` +export const Basic = ({ mode, variant, children, onClick }: Props) => + html`${children}` Basic.args = { - color: 'blue', + mode: 'fill', + variant: 'primary', children: '예시 버튼', onClick: () => console.log('clicked!'), } From 6bd1e59f5d4571444ca1da367d3e21d4545e5f75 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Mon, 5 Jun 2023 22:58:15 +0900 Subject: [PATCH 06/16] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20Remove=20unnecessary?= =?UTF-8?q?=20test=20case=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/atoms/button/button.spec.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/client/src/components/atoms/button/button.spec.ts b/client/src/components/atoms/button/button.spec.ts index 7bf3131d..e08408a0 100644 --- a/client/src/components/atoms/button/button.spec.ts +++ b/client/src/components/atoms/button/button.spec.ts @@ -11,16 +11,4 @@ describe('button', () => { expect(buttonElement).toHaveTextContent('test') }) - - it('should accept color attribute', async () => { - await renderToHtml(` - test - `) - - const buttonElement = screen.getByTestId('button') - const rootElement = getTemplateRootElement(buttonElement) - const style = await getInitialStyle(rootElement) - - expect(style.color).toBe('red') - }) }) From d7efa409ac608d9feeba2db9b948dc1a3a3628be Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:44:57 +0900 Subject: [PATCH 07/16] =?UTF-8?q?=E2=9C=A8=20Implement=20confirm-dialog=20?= =?UTF-8?q?component=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-dialog/confirm-dialog.stories.ts | 15 +++ .../confirm-dialog/confirm-dialog.ts | 97 +++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 client/src/components/molecules/confirm-dialog/confirm-dialog.stories.ts create mode 100644 client/src/components/molecules/confirm-dialog/confirm-dialog.ts diff --git a/client/src/components/molecules/confirm-dialog/confirm-dialog.stories.ts b/client/src/components/molecules/confirm-dialog/confirm-dialog.stories.ts new file mode 100644 index 00000000..ae130d99 --- /dev/null +++ b/client/src/components/molecules/confirm-dialog/confirm-dialog.stories.ts @@ -0,0 +1,15 @@ +import { html } from 'lit-html' + +export default { + title: 'Molecules / Confirm Dialog', +} + +interface Props { + content: string +} + +export const Basic = ({ content }: Props) => + html` ` +Basic.args = { + content: '알림 내용', +} diff --git a/client/src/components/molecules/confirm-dialog/confirm-dialog.ts b/client/src/components/molecules/confirm-dialog/confirm-dialog.ts new file mode 100644 index 00000000..44508c51 --- /dev/null +++ b/client/src/components/molecules/confirm-dialog/confirm-dialog.ts @@ -0,0 +1,97 @@ +import { VComponent } from '@/modules/v-component' +import type { ReflectAttributeParam } from '@/modules/v-component/types' +import VDialog from '@atoms/dialog/dialog' + +const template = document.createElement('template') +template.innerHTML = ` + + + Confirm + +
+ 취소 + 확인 +
+ +` + +export default class VConfirmDialog extends VComponent { + static tag = 'v-confirm-dialog' + + constructor() { + super(template) + } + + static get observedAttributes() { + return ['open', 'content'] + } + + get open() { + return this.getAttribute('open') === 'true' ? 'true' : 'false' + } + set open(newValue: 'true' | 'false') { + this.setAttribute('open', newValue) + } + + get content() { + return this.getAttribute('content') || '' + } + set content(newValue: string) { + this.setAttribute('content', newValue) + } + + protected bindEventListener() { + this.$root + .querySelector('#confirm-button') + ?.addEventListener('click', this.handleConfirm.bind(this)) + this.$root + .querySelector('#cancel-button') + ?.addEventListener('click', this.handleCancel.bind(this)) + } + + private handleConfirm(ev: Event) { + ev.stopPropagation() + this.dispatchEvent(new CustomEvent('dialog:confirm', { bubbles: true, composed: true })) + this.open = 'false' + } + + private handleCancel(ev: Event) { + ev.stopPropagation() + this.dispatchEvent(new CustomEvent('dialog:cancel', { bubbles: true, composed: true })) + this.open = 'false' + } + + protected bindInitialProp() { + this.reflectAttribute({ attribute: 'open', value: this.open }) + } + + protected reflectAttribute({ attribute, value }: ReflectAttributeParam): void { + switch (attribute) { + case 'open': + this.updateOpenStyle(value) + break + case 'content': + this.updateContent(value) + break + } + } + + private updateOpenStyle(value: string) { + if (value === 'true') { + this.$root.open = 'true' + } else { + this.$root.open = 'false' + } + } + + private updateContent(value: string) { + const $contentSlot = this.$root.querySelector('span[slot="content"]') + if ($contentSlot) { + $contentSlot.textContent = value + } + } +} From 7fbcea5ea635a0095161a6dff60e5d56adfdf9eb Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:45:53 +0900 Subject: [PATCH 08/16] =?UTF-8?q?=F0=9F=A7=AA=20Add=20confirm-dialog=20tes?= =?UTF-8?q?t=20case=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-dialog/confirm-dialog.spec.ts | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts diff --git a/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts new file mode 100644 index 00000000..04db1bef --- /dev/null +++ b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts @@ -0,0 +1,65 @@ +import userEvent from '@testing-library/user-event' +import { screen, waitFor } from '@testing-library/dom' +import { renderToHtml, getTemplateRootElement, getInitialStyle } from '@/modules/wc-test-utils' +import VDialog from '@atoms/dialog/dialog' +import VConfirmDialog from './confirm-dialog' + +describe('confirm-dialog', () => { + beforeAll(() => { + /** + * 💡 Use mocked method until jsdom support HTMLDialogElement + * @reference + * https://github.com/jsdom/jsdom/issues/3294#issuecomment-1196577616 + */ + HTMLDialogElement.prototype.showModal = jest.fn(function (this: HTMLDialogElement) { + this.open = false + }) + HTMLDialogElement.prototype.close = jest.fn(function (this: HTMLDialogElement) { + this.open = false + }) + }) + + it('should bubble dialog:confirm event', async () => { + await renderToHtml(` + + `) + + const $dialog = screen.getByTestId('confirm-dialog') + const $root = getTemplateRootElement($dialog) + + const mockListener = jest.fn(() => {}) + + $dialog.open = 'true' + $dialog.addEventListener('dialog:confirm', mockListener) + + const $confirmButton = $root.querySelector('#confirm-button')! + + const user = userEvent.setup() + await user.click($confirmButton) + + expect(mockListener).toBeCalled() + expect($dialog.open).toBe('false') + }) + + it('should bubble dialog:cancel event', async () => { + await renderToHtml(` + + `) + + const $dialog = screen.getByTestId('confirm-dialog') + const $root = getTemplateRootElement($dialog) + + const mockListener = jest.fn(() => {}) + + $dialog.open = 'true' + $dialog.addEventListener('dialog:cancel', mockListener) + + const $cancelButton = $root.querySelector('#cancel-button')! + + const user = userEvent.setup() + await user.click($cancelButton) + + expect(mockListener).toBeCalled() + expect($dialog.open).toBe('false') + }) +}) From 4d7d79ed8e4126981094f0393fe6c2c21b7f9bca Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:55:02 +0900 Subject: [PATCH 09/16] =?UTF-8?q?=E2=9C=A8=20Implement=20dialog=20componen?= =?UTF-8?q?t=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/atoms/dialog/dialog.stories.ts | 15 +++ client/src/components/atoms/dialog/dialog.ts | 94 +++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 client/src/components/atoms/dialog/dialog.stories.ts create mode 100644 client/src/components/atoms/dialog/dialog.ts diff --git a/client/src/components/atoms/dialog/dialog.stories.ts b/client/src/components/atoms/dialog/dialog.stories.ts new file mode 100644 index 00000000..ab50c1d4 --- /dev/null +++ b/client/src/components/atoms/dialog/dialog.stories.ts @@ -0,0 +1,15 @@ +import { html } from 'lit-html' + +export default { + title: 'Elements / Dialog', +} + +export const Basic = () => html` + +
다이얼로그
+
다이얼로그 내용
+
+ +
+ +` diff --git a/client/src/components/atoms/dialog/dialog.ts b/client/src/components/atoms/dialog/dialog.ts new file mode 100644 index 00000000..7e7201d5 --- /dev/null +++ b/client/src/components/atoms/dialog/dialog.ts @@ -0,0 +1,94 @@ +import { VComponent } from '@/modules/v-component' +import type { ReflectAttributeParam } from '@/modules/v-component/types' + +const template = document.createElement('template') +template.innerHTML = ` + + +

+ +

+
+ +
+
+ +
+ +` + +export default class VDialog extends VComponent { + static tag = 'v-dialog' + + constructor() { + super(template) + } + + static get observedAttributes() { + return ['open'] + } + + get open() { + return this.getAttribute('open') === 'true' ? 'true' : 'false' + } + set open(newValue: 'true' | 'false') { + this.setAttribute('open', newValue) + } + + protected bindInitialProp() { + this.reflectAttribute({ attribute: 'open', value: this.open }) + } + + protected reflectAttribute({ attribute, value }: ReflectAttributeParam) { + switch (attribute) { + case 'open': + this.updateOpenStyle(value) + break + } + } + + private updateOpenStyle(value: string) { + if (value === 'true') { + this.$root.showModal() + } else { + this.$root.close() + } + } +} From d4bb080dc565b14bb24d703f93c0772752c1b4e1 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:55:23 +0900 Subject: [PATCH 10/16] =?UTF-8?q?=F0=9F=A7=AA=20Add=20dialog=20test=20case?= =?UTF-8?q?=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/atoms/dialog/dialog.spec.ts | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 client/src/components/atoms/dialog/dialog.spec.ts diff --git a/client/src/components/atoms/dialog/dialog.spec.ts b/client/src/components/atoms/dialog/dialog.spec.ts new file mode 100644 index 00000000..38c3186f --- /dev/null +++ b/client/src/components/atoms/dialog/dialog.spec.ts @@ -0,0 +1,36 @@ +import { screen, waitFor } from '@testing-library/dom' +import { renderToHtml, getTemplateRootElement, getInitialStyle } from '@/modules/wc-test-utils' +import VDialog from './dialog' + +describe('dialog', () => { + beforeAll(() => { + /** + * 💡 Use mocked method until jsdom support HTMLDialogElement + * @reference + * https://github.com/jsdom/jsdom/issues/3294#issuecomment-1196577616 + */ + HTMLDialogElement.prototype.showModal = jest.fn(function (this: HTMLDialogElement) { + this.open = false + }) + HTMLDialogElement.prototype.close = jest.fn(function (this: HTMLDialogElement) { + this.open = false + }) + }) + + it('should render dialog with open="true"', async () => { + await renderToHtml(` + +
다이얼로그
+ + `) + + const $dialog = screen.getByTestId('dialog') + const $root = getTemplateRootElement($dialog) + + expect($root).not.toBeVisible() + + $dialog.open = 'true' + + waitFor(() => expect($root).toBeVisible()) + }) +}) From c8eaf0efaf038f76bfdaf2029245881b703c91e7 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:57:48 +0900 Subject: [PATCH 11/16] =?UTF-8?q?=E2=9C=A8=20Define=20dialog=20web=20compo?= =?UTF-8?q?nent=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/registry.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/src/registry.ts b/client/src/registry.ts index 4ff3c9b9..ea077af5 100644 --- a/client/src/registry.ts +++ b/client/src/registry.ts @@ -9,6 +9,7 @@ import RangeSlider from '@atoms/range-slider/range-slider' import Divider from '@atoms/divider/divider' import CanvasPreview from '@atoms/canvas-preview/canvas-preview' import Toast from '@atoms/toast/toast' +import Dialog from '@atoms/dialog/dialog' import IconButton from '@molecules/icon-button/icon-button' import CanvasBackgroundLayer from '@molecules/canvas-layer/background-layer' import CanvasDrawingLayer from '@molecules/canvas-layer/drawing-layer' @@ -18,6 +19,7 @@ import ColorPalette from '@molecules/color-palette/color-palette' import ColorMenu from '@molecules/color-menu/color-menu' import StrokeMenu from '@molecules/stroke-menu/stroke-menu' import ArchiveMenu from '@molecules/archive-menu/archive-menu' +import ConfirmDialog from '@molecules/confirm-dialog/confirm-dialog' import CanvasContainer from '@organisms/canvas-container/canvas-container' import CanvasToolbox from '@organisms/canvas-toolbox/canvas-toolbox' import HistoryToolbox from '@organisms/history-toolbox/history-toolbox' @@ -32,6 +34,7 @@ export function defineCustomElements() { customElements.define(ColorTile.tag, ColorTile) customElements.define(IconButton.tag, IconButton) customElements.define(Toast.tag, Toast) + customElements.define(Dialog.tag, Dialog) customElements.define(CanvasPreview.tag, CanvasPreview) customElements.define(CanvasContainer.tag, CanvasContainer) customElements.define(CanvasBackgroundLayer.tag, CanvasBackgroundLayer) @@ -48,4 +51,5 @@ export function defineCustomElements() { customElements.define(ColorMenu.tag, ColorMenu) customElements.define(StrokeMenu.tag, StrokeMenu) customElements.define(ArchiveMenu.tag, ArchiveMenu) + customElements.define(ConfirmDialog.tag, ConfirmDialog) } From 0aa0cdf0e9756d4ecb9754c9efd3fa60ecbf379a Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:58:20 +0900 Subject: [PATCH 12/16] =?UTF-8?q?=E2=9C=A8=20Add=20confirm=20event=20bus?= =?UTF-8?q?=20key=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/event-bus/constant.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/event-bus/constant.ts b/client/src/event-bus/constant.ts index b4d13cf8..c5f3bf50 100644 --- a/client/src/event-bus/constant.ts +++ b/client/src/event-bus/constant.ts @@ -4,4 +4,5 @@ export const enum EVENT_KEY { 'UPLOAD_IMAGE' = 'UPLOAD_IMAGE', 'CLEAR_ALL' = 'CLEAR_ALL', 'SHOW_TOAST' = 'SHOW_TOAST', + 'SHOW_CONFIRM' = 'SHOW_CONFIRM', } From 00f65ed29dcc453276697bc31cd9e2f786c4421f Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:59:25 +0900 Subject: [PATCH 13/16] =?UTF-8?q?=E2=9C=A8=20Use=20confirm-dialog=20instea?= =?UTF-8?q?d=20of=20system=20confirm=20popup=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/app.ts | 23 +++++++++++++++++-- .../history-toolbox/history-toolbox.ts | 8 +++---- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/client/src/app.ts b/client/src/app.ts index 867fe77f..f8805fbf 100644 --- a/client/src/app.ts +++ b/client/src/app.ts @@ -2,6 +2,7 @@ import { VComponent } from '@/modules/v-component' import { Z_INDEX } from '@/utils/constant' import { EventBus, EVENT_KEY } from '@/event-bus' import VToast from '@atoms/toast/toast' +import VConfirmDialog from '@molecules/confirm-dialog/confirm-dialog' const template = document.createElement('template') template.innerHTML = ` @@ -33,8 +34,8 @@ template.innerHTML = ` - + ` @@ -47,6 +48,7 @@ export default class App extends VComponent { } private $toast!: VToast + private $dialog!: VConfirmDialog protected afterCreated() { this.initToastElement() @@ -54,15 +56,27 @@ export default class App extends VComponent { private initToastElement() { const $toast = this.$root.querySelector('v-toast') - if (!$toast) { + const $dialog = this.$root.querySelector('v-confirm-dialog') + if (!$toast || !$dialog) { throw new Error('initialize fail') } this.$toast = $toast + this.$dialog = $dialog + } + + protected bindEventListener() { + this.$dialog.addEventListener('dialog:confirm', this.handleClearConfirm) + this.$dialog.addEventListener('dialog:cancel', () => {}) + } + + private handleClearConfirm() { + EventBus.getInstance().emit(EVENT_KEY.CLEAR_ALL) } subscribeEventBus() { EventBus.getInstance().on(EVENT_KEY.SHOW_TOAST, this.onShowToast.bind(this)) + EventBus.getInstance().on(EVENT_KEY.SHOW_CONFIRM, this.onShowConfirmDialog.bind(this)) } private onShowToast(variant: string, title: string, description: string) { @@ -79,4 +93,9 @@ export default class App extends VComponent { this.$toast.title = title this.$toast.description = description } + + private onShowConfirmDialog(content: string) { + this.$dialog.content = content + this.$dialog.open = 'true' + } } diff --git a/client/src/components/organisms/history-toolbox/history-toolbox.ts b/client/src/components/organisms/history-toolbox/history-toolbox.ts index 96df4719..ea6ef37e 100644 --- a/client/src/components/organisms/history-toolbox/history-toolbox.ts +++ b/client/src/components/organisms/history-toolbox/history-toolbox.ts @@ -57,10 +57,10 @@ export default class VHistoryToolbox extends VComponent { } handleClearCanvas() { - const isConfirmed = window.confirm('지금까지 작성한 기록이 사라집니다. 삭제하시겠습니까?') - if (isConfirmed) { - EventBus.getInstance().emit(EVENT_KEY.CLEAR_ALL) - } + EventBus.getInstance().emit( + EVENT_KEY.SHOW_CONFIRM, + '지금까지 작성한 기록이 사라집니다. 삭제하시겠습니까?' + ) } handleSaveCanvas() { From d60b6c41030de780ed7751793239116a126f55f5 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 01:01:13 +0900 Subject: [PATCH 14/16] =?UTF-8?q?=E2=9C=A8=20Change=20option=20order?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/organisms/history-toolbox/history-toolbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/organisms/history-toolbox/history-toolbox.ts b/client/src/components/organisms/history-toolbox/history-toolbox.ts index ea6ef37e..7543759d 100644 --- a/client/src/components/organisms/history-toolbox/history-toolbox.ts +++ b/client/src/components/organisms/history-toolbox/history-toolbox.ts @@ -13,8 +13,8 @@ template.innerHTML = ` - + ` From 37bde18ff72c842f2f1232598c6c77560f9d4019 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 02:13:08 +0900 Subject: [PATCH 15/16] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20Remove=20unused=20im?= =?UTF-8?q?port?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/confirm-dialog/confirm-dialog.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts index 04db1bef..7a1e13ab 100644 --- a/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts +++ b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts @@ -1,6 +1,6 @@ import userEvent from '@testing-library/user-event' -import { screen, waitFor } from '@testing-library/dom' -import { renderToHtml, getTemplateRootElement, getInitialStyle } from '@/modules/wc-test-utils' +import { screen } from '@testing-library/dom' +import { renderToHtml, getTemplateRootElement } from '@/modules/wc-test-utils' import VDialog from '@atoms/dialog/dialog' import VConfirmDialog from './confirm-dialog' From e893a38ac1fd00c12292eeb4d18084ca0141b545 Mon Sep 17 00:00:00 2001 From: owen-triple <37819666+sohnjunior@users.noreply.github.com> Date: Tue, 6 Jun 2023 02:14:22 +0900 Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=90=9B=20Fix=20empty=20arrow=20func?= =?UTF-8?q?tion=20lint=20rule=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/app.ts | 4 ++-- .../molecules/confirm-dialog/confirm-dialog.spec.ts | 5 +++-- client/src/utils/constant.ts | 4 ++++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/client/src/app.ts b/client/src/app.ts index f8805fbf..7d74ac29 100644 --- a/client/src/app.ts +++ b/client/src/app.ts @@ -1,5 +1,5 @@ import { VComponent } from '@/modules/v-component' -import { Z_INDEX } from '@/utils/constant' +import { Z_INDEX, NOOP } from '@/utils/constant' import { EventBus, EVENT_KEY } from '@/event-bus' import VToast from '@atoms/toast/toast' import VConfirmDialog from '@molecules/confirm-dialog/confirm-dialog' @@ -67,7 +67,7 @@ export default class App extends VComponent { protected bindEventListener() { this.$dialog.addEventListener('dialog:confirm', this.handleClearConfirm) - this.$dialog.addEventListener('dialog:cancel', () => {}) + this.$dialog.addEventListener('dialog:cancel', NOOP) } private handleClearConfirm() { diff --git a/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts index 7a1e13ab..fd873370 100644 --- a/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts +++ b/client/src/components/molecules/confirm-dialog/confirm-dialog.spec.ts @@ -3,6 +3,7 @@ import { screen } from '@testing-library/dom' import { renderToHtml, getTemplateRootElement } from '@/modules/wc-test-utils' import VDialog from '@atoms/dialog/dialog' import VConfirmDialog from './confirm-dialog' +import { NOOP } from '@/utils/constant' describe('confirm-dialog', () => { beforeAll(() => { @@ -27,7 +28,7 @@ describe('confirm-dialog', () => { const $dialog = screen.getByTestId('confirm-dialog') const $root = getTemplateRootElement($dialog) - const mockListener = jest.fn(() => {}) + const mockListener = jest.fn(NOOP) $dialog.open = 'true' $dialog.addEventListener('dialog:confirm', mockListener) @@ -49,7 +50,7 @@ describe('confirm-dialog', () => { const $dialog = screen.getByTestId('confirm-dialog') const $root = getTemplateRootElement($dialog) - const mockListener = jest.fn(() => {}) + const mockListener = jest.fn(NOOP) $dialog.open = 'true' $dialog.addEventListener('dialog:cancel', mockListener) diff --git a/client/src/utils/constant.ts b/client/src/utils/constant.ts index b043dd1d..0bc048c0 100644 --- a/client/src/utils/constant.ts +++ b/client/src/utils/constant.ts @@ -8,3 +8,7 @@ export const Z_INDEX = { MENU_LAYER: 6, TOAST_LAYER: 7, } + +export const NOOP = () => { + return +}