setIsOpen(false)}
+ />
+ );
+};
+
+const ModalPositioner = ({ children }: React.PropsWithChildren) => {
+ const { isOpen } = useContext(ModalContext);
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+const ModalContent = ({ children }: React.PropsWithChildren) => {
+ const { isOpen } = useContext(ModalContext);
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+const ModalOpener = ({ children }: React.PropsWithChildren) => {
+ const { setIsOpen } = useContext(ModalContext);
+
+ return
setIsOpen(true)}>{children}
;
+};
+
+const ModalCloseer = ({ children }: React.PropsWithChildren) => {
+ const { setIsOpen } = useContext(ModalContext);
+
+ return
setIsOpen(false)}>{children}
;
+};
+
+export {
+ ModalRoot as Root,
+ ModalBackdrop as Backdrop,
+ ModalPositioner as Positioner,
+ ModalContent as Content,
+ ModalOpener as Opener,
+ ModalCloseer as Closer,
+};
diff --git a/src/components/common/Modal/style.css b/src/components/common/Modal/style.css
new file mode 100644
index 00000000..953356fd
--- /dev/null
+++ b/src/components/common/Modal/style.css
@@ -0,0 +1,45 @@
+[data-scope="modal"][data-part="backdrop"] {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 15px;
+ z-index: 5;
+}
+
+[data-scope="modal"][data-part="positioner"] {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+}
+
+[data-scope="modal"][data-part="content"] {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ width: 375px;
+ height: 220px;
+ border-radius: 5px 5px 15px 15px;
+ background-color: #fff;
+ z-index: 10;
+}
+
+#story-base {
+ width: 375px;
+ min-width: 375px;
+ height: 700px;
+ position: relative;
+ background-color: #fff;
+ border: 1px solid black;
+ border-radius: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/components/common/Title.tsx b/src/components/common/Title.tsx
new file mode 100644
index 00000000..21844cd0
--- /dev/null
+++ b/src/components/common/Title.tsx
@@ -0,0 +1,22 @@
+interface TitleProps {
+ level: 1 | 2 | 3 | 4 | 5 | 6;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+const Title = ({
+ level,
+ className,
+ style,
+ children,
+}: React.PropsWithChildren
) => {
+ const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Title;
diff --git a/src/components/common/Tooltip/Tooltip.stories.tsx b/src/components/common/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 00000000..ef7556e5
--- /dev/null
+++ b/src/components/common/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltip from ".";
+import "./style.css";
+
+const meta = {
+ title: "Payments/Tooltip",
+ component: Tooltip,
+ parameters: {
+ layout: "centered",
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ message: "tooltip message",
+ },
+ render: ({ message }) => {
+ return Tooltip?!;
+ },
+};
diff --git a/src/components/common/Tooltip/index.tsx b/src/components/common/Tooltip/index.tsx
new file mode 100644
index 00000000..9f0d3c4f
--- /dev/null
+++ b/src/components/common/Tooltip/index.tsx
@@ -0,0 +1,31 @@
+import { useTooltip } from "../../../hooks";
+import "./style.css";
+
+export interface TooltipProps {
+ message: string;
+}
+
+const Tooltip = ({
+ children,
+ message,
+}: React.PropsWithChildren) => {
+ const tooltip = useTooltip();
+
+ return (
+
+ {children}
+ {tooltip.isShow && (
+
+ {message}
+
+ )}
+
+ {showOnBlur && isValid() && (
+
+ {errorMessage}
+
+ )}
+
+ );
+};
+
+export default ValidationMessage;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 00000000..013ad9fe
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,8 @@
+export { default as Button } from "./Button";
+export { default as Title } from "./Title";
+export { default as Input } from "./Input";
+export * as Modal from "./Modal";
+export { default as Icon } from "./Icon";
+export { default as Tooltip } from "./Tooltip";
+export { default as ValidationMessage } from "./ValidationMessage";
+export { default as Flex } from "./Flex";
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..fdeaa91b
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as CardInfoEdit } from "./CardInfoEdit";
+export { default as CardNicknameEdit } from "./CardNicknameEdit";
diff --git a/src/constants/card.ts b/src/constants/card.ts
new file mode 100644
index 00000000..79a6feb9
--- /dev/null
+++ b/src/constants/card.ts
@@ -0,0 +1,10 @@
+export const CARD_NAME_LIST = [
+ { name: "찬욱 카드", color: "#E24141" },
+ { name: "효리 카드", color: "#547CE4" },
+ { name: "수연 카드", color: "#73BC6D" },
+ { name: "세진 카드", color: "#DE59B9" },
+ { name: "진경 카드", color: "#94DACD" },
+ { name: "종길 카드", color: "#E76E9A" },
+ { name: "건우 카드", color: "#F37D3B" },
+ { name: "혜성 카드", color: "#FBCD58" },
+];
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000..1d243e76
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1 @@
+export * from "./card";
diff --git a/src/contexts/cardInfo/CardInfoContext.ts b/src/contexts/cardInfo/CardInfoContext.ts
new file mode 100644
index 00000000..9c44196b
--- /dev/null
+++ b/src/contexts/cardInfo/CardInfoContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { CardInfoContextType } from "./types";
+
+const CardInfoContext = createContext({
+ cardInfoList: [],
+ dispatch: () => {},
+});
+
+export default CardInfoContext;
diff --git a/src/contexts/cardInfo/CardInfoProvider.tsx b/src/contexts/cardInfo/CardInfoProvider.tsx
new file mode 100644
index 00000000..9dcd4cf5
--- /dev/null
+++ b/src/contexts/cardInfo/CardInfoProvider.tsx
@@ -0,0 +1,20 @@
+import { useMemo, useReducer } from "react";
+import CardInfoContext from "./CardInfoContext";
+import cardInfoReducer from "./cardInfoReducer";
+
+const CardInfoProvider = ({ children }: React.PropsWithChildren) => {
+ const [cardInfoList, dispatch] = useReducer(cardInfoReducer, []);
+
+ const cardInfoContextValue = useMemo(
+ () => ({ cardInfoList, dispatch }),
+ [cardInfoList, dispatch]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default CardInfoProvider;
diff --git a/src/contexts/cardInfo/cardInfoReducer.ts b/src/contexts/cardInfo/cardInfoReducer.ts
new file mode 100644
index 00000000..841d48b6
--- /dev/null
+++ b/src/contexts/cardInfo/cardInfoReducer.ts
@@ -0,0 +1,40 @@
+import { CardInfo } from "../../types";
+import { getRandomId } from "../../utils";
+import { Action } from "./types";
+
+const cardInfoReducer = (state: CardInfo[], action: Action) => {
+ switch (action.type) {
+ case "ADD": {
+ const newCard: CardInfo = {
+ id: getRandomId(6),
+ ...action.payload,
+ };
+
+ return [newCard, ...state];
+ }
+ case "UPDATE_NICKNAME": {
+ const { id, nickname } = action.payload;
+ const index = state.findIndex((cardInfo) => cardInfo.id === id)!;
+ const selectedCardInfo = state[index];
+
+ const updatedCardInfo: CardInfo = {
+ ...selectedCardInfo,
+ nickname: nickname.length === 0 ? selectedCardInfo.nickname : nickname,
+ };
+
+ return [
+ ...state.slice(0, index),
+ updatedCardInfo,
+ ...state.slice(index + 1),
+ ];
+ }
+ case "DELETE": {
+ const { id } = action.payload;
+ const index = state.findIndex((cardInfo) => cardInfo.id === id)!;
+
+ return [...state.slice(0, index), ...state.slice(index + 1)];
+ }
+ }
+};
+
+export default cardInfoReducer;
diff --git a/src/contexts/cardInfo/index.ts b/src/contexts/cardInfo/index.ts
new file mode 100644
index 00000000..a0646114
--- /dev/null
+++ b/src/contexts/cardInfo/index.ts
@@ -0,0 +1,4 @@
+export * from "./types";
+export { default as CardInfoContext } from "./CardInfoContext";
+export { default as CardInfoProvider } from "./CardInfoProvider";
+export { default as useCardInfo } from "./useCardInfo";
diff --git a/src/contexts/cardInfo/types.ts b/src/contexts/cardInfo/types.ts
new file mode 100644
index 00000000..8d34a60f
--- /dev/null
+++ b/src/contexts/cardInfo/types.ts
@@ -0,0 +1,11 @@
+import { CardInfo } from "../../types";
+
+export type Action =
+ | { type: "ADD"; payload: Omit }
+ | { type: "UPDATE_NICKNAME"; payload: Pick }
+ | { type: "DELETE"; payload: Pick };
+
+export interface CardInfoContextType {
+ cardInfoList: CardInfo[];
+ dispatch: React.Dispatch;
+}
diff --git a/src/contexts/cardInfo/useCardInfo.ts b/src/contexts/cardInfo/useCardInfo.ts
new file mode 100644
index 00000000..97c9d77c
--- /dev/null
+++ b/src/contexts/cardInfo/useCardInfo.ts
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import CardInfoContext from "./CardInfoContext";
+
+const useCardInfo = () => {
+ const context = useContext(CardInfoContext);
+
+ return context;
+};
+
+export default useCardInfo;
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
new file mode 100644
index 00000000..7488b609
--- /dev/null
+++ b/src/contexts/index.ts
@@ -0,0 +1 @@
+export * from "./cardInfo";
diff --git a/src/domain/cardValidator.ts b/src/domain/cardValidator.ts
new file mode 100644
index 00000000..135a4433
--- /dev/null
+++ b/src/domain/cardValidator.ts
@@ -0,0 +1,31 @@
+const cardValidator = {
+ number: {
+ check: (cardNumber: string[]) =>
+ !cardNumber.every((number) => number.length === 4),
+ errorMessage: "카드 번호가 유효하지 않습니다.",
+ maxLength: 4,
+ },
+ username: {
+ check: (username: string) => username.length < 1,
+ errorMessage: "카드 소유자 이름을 입력해주세요.",
+ maxLength: 30,
+ },
+ expiry: {
+ check: (month: string, year: string) =>
+ month.length !== 2 || year.length !== 2,
+ errorMessage: "카드 만료일이 유효하지 않습니다.",
+ maxLength: 2,
+ },
+ securityCode: {
+ check: (code: string) => code.length !== 3,
+ errorMessage: "보안 코드가 유효하지 않습니다.",
+ maxLength: 3,
+ },
+ password: {
+ check: (password: string[]) => !password.every((word) => word.length === 1),
+ errorMessage: "카드 비밀번호를 입력해주세요.",
+ maxLength: 1,
+ },
+};
+
+export default cardValidator;
diff --git a/src/domain/domain.test.ts b/src/domain/domain.test.ts
new file mode 100644
index 00000000..6770beb9
--- /dev/null
+++ b/src/domain/domain.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+import { formatCardNumber, formatExpiredDate } from ".";
+
+describe("formatCardNumber 함수 테스트", () => {
+ test.each([
+ {
+ cardNumber: ["0000", "1111", "2222", "3333"],
+ expected: "0000-1111-****-****",
+ },
+ { cardNumber: ["", "111", "", "33"], expected: "111-**" },
+ { cardNumber: ["1234", "", "5678", ""], expected: "1234-****" },
+ { cardNumber: ["", "", "", ""], expected: "" },
+ { cardNumber: ["1234", "5678"], expected: "1234-5678" },
+ ])(
+ "카드 번호 배열($cardNumber)을 입력하면 빈 세그먼트를 제거하고, 세 번째 세그먼트부터 마스킹한 결과($expected)가 반환된다.",
+ ({ cardNumber, expected }) => {
+ const formattedCardNumber = formatCardNumber(cardNumber);
+
+ expect(formattedCardNumber).toBe(expected);
+ }
+ );
+});
+
+describe("formatExpiredDate 함수 테스트", () => {
+ test.each([
+ { month: "", year: "21", expected: "MM/21" },
+ { month: "12", year: "", expected: "12/YY" },
+ { month: "05", year: "23", expected: "05/23" },
+ { month: "", year: "", expected: "MM/YY" },
+ { month: "1", year: "2", expected: "MM/YY" },
+ ])(
+ "월($month)과 년($year)을 입력하면 'MM/YY' 형식으로 포맷팅된 $expected를 반환한다",
+ ({ month, year, expected }) => {
+ const formattedExpiredDate = formatExpiredDate(month, year);
+
+ expect(formattedExpiredDate).toBe(expected);
+ }
+ );
+});
diff --git a/src/domain/formatCardNumber.ts b/src/domain/formatCardNumber.ts
new file mode 100644
index 00000000..0a6b0a0e
--- /dev/null
+++ b/src/domain/formatCardNumber.ts
@@ -0,0 +1,8 @@
+const formatCardNumber = (cardNumber: string[]) => {
+ return cardNumber
+ .map((num, idx) => (idx > 1 ? "*".repeat(num.length) : num))
+ .filter((num) => num.length > 0)
+ .join("-");
+};
+
+export default formatCardNumber;
diff --git a/src/domain/formatExpiredDate.ts b/src/domain/formatExpiredDate.ts
new file mode 100644
index 00000000..a0386932
--- /dev/null
+++ b/src/domain/formatExpiredDate.ts
@@ -0,0 +1,8 @@
+const formatExpiredDate = (month: string, year: string) => {
+ const formattedMonth = month.length === 2 ? month : "MM";
+ const formattedYear = year.length === 2 ? year : "YY";
+
+ return `${formattedMonth}/${formattedYear}`;
+};
+
+export default formatExpiredDate;
diff --git a/src/domain/index.ts b/src/domain/index.ts
new file mode 100644
index 00000000..188aa877
--- /dev/null
+++ b/src/domain/index.ts
@@ -0,0 +1,3 @@
+export { default as formatCardNumber } from "./formatCardNumber";
+export { default as formatExpiredDate } from "./formatExpiredDate";
+export { default as cardValidator } from "./cardValidator";
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 00000000..92c87e8a
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,4 @@
+export { default as useCardForm } from "./useCardForm";
+export { default as useBlur } from "./useBlur";
+export { default as useFocusNext } from "./useFocusNext";
+export { default as useTooltip } from "./useTooltip";
diff --git a/src/hooks/useBlur/index.ts b/src/hooks/useBlur/index.ts
new file mode 100644
index 00000000..cb2b15a7
--- /dev/null
+++ b/src/hooks/useBlur/index.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback } from "react";
+
+const useBlur = (initialState = false) => {
+ const [blurred, setBlurred] = useState(initialState);
+
+ const handleBlur = useCallback(() => {
+ setBlurred(true);
+ }, []);
+
+ const resetBlur = useCallback(() => {
+ setBlurred(false);
+ }, []);
+
+ return { blurred, handleBlur, resetBlur };
+};
+
+export default useBlur;
diff --git a/src/hooks/useBlur/useBlur.test.ts b/src/hooks/useBlur/useBlur.test.ts
new file mode 100644
index 00000000..fbd29691
--- /dev/null
+++ b/src/hooks/useBlur/useBlur.test.ts
@@ -0,0 +1,37 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import useBlur from ".";
+
+describe("useBlur 훅 테스트", () => {
+ test("기본적으로 false로 초기화되어야 한다.", () => {
+ const { result } = renderHook(() => useBlur());
+
+ expect(result.current.blurred).toBe(false);
+ });
+
+ test("초깃값을 할당하면 해당 값으로 초기화되어야 한다.", () => {
+ const { result } = renderHook(() => useBlur(true));
+
+ expect(result.current.blurred).toBe(true);
+ });
+
+ test("handleBlur가 호출되면 blurred가 true로 설정되어야 한다.", async () => {
+ const { result } = renderHook(() => useBlur());
+
+ await act(async () => {
+ result.current.handleBlur();
+ });
+
+ expect(result.current.blurred).toBe(true);
+ });
+
+ test("resetBlur가 호출되면 blurred가 true로 설정되어야 한다.", async () => {
+ const { result } = renderHook(() => useBlur());
+
+ await act(async () => {
+ result.current.resetBlur();
+ });
+
+ expect(result.current.blurred).toBe(false);
+ });
+});
diff --git a/src/hooks/useCardForm/index.ts b/src/hooks/useCardForm/index.ts
new file mode 100644
index 00000000..5be6e718
--- /dev/null
+++ b/src/hooks/useCardForm/index.ts
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { filterDigits } from "../../utils";
+
+const useCardForm = () => {
+ const [cardNumber, setCardNumber] = useState(["", "", "", ""]);
+ const [expiredMonth, setExpiredMonth] = useState("");
+ const [expiredYear, setExpiredYear] = useState("");
+ const [userName, setUserName] = useState("");
+ const [cardName, setCardName] = useState("");
+ const [color, setColor] = useState("");
+ const [nickname, setNickname] = useState("");
+ const [cardSecurityCode, setCardSecurityCode] = useState("");
+ const [cardPassword, setCardPassword] = useState(["", ""]);
+
+ const handleCardNumber = (value: string, index: number) => {
+ const filteredValue = filterDigits(value);
+ const copy = [...cardNumber];
+ copy[index] = filteredValue;
+
+ setCardNumber(copy);
+ };
+
+ const handleExpiredMonth = (value: string) => {
+ const filteredValue = filterDigits(value);
+
+ if (Number(filteredValue) <= 12) {
+ setExpiredMonth(filteredValue);
+ }
+ };
+
+ const handleExpiredYear = (value: string) => {
+ const filteredValue = filterDigits(value);
+
+ setExpiredYear(filteredValue);
+ };
+
+ const handleUserName = (value: string) => {
+ const trimmedValue = value.trim();
+
+ setUserName(trimmedValue);
+ };
+
+ const handleCardNameAndColor = (name: string, cardColor: string) => {
+ setCardName(name);
+ setColor(cardColor);
+ };
+
+ const handleCardSecurityCode = (value: string) => {
+ const filteredValue = filterDigits(value);
+
+ setCardSecurityCode(filteredValue);
+ };
+
+ const handleCardPassword = (value: string, index: number) => {
+ const filteredValue = filterDigits(value);
+ const copy = [...cardPassword];
+ copy[index] = filteredValue;
+
+ setCardPassword(copy);
+ };
+
+ const handleNickname = (value: string) => {
+ const trimmedValue = value.trim();
+
+ setNickname(trimmedValue);
+ };
+
+ const isValidForm = () => {
+ return !(
+ cardNumber.every((number) => number.length === 4) &&
+ expiredMonth.length === 2 &&
+ expiredYear.length === 2 &&
+ userName.length > 0 &&
+ cardName.length > 0 &&
+ color.length > 0 &&
+ cardSecurityCode.length === 3 &&
+ cardPassword.every((code) => code.length === 1)
+ );
+ };
+
+ return {
+ cardInfo: {
+ cardNumber,
+ expiredMonth,
+ expiredYear,
+ userName,
+ cardName,
+ color,
+ nickname,
+ cardSecurityCode,
+ cardPassword,
+ },
+ handleCardNumber,
+ handleExpiredMonth,
+ handleExpiredYear,
+ handleUserName,
+ handleCardNameAndColor,
+ handleCardSecurityCode,
+ handleCardPassword,
+ handleNickname,
+ isValidForm,
+ };
+};
+
+export default useCardForm;
diff --git a/src/hooks/useCardForm/useCardForm.test.ts b/src/hooks/useCardForm/useCardForm.test.ts
new file mode 100644
index 00000000..0d91dfa9
--- /dev/null
+++ b/src/hooks/useCardForm/useCardForm.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, test } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import useCardForm from ".";
+
+describe("useCardForm 훅 테스트", () => {
+ test("기본값으로 초기화되어야 한다.", () => {
+ const { result } = renderHook(() => useCardForm());
+
+ expect(result.current.cardInfo).toEqual({
+ cardNumber: ["", "", "", ""],
+ expiredMonth: "",
+ expiredYear: "",
+ userName: "",
+ cardName: "",
+ color: "",
+ nickname: "",
+ cardSecurityCode: "",
+ cardPassword: ["", ""],
+ });
+ });
+
+ test("카드 번호를 올바르게 업데이트해야 한다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleCardNumber("1234", 0);
+ });
+
+ expect(result.current.cardInfo.cardNumber).toEqual(["1234", "", "", ""]);
+ });
+
+ test("숫자가 아닌 값으로 카드 번호를 업데이트하면 업데이트가 되지 않는다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleCardNumber("abcd", 0);
+ });
+
+ expect(result.current.cardInfo.cardNumber).toEqual(["", "", "", ""]);
+ });
+
+ test("만료 월을 올바르게 업데이트해야 한다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleExpiredMonth("12");
+ });
+
+ expect(result.current.cardInfo.expiredMonth).toBe("12");
+ });
+
+ test("잘못된 만료 월로 업데이트하면 업데이트가 되지 않는다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleExpiredMonth("13");
+ });
+
+ expect(result.current.cardInfo.expiredMonth).toBe("");
+ });
+
+ test("사용자 이름을 올바르게 업데이트해야 한다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleUserName("John Doe");
+ });
+
+ expect(result.current.cardInfo.userName).toBe("John Doe");
+ });
+
+ test("카드 이름과 색상을 올바르게 업데이트해야 한다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleCardNameAndColor("Visa", "blue");
+ });
+
+ expect(result.current.cardInfo.cardName).toBe("Visa");
+ expect(result.current.cardInfo.color).toBe("blue");
+ });
+
+ test("별명을 올바르게 업데이트해야 한다.", async () => {
+ const { result } = renderHook(() => useCardForm());
+
+ await act(async () => {
+ result.current.handleNickname("My Card");
+ });
+
+ expect(result.current.cardInfo.nickname).toBe("My Card");
+ });
+});
diff --git a/src/hooks/useFocusNext/index.ts b/src/hooks/useFocusNext/index.ts
new file mode 100644
index 00000000..72931a61
--- /dev/null
+++ b/src/hooks/useFocusNext/index.ts
@@ -0,0 +1,31 @@
+import { useRef } from "react";
+
+const useFocusNext = (order: string[]) => {
+ const inputRefs = useRef>({});
+
+ const register = (element: HTMLInputElement | null) => {
+ const elementName = element?.name;
+ if (elementName) {
+ inputRefs.current[elementName] = element;
+ }
+ };
+
+ const focusNext = (
+ element: HTMLInputElement | null,
+ shouldMoveFocus: (value: string) => boolean
+ ) => {
+ if (!element) return;
+
+ const currentIndex = order.findIndex((name) => element.name === name);
+ const nextIndex = currentIndex + 1;
+
+ if (shouldMoveFocus(element.value) && nextIndex < order.length) {
+ const nextName = order[nextIndex];
+ inputRefs.current[nextName]?.focus();
+ }
+ };
+
+ return { register, focusNext };
+};
+
+export default useFocusNext;
diff --git a/src/hooks/useFocusNext/useFocusNext.test.ts b/src/hooks/useFocusNext/useFocusNext.test.ts
new file mode 100644
index 00000000..b8e8d073
--- /dev/null
+++ b/src/hooks/useFocusNext/useFocusNext.test.ts
@@ -0,0 +1,63 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import useFocusNext from ".";
+
+describe("useFocusNext", () => {
+ test("조건이 충족되면 다음 입력 요소로 포커스를 이동시킨다.", async () => {
+ const order = ["input1", "input2", "input3"];
+ const { result } = renderHook(() => useFocusNext(order));
+
+ const input1 = document.createElement("input");
+ input1.name = "input1";
+ const input2 = document.createElement("input");
+ input2.name = "input2";
+
+ document.body.appendChild(input1);
+ document.body.appendChild(input2);
+
+ await act(async () => {
+ result.current.register(input1);
+ result.current.register(input2);
+ });
+
+ const shouldMoveFocus = vi.fn().mockReturnValue(true);
+
+ await act(async () => {
+ result.current.focusNext(input1, shouldMoveFocus);
+ });
+
+ expect(document.activeElement).toBe(input2);
+
+ document.body.removeChild(input1);
+ document.body.removeChild(input2);
+ });
+
+ test("조건이 충족되지 않으면 포커스를 이동시키지 않는다.", async () => {
+ const order = ["input1", "input2", "input3"];
+ const { result } = renderHook(() => useFocusNext(order));
+
+ const input1 = document.createElement("input");
+ input1.name = "input1";
+ const input2 = document.createElement("input");
+ input2.name = "input2";
+
+ document.body.appendChild(input1);
+ document.body.appendChild(input2);
+
+ await act(async () => {
+ result.current.register(input1);
+ result.current.register(input2);
+ });
+
+ const shouldMoveFocus = vi.fn().mockReturnValue(false);
+
+ await act(async () => {
+ result.current.focusNext(input1, shouldMoveFocus);
+ });
+
+ expect(document.activeElement).not.toBe(input2);
+
+ document.body.removeChild(input1);
+ document.body.removeChild(input2);
+ });
+});
diff --git a/src/hooks/useTooltip/index.ts b/src/hooks/useTooltip/index.ts
new file mode 100644
index 00000000..34c8b731
--- /dev/null
+++ b/src/hooks/useTooltip/index.ts
@@ -0,0 +1,21 @@
+import { useState, useCallback } from "react";
+
+const useTooltip = (initialState: boolean = false) => {
+ const [isShow, setIsShow] = useState(initialState);
+
+ const show = useCallback(() => {
+ setIsShow(true);
+ }, []);
+
+ const hide = useCallback(() => {
+ setIsShow(false);
+ }, []);
+
+ return {
+ isShow,
+ show,
+ hide,
+ };
+};
+
+export default useTooltip;
diff --git a/src/hooks/useTooltip/useTooltip.test.ts b/src/hooks/useTooltip/useTooltip.test.ts
new file mode 100644
index 00000000..479305ea
--- /dev/null
+++ b/src/hooks/useTooltip/useTooltip.test.ts
@@ -0,0 +1,37 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import useTooltip from ".";
+
+describe("useTooltip 훅 테스트", () => {
+ test("기본적으로 false인 상태로 초기화되어야 한다.", () => {
+ const { result } = renderHook(() => useTooltip());
+
+ expect(result.current.isShow).toBe(false);
+ });
+
+ test("initialState가 true일 때 열린 상태로 초기화되어야 한다.", () => {
+ const { result } = renderHook(() => useTooltip(true));
+
+ expect(result.current.isShow).toBe(true);
+ });
+
+ test("show를 호출되면 isShow이 true가 된다.", async () => {
+ const { result } = renderHook(() => useTooltip());
+
+ await act(async () => {
+ result.current.show();
+ });
+
+ expect(result.current.isShow).toBe(true);
+ });
+
+ test("hide가 호출되면 isShow이 false가 된다.", async () => {
+ const { result } = renderHook(() => useTooltip());
+
+ await act(async () => {
+ result.current.hide();
+ });
+
+ expect(result.current.isShow).toBe(false);
+ });
+});
diff --git a/src/pages/CardEditPage.tsx b/src/pages/CardEditPage.tsx
new file mode 100644
index 00000000..28cd93af
--- /dev/null
+++ b/src/pages/CardEditPage.tsx
@@ -0,0 +1,57 @@
+import { useNavigate } from "react-router-dom";
+import { CardInfoEdit, CardNicknameEdit } from "../components";
+import { useState } from "react";
+import { useCardInfo } from "../contexts";
+import { useCardForm } from "../hooks";
+
+const CardEditPage = () => {
+ const navigate = useNavigate();
+ const { dispatch } = useCardInfo();
+ const [step, setStep] = useState<"init" | "nickname">("init");
+ const cardForm = useCardForm();
+
+ const handleNextStep = () => {
+ setStep("nickname");
+ };
+
+ const handleNavigateBack = () => {
+ navigate("..");
+ };
+
+ const handleAddCardInfo = () => {
+ const { nickname, cardName } = cardForm.cardInfo;
+
+ dispatch({
+ type: "ADD",
+ payload: {
+ ...cardForm.cardInfo,
+ nickname: nickname.length > 0 ? nickname : cardName,
+ },
+ });
+ navigate("/");
+ };
+
+ return (
+ <>
+ {step === "init" && (
+
+ )}
+ {step === "nickname" && (
+
+ )}
+
+ );
+};
+
+export default CardEditPage;
diff --git a/src/pages/CardListPage.tsx b/src/pages/CardListPage.tsx
new file mode 100644
index 00000000..f060f9e1
--- /dev/null
+++ b/src/pages/CardListPage.tsx
@@ -0,0 +1,60 @@
+import { useNavigate } from "react-router-dom";
+import { Button, Flex, Title } from "../components/common";
+import { Card } from "../components/card";
+import { useCardInfo } from "../contexts";
+
+const CardListPage = () => {
+ const navigate = useNavigate();
+ const { cardInfoList, dispatch } = useCardInfo();
+
+ const handleDeleteCard = (id: string) => {
+ dispatch({ type: "DELETE", payload: { id } });
+ };
+
+ return (
+
+
+ 보유 카드
+
+
+ {cardInfoList.map((cardInfo) => (
+
+ navigate(`card-edit/${cardInfo.id}`)}
+ />
+
+
+ ))}
+
+ navigate("card-edit")} />
+
+