chore: example 최신화

pknu-wap · Dec 2, 2022 · b654bff · b654bff
1 parent b24ac88
commit b654bff
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 68 deletions.
diff --git a/example/react-ts/package.json b/example/react-ts/package.json
@@ -14,7 +14,7 @@
     "framer-motion": "^7.6.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wap-ui": "^1.0.0-beta.28"
+    "wap-ui": "^1.0.0-beta.29"
   },
   "devDependencies": {
     "@types/react": "^18.0.24",

diff --git a/example/react-ts/yarn.lock b/example/react-ts/yarn.lock
@@ -1092,10 +1092,10 @@ vite@^3.2.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-wap-ui@^1.0.0-beta.28:
-  version "1.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/wap-ui/-/wap-ui-1.0.0-beta.28.tgz#e71b30e1ab3d0d3a5ad4bf7349cfecf7111130fd"
-  integrity sha512-EHDZApxOSkTVOgpNOYsuHilireEuk4fT+zBotWy6Hfzc0d4/CRFpKG9xP+3uOm0QFAeUiXtSS2GLcXHCAV+ucg==
+wap-ui@^1.0.0-beta.29:
+  version "1.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/wap-ui/-/wap-ui-1.0.0-beta.29.tgz#e74d8b3afde3ba684f73841705bb120a44ec4150"
+  integrity sha512-Up4SQZmYCs9maNyN12N6oJZkYf6EthhsqOo0a8ZhDB5d5OdQ2s+TTIOL9lhicSujVEz31kGOoakXpn22sIHLaw==
 
 yaml@^1.10.0:
   version "1.10.2"

diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx
@@ -13,69 +13,72 @@ export default {
 export const Defulat = () => {
   return (
     <Container>
-      <FlexColumn>
-        <FlexRow>
-          <Spacer x={3} />
-          <Dropdown>
-            <Dropdown.Button shadow color="primary">
-              Actions
-            </Dropdown.Button>
-            <Dropdown.Menu>
-              <Dropdown.MenuItem
-                onClick={() => {
-                  alert('sdf');
-                }}
-              >
-                First Action
-              </Dropdown.MenuItem>
-              <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
-            </Dropdown.Menu>
-          </Dropdown>
-          <Spacer x={10} />
-          <Dropdown>
-            <Dropdown.Button shadow color="warning">
-              Actions
-            </Dropdown.Button>
-            <Dropdown.Menu>
-              <Dropdown.MenuItem onClick={() => console.log('sdf')}>
-                Create a Copy
-              </Dropdown.MenuItem>
-              <Dropdown.MenuItem>Download</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
-            </Dropdown.Menu>
-          </Dropdown>
-        </FlexRow>
-        <Spacer y={14} />
-        <FlexRow>
-          <Spacer x={3} />
-          <Dropdown>
-            <Dropdown.Button shadow color="error">
-              Actions
-            </Dropdown.Button>
-            <Dropdown.Menu>
-              <Dropdown.MenuItem>First Action</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
-            </Dropdown.Menu>
-          </Dropdown>
-          <Spacer x={10} />
-          <Dropdown>
-            <Dropdown.Button shadow color="secondary">
-              Actions
-            </Dropdown.Button>
-            <Dropdown.Menu>
-              <Dropdown.MenuItem onClick={() => console.log('sdf')}>
-                Create a Copy
-              </Dropdown.MenuItem>
-              <Dropdown.MenuItem>Download</Dropdown.MenuItem>
-              <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
-            </Dropdown.Menu>
-          </Dropdown>
-        </FlexRow>
-      </FlexColumn>
+      <Title>Dropdown Scroll에 따른 Position 오류 // 미완성</Title>
+      <FlexRow>
+        <Dropdown>
+          <Dropdown.Button shadow color="primary">
+            Actions
+          </Dropdown.Button>
+          <Dropdown.Menu>
+            <Dropdown.MenuItem
+              onClick={() => {
+                alert('sdf');
+              }}
+            >
+              First Action
+            </Dropdown.MenuItem>
+            <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
+          </Dropdown.Menu>
+        </Dropdown>
+        <Spacer x={10} />
+        <Dropdown>
+          <Dropdown.Button shadow color="warning">
+            Actions
+          </Dropdown.Button>
+          <Dropdown.Menu>
+            <Dropdown.MenuItem onClick={() => console.log('sdf')}>
+              Create a Copy
+            </Dropdown.MenuItem>
+            <Dropdown.MenuItem>Download</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
+          </Dropdown.Menu>
+        </Dropdown>
+        <Spacer x={10} />
+        <Dropdown>
+          <Dropdown.Button shadow color="error">
+            Actions
+          </Dropdown.Button>
+          <Dropdown.Menu>
+            <Dropdown.MenuItem
+              onClick={() => {
+                alert('sdf');
+              }}
+            >
+              First Action
+            </Dropdown.MenuItem>
+            <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
+          </Dropdown.Menu>
+        </Dropdown>
+        <Spacer x={10} />
+        <Dropdown>
+          <Dropdown.Button shadow color="secondary">
+            Actions
+          </Dropdown.Button>
+          <Dropdown.Menu>
+            <Dropdown.MenuItem onClick={() => console.log('sdf')}>
+              Create a Copy
+            </Dropdown.MenuItem>
+            <Dropdown.MenuItem>Download</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
+            <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
+          </Dropdown.Menu>
+        </Dropdown>
+      </FlexRow>
     </Container>
   );
 };
@@ -93,3 +96,10 @@ const FlexColumn = styled.div`
   flex-direction: column;
   align-items: flex-start;
 `;
+
+const Title = styled.div`
+  font-size: 2.4rem;
+  font-weight: 700;
+  text-align: center;
+  margin: 2rem 0;
+`;