[고급 레이아웃 컴포넌트] 가브리엘(윤주현) 미션 제출합니다.

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy static content to Pages
 
 on:
   push:
-    branches: ["main", "gabrielyoon7", "step1", "step2"]
+    branches: [ "step1", "step2" ]
 
   workflow_dispatch:
 

README.md

@@ -10,6 +10,9 @@ npm install @gabrielyoon7/layout-component
 yarn add @gabrielyoon7/layout-component
 ```
 
+[스토리북](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/)
+[npm](https://www.npmjs.com/package/@gabrielyoon7/layout-component)
+
 ## Container
 
 ### 소개
@@ -30,7 +33,7 @@ function MyComponent() {
 
 ```
 
-[Container 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-container--docs)
+[Container 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-container--docs)
 
 ## Grid
 
@@ -60,7 +63,7 @@ function MyComponent() {
 
 ```
 
-[Grid 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-grid--docs)
+[Grid 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-grid--docs)
 
 ## Flex
 
@@ -83,4 +86,27 @@ function MyComponent() {
 
 ```
 
-[Flex 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-flex--docs)
+[Flex 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-flex--docs)
+
+## SplitPane
+
+### 소개
+
+이 컴포넌트는 SplitPane 레이아웃을 구현하기 위한 React 컴포넌트입니다. 이 컴포넌트를 사용하면 UI 디자인에서 SplitPane 레이아웃을 쉽게 구현할 수 있습니다.
+
+```typescript jsx
+import {SplitPane} from "@gabrielyoon7/layout-component";
+
+function MyComponent() {
+  return (
+    <SplitPane defaultSize="50%" minSize="10%" maxSize="90%">
+      <div style={{backgroundColor: 'yellow', height: '100px'}}/>
+      <div style={{backgroundColor: 'yellowgreen', height: '100px'}}/>
+    </SplitPane>
+  )
+}
+
+```
+
+[SplitPane 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-splitpane--docs)
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gabrielyoon7/layout-component",
-  "version": "0.0.5",
+  "version": "0.0.11",
   "description": "A layout component for React (with woowacourse)",
   "type": "module",
   "main": "dist/index.umd.cjs",
@@ -21,7 +21,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -53,6 +54,7 @@
     "storybook": "^7.4.2",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.5.3"
+    "vite-plugin-dts": "^3.5.3",
+    "vitest": "^0.34.6"
   }
 }

src/lib/index.tsx

@@ -1,3 +1,4 @@
 export {default as Container} from "./layouts/Container/Container";
 export {default as Flex} from "./layouts/Flex/Flex";
 export {default as Grid} from "./layouts/Grid/Grid";
+export {default as SplitPane} from "./layouts/SplitPane/SplitPane";

src/lib/layouts/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import React, {Component, ErrorInfo, ReactNode} from "react";
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo?: ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+    this.setState({errorInfo});
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <h1>무언가 잘못됐어요...!</h1>
+          <p>{this.state.error?.toString()}</p>
+          <button onClick={() => this.setState({hasError: false})}>다시 시도하기</button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/lib/layouts/SplitPane/SplitPane.stories.tsx

