MISSION3 / 곽민준

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",

src/App.css

@@ -1,42 +1,124 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+body {
+  line-height: 1;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+ol,
+ul {
+  list-style: none;
 }
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+blockquote,
+q {
+  quotes: none;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
 }
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
 }

src/App.jsx

@@ -1,35 +1,21 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import React from "react";
+import styled from "styled-components";
+import CardRegisterForm from "./components/CardRegisterForm";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <GreyBackground>
+      <CardRegisterForm />
+    </GreyBackground>
+  );
 }
 
-export default App
+export default App;
+
+const GreyBackground = styled.div`
+  background-color: #efeff0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+`;

src/components/Card.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+
+const Card = ({ cardNumber }) => {
+  return (
+    <CardList>
+      <CardImage />
+      <CardNumber>카드 번호: {cardNumber}</CardNumber>
+    </CardList>
+  );
+};
+
+export default Card;
+
+const CardImage = styled.div`
+  width: 9.375rem;
+  height: 5rem;
+  background-color: white;
+  border-radius: 0.3125rem;
+`;
+
+const CardList = styled.div`
+  display: flex;
+  padding: 0.625rem 0.625rem 0.625rem 0rem;
+`;
+
+const CardNumber = styled.div`
+  padding: 0.625rem;
+`;

src/components/CardNumberInputs.jsx

@@ -0,0 +1,26 @@
+// CardNumberInputs 컴포넌트
+import React from "react";
+import DataInput from "./DataInput";
+
+const CardNumberInputs = ({ cardNumbers, handleInputChange }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+      }}
+    >
+      {cardNumbers.map((number, index) => (
+        <DataInput
+          key={index}
+          placeholder={"0000"}
+          value={number}
+          onChange={handleInputChange(index)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CardNumberInputs;

src/components/CardRegisterForm.jsx

@@ -0,0 +1,69 @@
+import DataInput from "./DataInput";
+import React, { useState } from "react";
+import styled from "styled-components";
+import Card from "./Card";
+import CardNumberInputs from "./CardNumberInputs";
+
+const CardRegisterForm = () => {
+  const [cardNumbers, setCardNumbers] = useState(["", "", "", ""]);
+  const [submittedCardNumbers, setSubmittedCardNumbers] = useState([]);
+
+  const handleInputChange = (index) => (e) => {
+    const newCardNumbers = [...cardNumbers];
+    newCardNumbers[index] = e.target.value;
+    setCardNumbers(newCardNumbers);
+  };
+
+  const handleSubmit = () => {
+    const cardNumber = cardNumbers.join("");
+    setSubmittedCardNumbers((prev) => [...prev, cardNumber]);
+  };
+
+  return (
+    <div>
+      <FormTitle>카드 정보를 입력해주세요</FormTitle>
+      <DataInput
+        InputData={"카드 이름"}
+        placeholder={"카드 이름을 입력해주세요"}
+      />
+      <CardNumberInputs
+        cardNumbers={cardNumbers}
+        handleInputChange={handleInputChange}
+      />
+      <DataInput type={"text"} InputData={"유효기간"} placeholder={"MM/YY"} />
+      <DataInput
+        type={"password"}
+        InputData={"CVC"}
+        placeholder={"카드 뒷면 3자리 숫자"}
+      />
+      <DataInput
+        type={"password"}
+        InputData={"카드 비밀번호"}
+        placeholder={"카드 앞면 2자리 숫자"}
+      />
+      <CompleteButton onClick={handleSubmit}>완료</CompleteButton>
+      {submittedCardNumbers.map((number, index) => (
+        <Card key={index} cardNumber={number} />
+      ))}
+    </div>
+  );
+};
+
+export default CardRegisterForm;
+
+const CompleteButton = styled.button`
+  margin-top: 0.625rem;
+  padding: 1.25rem 21.5625rem;
+  background-color: white;
+  border-radius: 0px 0px 0.3125rem 0.3125rem;
+  border: none;
+`;
+
+const FormTitle = styled.div`
+  background-color: #8991a0;
+  color: white;
+  font-size: 0.875rem;
+  padding: 0.9375rem;
+  border-radius: 0.3125rem 0.3125rem 0px 0px;
+  margin-top: 3.125rem;
+`;

src/components/DataInput.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+
+function DataInput({ type, placeholder, InputData, value, onChange }) {
+  return (
+    <InputForm>
+      <label>{InputData} </label>
+      <input
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+    </InputForm>
+  );
+}
+
+export default DataInput;
+
+const InputForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.625rem;
+  background-color: white;
+  border-bottom: 0.0625rem solid #d9d9d9;
+  input {
+    border: none;
+  }
+
+  label {
+    text-align: left;
+  }
+`;