refactor(apply): refactor user input components

frontend/.storybook/preview.js

@@ -6,11 +6,11 @@ import axios from "axios";
 import "../src/api/api";
 import { RecruitmentContext } from "../src/hooks/useRecruitmentContext";
 import { recruitmentFilter } from "../src/provider/RecruitmentProvider";
-import FormProvider from "../src/provider/FormProvider/FormProvider";
 import TokenProvider from "../src/provider/TokenProvider";
-import useForm from "../src/hooks/useForm";
 
 import "../src/App.css";
+import FormProvider from "../src/provider/FormProvider";
+import useForm from "../src/hooks/useForm";
 
 export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
 axios.defaults.baseURL = API_BASE_URL;

frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

frontend/src/App.css

@@ -62,3 +62,10 @@ button {
   margin: 0 auto;
   padding: 2.5rem 0;
 }
+
+input,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

frontend/src/components/form/Button/Button.js → frontend/src/components/@common/Button/Button.js

@@ -25,7 +25,6 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  type: "button",
   cancel: false,
 };
 

frontend/src/components/@common/MessageTextInput/MessageTextInput.js

@@ -0,0 +1,55 @@
+import PropTypes from "prop-types";
+import Description from "../Description/Description";
+import TextInput from "../TextInput/TextInput";
+import styles from "./MessageTextInput.module.css";
+import Label from "../Label/Label";
+
+const MessageTextInput = ({
+  label,
+  description,
+  initialValue,
+  value,
+  onChange,
+  name,
+  maxLength,
+  required,
+  errorMessage,
+  ...props
+}) => {
+  return (
+    <>
+      <div className={styles["text-field"]}>
+        <Label required={required}>{label}</Label>
+        {description && <Description>{description}</Description>}
+        <TextInput
+          required={required}
+          value={value}
+          name={name}
+          maxLength={maxLength}
+          onChange={onChange}
+          {...props}
+        />
+      </div>
+      <p className={styles["rule-field"]}>{errorMessage}</p>
+    </>
+  );
+};
+
+MessageTextInput.propTypes = {
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  errorMessage: PropTypes.string,
+};
+
+MessageTextInput.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default MessageTextInput;

frontend/src/components/form/TextField/TextField.module.css → frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css

