From 104df9badcbca645a6470689675382342ced47c2 Mon Sep 17 00:00:00 2001 From: wookki Date: Sat, 6 Jan 2024 14:19:55 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20Dimmed=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20#41?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 4 ++++ src/components/shared/Dimmed/Dimmed.module.scss | 6 ++++++ src/components/shared/Dimmed/Dimmed.tsx | 15 +++++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 src/components/shared/Dimmed/Dimmed.module.scss create mode 100644 src/components/shared/Dimmed/Dimmed.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 7608539a..cd4b7b34 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,6 +9,10 @@ --tertiary: #7A7A7A; --black: #090A0A; --white: #FFF + + /*-------------- z-index -------------- */ + --dimmed-zindex: 10; + --alert-zindex: 11; } body { diff --git a/src/components/shared/Dimmed/Dimmed.module.scss b/src/components/shared/Dimmed/Dimmed.module.scss new file mode 100644 index 00000000..f76c8bdc --- /dev/null +++ b/src/components/shared/Dimmed/Dimmed.module.scss @@ -0,0 +1,6 @@ +.container { + position: fixed; + z-index: var(--dimmed-zindex); + background-color: rgb(0 0 0 / 70%); + inset: 0; +} diff --git a/src/components/shared/Dimmed/Dimmed.tsx b/src/components/shared/Dimmed/Dimmed.tsx new file mode 100644 index 00000000..d6d9f016 --- /dev/null +++ b/src/components/shared/Dimmed/Dimmed.tsx @@ -0,0 +1,15 @@ +import classNames from 'classnames/bind'; + +import styles from './Dimmed.module.scss'; + +const cx = classNames.bind(styles); + +function Dimmed({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + +export default Dimmed; From 0484171febabaef64fa51b80bd881b0145d18699 Mon Sep 17 00:00:00 2001 From: wookki Date: Sat, 6 Jan 2024 19:19:46 +0900 Subject: [PATCH 2/9] =?UTF-8?q?design:=20button=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20flex=20props=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 6 +++--- src/components/shared/flex/Flex.tsx | 5 +++-- src/styles/button.ts | 10 ++++++++++ 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index cd4b7b34..e6cb50c3 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,11 +8,11 @@ --gray-400: #404446; --tertiary: #7A7A7A; --black: #090A0A; - --white: #FFF + --white: #FFF; - /*-------------- z-index -------------- */ + /* -------------- z-index -------------- */ --dimmed-zindex: 10; - --alert-zindex: 11; + --modal-zindex: 11; } body { diff --git a/src/components/shared/flex/Flex.tsx b/src/components/shared/flex/Flex.tsx index d577ae83..0f889209 100644 --- a/src/components/shared/flex/Flex.tsx +++ b/src/components/shared/flex/Flex.tsx @@ -5,10 +5,11 @@ interface FlexProps { justify?: CSSProperties['justifyContent'] direction?: CSSProperties['flexDirection'] children: React.ReactNode + className?: string } function Flex({ - align, justify, direction, children, + align, justify, direction, children, className, }: FlexProps) { const styles = useMemo(() => { return { @@ -17,7 +18,7 @@ function Flex({ }, [align, justify, direction]); return ( -
+
{children}
); diff --git a/src/styles/button.ts b/src/styles/button.ts index 32132124..46ff8994 100644 --- a/src/styles/button.ts +++ b/src/styles/button.ts @@ -6,6 +6,11 @@ export const buttonColorMap = { color: colors.white, border: `1px solid ${colors.primary}`, }, + secondary: { + backgroundColor: colors.secondary, + color: colors.white, + border: `1px solid ${colors.secondary}`, + }, gray: { backgroundColor: colors.tertiary, color: colors.white, @@ -19,6 +24,11 @@ export const buttonWeakMap = { color: colors.primary, border: `1px solid ${colors.primary}`, }, + secondary: { + backgroundColor: colors.white, + color: colors.secondary, + border: `1px solid ${colors.secondary}`, + }, gray: { backgroundColor: colors.white, color: colors.tertiary, From a8f69de6e5d7c8dd329128d5cf7f2c5ee3f9b224 Mon Sep 17 00:00:00 2001 From: wookki Date: Sat, 6 Jan 2024 21:13:15 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20useOutsideClick=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=ED=9B=85=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useOutsideClick.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/hooks/useOutsideClick.ts diff --git a/src/hooks/useOutsideClick.ts b/src/hooks/useOutsideClick.ts new file mode 100644 index 00000000..c8728f52 --- /dev/null +++ b/src/hooks/useOutsideClick.ts @@ -0,0 +1,23 @@ +import { useEffect, useRef } from 'react'; + +const useOutsideClick = (callback: () => void) => { + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + callback(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [callback]); + + return ref; +}; + +export default useOutsideClick; From f2e3ca4deb703d90c45a5077ac06d25dc987f66a Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 01:39:21 +0900 Subject: [PATCH 4/9] =?UTF-8?q?chore:=20store=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/store.ts | 8 +++++++- tsconfig.json | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/stores/store.ts b/src/stores/store.ts index 1bd27964..a2dbb501 100644 --- a/src/stores/store.ts +++ b/src/stores/store.ts @@ -2,7 +2,13 @@ import { configureStore } from '@reduxjs/toolkit'; export const makeStore = () => { return configureStore({ - reducer: {}, + reducer: { + }, + middleware: (getDefaultMiddleware) => { + return getDefaultMiddleware({ + serializableCheck: false, + }); + }, }); }; diff --git a/tsconfig.json b/tsconfig.json index 371378cc..ca3eebd5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -48,8 +48,8 @@ "@constants": [ "src/constants/index" ], - "@constants/*": [ - "src/constants/*" + "@contexts/*": [ + "src/contexts/*" ], "@models/*": [ "src/models/*" From 7336f0aa3d1c09027618281685e2c32e2f4378dc Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 01:44:05 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20Modal=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 6 +- src/components/shared/Modal/Modal.module.scss | 17 +++++ src/components/shared/Modal/Modal.tsx | 53 +++++++++++++ src/contexts/ModalContext.tsx | 76 +++++++++++++++++++ 4 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 src/components/shared/Modal/Modal.module.scss create mode 100644 src/components/shared/Modal/Modal.tsx create mode 100644 src/contexts/ModalContext.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 48369e70..b9722144 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import localFont from 'next/font/local'; import './globals.css'; +import { ModalContextProvider } from '@contexts/ModalContext'; import StoreProvider from '@providers/StoreProvider'; import TanstackQueryProvider from '@providers/TanstackQueryProvider'; @@ -32,9 +33,12 @@ export default function RootLayout({ - {children} + + {children} + +
); diff --git a/src/components/shared/Modal/Modal.module.scss b/src/components/shared/Modal/Modal.module.scss new file mode 100644 index 00000000..48ea0d9d --- /dev/null +++ b/src/components/shared/Modal/Modal.module.scss @@ -0,0 +1,17 @@ +.container { + display: flex; + position: fixed; + z-index: var(--modal-zindex); + top: 50%; + left: 50%; + box-sizing: border-box; + flex-direction: column; + align-items: center; + width: 280px; + height: 220px; + padding: 24px; + overflow: hidden; + transform: translate(-50%, -50%); + border-radius: 10px; + background-color: var(--white); +} diff --git a/src/components/shared/Modal/Modal.tsx b/src/components/shared/Modal/Modal.tsx new file mode 100644 index 00000000..f9b98fed --- /dev/null +++ b/src/components/shared/Modal/Modal.tsx @@ -0,0 +1,53 @@ +'use client'; + +import classNames from 'classnames/bind'; + +// eslint-disable-next-line import/no-cycle +import useModal from '@contexts/ModalContext'; +import useOutsideClick from '@hooks/useOutsideClick'; +import Button from '@shared/button/Button'; +import Dimmed from '@shared/dimmed/Dimmed'; +import Spacing from '@shared/spacing/Spacing'; +import Text from '@shared/text/Text'; + +import styles from './Modal.module.scss'; + +const cx = classNames.bind(styles); + +interface ModalProps { + open: boolean + title: React.ReactNode + description: React.ReactNode + topButtonLabel: React.ReactNode + bottomButtonLabel: React.ReactNode + onTopButtonClick: () => void + onBottomButtonClick: () => void +} + +function Modal({ + // eslint-disable-next-line max-len + open, title, description, topButtonLabel, bottomButtonLabel, onTopButtonClick, onBottomButtonClick, +}: ModalProps) { + const { close } = useModal(); + const modalRef = useOutsideClick(close); + + if (open === false) { + return null; + } + + return ( + +
+ {title} + + {description} + + + + +
+ + ); +} + +export default Modal; diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx new file mode 100644 index 00000000..5e6399e0 --- /dev/null +++ b/src/contexts/ModalContext.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { + ComponentProps, createContext, useCallback, useMemo, useState, useContext, +} from 'react'; +import { createPortal } from 'react-dom'; + +// eslint-disable-next-line import/no-cycle +import Modal from '@shared/Modal/Modal'; + +type ModalProps = ComponentProps; +type ModalOptions = Omit; + +interface ModalContextValue { + open: (options: ModalOptions) => void + close: () => void +} + +const defaultValues: ModalProps = { + open: false, + title: null, + description: null, + topButtonLabel: null, + bottomButtonLabel: null, + onTopButtonClick: () => { }, + onBottomButtonClick: () => { }, +}; + +const ModalContext = createContext(undefined); + +export function ModalContextProvider({ children }: { children: React.ReactNode }) { + const [modalState, setModalState] = useState(defaultValues); + + const PORTAL_ROOT = typeof window == null ? null : document.getElementById('portal-root'); + + const close = useCallback(() => { + setModalState(defaultValues); + }, []); + + // eslint-disable-next-line max-len + const open = useCallback(({ onTopButtonClick, onBottomButtonClick, ...options }: ModalOptions) => { + setModalState({ + ...options, + onTopButtonClick: () => { + close(); + onTopButtonClick(); + }, + onBottomButtonClick: () => { + close(); + onBottomButtonClick(); + }, + open: true, + }); + }, [close]); + + const values = useMemo(() => { return { open, close }; }, [open, close]); + + return ( + + {children} + {PORTAL_ROOT != null ? createPortal(, PORTAL_ROOT) : null} + + ); +} + +function useModal() { + const values = useContext(ModalContext); + + if (values == null) { + throw new Error('ModalContext 내부에서 사용해주세요'); + } + + return values; +} + +export default useModal; From 0aa0fb3e568ed110f6633ef62631041706c0e09c Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 01:58:03 +0900 Subject: [PATCH 6/9] =?UTF-8?q?test:=20Modal=20storybook=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91=20#41?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/shared/Modal/Modal.stories.tsx | 47 +++++ src/contexts/ModalContext.tsx | 2 +- yarn.lock | 185 +++++++++++++++++- 4 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 src/components/shared/Modal/Modal.stories.tsx diff --git a/package.json b/package.json index 78a0249e..020622c4 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "jsdom": "^23.0.1", "sass": "^1.69.6", "storybook": "^7.6.6", + "storybook-react-context": "^0.6.0", "stylelint": "^16.1.0", "stylelint-config-property-sort-order-smacss": "^10.0.0", "stylelint-config-standard-scss": "^12.0.0", diff --git a/src/components/shared/Modal/Modal.stories.tsx b/src/components/shared/Modal/Modal.stories.tsx new file mode 100644 index 00000000..25e99fd0 --- /dev/null +++ b/src/components/shared/Modal/Modal.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import { withReactContext } from 'storybook-react-context'; + +import { ModalContext } from '@contexts/ModalContext'; + +import Modal from './Modal'; + +const meta = { + title: 'Shared/Modal', + decorators: [ + withReactContext({ + Context: ModalContext, + initialState: { + open: true, + title: '탈퇴하시겠습니까?', + description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?', + topButtonLabel: '예', + bottomButtonLabel: '아니오', + onTopButtonClick: () => { }, + onBottomButtonClick: () => { }, + }, + }), + ], + component: Modal, + parameters: { + }, + tags: ['autodocs'], + argTypes: { + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const normal: Story = { + args: { + open: true, + title: '탈퇴하시겠습니까?', + description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?', + topButtonLabel: '예', + bottomButtonLabel: '아니오', + onTopButtonClick: () => { }, + onBottomButtonClick: () => { }, + }, +}; diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx index 5e6399e0..49e41a09 100644 --- a/src/contexts/ModalContext.tsx +++ b/src/contexts/ModalContext.tsx @@ -26,7 +26,7 @@ const defaultValues: ModalProps = { onBottomButtonClick: () => { }, }; -const ModalContext = createContext(undefined); +export const ModalContext = createContext(undefined); export function ModalContextProvider({ children }: { children: React.ReactNode }) { const [modalState, setModalState] = useState(defaultValues); diff --git a/yarn.lock b/yarn.lock index 4d25928f..ba912dfe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2249,6 +2249,46 @@ dependencies: memoizerific "^1.11.3" +"@storybook/addons@^6.3.6": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.16.tgz#07e8f2205f86fa4c9dada719e3e096cb468e3cdd" + integrity sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ== + dependencies: + "@storybook/api" "6.5.16" + "@storybook/channels" "6.5.16" + "@storybook/client-logger" "6.5.16" + "@storybook/core-events" "6.5.16" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.16" + "@storybook/theming" "6.5.16" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + +"@storybook/api@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.16.tgz#897915b76de05587fd702951d5d836f708043662" + integrity sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA== + dependencies: + "@storybook/channels" "6.5.16" + "@storybook/client-logger" "6.5.16" + "@storybook/core-events" "6.5.16" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.16" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.16" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/blocks@7.6.6", "@storybook/blocks@^7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.6.6.tgz#19bde920298b16ac31525ae321f15912f102fe8c" @@ -2343,6 +2383,15 @@ webpack-hot-middleware "^2.25.1" webpack-virtual-modules "^0.5.0" +"@storybook/channels@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.16.tgz#3fb9a3b5666ecb951a2d0cf8b0699b084ef2d3c6" + integrity sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/channels@7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.6.tgz#c3de381a88897ae62043430a9c469aa37c0de41d" @@ -2402,6 +2451,14 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/client-logger@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.16.tgz#955cc46b389e7151c9eb1585a75e6a0605af61a1" + integrity sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + "@storybook/client-logger@7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.6.tgz#a8bc9568a1763c34d16d7154498bea971a181b06" @@ -2482,6 +2539,13 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" +"@storybook/core-events@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.16.tgz#b1c265dac755007dae172d9d4b72656c9e5d7bb3" + integrity sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g== + dependencies: + core-js "^3.8.2" + "@storybook/core-events@7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.6.tgz#64b911db989acc05058e45400a2f8bad602113cd" @@ -2570,6 +2634,13 @@ recast "^0.23.1" ts-dedent "^2.0.0" +"@storybook/csf@0.0.2--canary.4566f4d.1": + version "0.0.2--canary.4566f4d.1" + resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327" + integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ== + dependencies: + lodash "^4.17.15" + "@storybook/csf@^0.0.1": version "0.0.1" resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6" @@ -2800,6 +2871,17 @@ type-fest "~2.19" util-deprecate "^1.0.2" +"@storybook/router@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.16.tgz#28fb4d34e8219351a40bee1fc94dcacda6e1bd8b" + integrity sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ== + dependencies: + "@storybook/client-logger" "6.5.16" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + "@storybook/router@7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.6.tgz#f97e77297eb4f17b2d4fb42bfcbc4132dac7e529" @@ -2809,6 +2891,14 @@ memoizerific "^1.11.3" qs "^6.10.0" +"@storybook/semver@^7.3.2": + version "7.3.2" + resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" + integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg== + dependencies: + core-js "^3.6.5" + find-up "^4.1.0" + "@storybook/telemetry@7.6.6", "@storybook/telemetry@^7.1.0": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.6.6.tgz#c317e61385bca02b877ed7a8d5940d8f832d0f47" @@ -2841,6 +2931,16 @@ chai "^4.3.7" util "^0.12.4" +"@storybook/theming@6.5.16": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.16.tgz#b999bdb98945b605b93b9dfdf7408535b701e2aa" + integrity sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ== + dependencies: + "@storybook/client-logger" "6.5.16" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + "@storybook/theming@7.6.6": version "7.6.6" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.6.tgz#9eb190982c7e3f6f1383bfdf38a24c677d1803ee" @@ -3188,6 +3288,11 @@ resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f" integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA== +"@types/is-function@^1.0.0": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.3.tgz#548f851db5d30a12abeea2569ba75890dbf89425" + integrity sha512-/CLhCW79JUeLKznI6mbVieGbl4QU5Hfn+6udw1YHZoofASjbQ5zaP5LzAUZYDpRYEjS4/P+DhEgyJ/PQmGGTWw== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.6" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7" @@ -3370,6 +3475,11 @@ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.7.tgz#b14cebc75455eeeb160d5fe23c2fcc0c64f724d8" integrity sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g== +"@types/webpack-env@^1.16.0": + version "1.18.4" + resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.4.tgz#62879b0a9c653f9b1172d403b882f2045ecce032" + integrity sha512-I6e+9+HtWADAWeeJWDFQtdk4EVSAbj6Rtz4q8fJ7mSr1M0jzlFcs8/HZ+Xb5SHzVm1dxH7aUiI+A8kA8Gcrm0A== + "@types/yargs-parser@*": version "21.0.3" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15" @@ -4830,6 +4940,11 @@ core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.34.0.tgz#981e462500708664c91b827a75b011f04a8134a0" integrity sha512-pmhivkYXkymswFfbXsANmBAewXx86UBfmagP+w0wkK06kLsLlTK5oQmsURPivzMkIBQiYq2cjamcZExIwlFQIg== +core-js@^3.6.5, core-js@^3.8.2: + version "3.35.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.35.0.tgz#58e651688484f83c34196ca13f099574ee53d6b4" + integrity sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg== + core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -5266,6 +5381,11 @@ dom-serializer@^1.0.1: domhandler "^4.2.0" entities "^2.0.0" +dom-walk@^0.1.0: + version "0.1.2" + resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" + integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== + domain-browser@^4.22.0: version "4.23.0" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.23.0.tgz#427ebb91efcb070f05cffdfb8a4e9a6c25f8c94b" @@ -6519,6 +6639,14 @@ global-prefix@^3.0.0: kind-of "^6.0.2" which "^1.3.1" +global@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" + integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== + dependencies: + min-document "^2.19.0" + process "^0.11.10" + globals@^11.1.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" @@ -6994,6 +7122,11 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== +is-function@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08" + integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ== + is-generator-function@^1.0.10, is-generator-function@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72" @@ -7075,7 +7208,7 @@ is-potential-custom-element-name@^1.0.1: resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ== -is-regex@^1.1.4: +is-regex@^1.1.2, is-regex@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg== @@ -7183,6 +7316,11 @@ isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg== +isobject@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" + integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== + istanbul-lib-coverage@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756" @@ -7843,6 +7981,13 @@ mimic-response@^3.1.0: resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== +min-document@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" + integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ== + dependencies: + dom-walk "^0.1.0" + min-indent@^1.0.0, min-indent@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" @@ -9060,6 +9205,14 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" +react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + react@^18: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -9179,6 +9332,11 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== +regenerator-runtime@^0.13.7: + version "0.13.11" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" + integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== + regenerator-runtime@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" @@ -9781,11 +9939,20 @@ stop-iteration-iterator@^1.0.0: dependencies: internal-slot "^1.0.4" -store2@^2.14.2: +store2@^2.12.0, store2@^2.14.2: version "2.14.2" resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== +storybook-react-context@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/storybook-react-context/-/storybook-react-context-0.6.0.tgz#06c7b48dc95f4619cf12e59429305fbd6f2b1373" + integrity sha512-6IOUbSoC1WW68x8zQBEh8tZsVXjEvOBSJSOhkaD9o8IF9caIg/o1jnwuGibdyAd47ARN6g95O0N0vFBjXcB7pA== + dependencies: + "@storybook/addons" "^6.3.6" + is-plain-object "^5.0.0" + react "^17.0.2" + storybook@^7.6.6: version "7.6.6" resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.6.6.tgz#df0b7cd268adc6178686179ef020b1b12563d1e3" @@ -10199,6 +10366,20 @@ tar@^6.2.0: mkdirp "^1.0.3" yallist "^4.0.0" +telejson@^6.0.8: + version "6.0.8" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7" + integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== + dependencies: + "@types/is-function" "^1.0.0" + global "^4.4.0" + is-function "^1.0.2" + is-regex "^1.1.2" + is-symbol "^1.0.3" + isobject "^4.0.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + telejson@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.2.0.tgz#3994f6c9a8f8d7f2dba9be2c7c5bbb447e876f32" From 2b91b53565bc17f952171701e92d0643b2740743 Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 02:39:58 +0900 Subject: [PATCH 7/9] chore: resolve build error --- src/contexts/ModalContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx index 49e41a09..c3a9f45e 100644 --- a/src/contexts/ModalContext.tsx +++ b/src/contexts/ModalContext.tsx @@ -31,7 +31,7 @@ export const ModalContext = createContext(undefin export function ModalContextProvider({ children }: { children: React.ReactNode }) { const [modalState, setModalState] = useState(defaultValues); - const PORTAL_ROOT = typeof window == null ? null : document.getElementById('portal-root'); + const PORTAL_ROOT = typeof window !== 'undefined' ? document.getElementById('portal-root') : null; const close = useCallback(() => { setModalState(defaultValues); From 6c891fa95ad6e9f1d5eca2a24267e8ea69837ee4 Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 02:48:23 +0900 Subject: [PATCH 8/9] =?UTF-8?q?rename:=20dimmed=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/{Dimmed => dimmed}/Dimmed.module.scss | 0 src/components/shared/{Dimmed => dimmed}/Dimmed.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/shared/{Dimmed => dimmed}/Dimmed.module.scss (100%) rename src/components/shared/{Dimmed => dimmed}/Dimmed.tsx (100%) diff --git a/src/components/shared/Dimmed/Dimmed.module.scss b/src/components/shared/dimmed/Dimmed.module.scss similarity index 100% rename from src/components/shared/Dimmed/Dimmed.module.scss rename to src/components/shared/dimmed/Dimmed.module.scss diff --git a/src/components/shared/Dimmed/Dimmed.tsx b/src/components/shared/dimmed/Dimmed.tsx similarity index 100% rename from src/components/shared/Dimmed/Dimmed.tsx rename to src/components/shared/dimmed/Dimmed.tsx From 0d3c9dd108f5b0c1008164034ae40e60746e95e8 Mon Sep 17 00:00:00 2001 From: wookki Date: Sun, 7 Jan 2024 03:26:22 +0900 Subject: [PATCH 9/9] =?UTF-8?q?chore:=20Flex=20classname=20prop=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/flex/Flex.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/shared/flex/Flex.tsx b/src/components/shared/flex/Flex.tsx index 0f889209..d577ae83 100644 --- a/src/components/shared/flex/Flex.tsx +++ b/src/components/shared/flex/Flex.tsx @@ -5,11 +5,10 @@ interface FlexProps { justify?: CSSProperties['justifyContent'] direction?: CSSProperties['flexDirection'] children: React.ReactNode - className?: string } function Flex({ - align, justify, direction, children, className, + align, justify, direction, children, }: FlexProps) { const styles = useMemo(() => { return { @@ -18,7 +17,7 @@ function Flex({ }, [align, justify, direction]); return ( -
+
{children}
);