Merge pull request #154 from prgrms-web-devcourse-final-project/feature/

#73

feat: AuctionBidBottomSheet 컴포넌트 개발

src/components/organisms/AuctionBidBottomSheet/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Text, TextButton } from "components/atoms";
+import { LabeledInput } from "components/molecules";
+import type { IModalBottomSheetProps } from "components/molecules/ModalBottomSheet";
+
+import { AuctionBidBottomSheetWrapper } from "./styled";
+
+interface IAuctionBidBottomSheetProps extends IModalBottomSheetProps {
+  /** 입력할 입찰가 */
+  price: string;
+  /** 입찰가 설정 함수 */
+  setPrice: React.Dispatch<React.SetStateAction<string>>;
+  /** 이전 입찰가 */
+  beforePrice?: number;
+  /** 최소 입찰가 */
+  minPrice: number;
+  /** 입찰하기 버튼 클릭 시 실행될 함수 */
+  onBid: () => void;
+}
+
+export const AuctionBidBottomSheet = ({
+  open,
+  onClose,
+  price,
+  setPrice,
+  beforePrice,
+  minPrice,
+  onBid
+}: IAuctionBidBottomSheetProps) => {
+  const placeholder = beforePrice
+    ? `내 입찰가 ${beforePrice.toLocaleString()}`
+    : `최소 ${minPrice.toLocaleString()}`;
+
+  return (
+    <AuctionBidBottomSheetWrapper open={open} onClose={onClose}>
+      <LabeledInput
+        id={"AuctionBid"}
+        label="희망 입찰가"
+        placeholder={placeholder}
+        value={price}
+        setValue={setPrice}
+      />
+      <Text content={`최소 입찰가 ${minPrice.toLocaleString()}`} />
+      <TextButton text="입찰하기" onClick={onBid} />
+    </AuctionBidBottomSheetWrapper>
+  );
+};
+

src/components/organisms/AuctionBidBottomSheet/stories.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuctionBidBottomSheet } from ".";
+
+const meta: Meta<typeof AuctionBidBottomSheet> = {
+  title: "Organisms/AuctionBidBottomSheet",
+  component: AuctionBidBottomSheet,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      control: {
+        type: "boolean"
+      }
+    },
+    minPrice: {
+      control: {
+        type: "number"
+      }
+    },
+    beforePrice: {
+      control: {
+        type: "number"
+      }
+    }
+  },
+  decorators: [(story) => <div style={{ height: "300px" }}>{story()}</div>],
+  render: (args) => {
+    const Component = () => {
+      const [open, setOpen] = useState(args.open);
+      const [price, setPrice] = useState("");
+      const handleBid = () => {
+        if (!price) {
+          console.log(`입찰가를 입력해주세요.`);
+        }
+        if (parseInt(price) <= args.minPrice) {
+          console.log(`최소 입찰가보다 낮은 입찰가는 입력할 수 없어요.`);
+        } else {
+          console.log(`입찰가 ${price}원으로 입찰 완료!`);
+        }
+      };
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>Open</button>
+          <AuctionBidBottomSheet
+            open={open}
+            onClose={() => setOpen(false)}
+            price={price}
+            setPrice={setPrice}
+            beforePrice={args.beforePrice}
+            minPrice={args.minPrice}
+            onBid={handleBid}
+          />
+        </>
+      );
+    };
+    return <Component />;
+  }
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    minPrice: 10000
+  }
+};
+
+export const HasBeforePrice: Story = {
+  args: {
+    open: true,
+    minPrice: 10000,
+    beforePrice: 15000
+  }
+};
+
+export default meta;
+

src/components/organisms/AuctionBidBottomSheet/styled.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "react";
+import styled, { type StyledComponent } from "@emotion/styled";
+import { ModalBottomSheet } from "components/molecules";
+
+export const AuctionBidBottomSheetWrapper: StyledComponent<
+  ComponentProps<typeof ModalBottomSheet>
+> = styled(ModalBottomSheet)`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+