Merge pull request #186 from baegyeong/main

style: input 폴더 대소문자 구분

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;

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;

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;