[Feature] component 페이지 마크업 (avatar, checkbox, switch, header) (#197)

* feat: avatar guide svg 이미지 * feat: avatar 컴포넌트 페이지 마크업 * feat: avatar 페이지 오타 수정 * feat: header 페이지 마크업 * feat: header guideline 컴포넌트 * feat: header componentTab 컴포넌트 * feat: switch 페이지 마크업 * feat: switch GuidelineTab 컴포넌트 * feat: switch ComponentTab 컴포넌트 * fix: 폴더명, alt text 변경 * feat: checkbox component 페이지의 이미지 삽입 * feat: checkbox component 페이지 마크업 * feat: checkbox guideline 컴포넌트 * feat: checkbox componentTab 컴포넌트 * fix: color, spacing, typo의 metadata 부분 수정 * feat: 코드리뷰 반영하여 checkbox 컴포넌트 탭 수정 - pressed, checked, disabled에 맞게 구현 - 코드리뷰에 나온 내용을 토대로 useRef를 사용해서 attribute 추가 * feat: 코드리뷰 반영하여 SwitchBtn Card 수정 - querySelector로 요소를 조작하는 방식을 사용 - disabled의 경우 Switch 컴포넌트가 disabled와 checked가 공존하기 힘들기에 컴포넌트 따로 제작 * feat: header 페이지 GDSC에서 GDG로 변경 - GDGoC로 바뀐 내용 반영 - 디자이너님과 이야기하여 PC, Mobile 순서 변경 * refactor: checkbox componentTab 상수화, map 순회 * fix: 사용하지 않는 이미지 태그 제거
GDSC-Hongik · Feb 11, 2025 · 54a3883 · 54a3883
1 parent e12b8b3
commit 54a3883
Show file tree

Hide file tree

Showing 30 changed files with 1,004 additions and 16 deletions.
diff --git a/apps/wow-docs/app/component/avatar/_components/ComponentTab.tsx b/apps/wow-docs/app/component/avatar/_components/ComponentTab.tsx
@@ -0,0 +1,38 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+import Avatar from "wowds-ui/Avatar";
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">S Size</Text>
+      <Space height={20} />
+      <Card style={{ padding: "46px auto" }}>
+        <Flex gap={12}>
+          <Avatar size="sm" />
+          <Avatar size="sm" variant="green" />
+          <Avatar size="sm" variant="yellow" />
+          <Avatar size="sm" variant="red" />
+        </Flex>
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">L Size</Text>
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Flex gap={20}>
+          <Avatar />
+          <Avatar variant="green" />
+          <Avatar variant="yellow" />
+          <Avatar variant="red" />
+        </Flex>
+      </Card>
+    </>
+  );
+};
+
+export default ComponentTab;
diff --git a/apps/wow-docs/app/component/avatar/_components/GuidelineTab.tsx b/apps/wow-docs/app/component/avatar/_components/GuidelineTab.tsx
@@ -0,0 +1,83 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import Image from "next/image";
+import Divider from "wowds-ui/Divider";
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Guideline</Text>
+      <Space height={40} />
+      <Title
+        main="Style"
+        sub="기본 아바타 그래픽은 4종을 제공해요. 프로필 이미지를 지정할 경우 대체하여 사용해요."
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "49px auto" }}>
+        <Image
+          alt="기본 아바타 그래픽을 제공하고 사용자 지정 이미지를 사용할 수 있습니다"
+          height={138}
+          src="/component/avatar/avatar-guide-1.svg"
+          width={354}
+        />
+      </Card>
+      <Space height={40} />
+      <Divider />
+      <Space height={40} />
+      <Title
+        main="Size"
+        sub="크기에 따라 다른 방식으로 활용해요."
+        variant="component"
+      />
+      <Space height={40} />
+      <Title
+        main="S Size"
+        sub="이름과 함께 병행하여 사용 가능"
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="S size를 아바타만 사용하거나 이름과 병행한 이미지"
+          height={140}
+          src="/component/avatar/avatar-guide-2.svg"
+          width={908}
+        />
+      </Card>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        헤더에 적용할 경우, 아바타만 사용하거나 이름과 병행 가능
+      </Text>
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="S size를 헤더에 적용한 경우, 아바타만 사용하거나 이름과 병행한 이미지"
+          height={150}
+          src="/component/avatar/avatar-guide-3.svg"
+          width={390}
+        />
+      </Card>
+      <Space height={40} />
+      <Title
+        main="L Size"
+        sub="헤더에 적용할 경우, 아바타만 사용하거나 이름과 병행 가능"
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="L size를 아바타만 사용하거나 이름과 병행한 이미지"
+          height={233}
+          src="/component/avatar/avatar-guide-4.svg"
+          width={908}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default GuidelineTab;
diff --git a/apps/wow-docs/app/component/avatar/page.tsx b/apps/wow-docs/app/component/avatar/page.tsx
@@ -0,0 +1,40 @@
+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 type { Metadata } from "next/types";
+import Avatar from "wowds-ui/Avatar";
+
+import ComponentTab from "@/component/avatar/_components/ComponentTab";
+import GuidelineTab from "@/component/avatar/_components/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Avatar",
+  description: "와우 디자인 시스템의 avatar component 입니다.",
+};
+
+const AvatarPage = () => {
+  const avatarPageData = componentItems.find((item) => item.title === "Avatar");
+  return (
+    <>
+      <Title
+        main={avatarPageData?.title ?? ""}
+        sub={avatarPageData?.description ?? ""}
+        variant="header"
+      />
+      <Space height={40} />
+      <Card style={{ padding: "50px 144px" }}>
+        <Avatar />
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+      <Space height={92} />
+    </>
+  );
+};
+
+export default AvatarPage;
diff --git a/apps/wow-docs/app/component/checkbox/_components/CheckboxAndTextCard.tsx b/apps/wow-docs/app/component/checkbox/_components/CheckboxAndTextCard.tsx
@@ -0,0 +1,18 @@
+import Card from "@components/Card";
+import { checkboxAndTexts } from "@constants/store";
+import { Flex } from "@styled-system/jsx";
+import Checkbox from "wowds-ui/Checkbox";
+
+const CheckboxAndTextCard = () => {
+  return (
+    <Card>
+      <Flex gap="32px">
+        {checkboxAndTexts.map(({ key, ...props }) => (
+          <Checkbox key={key} {...props} />
+        ))}
+      </Flex>
+    </Card>
+  );
+};
+
+export default CheckboxAndTextCard;
diff --git a/apps/wow-docs/app/component/checkbox/_components/CheckboxCard.tsx b/apps/wow-docs/app/component/checkbox/_components/CheckboxCard.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import Card from "@components/Card";
+import { checkboxes } from "@constants/store";
+import { Flex } from "@styled-system/jsx";
+import type { MutableRefObject } from "react";
+import { useEffect, useRef } from "react";
+import Checkbox from "wowds-ui/Checkbox";
+
+const createCheckboxRef =
+  (
+    refs: MutableRefObject<HTMLInputElement[]>,
+    needsRef: boolean,
+    key: number
+  ) =>
+  (element: HTMLInputElement) => {
+    if (needsRef) refs.current[key] = element;
+  };
+
+const CheckboxCard = () => {
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current.forEach((element) => {
+      if (element) {
+        element.setAttribute("data-pressed", "true");
+      }
+    });
+  }, []);
+
+  return (
+    <Card>
+      <Flex gap="12px">
+        {checkboxes.map(({ needsRef, key, ...props }) => (
+          <Checkbox
+            key={key}
+            inputProps={
+              {
+                ref: createCheckboxRef(inputRefs, needsRef ?? false, key),
+              } as React.InputHTMLAttributes<HTMLInputElement>
+            }
+            {...props}
+          />
+        ))}
+      </Flex>
+    </Card>
+  );
+};
+
+export default CheckboxCard;
diff --git a/apps/wow-docs/app/component/checkbox/_components/ComponentTab.tsx b/apps/wow-docs/app/component/checkbox/_components/ComponentTab.tsx
@@ -0,0 +1,24 @@
+import Space from "@components/Space";
+import Text from "@components/Text";
+
+import CheckboxAndTextCard from "@/component/checkbox/_components/CheckboxAndTextCard";
+import CheckboxCard from "@/component/checkbox/_components/CheckboxCard";
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">Box</Text>
+      <Space height={20} />
+      <CheckboxCard />
+      <Space height={40} />
+      <Text typo="headingWebPage">Box + Text</Text>
+      <Space height={20} />
+      <CheckboxAndTextCard />
+    </>
+  );
+};
+
+export default ComponentTab;
diff --git a/apps/wow-docs/app/component/checkbox/_components/GuidelineTab.tsx b/apps/wow-docs/app/component/checkbox/_components/GuidelineTab.tsx
@@ -0,0 +1,43 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Image from "next/image";
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        사용되는 텍스트의 길이 및 용도에 따라 컴포넌트 버전을 선택
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="사용되는 텍스트의 길이 및 용도에 따라 컴포넌트 버전을 선택"
+          height={90}
+          src="/component/checkbox/checkbox-guide-1.svg"
+          width={379}
+        />
+      </Card>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        너비 규칙은 Horizontal에만 적용
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="너비 규칙은 Horizontal에만 적용"
+          height={140}
+          src="/component/checkbox/checkbox-guide-2.svg"
+          width={908}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default GuidelineTab;
diff --git a/apps/wow-docs/app/component/checkbox/page.tsx b/apps/wow-docs/app/component/checkbox/page.tsx
@@ -0,0 +1,49 @@
+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/types";
+import Checkbox from "wowds-ui/Checkbox";
+
+import ComponentTab from "@/component/checkbox/_components/ComponentTab";
+import GuidelineTab from "@/component/checkbox/_components/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Checkbox",
+  description: "와우 디자인 시스템의 Checkbox 입니다.",
+};
+
+const CheckboxComponentPage = () => {
+  const CheckboxPageData = componentItems.find(
+    (item) => item.title === "Checkbox"
+  );
+  return (
+    <>
+      <Title
+        main={CheckboxPageData?.title ?? ""}
+        sub={CheckboxPageData?.description ?? ""}
+        variant="header"
+      />
+      <Space height={40} />
+      <Card className={cardStyle}>
+        <Checkbox checked label="Text" />
+        <Checkbox label="Text" />
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+      <Space height={92} />
+    </>
+  );
+};
+
+export default CheckboxComponentPage;
+
+const cardStyle = css({
+  alignItems: "end",
+  gap: "32px",
+});