@@ -1,6 +1,7 @@
 .text-field {
   display: flex;
   flex-direction: column;
+  margin: 0.625rem;
 }
 
 .length-limit {

frontend/src/components/@common/MessageTextInput/MessageTextInput.stories.js

@@ -0,0 +1,33 @@
+import React from "react";
+import MessageTextInput from "./MessageTextInput";
+
+export default {
+  title: "form/MessageTextInput",
+  component: MessageTextInput,
+};
+
+const Template = (args) => <MessageTextInput {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "이름",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  label: "이름",
+  required: true,
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  label: "이름",
+  description: "이름을 입력하세요.",
+};
+
+export const MaxLength = Template.bind({});
+MaxLength.args = {
+  label: "이름",
+  maxLength: 30,
+  value: "썬",
+};

frontend/src/components/@common/MessageTextarea/MessageTextarea.js

@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+import Label from "../Label/Label";
+import Description from "../Description/Description";
+import Textarea from "../Textarea/Textarea";
+import styles from "./MessageTextarea.module.css";
+
+const MessageTextarea = ({
+  label,
+  name,
+  value,
+  description,
+  handleChange,
+  maxLength,
+  required,
+  errorMessage,
+  ...props
+}) => {
+  return (
+    <>
+      <div className={styles["text-field"]}>
+        <Label required={required}>{label}</Label>
+        {description && <Description>{description}</Description>}
+        {maxLength && maxLength > 0 && (
+          <div className={styles["length-limit"]}>
+            {value?.length} / {maxLength}
+          </div>
+        )}
+        <Textarea
+          name={name}
+          required={required}
+          value={value}
+          onChange={handleChange}
+          maxLength={maxLength}
+          {...props}
+        />
+      </div>
+      <p className={styles["rule-field"]}>{errorMessage}</p>
+    </>
+  );
+};
+
+MessageTextarea.propTypes = {
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+};
+
+MessageTextarea.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default MessageTextarea;

frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css

@@ -0,0 +1,19 @@
+.text-field {
+  display: flex;
+  flex-direction: column;
+  margin: 0.625rem;
+}
+
+.length-limit {
+  align-self: flex-end;
+  color: #999999;
+  font-size: 13px;
+}
+
+.rule-field {
+  margin-left: 8px;
+  margin-bottom: 10px;
+  height: 12px;
+  font-size: 12px;
+  color: #ff0000;
+}

frontend/src/components/form/TextField/TextField.stories.js → frontend/src/components/@common/MessageTextarea/MessageTextarea.stories.js

@@ -1,12 +1,12 @@
 import React from "react";
-import TextField from "./TextField";
+import MessageTextarea from "./MessageTextarea";
 
 export default {
-  title: "form/TextField",
-  component: TextField,
+  title: "form/MessageTextarea",
+  component: MessageTextarea,
 };
 
-const Template = (args) => <TextField {...args} />;
+const Template = (args) => <MessageTextarea {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

frontend/src/components/form/Radio/Radio.module.css → frontend/src/components/@common/Radio/Radio.module.css

@@ -28,7 +28,7 @@ input[type="radio"]::before {
 }
 
 input[type="radio"]:checked::before {
-  background: #0078ff;
+  background: var(--black);
   border: 3px solid #d8e0ea;
   color: #fff;
 }

frontend/src/components/form/TextInput/TextInput.js → frontend/src/components/@common/TextInput/TextInput.js

@@ -11,18 +11,6 @@ const TextInput = ({
   maxLength,
   ...props
 }) => {
-  if (type === "textarea") {
-    return (
-      <textarea
-        value={value}
-        maxLength={maxLength}
-        className={classNames(styles["text-input"], className)}
-        readOnly={readOnly}
-        {...props}
-      />
-    );
-  }
-
   return (
     <input
       type={type}
@@ -37,7 +25,7 @@ const TextInput = ({
 
 TextInput.propTypes = {
   className: PropTypes.string,
-  type: PropTypes.oneOf(["text", "email", "password", "textarea", "url"]),
+  type: PropTypes.oneOf(["text", "email", "password", "tel", "number", "url"]),
   readOnly: PropTypes.bool,
   value: PropTypes.string,
   maxLength: PropTypes.number,

frontend/src/components/@common/TextInput/TextInput.module.css

@@ -0,0 +1,17 @@
+.text-input {
+  padding: 12px;
+  border: 1px solid #ced6e0;
+  border-radius: 3px;
+  transition-duration: 0.5s;
+  line-height: 30px;
+  font-size: 16px;
+}
+
+.text-input:focus {
+  border: 1px solid #1e90ff;
+}
+
+.text-input:read-only {
+  cursor: default;
+  background: #ccc;
+}

frontend/src/components/@common/Textarea/Textarea.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./Textarea.module.css";
+
+const Textarea = ({
+  className,
+  readOnly,
+  value,
+  maxLength,
+  onChange,
+  ...props
+}) => {
+  return (
+    <textarea
+      value={value}
+      onChange={onChange}
+      maxLength={maxLength}
+      className={classNames(styles["text-input"], className)}
+      readOnly={readOnly}
+      {...props}
+    />
+  );
+};
+
+Textarea.propTypes = {
+  className: PropTypes.string,
+  readOnly: PropTypes.bool,
+  value: PropTypes.string,
+  maxLength: PropTypes.number,
+};
+
+Textarea.defaultProps = {
+  className: "",
+  readOnly: false,
+  value: "",
+};
+
+export default Textarea;

frontend/src/components/@common/Textarea/Textarea.module.css

@@ -0,0 +1,17 @@
+@media screen and (min-width: 513px) {
+  textarea {
+    min-height: 200px !important;
+  }
+}
+
+.text-input {
+  padding: 12px;
+  border: 1px solid #ced6e0;
+  border-radius: 3px;
+  transition-duration: 0.5s;
+  line-height: 30px;
+  font-size: 16px;
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 100px;
+}

frontend/src/components/@common/Textarea/Textarea.stories.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Textarea from "./Textarea";
+
+export default {
+  title: "form/Textarea",
+  component: Textarea,
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Textarea
+      value={value}
+      onChange={({ target }) => setValue(target.value)}
+      {...args}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  maxLength: 100,
+};
+
+export const ReadOnly = Template.bind({});
+
+ReadOnly.args = {
+  maxLength: 100,
+  readOnly: true,
+  value: "읽기전용 입력창입니다.",
+};