From cf61b009fffebaf3a606f725668080bcea86f473 Mon Sep 17 00:00:00 2001
From: Dongkyu Kim <stleamist@me.com>
Date: Fri, 11 Aug 2023 12:33:30 +0900
Subject: [PATCH] docs(seed-docs): separate motion spec table

---
 docs/content/component/spinner/style.mdx | 72 +++++++++++++++++-------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/docs/content/component/spinner/style.mdx b/docs/content/component/spinner/style.mdx
index 4cbeaa5e1..d2632a009 100644
--- a/docs/content/component/spinner/style.mdx
+++ b/docs/content/component/spinner/style.mdx
@@ -55,30 +55,62 @@ slug: /component/spinner/style
 
 ## 디자인 결정 (Motion)
 
-| From  | To  | Part      | Property  | Attribute       | Value                                |
-| ----- | --- | --------- | --------- | --------------- | ------------------------------------ |
-| Start | End | Indicator | start     | Duration        | 900ms                                |
-|       |     |           |           | Delay           | 300ms                                |
-|       |     |           |           | Timing Function | cubic-bezier(0.35, 0, 0.65, 0.6)     |
-|       |     |           | end       | Duration        | 800ms                                |
-|       |     |           |           | Delay           | 0ms                                  |
-|       |     |           |           | Timing Function | cubic-bezier(0.35, 0, 0.65, 1)       |
-|       |     |           | transform | Duration        | 1200ms                               |
-|       |     |           |           | Delay           | 0ms                                  |
-|       |     |           |           | Timing Function | cubic-bezier(0.35, 0.25, 0.65, 0.75) |
-
-### State=Start
+### Part=Indicator, Property=head
+
+| Part      | Property | Attribute       | Value                          |
+| --------- | -------- | --------------- | ------------------------------ |
+| Indicator | head     | Duration        | 800ms                          |
+|           |          | Delay           | 0ms                            |
+|           |          | Timing Function | cubic-bezier(0.35, 0, 0.65, 1) |
+
+#### Keyframe=0%(0ms)
+
+| Part      | Property | Value |
+| --------- | -------- | ----- |
+| Indicator | head     | 1%    |
+
+#### Keyframe=100%(800ms)
+
+| Part      | Property | Value |
+| --------- | -------- | ----- |
+| Indicator | head     | 100%  |
+
+### Part=Indicator, Property=tail
+
+| Part      | Property | Attribute       | Value                            |
+| --------- | -------- | --------------- | -------------------------------- |
+| Indicator | tail     | Duration        | 900ms                            |
+|           |          | Delay           | 300ms                            |
+|           |          | Timing Function | cubic-bezier(0.35, 0, 0.65, 0.6) |
+
+#### Keyframe=0%(300ms)
+
+| Part      | Property | Value |
+| --------- | -------- | ----- |
+| Indicator | tail     | 0%    |
+
+#### Keyframe=100%(1200ms)
+
+| Part      | Property | Value |
+| --------- | -------- | ----- |
+| Indicator | tail     | 99%   |
+
+### Part=Indicator, Property=transform
+
+| Part      | Property  | Attribute       | Value                                |
+| --------- | --------- | --------------- | ------------------------------------ |
+| Indicator | transform | Duration        | 1200ms                               |
+|           |           | Delay           | 0ms                                  |
+|           |           | Timing Function | cubic-bezier(0.35, 0.25, 0.65, 0.75) |
+
+#### Keyframe=0%(0ms)
 
 | Part      | Property  | Value        |
 | --------- | --------- | ------------ |
-| Indicator | start     | 0%           |
-|           | end       | 1%           |
-|           | transform | rotate(0deg) |
+| Indicator | transform | rotate(0deg) |
 
-### State=End
+#### Keyframe=100%(1200ms)
 
 | Part      | Property  | Value          |
 | --------- | --------- | -------------- |
-| Indicator | start     | 99%            |
-|           | end       | 100%           |
-|           | transform | rotate(360deg) |
+| Indicator | transform | rotate(360deg) |
\ No newline at end of file