Merge pull request #47 from f-lab-edu/46-design-system-component-cont…

…ainer

[💅 design system] 레이아웃 컴포넌트 생성  default(left), center, right

apps/web/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Headers, Text } from "@tripie/design-system";
+import Container from "@tripie/design-system/components/container/_container";
 import UnstyledLink from "@tripie/design-system/components/typography/link/_link";
 import Paragraph from "@tripie/design-system/components/typography/paragraph/_paragraph";
 import ThemeButton from "../components/ThemeButton";
@@ -8,20 +9,30 @@ export default function Home() {
   const text =
     "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis\npariatur, ab voluptates saepe eum at excepturi, eaque accusamus labore\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti! Qui.\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti!";
   return (
-    <div>
+    <Container margin="sm">
       <ThemeButton />
       <ThemeButton.Toggle />
 
-      <Headers emphasize={true}>H1 emphasized</Headers>
+      <Headers>H1 emphasized</Headers>
       <Headers.H1>H1 with headlines</Headers.H1>
+      <Text>Wrapped by Layout - default</Text>
+      <Container align="center">
+        <Text>Wrapped by Layout - center</Text>
+      </Container>
 
+      <Container align="right">
+        <Text>Wrapped by Layout - right</Text>
+      </Container>
       <Headers.H2>H2</Headers.H2>
       <Headers.H3>H3</Headers.H3>
       <Headers.H4>H4</Headers.H4>
-      <Text>{text}</Text>
-      <Paragraph>{text}</Paragraph>
-
+      <Container align="center">
+        <Text>{text}</Text>
+        <Container applyMargin="top">
+          <Paragraph>{text}</Paragraph>
+        </Container>
+      </Container>
       <UnstyledLink href="/">떡볶이</UnstyledLink>
-    </div>
+    </Container>
   );
 }

apps/web/provider/ThemeProvider.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
  */
 const ThemeWrapper = dynamic(
   () => import("@tripie/design-system/components/body/_body"),
-  { ssr: false }
+  { ssr: false },
 );
 
 export default function ThemeProvider({

packages/design-system/src/components/container/_container.module.scss

@@ -0,0 +1,74 @@
+@use "../../functions/" as *;
+@use "sass:map";
+
+.layout-fill-available {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+}
+.align-center {
+  display: inline-flex;
+  justify-content: center;
+  align-content: stretch;
+  flex-wrap: nowrap;
+}
+.align-right {
+  display: inline-flex;
+  justify-content: flex-end;
+  align-content: stretch;
+  flex-wrap: nowrap;
+}
+
+$space-map: (
+  xl: space(4rem),
+  l: space(2rem),
+  m: space(1rem),
+  sm: space(0.6rem),
+  xsm: space(0.2rem),
+);
+
+@mixin margins($direction, $size) {
+  @if ($direction == "top-bottom") {
+    margin: $size 0;
+  } @else if ($direction == "left-right") {
+    margin: 0 $size;
+  } @else if ($direction == "left") {
+    margin: 0;
+    margin-left: $size;
+  } @else if ($direction == "right") {
+    margin: 0;
+    margin-right: $size;
+  } @else if ($direction == "top") {
+    margin: 0;
+    margin-top: $size;
+  } @else if ($direction == "bottom") {
+    margin: 0;
+    margin-bottom: $size;
+  } @else if ($direction == "all") {
+    margin: $size;
+  }
+}
+
+@each $key, $value in $space-map {
+  .container.all.#{$key} {
+    @include margins("all", $value);
+  }
+  .container.top-bottom.#{$key} {
+    @include margins("top-bottom", $value);
+  }
+  .container.left-right.#{$key} {
+    @include margins("left-right", $value);
+  }
+  .container.left.#{$key} {
+    @include margins("left", $value);
+  }
+  .container.right.#{$key} {
+    @include margins("right", $value);
+  }
+  .container.top.#{$key} {
+    @include margins("top", $value);
+  }
+  .container.bottom.#{$key} {
+    @include margins("bottom", $value);
+  }
+}

packages/design-system/src/components/container/_container.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect } from "react";
+import { useAppTheme } from "../../hooks";
+import Container from "./_container";
+
+const meta: Meta<typeof Container> = {
+  title: "tripie-ui/Container",
+  component: Container,
+  tags: ["autodocs"],
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Margin-Default",
+  args: {
+    children: "default container",
+  },
+};
+
+export const AllDefault: Story = {
+  name: "Margin-m",
+  args: {
+    children: "MarginAll m container",
+    margin: "m",
+  },
+};
+
+export const AllXsm: Story = {
+  name: "Margin-xm",
+  args: {
+    children: "m container",
+
+    margin: "xsm",
+  },
+};
+
+export const AllSm: Story = {
+  name: "Margin-sm",
+  args: {
+    children: "sm container",
+
+    margin: "sm",
+  },
+};
+
+export const AllL: Story = {
+  name: "Margin-l",
+  args: {
+    children: " l container",
+    margin: "l",
+  },
+};
+
+export const AllXl: Story = {
+  name: "Margin-xl",
+  args: {
+    children: " xl container",
+    margin: "xl",
+  },
+};

packages/design-system/src/components/container/_container.tsx

@@ -0,0 +1,46 @@
+import classNames from "classnames/bind";
+import { ReactNode } from "react";
+import Style from "./_container.module.scss";
+
+export type ContainerProps = {
+  margin?: "xl" | "l" | "m" | "sm" | "xsm";
+  align?: "left" | "center" | "right";
+  children?: ReactNode;
+  applyMargin?:
+    | "top-bottom"
+    | "left-right"
+    | "all"
+    | "left"
+    | "right"
+    | "top"
+    | "bottom";
+} & Omit<React.ComponentProps<"div">, "children">;
+
+const style = classNames.bind(Style);
+
+const Container = ({
+  children,
+  className,
+  align = "left",
+  margin = "m",
+  applyMargin = "all",
+  ...props
+}: ContainerProps) => {
+  return (
+    <div
+      className={style(
+        "layout-fill-available",
+        `align-${align}`,
+        "container",
+        applyMargin,
+        margin,
+        className
+      )}
+      {...props}
+    >
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default Container;

packages/design-system/src/components/container/index.ts

@@ -0,0 +1,2 @@
+export * from "./_container";
+export { default } from "./_container";

packages/design-system/src/components/myButton/mybutton.module.scss

@@ -2,7 +2,6 @@
 
 .button {
   background-color: variables.$primary-color;
-  padding: 0.2rem;
   &:hover {
     cursor: pointer;
   }

packages/design-system/src/hooks/useAppTheme.ts

@@ -21,7 +21,7 @@ export const useAppTheme = (): UseAppThemeOutput => {
   const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
   const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>(
     "app-theme",
-    THEME_MODE.OS_DEFAULT
+    THEME_MODE.OS_DEFAULT,
   );
 
   useEffect(() => {
@@ -37,7 +37,7 @@ export const useAppTheme = (): UseAppThemeOutput => {
     mode: themeMode,
     toggle: () => {
       setThemeMode((previous) =>
-        previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK
+        previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK,
       );
     },
     setMode: (mode) => setThemeMode(mode),