[1단계 - 페이먼츠] - 버건디(전태헌) 미션 제출합니다.

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

README.md

@@ -1 +1,27 @@
-# react-payments
+# 💳 페이먼츠
+
+페이먼츠 사용자의 카드 정보를 입력하고 해당 카드를 어플리케이션에 등록한다.
+
+### 카드 번호 입력 및 식별
+
+- 사용자가 입력하는 카드 번호를 실시간으로 파악하여, Visa나 MasterCard에 해당하면 해당 브랜드의 로고를 UI에 표시한다.
+  - Visa : 4로 시작하는 16자리
+  - MasterCard: 51~55로 시작하는 16자리 숫자
+- 입력은 숫자만 가능하며, 유효하지 않은 번호 입력 시 피드백을 제공한다.
+
+### 카드 유효기간 입력
+
+- 월과 년도를 범위 내에서만 입력할 수 있어야 하며, 입력 제한을 두어 사용자가 숫자만 입력할 수 있도록 한다.
+
+### 카드 소유자 이름 입력
+
+- 영문자 대문자만 입력 가능한 폼을 구현한다.
+
+### 실시간 프리뷰 업데이트
+
+- 사용자의 카드 정보 입력에 따라 카드 프리뷰를 동시에 업데이트한다.
+
+### ⚠️ 주의 사항
+
+- 사용자의 입력 input에 포커스를 자동으로 이동하는 부분을 1단계에서 고려하지 않는다. **'기능' 자체에 집중해서 구현**한다. 만약 리뷰어가 사용자 경험 측면에서 피드백을 준다면, 피드백을 반영하는 시점에서 사용자 경험도 함께 고려하여 개선한다.
+- 기본적인 기능 요구사항을 만족하지 못한 코드는 코드 리뷰 대상이 아니다.

package.json

@@ -13,7 +13,9 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",

src/App.tsx

