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

.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

@@ -30,7 +30,7 @@ function MyComponent() {
 
 ```
 
-[Container 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-container--docs)
+[Container 스토리북 보러가기](https://65068c38c8cef469d3e5e634-vmefemwmwj.chromatic.com/?path=/docs/components-container--docs)
 
 ## Grid
 
@@ -60,7 +60,7 @@ function MyComponent() {
 
 ```
 
-[Grid 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-grid--docs)
+[Grid 스토리북 보러가기](https://65068c38c8cef469d3e5e634-vmefemwmwj.chromatic.com/?path=/docs/components-grid--docs)
 
 ## Flex
 
@@ -82,5 +82,27 @@ function MyComponent() {
 }
 
 ```
+[Flex 스토리북 보러가기](https://65068c38c8cef469d3e5e634-vmefemwmwj.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-vmefemwmwj.chromatic.com/?path=/docs/components-splitpane--docs)
 
-[Flex 스토리북 보러가기](https://65068c38c8cef469d3e5e634-otupvlrdhy.chromatic.com/?path=/docs/components-flex--docs)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gabrielyoon7/layout-component",
-  "version": "0.0.5",
+  "version": "0.0.10",
   "description": "A layout component for React (with woowacourse)",
   "type": "module",
   "main": "dist/index.umd.cjs",

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/SplitPane/SplitPane.stories.tsx

@@ -0,0 +1,86 @@
+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 WrongChildren = (args: SplitPaneProps) => (
+  <SplitPane {...args}>
+    <div>
+      {loremIpsum}
+    </div>
+    <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>
+);

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

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+interface ResizablePaneProps {
+  minSize?: string;
+  maxSize?: string;
+}
+
+export const SplitPaneContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+`;
+
+export const ResizablePane = styled.div<ResizablePaneProps>`
+  overflow: auto;
+  min-width: ${({minSize}) => minSize || '0'};
+  max-width: ${({maxSize}) => maxSize || '100%'};
+`;
+
+export const Resizer = styled.div`
+  width: 3px;
+  cursor: col-resize;
+`;

src/lib/layouts/SplitPane/SplitPane.tsx

@@ -0,0 +1,39 @@
+import {ReactNode} from 'react';
+import {ResizablePane, Resizer, SplitPaneContainer} from "./SplitPane.styles.ts";
+import {useSplitPane} from "./useSplitPane.ts";
+
+export interface SplitPaneProps {
+  defaultSize: string;
+  minSize?: string;
+  maxSize?: string;
+  children?: ReactNode[];
+}
+
+const SplitPane = ({defaultSize, minSize, maxSize, children}: SplitPaneProps) => {
+  const {
+    containerRef,
+    leftPaneRef,
+    rightPaneRef,
+    paneSize,
+    handleMouseDown,
+  } = useSplitPane(defaultSize, minSize, maxSize);
+
+
+  return (
+    <SplitPaneContainer ref={containerRef}>
+      {children && children?.length === 2 ? (
+        <>
+          <ResizablePane style={{flexBasis: paneSize}} minSize={minSize} maxSize={maxSize} ref={leftPaneRef}>
+            {children[0]}
+          </ResizablePane>
+          <Resizer onMouseDown={handleMouseDown}/>
+          <ResizablePane style={{flex: 1}} minSize={minSize} maxSize={maxSize} ref={rightPaneRef}>
+            {children[1]}
+          </ResizablePane>
+        </>
+      ) : <div>반드시 2개의 컴포넌트가 존재해야 합니다.</div>}
+    </SplitPaneContainer>
+  );
+}
+
+export default SplitPane;

src/lib/layouts/SplitPane/index.ts

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

src/lib/layouts/SplitPane/useSplitPane.ts

@@ -0,0 +1,67 @@
+import {useEffect, useRef, useState} from 'react';
+
+export const useSplitPane = (defaultSize: string, minSize?: string, maxSize?: string) => {
+  const [paneSize, setPaneSize] = useState(defaultSize);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const leftPaneRef = useRef<HTMLDivElement | null>(null);
+  const rightPaneRef = useRef<HTMLDivElement | null>(null);
+
+  // 패널 크기 조절 시작
+  const handleMouseDown = () => {
+    setIsResizing(true);
+  };
+
+  // 패널 크기 조절 종료
+  const handleMouseUp = () => {
+    setIsResizing(false);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    // 패널 사이즈가 변경중이라면
+    if (!isResizing || !containerRef.current) {
+      return;
+    }
+
+    // 패널의 양쪽 끝의 x 좌표를 구함
+    const leftPaneLeftX = leftPaneRef.current?.getBoundingClientRect().left || 0;
+    const rightPanelRightX = rightPaneRef.current?.getBoundingClientRect().right || 0;
+
+    const mouseX = e.clientX;
+
+    // 마우스 위치가 패널 범위를 벗어나면 종료
+    if (mouseX < leftPaneLeftX || mouseX > rightPanelRightX) {
+      return;
+    }
+
+    const newPaneSize = `${((mouseX - leftPaneLeftX) / (rightPanelRightX - leftPaneLeftX)) * 100}%`;
+
+    // 최소 크기와 최대 크기를 체크하고 업데이트
+    if ((minSize && newPaneSize < minSize) || (maxSize && newPaneSize > maxSize)) {
+      return;
+    }
+
+    setPaneSize(newPaneSize);
+  };
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    // 메모리 누수 방지
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing]);
+
+  return {
+    containerRef,
+    leftPaneRef,
+    rightPaneRef,
+    paneSize,
+    isResizing,
+    handleMouseDown,
+  };
+}