From a8141b208f18a9505a5a1e36da4ab2656eaaee47 Mon Sep 17 00:00:00 2001
From: yongun2 <djkye0001@naver.com>
Date: Fri, 8 Sep 2023 21:33:40 +0900
Subject: [PATCH] =?UTF-8?q?[FEAT]=20=EC=B9=B4=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8F=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../booth/profit/EditingProfitBoothCard.jsx   | 100 ++++++++++++++++++
 .../promotion/EditingPromotionBoothCard.jsx   | 100 ++++++++++++++++++
 2 files changed, 200 insertions(+)
 create mode 100644 src/components/booth/profit/EditingProfitBoothCard.jsx
 create mode 100644 src/components/booth/promotion/EditingPromotionBoothCard.jsx

diff --git a/src/components/booth/profit/EditingProfitBoothCard.jsx b/src/components/booth/profit/EditingProfitBoothCard.jsx
new file mode 100644
index 0000000..b9733b6
--- /dev/null
+++ b/src/components/booth/profit/EditingProfitBoothCard.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function EditingProfitBoothCard() {
+  return (
+    <CardWrapper data-aos="fade-up" data-aos-duration="800">
+      <BoothText>
+        <BoothNumber>
+          <input type="text" placeholder="번호" maxLength={3} />
+        </BoothNumber>
+        <BoothName>
+          <input type="text" placeholder="부스 이름" maxLength={40} />
+        </BoothName>
+
+        <BoothHosted>
+          <input type="text" placeholder="부스 호스트" maxLength={40} />
+        </BoothHosted>
+        <BoothIntroduction>
+          <input type="text" placeholder="30자 이내 설명" maxLength={30} />
+        </BoothIntroduction>
+      </BoothText>
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  width: 33.5rem;
+  height: 20.4rem;
+
+  margin-bottom: 3.6rem;
+
+  background-color: #000;
+
+  input {
+    background: none;
+    border: none;
+    outline: none;
+
+    color: ${({ theme }) => theme.colors.white};
+
+    width: 100%;
+    height: 100%;
+  }
+
+  input::placeholder {
+    color: ${({ theme }) => theme.colors.gray400};
+  }
+
+  background: rgba(54, 54, 54, 0.6);
+  backdrop-filter: blur(6px);
+`;
+
+const BoothText = styled.div`
+  padding: 1.8rem 2rem;
+`;
+
+const BoothNumber = styled.div`
+  border: 1px solid pink;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.8rem;
+
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead4}
+  }
+`;
+
+const BoothName = styled.div`
+  border: 1px solid pink;
+  margin-bottom: 0.8rem;
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead3}
+  }
+`;
+
+const BoothHosted = styled.div`
+  margin-bottom: 0.8rem;
+  border: 1px solid pink;
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead3}
+  }
+`;
+
+const BoothIntroduction = styled.p`
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead4}
+  }
+  color: rgba(255, 255, 255, 0.8);
+  ${(props) => props.theme.fontStyles.subHead1}
+  font-weight:400;
+  padding: 1.2rem 0;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, white, black);
+  border-image-slice: 1;
+`;
diff --git a/src/components/booth/promotion/EditingPromotionBoothCard.jsx b/src/components/booth/promotion/EditingPromotionBoothCard.jsx
new file mode 100644
index 0000000..35f1a23
--- /dev/null
+++ b/src/components/booth/promotion/EditingPromotionBoothCard.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function EditingPromotionBoothCard() {
+  return (
+    <CardWrapper data-aos="fade-up" data-aos-duration="800">
+      <BoothText>
+        <BoothNumber>
+          <input type="text" placeholder="번호" maxLength={3} />
+        </BoothNumber>
+        <BoothName>
+          <input type="text" placeholder="부스 이름" maxLength={40} />
+        </BoothName>
+
+        <BoothHosted>
+          <input type="text" placeholder="부스 호스트" maxLength={40} />
+        </BoothHosted>
+        <BoothIntroduction>
+          <input type="text" placeholder="30자 이내 설명" maxLength={30} />
+        </BoothIntroduction>
+      </BoothText>
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  width: 33.5rem;
+  height: 20.4rem;
+
+  margin-bottom: 3.6rem;
+
+  background-color: #000;
+
+  input {
+    background: none;
+    border: none;
+    outline: none;
+
+    color: ${({ theme }) => theme.colors.white};
+
+    width: 100%;
+    height: 100%;
+  }
+
+  input::placeholder {
+    color: ${({ theme }) => theme.colors.gray400};
+  }
+
+  background: rgba(54, 54, 54, 0.6);
+  backdrop-filter: blur(6px);
+`;
+
+const BoothText = styled.div`
+  padding: 1.8rem 2rem;
+`;
+
+const BoothNumber = styled.div`
+  border: 1px solid pink;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.8rem;
+
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead4}
+  }
+`;
+
+const BoothName = styled.div`
+  border: 1px solid pink;
+  margin-bottom: 0.8rem;
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead3}
+  }
+`;
+
+const BoothHosted = styled.div`
+  margin-bottom: 0.8rem;
+  border: 1px solid pink;
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead3}
+  }
+`;
+
+const BoothIntroduction = styled.p`
+  input,
+  input::placeholder {
+    ${({ theme }) => theme.fontStyles.subHead4}
+  }
+  color: rgba(255, 255, 255, 0.8);
+  ${(props) => props.theme.fontStyles.subHead1}
+  font-weight:400;
+  padding: 1.2rem 0;
+  border-top: 1px solid transparent;
+  border-image: linear-gradient(to right, white, black);
+  border-image-slice: 1;
+`;