Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

공통 컴포넌트: Drawer #56

Merged
merged 6 commits into from
Jan 8, 2024
Merged

공통 컴포넌트: Drawer #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ab78ee7
refactor: root 이름 변경
bottlewook Jan 8, 2024
a95775e
feat: useMountTransition 훅 제작
bottlewook Jan 8, 2024
fd41ed4
feat: Drawer 컴포넌트 제작
bottlewook Jan 8, 2024
5ced22c
feat: vitest 경로 설정
bottlewook Jan 8, 2024
1230fbc
fix: drawer 루트 설정
bottlewook Jan 8, 2024
2a37b8d
chore: lint 수정
bottlewook Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,17 @@
},
"dependencies": {
"@reduxjs/toolkit": "^2.0.1",
"@storybook/test": "^7.6.6",
"@tanstack/query-core": "^4",
"@tanstack/react-query": "^4",
"@tanstack/react-query-devtools": "^4",
"@vitejs/plugin-react": "^4.2.1",
"axios": "^1.6.2",
"classnames": "^2.5.1",
"next": "^13",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.49.2",
"react-redux": "^9.0.4",
"swiper": "^10",
"vitest": "^1.1.1"
"swiper": "^10"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.6.6",
Expand All @@ -41,6 +38,7 @@
"@storybook/blocks": "^7.6.6",
"@storybook/nextjs": "^7.6.6",
"@storybook/react": "^7.6.6",
"@storybook/test": "^7.6.7",
"@tanstack/eslint-plugin-query": "^5.12.1",
"@testing-library/react": "^14.1.2",
"@types/jest": "^29.5.11",
Expand All @@ -49,6 +47,7 @@
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^6.15.0",
"@typescript-eslint/parser": "^6.15.0",
"@vitejs/plugin-react": "^4.2.1",
"chromatic": "^10.2.0",
"eslint": "^8",
"eslint-config-airbnb": "^19.0.4",
Expand All @@ -58,14 +57,15 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.15",
"jsdom": "^23.0.1",
"jsdom": "^23.2.0",
"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",
"typescript": "^5"
"typescript": "^5",
"vitest": "^1.1.3"
},
"readme": "ERROR: No README data found!",
"_id": "[email protected]"
Expand Down
5 changes: 3 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<html lang="ko">
<body className={pretendard.className}>
<TanstackQueryProvider>
<StoreProvider>
Expand All @@ -38,7 +38,8 @@ export default function RootLayout({
</ModalContextProvider>
</StoreProvider>
</TanstackQueryProvider>
<div id="portal-root" />
<div id="modal-root" />
<div id="drawer-root" />
</body>
</html>
);
Expand Down
85 changes: 85 additions & 0 deletions src/components/shared/drawer/Drawer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
.drawerContainer {
display: block;

$transition-speed: 0.3s;

width: 272px;

.drawer {
position: fixed;
z-index: 1000;
width: 272px;
height: 100%;
overflow: auto;
transition: transform $transition-speed ease;
background: #fff;
box-shadow: 0 0 15px rgb(0 0 0 / 50%);

&.left {
top: 0;
left: 0;
transform: translateX(-100%);
}

&.right {
top: 0;
right: 0;
transform: translateX(100%);
}

&.top {
top: 0;
right: 0;
left: 0;
width: 100%;
height: 40%;
transform: translateY(-100%);
}

&.bottom {
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
transform: translateY(100%);
}
}

&.in.open .left,
&.in.open .right {
transform: translateX(0);
}

&.in.open .top,
&.in.open .bottom {
transform: translateY(0);
}

&.open .drawer {
box-shadow: 0 0 15px rgb(0 0 0 / 50%);
}

.backdrop {
visibility: hidden;
position: fixed;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition:
opacity $transition-speed ease,
visibility $transition-speed ease;
opacity: 0;
background: rgb(0 0 0 / 50%);
pointer-events: none;
}

&.open .backdrop {
visibility: visible;
z-index: var(--dimmed-zindex);
opacity: 1;
pointer-events: auto;
}
}
64 changes: 64 additions & 0 deletions src/components/shared/drawer/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { createPortal } from 'react-dom';

import classNames from 'classnames/bind';

import useMountTransition from '@hooks/useMountTransition';

import styles from './Drawer.module.scss';

const cx = classNames.bind(styles);

interface DrawerProps {
isOpen: boolean,
children: React.ReactNode,
onClose: () => void,
className?: string,
position?: 'left' | 'right' | 'top' | 'bottom',
removeWhenClosed?: boolean
}

function Drawer({
isOpen,
children,
className,
position = 'right',
onClose,
removeWhenClosed = true,
}: DrawerProps) {
const isTransitioning = useMountTransition(isOpen, 300);
const DRAWER_ROOT = typeof window !== 'undefined' ? document.getElementById('drawer-root') : null;

if (removeWhenClosed && !isOpen) {
return null;
}

if (!isTransitioning && removeWhenClosed && !isOpen) {
return null;
}

if (DRAWER_ROOT == null) {
return null;
}

return createPortal(
<div
aria-hidden={isOpen ? 'false' : 'true'}
className={cx('drawerContainer', {
open: isOpen,
in: isTransitioning,
className,
})}
>
<div
className={cx('drawer', position, className)}
role="dialog"
>
{children}
</div>
<div className={cx('backdrop', className)} onClick={onClose} role="presentation" />
</div>,
DRAWER_ROOT,
);
}

export default Drawer;
4 changes: 2 additions & 2 deletions src/contexts/ModalContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const ModalContext = createContext<ModalContextValue | undefined>(undefin
export function ModalContextProvider({ children }: { children: React.ReactNode }) {
const [modalState, setModalState] = useState(defaultValues);

const PORTAL_ROOT = typeof window !== 'undefined' ? document.getElementById('portal-root') : null;
const MODAL_ROOT = typeof window !== 'undefined' ? document.getElementById('modal-root') : null;

const close = useCallback(() => {
setModalState(defaultValues);
Expand All @@ -58,7 +58,7 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
return (
<ModalContext.Provider value={values}>
{children}
{PORTAL_ROOT != null ? createPortal(<Modal {...modalState} />, PORTAL_ROOT) : null}
{MODAL_ROOT != null ? createPortal(<Modal {...modalState} />, MODAL_ROOT) : null}
</ModalContext.Provider>
);
}
Expand Down
22 changes: 22 additions & 0 deletions src/hooks/useMountTransition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useEffect, useState } from 'react';

const useMountTransition = (isMounted: boolean, unmountDelay: number) => {
const [isTransitioning, setIsTransitioning] = useState(false);

useEffect(() => {
let timeoutId: NodeJS.Timeout | undefined;

if (isMounted && !isTransitioning) {
setIsTransitioning(true);
} else if (!isMounted && isTransitioning) {
timeoutId = setTimeout(() => { return setIsTransitioning(false); }, unmountDelay);
}
return () => {
clearTimeout(timeoutId);
};
}, [unmountDelay, isMounted, isTransitioning]);

return isTransitioning;
};

export default useMountTransition;
1 change: 1 addition & 0 deletions src/stories/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';

// eslint-disable-next-line import/no-extraneous-dependencies
import { within, userEvent, expect } from '@storybook/test';

import { Page } from './Page';
Expand Down
3 changes: 0 additions & 3 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@
"@styles/*": [
"src/styles/*"
],
"@pages/*": [
"src/pages/*"
],
"@remote/*": [
"src/remote/*"
],
Expand Down
22 changes: 22 additions & 0 deletions vitest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
/* eslint-disable import/no-extraneous-dependencies */
import path from 'path';

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';

export default defineConfig({
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, './src') },
{ find: '@app', replacement: path.resolve(__dirname, './src/app') },
{ find: '@components', replacement: path.resolve(__dirname, './src/components') },
{ find: '@shared', replacement: path.resolve(__dirname, './src/components/shared') },
{ find: '@styles', replacement: path.resolve(__dirname, './src/styles') },
{ find: '@remote', replacement: path.resolve(__dirname, './src/remote') },
{ find: '@constants', replacement: path.resolve(__dirname, './src/constants') },
{ find: '@contexts', replacement: path.resolve(__dirname, './src/contexts') },
{ find: '@model', replacement: path.resolve(__dirname, './src/model') },
{ find: '@utils', replacement: path.resolve(__dirname, './src/utils') },
{ find: '@stores', replacement: path.resolve(__dirname, './src/stores') },
{ find: '@lib', replacement: path.resolve(__dirname, './src/lib') },
{ find: '@hooks', replacement: path.resolve(__dirname, './src/hooks') },
{ find: '@providers', replacement: path.resolve(__dirname, './src/providers') },
{ find: '@stories', replacement: path.resolve(__dirname, './src/stories') },
],
},
plugins: [react()],
test: {
environment: 'jsdom',
Expand Down
Loading
Loading