From bd54269e2d3d6bc5fffc8f8fc996723df2998b61 Mon Sep 17 00:00:00 2001
From: baegyeong <beth0929@naver.com>
Date: Tue, 28 May 2024 01:11:06 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20input=20=ED=8F=B4=EB=8D=94=20=EB=8C=80?=
 =?UTF-8?q?=EC=86=8C=EB=AC=B8=EC=9E=90=20=EA=B5=AC=EB=B6=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/Input.jsx       | 31 +++++++++
 src/components/common/input/InputGroup.jsx  | 76 +++++++++++++++++++++
 src/components/common/input/SelectInput.jsx | 30 ++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 src/components/common/input/Input.jsx
 create mode 100644 src/components/common/input/InputGroup.jsx
 create mode 100644 src/components/common/input/SelectInput.jsx

diff --git a/src/components/common/input/Input.jsx b/src/components/common/input/Input.jsx
new file mode 100644
index 00000000..f215e8af
--- /dev/null
+++ b/src/components/common/input/Input.jsx
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const Input = ({ type, placeholder, id, register, rules }) => {
+  return (
+    <>
+      <InputField
+        type={type}
+        id={id}
+        placeholder={placeholder}
+        autoComplete="off"
+        {...register(id, { ...rules })}
+      />
+    </>
+  );
+};
+
+const InputField = styled.input`
+  height: 2.8rem;
+  border-radius: 0.3rem;
+  outline: none;
+  border: none;
+  border: 1.3px solid #216d32;
+  width: 100%;
+  padding-left: 1rem;
+
+  &::placeholder {
+    color: #b3b3b3;
+  }
+`;
+
+export default Input;
diff --git a/src/components/common/input/InputGroup.jsx b/src/components/common/input/InputGroup.jsx
new file mode 100644
index 00000000..e2d99a32
--- /dev/null
+++ b/src/components/common/input/InputGroup.jsx
@@ -0,0 +1,76 @@
+import Input from "./Input";
+import Box from "@/components/register/Box";
+import Label from "@/components/register/Label";
+import AlertMessage from "@/components/register/AlertMessage";
+import DoubleCheck from "@/components/register/DoubleCheck";
+import styled from "styled-components";
+import { DoubleCheckStyle } from "../../register/DoubleCheck";
+
+const InputGroup = ({
+  id,
+  type,
+  label,
+  placeholder,
+  mypage,
+  margin,
+  btn,
+  register,
+  error,
+  rules,
+  doubleCheck,
+  value,
+  onClick,
+}) => {
+  return (
+    <Box>
+      <Label htmlFor={id} child={label} margin={margin}></Label>
+      <InputCss>
+        <Input
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          mypage={mypage}
+          register={register}
+          rules={rules}
+        />
+        {doubleCheck && (
+          <DoubleCheck
+            active={value && !error}
+            onClick={doubleCheck}
+          ></DoubleCheck>
+        )}
+      </InputCss>
+
+      {error && <AlertMessage>{error?.message}</AlertMessage>}
+
+      {btn && (
+        <ChangeButton className="mypageBtn" onClick={onClick}>
+          변경
+        </ChangeButton>
+      )}
+    </Box>
+  );
+};
+const InputCss = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+
+  @media screen and (max-width: 1023px) {
+    width: 100%;
+  }
+`;
+
+const ChangeButton = styled(DoubleCheckStyle)`
+  background-color: #fefefe;
+  color: #216d32;
+  border: 1px solid #216d32;
+  width: 4rem;
+  height: 2rem;
+  position: relative;
+  right: 0.5rem;
+`;
+
+export default InputGroup;
diff --git a/src/components/common/input/SelectInput.jsx b/src/components/common/input/SelectInput.jsx
new file mode 100644
index 00000000..ba5cf1ad
--- /dev/null
+++ b/src/components/common/input/SelectInput.jsx
@@ -0,0 +1,30 @@
+import { useFormContext } from "react-hook-form";
+import { StyledElement } from "@/styles/StyledInput";
+
+const SelectInput = ({ name, id, selected, list }) => {
+  const { register } = useFormContext();
+
+  return (
+    <StyledElement
+      as="select"
+      name={name}
+      id={id}
+      required
+      defaultValue={selected}
+      {...register(name, {
+        required: true,
+      })}
+    >
+      <option value="default" disabled>
+        카테고리를 선택하세요.
+      </option>
+      {list.map((item) => (
+        <option key={item} value={item}>
+          {item}
+        </option>
+      ))}
+    </StyledElement>
+  );
+};
+
+export default SelectInput;