@@ -1,9 +1,241 @@
-import "./App.css";
+import styled from 'styled-components';
+import GlobalStyles from './GlobalStyles';
+import InputInfo from './components/InputSection';
+import Input from './components/composables/Input';
+import CreditCard from './components/CreditCard';
+import useCardNumber from './hooks/useCardNumber';
+import useInput from './hooks/useInput';
+import { useEffect, useState } from 'react';
+import Label from './components/composables/Label';
+import MasterCardImage from './assets/images/mastercard.png';
+import VisaCardImage from './assets/images/visa.png';
+import validate from './utils/validate';
+import { CARD_NUMBER, EXPIRATION_PERIOD, OWNER_NAME } from './constants/cardSection';
+
+export const StyledInput = styled.input`
+  border: 1px solid #acacac;
+  padding: 8px;
+  font-size: 0.6875rem;
+  border-radius: 2px;
+  height: 32px;
+`;
+
+export type InitialCardNumberState = {
+  value: string;
+  isError: boolean;
+};
+
+const InitialCardNumberState: InitialCardNumberState = {
+  value: '',
+  isError: false,
+};
+
+const Container = styled.div`
+  padding: 20px 30px;
+
+  width: 376px;
+  height: 680px;
+  background-color: beige;
+`;
+
+const CardInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const ErrorContainer = styled.div`
+  height: 14px;
+`;
+
+const ErrorMessageSpan = styled.span`
+  color: #ff3d3d;
+
+  font-size: 0.5938rem;
+  font-weight: 400;
+  line-height: 0.875rem;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
 
 function App() {
+  const { cardNumbers, cardNumbersChangeHandler } = useCardNumber(
+    Array.from({ length: 4 }, () => InitialCardNumberState),
+  );
+  const [cardImageSrc, setCardImageSrc] = useState('');
+
+  const {
+    inputState: month,
+    inputChangeHandler: monthChangeHandler,
+    error: monthError,
+    setError: setMonthError,
+  } = useInput();
+
+  const {
+    inputState: year,
+    inputChangeHandler: yearChangeHandler,
+    error: yearError,
+    setError: setYearError,
+  } = useInput();
+
+  const {
+    inputState: name,
+    inputChangeHandler: nameChangeHandler,
+    error: nameError,
+    setError: setNameError,
+  } = useInput();
+
+  useEffect(() => {
+    if (
+      month !== '' &&
+      (!validate.isNumberInRange({ min: 1, max: 12, compareNumber: Number(month) }) ||
+        !validate.isValidDigit(month))
+    ) {
+      setMonthError(true);
+
+      return;
+    }
+
+    setMonthError(false);
+  }, [month, monthError]);
+
+  useEffect(() => {
+    if (year !== '' && !validate.isValidDigit(year)) {
+      setYearError(true);
+
+      return;
+    }
+
+    setYearError(false);
+  }, [year, yearError]);
+
+  useEffect(() => {
+    if (name !== '' && !validate.isEnglish(name)) {
+      setNameError(true);
+
+      return;
+    }
+
+    setNameError(false);
+  }, [name, nameError]);
+
+  useEffect(() => {
+    setCardImageSrc('');
+
+    const cardNumberString = cardNumbers.map((cardNumber) => cardNumber.value).join('');
+
+    if (validate.isVisa(cardNumberString)) {
+      setCardImageSrc(VisaCardImage);
+    }
+
+    if (validate.isMasterCard(cardNumberString)) {
+      setCardImageSrc(MasterCardImage);
+    }
+  }, [cardNumbers]);
+
   return (
     <>
-      <h1>React Payments</h1>
+      <GlobalStyles />
+      <Container>
+        <CreditCard
+          cardNumbers={cardNumbers}
+          month={month}
+          year={year}
+          name={name}
+          cardImageSrc={cardImageSrc}
+        />
+        <CardInfoContainer>
+          <Wrapper>
+            <InputInfo
+              title={CARD_NUMBER.title}
+              description={CARD_NUMBER.description}
+              inputTitle={CARD_NUMBER.inputTitle}
+            >
+              {cardNumbers.map((cardNumber, index) => {
+                const uniqueId = 'cardNumbers' + index;
+                return (
+                  <>
+                    <Label htmlFor={uniqueId} />
+                    <Input
+                      key={uniqueId}
+                      id={uniqueId}
+                      placeholder="1234"
+                      type="text"
+                      maxLength={4}
+                      value={cardNumber.value}
+                      onChange={(e) => cardNumbersChangeHandler(e, index)}
+                      isError={cardNumber.isError}
+                    />
+                  </>
+                );
+              })}
+            </InputInfo>
+            <ErrorContainer>
+              <ErrorMessageSpan>
+                {cardNumbers.some((cardNumber) => cardNumber.isError) && CARD_NUMBER.errorMessage}
+              </ErrorMessageSpan>
+            </ErrorContainer>
+          </Wrapper>
+
+          <Wrapper>
+            <InputInfo
+              title={EXPIRATION_PERIOD.title}
+              description={EXPIRATION_PERIOD.description}
+              inputTitle={EXPIRATION_PERIOD.inputTitle}
+            >
+              <Label htmlFor={'month'} />
+              <Input
+                id={'month'}
+                placeholder={'MM'}
+                type="text"
+                value={month}
+                maxLength={2}
+                onChange={monthChangeHandler}
+                isError={monthError}
+              />
+              <Label htmlFor={'year'} />
+              <Input
+                id={'year'}
+                placeholder={'YY'}
+                type="text"
+                maxLength={2}
+                value={year}
+                onChange={yearChangeHandler}
+                isError={yearError}
+              />
+            </InputInfo>
+            <ErrorContainer>
+              <ErrorMessageSpan>
+                {monthError && yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
+                {!monthError && yearError ? EXPIRATION_PERIOD.yearErrorMessage : ''}
+                {monthError && !yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
+              </ErrorMessageSpan>
+            </ErrorContainer>
+          </Wrapper>
+
+          <Wrapper>
+            <InputInfo title={OWNER_NAME.title} inputTitle={OWNER_NAME.inputTitle}>
+              <Label htmlFor={'name'} />
+              <Input
+                id="name"
+                maxLength={30}
+                onChange={nameChangeHandler}
+                isError={nameError}
+                placeholder="JOHN DOE"
+                type="text"
+                value={name}
+              />
+            </InputInfo>
+            <ErrorContainer>
+              <ErrorMessageSpan>{nameError && OWNER_NAME.errorMessage}</ErrorMessageSpan>
+            </ErrorContainer>
+          </Wrapper>
+        </CardInfoContainer>
+      </Container>
     </>
   );
 }

src/GlobalStyles.tsx

@@ -0,0 +1,45 @@
+import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
+
+const GlobalStyles = createGlobalStyle`
+  ${reset}
+
+  a{
+    text-decoration: none;
+    color: inherit;
+  }
+
+  *{
+    box-sizing: border-box;
+  }
+
+  #root {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100vw;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  input, textarea { 
+    -moz-user-select: auto;
+    -webkit-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+`;
+
+export default GlobalStyles;