@@ -0,0 +1,130 @@
+import type {Meta} from "@storybook/react";
+import SplitPane from "./index.ts";
+import {SplitPaneProps} from "./SplitPane.tsx";
+
+const meta = {
+  title: "Components/SplitPane",
+  component: SplitPane,
+  tags: ["autodocs"],
+  args: {
+    defaultSize: "20%",
+    minSize: "10%",
+    maxSize: "90%",
+  },
+  argTypes: {
+    defaultSize: {
+      control: {
+        type: "text",
+      },
+      description: "SplitPane의 기본 사이즈를 설정합니다.",
+    },
+    minSize: {
+      control: {
+        type: "text",
+      },
+      description: "SplitPane 좌측 영역의 최소 사이즈를 설정합니다."
+    },
+    maxSize: {
+      control: {
+        type: "text",
+      },
+      description: "SplitPane 좌측 영역의 최대 사이즈를 설정합니다."
+    }
+  },
+} satisfies Meta<typeof SplitPane>;
+
+export default meta;
+
+const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate nunc eu tempor tempor. Maecenas ipsum nisi, placerat sit amet arcu eu, egestas luctus orci. Etiam sed ante eu metus aliquet dapibus. Nullam eget dolor diam. Praesent et lobortis massa. Proin ornare, risus quis pretium vulputate, lacus lacus vehicula ex, eleifend vestibulum sapien augue et quam. Nulla id augue felis. Quisque vitae elit felis. Vestibulum vitae rhoncus elit. Duis imperdiet tortor vitae tellus vulputate, et sagittis est ullamcorper. Fusce dignissim ultricies tristique. Nullam congue mi ut venenatis pellentesque. Proin egestas sodales volutpat.`;
+
+export const Default = (args: SplitPaneProps) => (
+  <SplitPane {...args}>
+    <div style={{backgroundColor: 'yellow', height: '100px'}}/>
+    <div style={{backgroundColor: 'yellowgreen', height: '100px'}}/>
+  </SplitPane>
+);
+
+export const Texts = (args: SplitPaneProps) => (
+  <SplitPane {...args}>
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);
+
+export const Duplicated = (args: SplitPaneProps) => (
+  <SplitPane {...args}>
+    <div>
+      {loremIpsum}
+    </div>
+    <SplitPane {...args}>
+      <div>
+        {loremIpsum}
+      </div>
+      <div>
+        {loremIpsum}
+      </div>
+    </SplitPane>
+  </SplitPane>
+);
+
+export const WrongChildren = (args: SplitPaneProps) => (
+  <SplitPane {...args}>
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);
+
+export const WrongArgs = () => (
+  <SplitPane defaultSize="20%" minSize="10%" maxSize="110%">
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);
+
+export const WrongArgs2 = () => (
+  <SplitPane defaultSize="20%" minSize="10%" maxSize="10%">
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);
+
+export const WrongArgs3 = () => (
+  <SplitPane defaultSize="20" minSize="10%" maxSize="90%">
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);
+
+export const WrongArgs4 = () => (
+  <SplitPane defaultSize="20%" minSize="1a0%" maxSize="90%">
+    <div>
+      {loremIpsum}
+    </div>
+    <div>
+      {loremIpsum}
+    </div>
+  </SplitPane>
+);

src/lib/layouts/SplitPane/SplitPane.styles.ts

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+interface ResizablePaneProps {
+  $size: string;
+}
+
+export const SplitPaneContainer = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+export const ResizablePane = styled.div<ResizablePaneProps>`
+  overflow: auto;
+  width: ${({$size}) => $size};
+`;
+
+export const Resizer = styled.div`
+  padding: 0px 1px;
+  margin: 0px 2px;
+  border-left: 1px solid #b5b5b5;
+  border-right: 1px solid #b5b5b5;
+  cursor: col-resize;
+`;

src/lib/layouts/SplitPane/SplitPane.tsx

@@ -0,0 +1,21 @@
+import {ReactNode} from 'react';
+import ErrorBoundary from "../ErrorBoundary.tsx";
+import SplitPaneRenderer from "./SplitPaneRenderer.tsx";
+
+export interface SplitPaneProps {
+  defaultSize: string;
+  minSize: string;
+  maxSize: string;
+  children: ReactNode[];
+}
+
+const SplitPane = ({defaultSize, minSize, maxSize, children}: SplitPaneProps) => {
+
+  return (
+    <ErrorBoundary>
+      <SplitPaneRenderer defaultSize={defaultSize} minSize={minSize} maxSize={maxSize}>{children}</SplitPaneRenderer>
+    </ErrorBoundary>
+  );
+}
+
+export default SplitPane;

src/lib/layouts/SplitPane/SplitPaneRenderer.tsx

@@ -0,0 +1,31 @@
+import {useSplitPane} from "./useSplitPane.ts";
+import {checkValidProps,} from "./validate.ts";
+import {SplitPaneProps} from "./SplitPane.tsx";
+import {ResizablePane, Resizer, SplitPaneContainer} from "./SplitPane.styles.ts";
+
+function SplitPaneRenderer({defaultSize, minSize, maxSize, children}: SplitPaneProps) {
+
+  const {
+    containerRef,
+    leftPaneRef,
+    rightPaneRef,
+    paneSize,
+    handleMouseDown,
+  } = useSplitPane(defaultSize, minSize, maxSize);
+
+  checkValidProps({defaultSize, minSize, maxSize, children});
+
+  return (
+    <SplitPaneContainer ref={containerRef}>
+      <ResizablePane $size={paneSize} ref={leftPaneRef}>
+        {children[0]}
+      </ResizablePane>
+      <Resizer onMouseDown={handleMouseDown}/>
+      <ResizablePane $size={`calc(100% - ${paneSize} - 3px)`} ref={rightPaneRef}>
+        {children[1]}
+      </ResizablePane>
+    </SplitPaneContainer>
+  );
+}
+
+export default SplitPaneRenderer;

src/lib/layouts/SplitPane/constants.ts

@@ -0,0 +1,10 @@
+export const ERROR_MESSAGE_CHECK_ENDS_WITH_PERCENTAGE = 'defaultSize, minSize, maxSize는 반드시 %로 끝나야 합니다.';
+export const ERROR_MESSAGE_CHECK_DEFAULT_SIZE_LESS_THAN_MIN_SIZE = 'defaultSize는 minSize보다 작을 수 없습니다.';
+export const ERROR_MESSAGE_CHECK_DEFAULT_SIZE_GREATER_THAN_MAX_SIZE = 'defaultSize는 maxSize보다 클 수 없습니다.';
+export const ERROR_MESSAGE_CHECK_CHILDREN_LENGTH = 'SplitPane 컴포넌트의 children은 반드시 2개여야 합니다.';
+export const ERROR_MESSAGE_CHECK_DEFAULT_SIZE = 'defaultSize는 0% ~ 100% 사이의 값이어야 합니다.';
+export const ERROR_MESSAGE_CHECK_MIN_SIZE = 'minSize는 0% ~ 100% 사이의 값이어야 합니다.';
+export const ERROR_MESSAGE_CHECK_MAX_SIZE = 'maxSize는 0% ~ 100% 사이의 값이어야 합니다.';
+export const ERROR_MESSAGE_CHECK_DEFAULT_NUMBER_PERCENTAGE = 'defaultSize는 숫자% 형태여야 합니다.';
+export const ERROR_MESSAGE_CHECK_MIN_SIZE_NUMBER_PERCENTAGE = 'minSize는 숫자% 형태여야 합니다.';
+export const ERROR_MESSAGE_CHECK_MAX_SIZE_NUMBER_PERCENTAGE = 'maxSize는 숫자% 형태여야 합니다.';

src/lib/layouts/SplitPane/index.ts

@@ -0,0 +1,3 @@
+import SplitPane from "./SplitPane.tsx";
+
+export default SplitPane;