design(panel-sidebar): 패널 사이드바 디자인 적용한다 (#357)

blacktokkies · Aug 16, 2023 · af9011a · af9011a
1 parent 330f7f2
commit af9011a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/src/components/panel/PanelHeader.tsx b/src/components/panel/PanelHeader.tsx
@@ -8,6 +8,8 @@ import { SheetController } from '@/components/system/SheetController';
 import { Account, Menu } from '@/components/vectors';
 import { useOverlay } from '@/hooks/useOverlay';
 
+import { PanelSidebar } from './PanelSidebar';
+
 interface Props {
  panel: Panel;
 }
@@ -16,8 +18,8 @@ export function PanelHeader({ panel }: Props): JSX.Element {
 
  function handleMenuButtonClick(): void {
  overlay.open(({ close }) => (
- <SheetController aria-label="메뉴" close={close}>
- 메뉴
+ <SheetController aria-label="메뉴" close={close} type="left">
+ <PanelSidebar panel={panel} />
  </SheetController>
  ));
  }

diff --git a/src/components/panel/PanelSidebar.tsx b/src/components/panel/PanelSidebar.tsx
@@ -2,6 +2,8 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
+import { Clipboard } from '@/components/vectors';
+
 import { formatDateString } from '../home/PanelItem';
 
 interface Props {
@@ -10,20 +12,33 @@ interface Props {
 export function PanelSidebar({ panel }: Props): JSX.Element {
  const { id, title, author, createdAt } = panel;
  return (
- <div>
- <div>{title}</div>
- <div>{author}</div>
- <div>{formatDateString(createdAt)}</div>
- <button
- type="button"
- onClick={() => {
- window.navigator.clipboard.writeText(
- `${window.location.origin}/panel/${id}`,
- );
- }}
- >
- 패널 URL 복사하기
- </button>
+ <div className="flex flex-col justify-start w-[280px] divide-y divide-grey-light">
+ <div className="flex gap-4 p-5">
+ <span className="w-1 bg-primary" />
+ <div className="flex flex-col justify-start items-start">
+ <h2 className="text-grey-dark font-medium">{title}</h2>
+ <div className="text-grey-dark text-sm">{author}</div>
+ <div className="text-grey-dark text-sm">
+ {formatDateString(createdAt)}
+ </div>
+ </div>
+ </div>
+ <div className="flex flex-col py-2">
+ <button
+ className="flex gap-2 justify-start items-center py-[10px] px-5 hover:bg-grey-lighter"
+ type="button"
+ onClick={() => {
+ window.navigator.clipboard.writeText(
+ `${window.location.origin}/panel/${id}`,
+ );
+ }}
+ >
+ <div role="img" aria-label="메뉴 아이콘">
+ <Clipboard className="fill-grey-dark" />
+ </div>
+ <div>패널 URL 복사하기</div>
+ </button>
+ </div>
  </div>
  );
 }
diff --git a/src/components/system/SheetController.tsx b/src/components/system/SheetController.tsx
@@ -22,6 +22,7 @@ export function SheetController({
  type = 'bottom',
  close,
  children,
+ className = '',
  ...rest
 }: Props): JSX.Element {
  const sheetStyle = sheetStyles[type];
@@ -36,7 +37,7 @@ export function SheetController({
  <div
  ref={ref}
  role="complementary"
- className={`fixed ${sheetStyle}`}
+ className={`fixed bg-white shadow-3xl ${sheetStyle} ${className}`}
  {...rest}
  >
  {children}