Merge branch 'develop' into feature/email-history

woowacourse · Oct 10, 2021 · 825d03b · 825d03b
2 parents 0a347b5 + 3fcedac
commit 825d03b
Show file tree

Hide file tree

Showing 64 changed files with 976 additions and 530 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,16 +1,6 @@
-:root {
-  --gray-002: #eee;
-  --gray-003: #ddd;
-  --gray-004: #ccc;
-  --gray-005: #bbb;
-  --gray-006: #aaa;
-  --gray-007: #999;
-  --gray-008: #666;
-  --black: #333;
-  --white: #fff;
-  --light-blue-gray: #f1f2f6;
-  --blue: #279cf6;
+@import "./color.css";
 
+:root {
   --pc-main-width: 800px;
   --pc-main-width-narrow: 512px;
 

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -7,7 +7,7 @@ import PrivateRoute from "./components/PrivateRoute/PrivateRoute";
 import ScrollToTop from "./components/ScrollToTop/ScrollToTop";
 
 import Recruits from "./pages/Recruits/Recruits";
-import ApplicantRegister from "./pages/ApplicantRegister/ApplicantRegister";
+import Join from "./pages/Join/Join";
 import ApplicationRegister from "./pages/ApplicationRegister/ApplicationRegister";
 import Login from "./pages/Login/Login";
 import PasswordEdit from "./pages/PasswordEdit/PasswordEdit";
@@ -36,7 +36,7 @@ const App = () => {
                   <Recruits />
                 </Route>
                 <Route path={PATH.NEW_APPLICATION} exact>
-                  <ApplicantRegister />
+                  <Join />
                 </Route>
                 <Route path={PATH.LOGIN} exact>
                   <Login />

diff --git a/frontend/src/color.css b/frontend/src/color.css
@@ -0,0 +1,16 @@
+:root {
+  --gray-001: #fafafa;
+  --gray-002: #eee;
+  --gray-003: #ddd;
+  --gray-004: #ccc;
+  --gray-005: #bbb;
+  --gray-006: #aaa;
+  --gray-007: #999;
+  --gray-008: #666;
+  --gray-009: #555;
+  --black: #333;
+  --white: #fff;
+  --light-blue-gray: #f1f2f6;
+  --blue: #279cf6;
+  --red: #ff0000;
+}
diff --git a/frontend/src/components/@common/Button/Button.js b/frontend/src/components/@common/Button/Button.js
@@ -1,12 +1,12 @@
-import React from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
 import styles from "./Button.module.css";
 
-const Button = ({ children, type, cancel, className, ...props }) => {
+const Button = ({ children, type, variant, cancel, className, ...props }) => {
   return (
     <button
-      className={classNames([styles.button], className, {
+      className={classNames(className, styles[variant], styles.button, {
         [styles.cancel]: cancel,
       })}
       type={type}
@@ -20,11 +20,13 @@ const Button = ({ children, type, cancel, className, ...props }) => {
 Button.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.oneOf(["button", "submit", "reset"]),
+  variant: PropTypes.oneOf(["contained", "outlined"]),
   cancel: PropTypes.bool,
   className: PropTypes.string,
 };
 
 Button.defaultProps = {
+  variant: "contained",
   cancel: false,
 };
 

diff --git a/frontend/src/components/@common/Button/Button.module.css b/frontend/src/components/@common/Button/Button.module.css
@@ -1,15 +1,28 @@
 .button {
-  background: var(--black);
-  color: var(--white);
   border-radius: 0.25rem;
   padding: 0.5rem 1.25rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.button.cancel {
-  background: var(--gray-007);
+.contained {
+  background-color: var(--black);
+  color: var(--white);
+}
+
+.outlined {
+  color: var(--black);
+  background-color: var(--white);
+  border: 1px solid var(--black);
+}
+
+.outlined:hover {
+  background-color: var(--gray-001);
+}
+
+.cancel {
+  background: var(--gray-008);
 }
 
 .button:disabled {

diff --git a/frontend/src/components/@common/Button/Button.stories.js b/frontend/src/components/@common/Button/Button.stories.js
@@ -13,8 +13,20 @@ Default.args = {
   children: "버튼",
 };
 
+export const Outlined = Template.bind({});
+Outlined.args = {
+  children: "버튼",
+  variant: "outlined",
+};
+
 export const Cancel = Template.bind({});
 Cancel.args = {
-  children: "버튼",
+  children: "취소",
   cancel: true,
 };
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: "버튼",
+  disabled: true,
+};
diff --git a/frontend/src/components/@common/Description/Description.js b/frontend/src/components/@common/Description/Description.js
@@ -1,9 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
 import styles from "./Description.module.css";
 
-const Description = ({ children }) => {
-  return <div className={styles.description}>{children}</div>;
+const Description = ({ children, className }) => {
+  return (
+    <div className={classNames(styles.description, className)}>{children}</div>
+  );
 };
 
 Description.propTypes = {

diff --git a/frontend/src/components/@common/Description/Description.module.css b/frontend/src/components/@common/Description/Description.module.css
@@ -1,7 +1,7 @@
 .description {
   display: flex;
   flex-direction: column;
-  margin: 15px 0;
-  font-weight: 300;
-  font-size: 16px;
+  margin: 8px 0;
+  font-size: 14px;
+  color: var(--gray-008);
 }
diff --git a/frontend/src/components/@common/Label/Label.module.css b/frontend/src/components/@common/Label/Label.module.css
@@ -1,13 +1,10 @@
 .label {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: #2c3e50;
-  margin: 5px 0;
 }
 
 .required::after {
   content: "*";
-  margin: 0 3px;
-  color: #1e90ff;
+  margin-left: 0.25rem;
+  color: var(--blue);
 }
diff --git a/frontend/src/components/@common/MessageTextInput/MessageTextInput.js b/frontend/src/components/@common/MessageTextInput/MessageTextInput.js
@@ -1,8 +1,9 @@
+import classNames from "classnames";
 import PropTypes from "prop-types";
 import Description from "../Description/Description";
+import Label from "../Label/Label";
 import TextInput from "../TextInput/TextInput";
 import styles from "./MessageTextInput.module.css";
-import Label from "../Label/Label";
 
 const MessageTextInput = ({
   label,
@@ -13,25 +14,34 @@ const MessageTextInput = ({
   name,
   maxLength,
   required,
+  className,
   errorMessage,
   ...props
 }) => {
   return (
-    <>
+    <div className={classNames(styles.box, className)}>
       <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}
-        />
+        <Label className={styles.label} required={required}>
+          {label}
+        </Label>
+        {description && (
+          <Description className={styles.description}>
+            {description}
+          </Description>
+        )}
+        <div className={styles["input-box"]}>
+          <TextInput
+            required={required}
+            value={value}
+            name={name}
+            maxLength={maxLength}
+            onChange={onChange}
+            {...props}
+          />
+        </div>
       </div>
-      <p className={styles["rule-field"]}>{errorMessage}</p>
-    </>
+      {errorMessage && <p className={styles["rule-field"]}>{errorMessage}</p>}
+    </div>
   );
 };
 

diff --git a/frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css b/frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css
@@ -1,19 +1,42 @@
+.box {
+  position: relative;
+}
+
 .text-field {
   display: flex;
   flex-direction: column;
-  margin: 0.625rem;
+  margin-bottom: 1rem;
+}
+
+.label {
+  margin-bottom: 0.375rem;
 }
 
 .length-limit {
   align-self: flex-end;
-  color: #999999;
-  font-size: 13px;
+  color: var(--gray-007);
+  font-size: 0.875rem;
 }
 
 .rule-field {
-  margin-left: 8px;
-  margin-bottom: 10px;
-  height: 12px;
-  font-size: 12px;
-  color: #ff0000;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-left: 0.5rem;
+  height: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--red);
+}
+
+.description {
+  margin-bottom: 1.125rem;
+}
+
+.input-box {
+  display: flex;
+  height: 2.5rem;
+}
+
+.input-box > input {
+  flex: 1;
 }
diff --git a/frontend/src/components/@common/MessageTextarea/MessageTextarea.js b/frontend/src/components/@common/MessageTextarea/MessageTextarea.js
@@ -13,10 +13,11 @@ const MessageTextarea = ({
   maxLength,
   required,
   errorMessage,
+  className,
   ...props
 }) => {
   return (
-    <>
+    <div className={className}>
       <div className={styles["text-field"]}>
         <Label required={required}>{label}</Label>
         {description && <Description>{description}</Description>}
@@ -35,7 +36,7 @@ const MessageTextarea = ({
         />
       </div>
       <p className={styles["rule-field"]}>{errorMessage}</p>
-    </>
+    </div>
   );
 };
 

diff --git a/frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css b/frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css
@@ -1,13 +1,13 @@
 .text-field {
   display: flex;
   flex-direction: column;
-  margin: 0.625rem;
 }
 
 .length-limit {
   align-self: flex-end;
-  color: #999999;
+  color: var(--gray-007);
   font-size: 13px;
+  margin-bottom: 4px;
 }
 
 .rule-field {

diff --git a/frontend/src/components/@common/Radio/Radio.module.css b/frontend/src/components/@common/Radio/Radio.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 
 input[type="radio"] {
@@ -18,17 +18,15 @@ input[type="radio"] {
 
 input[type="radio"]::before {
   content: "";
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  border: 3px solid #ced6e0;
-  background: #fff;
-  margin-right: 5px;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 1.25rem;
+  border: 3px solid var(--gray-004);
+  background: var(--white);
+  margin-right: 0.25rem;
   transition-duration: 0.2s;
 }
 
 input[type="radio"]:checked::before {
   background: var(--black);
-  border: 3px solid #d8e0ea;
-  color: #fff;
 }
diff --git a/frontend/src/components/@common/TextInput/TextInput.module.css b/frontend/src/components/@common/TextInput/TextInput.module.css
@@ -1,17 +1,16 @@
 .text-input {
-  padding: 12px;
-  border: 1px solid #ced6e0;
-  border-radius: 3px;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--gray-005);
+  border-radius: 0.25rem;
   transition-duration: 0.5s;
-  line-height: 30px;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .text-input:focus {
-  border: 1px solid #1e90ff;
+  border: 1px solid var(--blue);
 }
 
 .text-input:read-only {
   cursor: default;
-  background: #ccc;
+  background: var(--gray-004);
 }
diff --git a/frontend/src/components/@common/Textarea/Textarea.module.css b/frontend/src/components/@common/Textarea/Textarea.module.css
@@ -6,8 +6,8 @@
 
 .text-input {
   padding: 12px;
-  border: 1px solid #ced6e0;
-  border-radius: 3px;
+  border: 1px solid var(--gray-006);
+  border-radius: 4px;
   transition-duration: 0.5s;
   line-height: 30px;
   font-size: 16px;