From dc415631a86c963e5d889277ba03b8b01596c717 Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 15:39:04 +0900
Subject: [PATCH 1/5] feat: add first, last props to allow separator at the
 beginning and end

---
 packages/react/react/src/components/Separated/Separated.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/react/src/components/Separated/Separated.tsx b/packages/react/react/src/components/Separated/Separated.tsx
index 1f5adcbbb..3f362e30c 100644
--- a/packages/react/react/src/components/Separated/Separated.tsx
+++ b/packages/react/react/src/components/Separated/Separated.tsx
@@ -4,20 +4,24 @@ import { Children, Fragment, isValidElement, PropsWithChildren, ReactNode } from
 
 interface Props extends PropsWithChildren {
   with: ReactNode;
+  first?: boolean;
+  last?: boolean;
 }
 
-export function Separated({ children, with: separator }: Props) {
+export function Separated({ children, with: separator, first = false, last = false }: Props) {
   const childrenArray = Children.toArray(children).filter(isValidElement);
   const childrenLength = childrenArray.length;
 
   return (
     <>
+      {first && separator}
       {childrenArray.map((child, i) => (
         <Fragment key={i}>
           {child}
           {i + 1 !== childrenLength ? separator : null}
         </Fragment>
       ))}
+      {last && separator}
     </>
   );
 }

From fa3e05244c429c094e5ae7e09eb6fb23b064a8bf Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 15:42:23 +0900
Subject: [PATCH 2/5] feat: remove isValidElement filter to support rendering
 of all ReactNode types

---
 packages/react/react/src/components/Separated/Separated.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/react/src/components/Separated/Separated.tsx b/packages/react/react/src/components/Separated/Separated.tsx
index 3f362e30c..58098bd4b 100644
--- a/packages/react/react/src/components/Separated/Separated.tsx
+++ b/packages/react/react/src/components/Separated/Separated.tsx
@@ -1,6 +1,6 @@
 /** @tossdocs-ignore */
 /** @jsxImportSource react */
-import { Children, Fragment, isValidElement, PropsWithChildren, ReactNode } from 'react';
+import { Children, Fragment, PropsWithChildren, ReactNode } from 'react';
 
 interface Props extends PropsWithChildren {
   with: ReactNode;
@@ -9,7 +9,7 @@ interface Props extends PropsWithChildren {
 }
 
 export function Separated({ children, with: separator, first = false, last = false }: Props) {
-  const childrenArray = Children.toArray(children).filter(isValidElement);
+  const childrenArray = Children.toArray(children);
   const childrenLength = childrenArray.length;
 
   return (

From 67851af66024fd9f638f6a36e215a97451913e7a Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 15:43:11 +0900
Subject: [PATCH 3/5] feat: preserve original keys of children elements

---
 .../react/react/src/components/Separated/Separated.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/react/src/components/Separated/Separated.tsx b/packages/react/react/src/components/Separated/Separated.tsx
index 58098bd4b..d200df33f 100644
--- a/packages/react/react/src/components/Separated/Separated.tsx
+++ b/packages/react/react/src/components/Separated/Separated.tsx
@@ -1,6 +1,6 @@
 /** @tossdocs-ignore */
 /** @jsxImportSource react */
-import { Children, Fragment, PropsWithChildren, ReactNode } from 'react';
+import { Children, Fragment, isValidElement, PropsWithChildren, ReactNode } from 'react';
 
 interface Props extends PropsWithChildren {
   with: ReactNode;
@@ -15,10 +15,10 @@ export function Separated({ children, with: separator, first = false, last = fal
   return (
     <>
       {first && separator}
-      {childrenArray.map((child, i) => (
-        <Fragment key={i}>
+      {childrenArray.map((child, index) => (
+        <Fragment key={isValidElement(child) ? child.key : index}>
           {child}
-          {i + 1 !== childrenLength ? separator : null}
+          {index + 1 !== childrenLength && separator}
         </Fragment>
       ))}
       {last && separator}

From 8666ba458e2dc501e1382b405c34b8676844a885 Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 16:54:25 +0900
Subject: [PATCH 4/5] test: add tests for first, last props and ReactNode
 rendering

---
 .../src/components/Separated/index.spec.tsx   | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/packages/react/react/src/components/Separated/index.spec.tsx b/packages/react/react/src/components/Separated/index.spec.tsx
index 6fe1e86a1..cc281142e 100644
--- a/packages/react/react/src/components/Separated/index.spec.tsx
+++ b/packages/react/react/src/components/Separated/index.spec.tsx
@@ -34,4 +34,58 @@ describe('Separated', () => {
 
     expect(screen.queryByTestId(/separator/)).not.toBeInTheDocument();
   });
+
+  it('should render separator at the beginning when first prop is true', () => {
+    const CHILDREN_COUNT = 10;
+    const separator = <span data-testid="separator" />;
+    const children = Array.from({ length: CHILDREN_COUNT }, (_, i) => (
+      <div key={i} data-testid={i}>
+        container_{i}
+      </div>
+    ));
+
+    const { container } = render(
+      <Separated with={separator} first>
+        {children}
+      </Separated>
+    );
+
+    expect(container.firstChild).toHaveAttribute('data-testid', 'separator');
+    expect(screen.getAllByText(/container/)).toHaveLength(CHILDREN_COUNT);
+    expect(screen.getAllByTestId(/separator/)).toHaveLength(CHILDREN_COUNT);
+  });
+
+  it('should render separator at the end when last prop is true', () => {
+    const CHILDREN_COUNT = 10;
+    const separator = <span data-testid="separator" />;
+    const children = Array.from({ length: CHILDREN_COUNT }, (_, i) => (
+      <div key={i} data-testid={i}>
+        container_{i}
+      </div>
+    ));
+
+    const { container } = render(
+      <Separated with={separator} last>
+        {children}
+      </Separated>
+    );
+
+    expect(container.lastChild).toHaveAttribute('data-testid', 'separator');
+    expect(screen.getAllByText(/container/)).toHaveLength(CHILDREN_COUNT);
+    expect(screen.getAllByTestId(/separator/)).toHaveLength(CHILDREN_COUNT);
+  });
+
+  it('should render all ReactNode types', () => {
+    const separator = <span data-testid="separator" />;
+
+    render(
+      <Separated with={separator}>
+        string
+        {0}
+        string
+      </Separated>
+    );
+
+    expect(screen.getAllByTestId(/separator/)).toHaveLength(2);
+  });
 });

From 397626a8e5a1fd7805845912b296b1d0887acde2 Mon Sep 17 00:00:00 2001
From: metacode22 <alohajune22@gmail.com>
Date: Sun, 1 Sep 2024 17:03:28 +0900
Subject: [PATCH 5/5] docs: update README with new props and example

---
 .../src/components/Separated/Seperated.en.md     | 16 +++++++++++++++-
 .../src/components/Separated/Seperated.ko.md     | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/react/react/src/components/Separated/Seperated.en.md b/packages/react/react/src/components/Separated/Seperated.en.md
index 1f1e5269c..cd65d0eb5 100644
--- a/packages/react/react/src/components/Separated/Seperated.en.md
+++ b/packages/react/react/src/components/Separated/Seperated.en.md
@@ -4,7 +4,21 @@ title: Separated
 
 # Separated
 
-Used when
+A convenient component used to insert a repeating component between each element.
+
+```tsx
+<Separated
+  with={separator}
+  // Adds a separator before the first element
+  first={true}
+  // Adds a separator after the last element
+  last={true}
+>
+  {children}
+</Separated>
+```
+
+## Example
 
 ```tsx
 <Separated with={<Border type="padding24" />}>
diff --git a/packages/react/react/src/components/Separated/Seperated.ko.md b/packages/react/react/src/components/Separated/Seperated.ko.md
index 541987012..5577af957 100644
--- a/packages/react/react/src/components/Separated/Seperated.ko.md
+++ b/packages/react/react/src/components/Separated/Seperated.ko.md
@@ -6,6 +6,20 @@ title: Separated
 
 각 요소 사이에 반복되는 컴포넌트를 삽입하고자 할 때 사용할 수 있는 편리한 컴포넌트입니다.
 
+```tsx
+<Separated
+  with={separator}
+  // 첫 번째 요소 앞에 separator를 추가합니다.
+  first={true}
+  // 마지막 요소 뒤에 separator를 추가합니다.
+  last={true}
+>
+  {children}
+</Separated>
+```
+
+## Example
+
 ```tsx
 <Separated with={<Border type="padding24" />}>
   {LIST.map(item => (