Merge pull request #6 from Principes-Artis-Mechanicae/feature/GETP-106

GETP-106 feature: Button, Input, Label 컴포넌트 구현

src/common/form/Button.tsx

@@ -3,7 +3,7 @@ import { place_center } from "@/styles/utils";
 import styled from "@emotion/styled";
 
 export interface IButton {
-    variant: "primary" | "secondary" | "outline" | "disabled";
+    variant: "primary" | "secondary" | "outline" | "disabled" | "side";
 
     width: string;
     height: string;
@@ -27,6 +27,8 @@ export const Button = styled.button<IButton>`
                 return "#fff";
             case "disabled":
                 return "#EBEDEF";
+            case "side":
+                return "#fff";
         }
     }};
 
@@ -40,6 +42,8 @@ export const Button = styled.button<IButton>`
                 return "#476FF1";
             case "disabled":
                 return "#C4C7CC";
+            case "side":
+                return "#021026";
         }
     }};
 

src/common/form/Input.story.tsx

@@ -0,0 +1,72 @@
+import { Button } from "./Button";
+import { Input } from "./Input";
+import { css } from "@emotion/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+    title: "form/Input",
+    component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+    args: {
+        type: "text",
+        width: "300px",
+        height: "45px",
+        placeholder: "이메일 주소를 입력해주세요",
+    },
+};
+
+export const Password: Story = {
+    args: {
+        type: "password",
+        width: "300px",
+        height: "45px",
+        placeholder: "비밀번호를 입력해주세요",
+    },
+};
+
+export const Email: Story = {
+    args: {
+        type: "email",
+        width: "300px",
+        height: "45px",
+    },
+    render: (args) => {
+        return (
+            <Input width={args.width} height={args.height} placeholder="이메일 주소를 입력해주세요">
+                <Button variant="side" width="40px" height="45px">
+                    인증
+                </Button>
+            </Input>
+        );
+    },
+};
+
+export const Verify: Story = {
+    args: {
+        type: "text",
+        width: "300px",
+        height: "45px",
+    },
+    render: (args) => {
+        return (
+            <Input width={args.width} height={args.height} placeholder="인증번호를 입력해주세요">
+                <div
+                    css={css`
+                        display: flex;
+                        align-items: center;
+                        color: #476ff1;
+                        font-weight: bold;
+                        height: 100%;
+                    `}
+                >
+                    4:30
+                </div>
+            </Input>
+        );
+    },
+};

src/common/form/Input.style.tsx

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+
+export interface IInputWrapper {
+    width: string;
+    height: string;
+}
+
+export interface IInputElement extends React.ComponentProps<"input"> {
+    width: string;
+    height: string;
+}
+
+export const InputWrapper = styled.div<IInputWrapper>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+
+    position: relative;
+`;
+
+export const InputElement = styled.input<IInputElement>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+
+    border: 0;
+    border-bottom: 1px solid #ebedef;
+
+    font-size: 16px;
+
+    &:focus {
+        outline: none;
+        border-bottom: 1.5px solid #476ff1;
+    }
+`;
+
+export const InputOption = styled.div`
+    height: 100%;
+
+    position: absolute;
+    right: 0;
+    top: 0;
+`;

src/common/form/Input.tsx

@@ -0,0 +1,14 @@
+import { IInputElement, InputElement, InputOption, InputWrapper } from "./Input.style";
+
+export interface IInput extends IInputElement {
+    children?: React.ReactNode;
+}
+
+export const Input: React.FC<IInput> = ({ width, height, children, ...rest }) => {
+    return (
+        <InputWrapper width={width} height={height}>
+            <InputElement width={width} height={height} {...rest}></InputElement>
+            <InputOption>{children}</InputOption>
+        </InputWrapper>
+    );
+};

src/common/form/Label.story.ts

@@ -0,0 +1,16 @@
+import { Label } from "./Label";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+    title: "form/Label",
+    component: Label,
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: "LABEL",
+    },
+};

src/common/form/Label.tsx

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const Label = styled.label`
+    font-size: 12px;
+    font-weight: bold;
+`;

src/common/test.tsx

@@ -0,0 +1,5 @@
+import imgSrc from "@/assets/3d00772.png";
+
+export const Test = () => {
+    return <img src={imgSrc}></img>;
+};