Merge pull request #188 from GDSC-Hongik/feat/dropdown-page

[Feat] 드롭다운 페이지 마크업
GDSC-Hongik · Jan 20, 2025 · ef1212d · ef1212d
2 parents 78fdc1e + bdd959f
commit ef1212d
Show file tree

Hide file tree

Showing 22 changed files with 510 additions and 19 deletions.
diff --git a/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx b/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx
@@ -1,14 +1,13 @@
 import ImageCards from "@components/ImageCards";
 import Space from "@components/Space";
 import Text from "@components/Text";
-import Divider from "wowds-ui/Divider";
-
 import {
   combinationButtonItems,
   widthButtonItems,
   withIconButtonItems,
   withSubjectButtonItems,
-} from "../../../../constants/store";
+} from "@constants/store";
+import Divider from "wowds-ui/Divider";
 
 const GuidelineTab = () => {
   return (

diff --git a/apps/wow-docs/app/component/dropdown/_components/ComponentTab.tsx b/apps/wow-docs/app/component/dropdown/_components/ComponentTab.tsx
@@ -0,0 +1,41 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { css } from "@styled-system/css";
+import Image from "next/image";
+
+export const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">Select</Text>
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Image
+          alt="dropdown-component"
+          height={400}
+          src="/component/dropdown/dropdown-component-select.svg"
+          width={330}
+        />
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">List</Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="dropdown-option"
+          height={360}
+          src="/component/dropdown/dropdown-component-list.svg"
+          width={300}
+        />
+      </Card>
+    </>
+  );
+};
+
+const containerStyle = css({
+  display: "flex",
+  justifyContent: "center",
+});
diff --git a/apps/wow-docs/app/component/dropdown/_components/GuidelineTab.tsx b/apps/wow-docs/app/component/dropdown/_components/GuidelineTab.tsx
@@ -0,0 +1,125 @@
+import Card from "@components/Card";
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import { widthDropdownItems } from "@constants/store";
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import Image from "next/image";
+import type { CSSProperties } from "react";
+import Chip from "wowds-ui/Chip";
+import Divider from "wowds-ui/Divider";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+export const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={40} />
+      <Title
+        main="List Combination"
+        variant="component"
+        sub={
+          <>
+            List 컴포넌트를 사용하여 선택지 영역을 조합,
+            <br /> H값은 Hug로 설정하되, 최대 300px로 제한하고 넘칠 시 스크롤바
+            사용
+          </>
+        }
+      />
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Image
+          alt="dropdown-guide-list-combination-1"
+          height={364}
+          src="/component/dropdown/dropdown-guide-1.svg"
+          width={907}
+        />
+        <Space height={20} />
+        <Image
+          alt="dropdown-guide-list-combination-2"
+          height={364}
+          src="/component/dropdown/dropdown-guide-2.svg"
+          width={907}
+        />
+      </Card>
+      <Space height={40} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Width
+      </Text>
+      <Space height={40} />
+      <ImageCards items={widthDropdownItems} />
+      <Text color="sub" typo="body1">
+        그 외에는 함께 사용되는 요소의 너비에 맞추기
+      </Text>
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Image
+          alt="dropdown-guide-list-2"
+          height={230}
+          src="/component/dropdown/dropdown-guide-5.svg"
+          width={907}
+        />
+      </Card>
+      <Space height={40} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Usuage
+      </Text>
+      <Space height={40} />
+      <Title main="L Size" sub="Label 텍스트 활용" variant="component" />
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Flex alignItems="center" gap="37px">
+          <Chip label="Label 0" />
+          <DropDown
+            label="Label"
+            placeholder="목록을 눌러 선택하세요"
+            style={dropdownStyle}
+          >
+            <DropDownOption text="Text" value="Text" />
+          </DropDown>
+        </Flex>
+        <Space height={40} />
+        <Flex gap="37px">
+          <Chip label="Label X" />
+          <DropDown placeholder="목록을 눌러 선택하세요" style={dropdownStyle}>
+            <DropDownOption text="Text" value="Text" />
+          </DropDown>
+        </Flex>
+      </Card>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        텍스트 필드와 함께 사용 가능
+      </Text>
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Image
+          alt="dropdown-guide-usuage-textfield"
+          height={161}
+          src="/component/dropdown/dropdown-guide-6.svg"
+          width={907}
+        />
+      </Card>
+    </>
+  );
+};
+
+const containerStyle = css({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+const dropdownStyle: CSSProperties = {
+  width: "360px",
+};
diff --git a/apps/wow-docs/app/component/dropdown/page.tsx b/apps/wow-docs/app/component/dropdown/page.tsx
@@ -0,0 +1,64 @@
+import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import { componentItems } from "@constants/pageData";
+import { css } from "@styled-system/css";
+import type { Metadata } from "next";
+import type { CSSProperties } from "react";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+import { ComponentTab } from "@/component/dropdown/_components/ComponentTab";
+import { GuidelineTab } from "@/component/dropdown/_components/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "DropDown",
+  description: "와우 디자인 시스템의 dropdown component 입니다.",
+};
+
+const DropDownComponentPage = () => {
+  const dropdownPageData = componentItems.find(
+    (item) => item.title === "Dropdown"
+  );
+
+  return (
+    <>
+      <Title
+        main={dropdownPageData?.title ?? ""}
+        sub={dropdownPageData?.description ?? ""}
+        variant="header"
+      />
+      <Space height={40} />
+      <Card className={cardStyle}>
+        <DropDown label="Label" placeholder="선택하세요" style={dropdownStyle}>
+          <DropDownOption text="Text" value="Text" />
+        </DropDown>
+        <DropDown
+          defaultValue="Text"
+          placeholder="내용을 입력하세요"
+          style={dropdownStyle}
+        >
+          <DropDownOption text="Text" value="Text" />
+        </DropDown>
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+      <Space height={92} />
+    </>
+  );
+};
+
+export default DropDownComponentPage;
+
+const dropdownStyle: CSSProperties = {
+  width: "300px",
+};
+
+const cardStyle = css({
+  alignItems: "end",
+  gap: "20px",
+});
diff --git a/apps/wow-docs/app/foundation/grid/page.tsx b/apps/wow-docs/app/foundation/grid/page.tsx
@@ -2,11 +2,10 @@ import ImageCards from "@components/ImageCards";
 import Space from "@components/Space";
 import Text from "@components/Text";
 import Title from "@components/Text/Title";
+import { breakpointItems, gridItems } from "@constants/store";
 import type { Metadata } from "next/types";
 import Divider from "wowds-ui/Divider";
 
-import { breakpointItems, gridItems } from "../../../constants/store";
-
 export const metadata: Metadata = {
   title: "Grid",
   description: "와우 디자인 시스템의 Grid 입니다.",

diff --git a/apps/wow-docs/app/layout.tsx b/apps/wow-docs/app/layout.tsx
@@ -4,28 +4,34 @@ import Navbar from "@components/Navbar/Navbar";
 import { styled } from "@styled-system/jsx";
 import type { Metadata } from "next";
 
+import { PRODUCTION_URL } from "../constants/routePath";
+
 export const metadata: Metadata = {
   title: { default: "와우 디자인 시스템", template: "%s | 와우 디자인 시스템" },
   description: "GDSC Hongik 디자인 시스템",
+  keywords: ["GDSC", "Hongik", "디자인 시스템", "와우 디자인 시스템"],
   verification: {
     google: process.env.NEXT_PUBLIC_GOOGLE_CONSOLE_KEY,
     other: {
       "naver-site-verification":
         process.env.NEXT_PUBLIC_NAVER_CONSOLE_KEY ?? "",
     },
   },
+  metadataBase: new URL(PRODUCTION_URL),
   openGraph: {
     title: "와우 디자인 시스템",
     description: "GDSC Hongik 디자인 시스템",
-    images: ["/images/og-image.png"],
+    url: `${PRODUCTION_URL}`,
+    images: { url: "/images/og-image.png" },
+    locale: "ko_KR",
     siteName: "와우 디자인 시스템",
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
     title: "와우 디자인 시스템",
     description: "GDSC Hongik 디자인 시스템",
-    images: ["/images/og-image.png"],
+    images: { url: "/images/og-image.png" },
   },
   icons: {
     icon: "/images/logo.svg",
@@ -38,6 +44,10 @@ export const metadata: Metadata = {
       },
     ],
   },
+  robots: {
+    index: true,
+    follow: true,
+  },
 };
 
 const RootLayout = ({
@@ -46,7 +56,7 @@ const RootLayout = ({
   children: React.ReactNode;
 }): JSX.Element => {
   return (
-    <html lang="en">
+    <html lang="ko">
       <body>
         <Navbar />
         <styled.main

diff --git a/apps/wow-docs/app/robots.ts b/apps/wow-docs/app/robots.ts
@@ -1,4 +1,4 @@
-import { PRDOUCTION_URL } from "@constants/routePath";
+import { PRODUCTION_URL } from "@constants/routePath";
 import type { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {
@@ -7,7 +7,7 @@ export default function robots(): MetadataRoute.Robots {
       userAgent: "*",
       allow: "/",
     },
-    sitemap: `${PRDOUCTION_URL}/sitemap.xml`,
-    host: `${PRDOUCTION_URL}`,
+    sitemap: `${PRODUCTION_URL}/sitemap.xml`,
+    host: `${PRODUCTION_URL}`,
   };
 }
diff --git a/apps/wow-docs/app/sitemap.ts b/apps/wow-docs/app/sitemap.ts
@@ -1,24 +1,24 @@
-import { PRDOUCTION_URL, routePath } from "@constants/routePath";
+import { PRODUCTION_URL, routePath } from "@constants/routePath";
 import type { MetadataRoute } from "next";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const foundationRoutes = Object.values(routePath.foundation).map((path) => ({
-    url: `${PRDOUCTION_URL}${path}`,
+    url: `${PRODUCTION_URL}${path}`,
     lastModified: new Date().toISOString().split("T")[0],
   }));
 
   const componentRoutes = Object.values(routePath.component).map((path) => ({
-    url: `${PRDOUCTION_URL}${path}`,
+    url: `${PRODUCTION_URL}${path}`,
     lastModified: new Date().toISOString().split("T")[0],
   }));
 
   return [
     {
-      url: `${PRDOUCTION_URL}`,
+      url: `${PRODUCTION_URL}`,
       lastModified: new Date().toISOString().split("T")[0],
     },
     {
-      url: `${PRDOUCTION_URL}${routePath.overview}`,
+      url: `${PRODUCTION_URL}${routePath.overview}`,
       lastModified: new Date().toISOString().split("T")[0],
     },
     ...foundationRoutes,

diff --git a/apps/wow-docs/components/ImageCards.tsx b/apps/wow-docs/components/ImageCards.tsx
@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
 
 export type Item = {
   main: string;
-  sub?: string | ReactNode;
+  sub?: ReactNode;
   imageAlt: string;
   imageSrc: string;
   imageWidth: number;

diff --git a/apps/wow-docs/constants/routePath.ts b/apps/wow-docs/constants/routePath.ts
@@ -1,4 +1,4 @@
-export const PRDOUCTION_URL = "https://wow-design-system-wow-docs.vercel.app";
+export const PRODUCTION_URL = "https://wow-design-system-wow-docs.vercel.app";
 
 export const basePaths = {
   component: "/component",