diff --git a/public/index.html b/public/index.html
index 6a4e5119f..662dffe65 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,10 +15,10 @@ <h1>React Clean Code Payments CSS example</h1>
     PAGE 01
 
      -->
-	 	<h2>1️⃣ 카드 추가</h2>
+		<h2>1️⃣ 카드 추가</h2>
 		<div class="root">
 			<div class="app">
-				<h2 class="page-title"> 카드 추가</h2>
+				<h2 class="page-title">카드 추가</h2>
 				<div class="card-box">
 					<div class="empty-card">
 						<div class="card-top"></div>
@@ -83,7 +83,7 @@ <h2 class="page-title"> 카드 추가</h2>
 		<h2>2️⃣ 카드 추가 - 카드사 선택</h2>
 		<div class="root">
 			<div class="app">
-				<h2 class="page-title"> 카드 추가</h2>
+				<h2 class="page-title">카드 추가</h2>
 				<div class="card-box">
 					<div class="small-card">
 						<div class="card-top">
@@ -143,45 +143,45 @@ <h2 class="page-title"> 카드 추가</h2>
 				</div>
 			</div>
 			<div class="modal-dimmed">
-        <div class="modal">
-          <div class="flex-center">
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-          </div>
-          <div class="flex-center">
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-            <div class="modal-item-container">
-              <div class="modal-item-dot"></div>
-              <span class="modal-item-name">클린 카드</span>
-            </div>
-          </div>
-        </div>
-      </div>
+				<div class="modal">
+					<div class="flex-center">
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+					</div>
+					<div class="flex-center">
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+						<div class="modal-item-container">
+							<div class="modal-item-dot"></div>
+							<span class="modal-item-name">클린 카드</span>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 
 		<!-- 
@@ -193,7 +193,7 @@ <h2 class="page-title"> 카드 추가</h2>
 		<h2>3️⃣ 카드 추가 - 입력 완료</h2>
 		<div class="root">
 			<div class="app">
-				<h2 class="page-title"> 카드 추가</h2>
+				<h2 class="page-title">카드 추가</h2>
 				<div class="card-box">
 					<div class="small-card">
 						<div class="card-top">
@@ -225,18 +225,8 @@ <h2 class="page-title"> 카드 추가</h2>
 				<div class="input-container">
 					<span class="input-title">만료일</span>
 					<div class="input-box w-50">
-						<input
-							class="input-basic"
-							type="text"
-							placeholder="MM"
-							value="12"
-						/>
-						<input
-							class="input-basic"
-							type="text"
-							placeholder="YY"
-							value="23"
-						/>
+						<input class="input-basic" type="text" placeholder="MM" value="12" />
+						<input class="input-basic" type="text" placeholder="YY" value="23" />
 					</div>
 				</div>
 				<div class="input-container">
diff --git a/src/App.css b/src/App.css
index b9d355df2..4d6764df6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,50 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+	filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+	filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
 }
 
 .card {
-  padding: 2em;
+	padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+	color: #888;
+}
+
+.card-add-button {
+	width: 100%;
+	background-color: #bcbaba;
+	display: block;
+	border-radius: 2px;
+	height: 48px;
 }
diff --git a/src/App.tsx b/src/App.tsx
index d4dbaf15a..9722ad35f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import './App.css'
 import useStepper from './hooks/useStepper'
-import RegistCard, { RegisterDataType } from './components/page/RegistCard'
+import RegistCard, { RegisteredDataType } from './components/page/RegistCard'
 import Navigation from './components/navigation/navigation'
 import RegistEnd from './components/page/RegistEnd'
 import { useState } from 'react'
@@ -18,48 +18,65 @@ import CardBox from './components/CardBox'
 
 type Step = '카드목록' | '카드추가' | '카드등록완료'
 
-const INITIAL_CARD_STATE: RegisterDataType = {
+const INITIAL_CARD_STATE: RegisteredDataType = {
 	cardNumber: '',
 	expirationDate: '',
 	ownerName: '',
 	securityCode: '',
 	secretCode: '',
+	cardSelectionTypeName: '',
 }
 
 function App() {
 	const { step, setStep, Stepper, Step } = useStepper<Step>('카드추가')
-	const [registerData, setRegisterData] = useState<RegisterDataType>(INITIAL_CARD_STATE)
-	const [cardName, setCardName] = useState<string>('')
+	const [registeredData, setRegisteredData] = useState<RegisteredDataType>(INITIAL_CARD_STATE)
+	const [cardName, setCardName] = useState<string>(registeredData.cardSelectionTypeName)
+	const [cardList, setCardList] = useState<Map<string, RegisteredDataType>>(new Map())
 
-	const handleSetCardName = (value: string) => {
-		setCardName(value)
+	const addMapElement = () => {
+		const newMap = new Map(cardList)
+
+		newMap.set(cardName, registeredData)
+		setCardList(newMap)
 	}
 
 	return (
 		<div className="app" id="app">
-			<Navigation currentStageName={step!}></Navigation>
+			<Navigation currentStageName={step}></Navigation>
 
 			<Stepper>
 				<Step name="카드목록">
-					<CardBox
-						cardName={cardName}
-						ownerName={registerData.ownerName}
-						expirationDate={registerData.expirationDate}
-						cardNumber={registerData.cardNumber}
-					/>
+					<button className="card-add-button" onClick={() => setStep('카드추가')}>
+						+
+					</button>
+					{[...cardList].map(([key, value]) => (
+						<>
+							<CardBox
+								ownerName={value.ownerName}
+								expirationDate={value.expirationDate}
+								cardNumber={value.cardNumber}
+								theme={value.theme}
+								cardSelectionTypeName={value.cardSelectionTypeName}
+							/>
+							<div>{key}</div>
+						</>
+					))}
 				</Step>
 				<Step name="카드추가">
 					<RegistCard
-						setRegisterData={setRegisterData}
+						setRegisterData={setRegisteredData}
 						onPrev={() => setStep('카드목록')}
 						onNext={() => setStep('카드등록완료')}
 					/>
 				</Step>
 				<Step name="카드등록완료">
 					<RegistEnd
-						handleSetCardName={handleSetCardName}
-						registCardInfo={registerData}
-						onNext={() => setStep('카드목록')}
+						handleSetCardName={setCardName}
+						registCardInfo={registeredData}
+						onNext={() => {
+							addMapElement()
+							setStep('카드목록')
+						}}
 					/>
 				</Step>
 			</Stepper>
diff --git a/src/components/CardBox.tsx b/src/components/CardBox.tsx
new file mode 100644
index 000000000..7cd3121bd
--- /dev/null
+++ b/src/components/CardBox.tsx
@@ -0,0 +1,42 @@
+import './CardSelectionItem.css'
+type CardProps<T> = {
+	cardNickName?: string
+	cardName?: string
+	ownerName?: string
+	expirationDate?: string
+	cardNumber?: string
+	onClick?: () => void
+	theme?: T
+	cardSelectionTypeName?: string
+}
+
+const CardBox = <T,>(props: CardProps<T>) => {
+	const { ownerName, expirationDate, cardNumber, onClick, theme, cardSelectionTypeName } = props
+
+	return (
+		<div className="card-box" onClick={onClick}>
+			<div className={`empty-card ${theme}-theme`}>
+				<div className="card-top">
+					<span className="card-text">{cardSelectionTypeName}</span>
+				</div>
+				<div className="card-middle">
+					<div className={'big-card__chip'}></div>
+				</div>
+				<div className="card-bottom">
+					<div className="card-bottom__number">
+						<span className="card-text">
+							{cardNumber &&
+								cardNumber.replace(/(.{4})(.{4})(.{4})(.{4})/, '$1-$2-$3-$4')}
+						</span>
+					</div>
+					<div className="card-bottom__info">
+						<span className="card-text">{ownerName || 'NAME'}</span>
+						<span className="card-text">{expirationDate || 'MM/YY'}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default CardBox
diff --git a/src/components/CardSelectionItem.css b/src/components/CardSelectionItem.css
new file mode 100644
index 000000000..c8b4a97a4
--- /dev/null
+++ b/src/components/CardSelectionItem.css
@@ -0,0 +1,19 @@
+.red-theme {
+	background-image: linear-gradient(to bottom, red, yellow);
+}
+.pink-theme {
+	background-image: linear-gradient(to bottom, pink, yellow);
+}
+
+.orange-theme {
+	background-image: linear-gradient(to bottom, orange, yellow);
+}
+.green-theme {
+	background-image: linear-gradient(to bottom, rgb(79, 138, 79), rgb(215, 215, 147));
+}
+.blue-theme {
+	background-image: linear-gradient(to bottom, rgb(94, 94, 244), rgb(189, 189, 149));
+}
+.yellow-theme {
+	background-image: linear-gradient(to bottom, yellow, rgb(236, 236, 226));
+}
diff --git a/src/components/CardSelectionItem.tsx b/src/components/CardSelectionItem.tsx
new file mode 100644
index 000000000..b69b55740
--- /dev/null
+++ b/src/components/CardSelectionItem.tsx
@@ -0,0 +1,20 @@
+import './CardSelectionItem.css'
+
+type CardSelectionItemProps<T> = {
+	theme: T
+	name: string
+	onClick?: () => void
+}
+
+function CardSelectionItem<T>(props: CardSelectionItemProps<T>) {
+	const { theme, name, onClick } = props
+
+	return (
+		<div className="modal-item-container" onClick={onClick}>
+			<div className={`modal-item-dot ${theme}-theme`}></div>
+			<span className="modal-item-name">{name}</span>
+		</div>
+	)
+}
+
+export default CardSelectionItem
diff --git a/src/stories/Cardbox.stories.ts b/src/components/Cardbox.stories.ts
similarity index 96%
rename from src/stories/Cardbox.stories.ts
rename to src/components/Cardbox.stories.ts
index 11084ae23..af1824413 100644
--- a/src/stories/Cardbox.stories.ts
+++ b/src/components/Cardbox.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import CardBox from '../components/CardBox'
+import CardBox from './CardBox'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
diff --git a/src/components/cardBox.tsx b/src/components/cardBox.tsx
index ae5ff1bbc..7cd3121bd 100644
--- a/src/components/cardBox.tsx
+++ b/src/components/cardBox.tsx
@@ -1,25 +1,26 @@
-type CardProps = {
-	size?: 'small' | 'big'
+import './CardSelectionItem.css'
+type CardProps<T> = {
+	cardNickName?: string
 	cardName?: string
 	ownerName?: string
 	expirationDate?: string
 	cardNumber?: string
+	onClick?: () => void
+	theme?: T
+	cardSelectionTypeName?: string
 }
 
-const CardBox = (props: CardProps) => {
-	const { size = 'small', cardName, ownerName, expirationDate, cardNumber } = props
-	// const [expirationMonth, expirationYear] = expirationDate || ['MM', 'YY']
-	const isBig = (): boolean => {
-		return size === 'big'
-	}
+const CardBox = <T,>(props: CardProps<T>) => {
+	const { ownerName, expirationDate, cardNumber, onClick, theme, cardSelectionTypeName } = props
+
 	return (
-		<div className="card-box">
-			<div className={isBig() ? 'big-card' : 'empty-card'}>
+		<div className="card-box" onClick={onClick}>
+			<div className={`empty-card ${theme}-theme`}>
 				<div className="card-top">
-					<span className="card-text">{cardName}</span>
+					<span className="card-text">{cardSelectionTypeName}</span>
 				</div>
 				<div className="card-middle">
-					<div className={isBig() ? 'big-card__chip' : 'small-card__chip'}></div>
+					<div className={'big-card__chip'}></div>
 				</div>
 				<div className="card-bottom">
 					<div className="card-bottom__number">
diff --git a/src/components/container.tsx b/src/components/container.tsx
index 835bddb53..cc67f176f 100644
--- a/src/components/container.tsx
+++ b/src/components/container.tsx
@@ -1,25 +1,24 @@
 import { ReactNode } from 'react'
 
 type ContainerPropsType = {
-  title: string
-  children: ReactNode
-  titleRight?: ReactNode
-  className?: string
+	title: string
+	children: ReactNode
+	titleRight?: ReactNode
+	className?: string
+	childClassName?: string
 }
 
-function Container({
-  title,
-  titleRight,
-  children,
-  className = '',
-}: ContainerPropsType) {
-  return (
-    <div className={`input-container ${className}`}>
-      <span className="input-title">{title}</span>
-      {titleRight && <>{titleRight}</>}
-      <div>{children}</div>
-    </div>
-  )
+function Container(props: ContainerPropsType) {
+	const { title, titleRight, children, className = '', childClassName } = props
+	return (
+		<div className={`input-container ${className}`}>
+			<span className="title-align">
+				<span className="input-title">{title}</span>
+				{titleRight && <>{titleRight}</>}
+			</span>
+			<div className={`${childClassName}`}>{children}</div>
+		</div>
+	)
 }
 
 export default Container
diff --git a/src/components/layout/BasicLayout.tsx b/src/components/layout/BasicLayout.tsx
new file mode 100644
index 000000000..fbdaaac78
--- /dev/null
+++ b/src/components/layout/BasicLayout.tsx
@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react'
+
+type MainProps = {
+	className?: string
+}
+
+type FooterProps = {
+	className?: string
+}
+
+export const Header = ({ children }: PropsWithChildren) => {
+	return <header>{children}</header>
+}
+
+export const Main = ({ className, children }: PropsWithChildren<MainProps>) => {
+	return <main className={className}>{children}</main>
+}
+
+export const Footer = ({ className, children }: PropsWithChildren<FooterProps>) => {
+	return <footer className={className}>{children}</footer>
+}
+
+const BasicLayout = ({ children }: PropsWithChildren) => {
+	return <div className="layout">{children}</div>
+}
+
+BasicLayout.Header = Header
+BasicLayout.Main = Main
+BasicLayout.Footer = Footer
+
+export default BasicLayout
diff --git a/src/components/layout/basicLayout.tsx b/src/components/layout/basicLayout.tsx
index 0c4f5eee3..fbdaaac78 100644
--- a/src/components/layout/basicLayout.tsx
+++ b/src/components/layout/basicLayout.tsx
@@ -1,28 +1,27 @@
-import { PropsWithChildren, ReactElement, ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 
 type MainProps = {
-    className?: string
+	className?: string
 }
 
 type FooterProps = {
-    className?: string
+	className?: string
 }
 
-
 export const Header = ({ children }: PropsWithChildren) => {
-  return <header>{children}</header>
+	return <header>{children}</header>
 }
 
 export const Main = ({ className, children }: PropsWithChildren<MainProps>) => {
-  return <main className={className}>{children}</main>
+	return <main className={className}>{children}</main>
 }
 
 export const Footer = ({ className, children }: PropsWithChildren<FooterProps>) => {
-  return <footer className={className}>{children}</footer>
+	return <footer className={className}>{children}</footer>
 }
 
 const BasicLayout = ({ children }: PropsWithChildren) => {
-  return <div className="layout">{children}</div>
+	return <div className="layout">{children}</div>
 }
 
 BasicLayout.Header = Header
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 000000000..b227c08a8
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,55 @@
+import '../../../styles/modal.css'
+import CardSelectionItem from '../CardSelectionItem'
+
+type ModelProps = {
+	onNext: () => void
+	setModalInfo?: (itemInfo: CardItemType<ThemeColorType>) => void
+}
+
+export type ThemeColorType = 'red' | 'pink' | 'orange' | 'green' | 'blue' | 'yellow' | ''
+
+export type CardItemType<T> = {
+	name: string
+	theme: T
+}
+// mock: cardItem data
+const CARD_LIST: Array<CardItemType<ThemeColorType>> = [
+	{
+		name: '롯데 카드',
+		theme: 'yellow',
+	},
+	{
+		name: '신한 카드',
+		theme: 'blue',
+	},
+	{
+		name: '국민 카드',
+		theme: 'orange',
+	},
+	{
+		name: '농협 카드',
+		theme: 'green',
+	},
+]
+
+function Modal(props: ModelProps) {
+	const nextHandler = (itemInfo: CardItemType<ThemeColorType>) => {
+		props.setModalInfo && props.setModalInfo(itemInfo)
+		props.onNext()
+	}
+	return (
+		<div className="modal-dimmed">
+			<div className="modal">
+				<div className="flex-center">
+					{CARD_LIST.map((item: CardItemType<ThemeColorType>) => (
+						<button onClick={() => nextHandler(item)}>
+							<CardSelectionItem theme={item.theme} name={item.name} />
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default Modal
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index d4f63b9bc..b227c08a8 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -1,30 +1,55 @@
 import '../../../styles/modal.css'
-import CardItem from '../cardItem'
+import CardSelectionItem from '../CardSelectionItem'
 
 type ModelProps = {
-  onNext: () => {} | void
+	onNext: () => void
+	setModalInfo?: (itemInfo: CardItemType<ThemeColorType>) => void
 }
 
+export type ThemeColorType = 'red' | 'pink' | 'orange' | 'green' | 'blue' | 'yellow' | ''
+
+export type CardItemType<T> = {
+	name: string
+	theme: T
+}
+// mock: cardItem data
+const CARD_LIST: Array<CardItemType<ThemeColorType>> = [
+	{
+		name: '롯데 카드',
+		theme: 'yellow',
+	},
+	{
+		name: '신한 카드',
+		theme: 'blue',
+	},
+	{
+		name: '국민 카드',
+		theme: 'orange',
+	},
+	{
+		name: '농협 카드',
+		theme: 'green',
+	},
+]
+
 function Modal(props: ModelProps) {
-  const CARD_LIST = ['클린 카드', '클린 카드', '클린 카드', '클린 카드']
-  // card_list 를 4 * 2 matrix로 자르기
-  return (
-    <div className="modal-dimmed">
-      <div className="modal">
-        <div className="flex-center">
-          {CARD_LIST.map((ele: string) => (
-            <CardItem onClick={props.onNext} />
-          ))}
-        </div>
-        <div className="flex-center">
-          <CardItem />
-          <CardItem />
-          <CardItem />
-          <CardItem />
-        </div>
-      </div>
-    </div>
-  )
+	const nextHandler = (itemInfo: CardItemType<ThemeColorType>) => {
+		props.setModalInfo && props.setModalInfo(itemInfo)
+		props.onNext()
+	}
+	return (
+		<div className="modal-dimmed">
+			<div className="modal">
+				<div className="flex-center">
+					{CARD_LIST.map((item: CardItemType<ThemeColorType>) => (
+						<button onClick={() => nextHandler(item)}>
+							<CardSelectionItem theme={item.theme} name={item.name} />
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
 }
 
 export default Modal
diff --git a/src/components/navigation/navigation.tsx b/src/components/navigation/navigation.tsx
index c660ee171..0e243e94a 100644
--- a/src/components/navigation/navigation.tsx
+++ b/src/components/navigation/navigation.tsx
@@ -1,9 +1,13 @@
 type NavigationPropsType = {
-  currentStageName: string | any
+	currentStageName: string
 }
 
 function Navigation(props: NavigationPropsType) {
-  return <div><h2 className="page-title"> {props.currentStageName}</h2></div>
+	return (
+		<div>
+			<h2 className="page-title"> {props.currentStageName}</h2>
+		</div>
+	)
 }
 
 export default Navigation
diff --git a/src/components/page/RegistCard.css b/src/components/page/RegistCard.css
new file mode 100644
index 000000000..b81add13b
--- /dev/null
+++ b/src/components/page/RegistCard.css
@@ -0,0 +1,47 @@
+.input-color-highlight {
+	color: #04c09e;
+}
+
+.dot-hightlight {
+	background: #04c09e;
+	border-radius: 50%;
+	width: 5px;
+	height: 5px;
+	text-align: center;
+}
+.dot-align {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.auto-sizing-width-container {
+	display: flex;
+	gap: 10px;
+}
+
+.auto-sizing-width-item {
+	/* flex-grow: 1;
+  flex-basis: 0; */
+	width: 10%;
+}
+
+.auto-sizing-width-item-35 {
+	width: 35%;
+}
+
+.container-flex {
+	display: flex;
+}
+
+.input-background-default {
+	background: #ecebf1;
+	border-radius: 2px;
+}
+.divider {
+	display: flex;
+	align-items: center;
+}
+.title-align {
+	display: flex;
+	justify-content: space-between;
+}
diff --git a/src/components/page/RegistCard.tsx b/src/components/page/RegistCard.tsx
new file mode 100644
index 000000000..7b60e921c
--- /dev/null
+++ b/src/components/page/RegistCard.tsx
@@ -0,0 +1,388 @@
+import { useState } from 'react'
+import arrow from '../../assets/arrow.svg'
+import question from '../../assets/question.svg'
+import Container from '../container'
+import Input from '../input/input'
+import BasicLayout from '../layout/BasicLayout'
+import './RegistCard.css'
+import CardBox from '../CardBox'
+import useInput from '../../hooks/useInput'
+import Modal, { CardItemType, ThemeColorType } from '../modal/Modal'
+import {
+	CARD_NUMBER_LENGTH,
+	CARD_HOLDER_NAME_LENGTH,
+	EXPIRE_DATE_MAX_LENGTH,
+	EXPIRE_DATE_MAX_LENGTH_WITH_DEVIDER,
+	EXPIRE_DATE_DIVIDER_INDEX,
+	SECRET_CODE_MAX_LENTGH,
+} from '../../constants'
+
+export type RegisteredDataType = {
+	cardNumber: string
+	expirationDate: string
+	ownerName: string
+	securityCode?: string
+	secretCode?: string
+	theme?: ThemeColorType
+	cardSelectionTypeName: string
+	cardNickName?: string
+}
+
+type RegistCardProps = {
+	setRegisterData: (value: RegisteredDataType) => void
+	onPrev?: () => void
+	onNext?: () => void
+}
+
+/**
+ * [리팩토링 요소]
+ * 1) 마스킹 넘버 리턴하는것, validation은 받아서 처리하면됨,
+ */
+const RegistCard = (props: RegistCardProps) => {
+	const { setRegisterData, onPrev, onNext } = props
+
+	const [isOpen, setIsOpen] = useState<boolean>(false)
+	const [cardSelectionInfo, setCardSelectionInfo] = useState<CardItemType<ThemeColorType>>({
+		name: '',
+		theme: '',
+	})
+
+	// 카드번호 - 1번째
+	const { value: firstCardNumber, handleChange: handleChangeCardNumberFirstFunc } = useInput('')
+
+	// 카드번호 - 2번째
+	const { value: secondCardNumber, handleChange: handleChangeCardNumberSecondFunc } = useInput('')
+
+	// 카드번호 - 3번째
+	const [thirdCardMaskedNumber, setThirdCardMaskedNumber] = useState<string>('')
+	const [thirdCardNumber, setThirdCardNumber] = useState<string>('')
+
+	// 카드번호 - 4번째
+	const [fourthCardMaskedNumber, setFourthCardMaskedNumber] = useState<string>('')
+	const [fourthCardNumber, setFourthCardNumber] = useState<string>('')
+
+	// 카드 소유자 이름
+	const { value: ownerNameValue, handleChange: handleOwnerNameFunc } = useInput('')
+
+	// 만료 날짜
+	const [expirationDate, setExpirationDate] = useState<string>('')
+
+	// 보안 코드
+	const [securityCode, setSecurityCode] = useState<string>('')
+	const [securityMaskedCode, setSecurityMaskedCode] = useState<string>('')
+
+	// 비밀 번호
+	const [firstSecretCode, setFirstSecretCode] = useState<string>()
+	const [firstSecretMaskedCode, setFirstSecretMaskedCode] = useState<string>()
+
+	const [secondSecretCode, setSecondSecretCode] = useState<string>()
+	const [secondSecretMaskedCode, setSecondSecretMaskedCode] = useState<string>()
+
+	// 조건에 부합하면 - true리턴 / 조건에 부합하지 않으면 false 리턴
+	const validateNumberWithMaxLength = (value: string, maxLength: number): boolean => {
+		const isValidLength = value.length <= maxLength
+		const isNumber = !Number.isNaN(Number(value))
+
+		const isValid = [isValidLength, isNumber].every(Boolean)
+
+		return isValid
+	}
+
+	const isMonth = (input: string) => {
+		return new RegExp(/^(0?[1-9]|1[0-2])$/).test(input)
+	}
+
+	const onClickButtonNextHandler = () => {
+		onNext && onNext()
+		setRegisterData({
+			cardNumber: `${firstCardNumber}${secondCardNumber}${thirdCardMaskedNumber}${fourthCardMaskedNumber}`,
+			expirationDate: expirationDate,
+			ownerName: ownerNameValue,
+			securityCode: securityCode,
+			secretCode: `${firstSecretCode}${secondSecretCode}`,
+			theme: cardSelectionInfo.theme,
+			cardSelectionTypeName: cardSelectionInfo.name,
+		})
+	}
+
+	return (
+		<>
+			<BasicLayout>
+				{isOpen && (
+					<Modal
+						onNext={() => {
+							setIsOpen(false)
+						}}
+						setModalInfo={setCardSelectionInfo}
+					></Modal>
+				)}
+				<BasicLayout.Header>
+					<button onClick={onPrev} style={{ display: 'flex' }}>
+						<img src={arrow} />
+						<h2 className="page-title" style={{ marginLeft: '15px' }}>
+							카드 추가
+						</h2>
+					</button>
+				</BasicLayout.Header>
+				<BasicLayout.Main>
+					<CardBox<ThemeColorType>
+						onClick={() => setIsOpen(true)}
+						cardNumber={`${firstCardNumber}${secondCardNumber}${thirdCardMaskedNumber}${fourthCardMaskedNumber}`}
+						expirationDate={expirationDate}
+						ownerName={ownerNameValue}
+						theme={cardSelectionInfo.theme}
+						cardSelectionTypeName={cardSelectionInfo.name}
+					/>
+					<Container title="카드 번호" childClassName="input-background-default">
+						<div className="container-flex">
+							<Input
+								type="text"
+								value={firstCardNumber}
+								onChange={(event) => {
+									if (
+										!validateNumberWithMaxLength(
+											event.target.value,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
+										return
+									}
+
+									handleChangeCardNumberFirstFunc(event)
+								}}
+							/>
+							{firstCardNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
+							<Input
+								type="text"
+								value={secondCardNumber}
+								onChange={(event) => {
+									if (
+										!validateNumberWithMaxLength(
+											event.target.value,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
+										return
+									}
+
+									handleChangeCardNumberSecondFunc(event)
+								}}
+							/>
+							{secondCardNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
+							{/* 카드번호 3번째 자리 */}
+							<Input
+								type="text"
+								value={thirdCardMaskedNumber}
+								onChange={(event) => {
+									const newThirdCardNumber =
+										thirdCardNumber + event.target.value.replace(/\*/g, '')
+
+									if (
+										!validateNumberWithMaxLength(
+											newThirdCardNumber,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
+										return
+									}
+
+									setThirdCardNumber(newThirdCardNumber)
+
+									setThirdCardMaskedNumber(
+										Array.from(event.target.value)
+											.map(() => '*')
+											.join(''),
+									)
+								}}
+							/>
+							{thirdCardMaskedNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
+
+							<Input
+								type="text"
+								value={fourthCardMaskedNumber}
+								onChange={(event) => {
+									const newFourthCardNumber =
+										fourthCardNumber + event.target.value.replace(/\*/g, '')
+
+									if (
+										!validateNumberWithMaxLength(
+											newFourthCardNumber,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
+										return
+									}
+
+									setFourthCardNumber(newFourthCardNumber)
+
+									setFourthCardMaskedNumber(
+										Array.from(event.target.value)
+											.map(() => '*')
+											.join(''),
+									)
+								}}
+							/>
+						</div>
+					</Container>
+					<Container title="만료일">
+						<div className="auto-sizing-width-item-35">
+							<Input
+								type="text"
+								placeholder="MM/YY"
+								value={expirationDate}
+								onKeyDown={(event) => {
+									if (
+										event.key === 'Backspace' &&
+										expirationDate.includes('/') &&
+										expirationDate.length === EXPIRE_DATE_MAX_LENGTH
+									) {
+										event.preventDefault()
+										setExpirationDate(
+											expirationDate.slice(0, expirationDate.length - 1),
+										)
+									}
+								}}
+								onChange={(event) => {
+									const { value } = event.target
+
+									if (value.length > EXPIRE_DATE_MAX_LENGTH_WITH_DEVIDER) {
+										return
+									}
+									// 3번째 자리에 /를 삽입
+									if (value.length === EXPIRE_DATE_DIVIDER_INDEX) {
+										if (!isMonth(value)) {
+											alert(
+												'월은 1이상 12이하 숫자여야 합니다. ex) 3월이라면 03으로 기입해주세요',
+											)
+											return
+										}
+
+										setExpirationDate(value + '/')
+										return
+									}
+
+									setExpirationDate(value)
+								}}
+							/>
+						</div>
+					</Container>
+					<Container
+						title="카드 소유자 이름(선택)"
+						titleRight={
+							<span>{`${ownerNameValue.length}/${CARD_HOLDER_NAME_LENGTH}`}</span>
+						}
+					>
+						<Input
+							placeholder="카드에 표시된 이름과 동일하게 입력하세요."
+							value={ownerNameValue}
+							onChange={handleOwnerNameFunc}
+						/>
+					</Container>
+					<Container title="보안코드(CVC/CVV)">
+						<div className="auto-sizing-width-container">
+							<Input
+								value={securityMaskedCode}
+								onChange={(event) => {
+									const newSecurityCode =
+										securityCode + event.target.value.replace(/\*/g, '')
+
+									const isValidNumber = (input: string) => {
+										return !Number.isNaN(Number(input))
+									}
+									if (!isValidNumber(newSecurityCode)) {
+										alert('숫자를 입력해주세요!')
+										return
+									}
+									setSecurityCode(newSecurityCode)
+
+									setSecurityMaskedCode(
+										Array.from(event.target.value)
+											.map(() => '*')
+											.join(''),
+									)
+								}}
+							/>
+							<button>
+								<img src={question} />
+							</button>
+						</div>
+					</Container>
+					<Container title="카드비밀번호">
+						<div className="auto-sizing-width-container">
+							<span className="auto-sizing-width-item">
+								<Input
+									value={firstSecretMaskedCode}
+									onChange={(event) => {
+										const newFirstSecretCode =
+											firstSecretCode + event.target.value.replace(/\*/g, '')
+
+										if (
+											!validateNumberWithMaxLength(
+												event.target.value,
+												SECRET_CODE_MAX_LENTGH,
+											)
+										) {
+											return
+										}
+										setFirstSecretCode(newFirstSecretCode)
+
+										setFirstSecretMaskedCode(
+											Array.from(event.target.value)
+												.map(() => '*')
+												.join(''),
+										)
+									}}
+								/>
+							</span>
+							<span className="auto-sizing-width-item">
+								<Input
+									value={secondSecretMaskedCode}
+									onChange={(event) => {
+										const newSecondSecretCode =
+											secondSecretCode + event.target.value.replace(/\*/g, '')
+
+										if (!validateNumberWithMaxLength(event.target.value, 1)) {
+											return
+										}
+
+										setSecondSecretCode(newSecondSecretCode)
+
+										setSecondSecretMaskedCode(
+											Array.from(event.target.value)
+												.map(() => '*')
+												.join(''),
+										)
+									}}
+								/>
+							</span>
+							<span className="auto-sizing-width-item dot-align">
+								<div className="dot-hightlight" />
+							</span>
+							<span className="auto-sizing-width-item dot-align">
+								<div className="dot-hightlight" />
+							</span>
+						</div>
+					</Container>
+				</BasicLayout.Main>
+				<BasicLayout.Footer className="button-box">
+					{/* @TODO: button - isActive 상태 넣기 */}
+					<button
+						type="button"
+						className="button-text"
+						onClick={onClickButtonNextHandler}
+					>
+						다음
+					</button>
+				</BasicLayout.Footer>
+			</BasicLayout>
+		</>
+	)
+}
+
+export default RegistCard
diff --git a/src/components/page/RegistEnd.tsx b/src/components/page/RegistEnd.tsx
index d4405acd5..a2dc1dce2 100644
--- a/src/components/page/RegistEnd.tsx
+++ b/src/components/page/RegistEnd.tsx
@@ -1,9 +1,9 @@
-import { useMemo, useState } from 'react'
-import { RegisterDataType } from './RegistCard'
+import { useState } from 'react'
+import { RegisteredDataType } from './RegistCard'
 import CardBox from '../CardBox'
 
 type RegistEndProps = {
-	registCardInfo: RegisterDataType
+	registCardInfo: RegisteredDataType
 	handleSetCardName: (value: string) => void
 	onPrev?: () => void
 	onNext?: () => void
@@ -12,11 +12,9 @@ function RegistEnd(props: RegistEndProps) {
 	const { registCardInfo, handleSetCardName, onNext } = props
 	const [cardName, setCardName] = useState('')
 
-	useMemo(() => {}, [registCardInfo])
-
 	const onClickButtonNextHandler = () => {
+		handleSetCardName(cardName ? cardName : registCardInfo.cardSelectionTypeName)
 		onNext && onNext()
-		handleSetCardName(cardName)
 	}
 	return (
 		<div className="app flex-column-center">
@@ -24,21 +22,23 @@ function RegistEnd(props: RegistEndProps) {
 				<h2 className="page-title mb-10">카드등록이 완료되었습니다.</h2>
 			</div>
 			<CardBox
-				size="big"
 				cardName={cardName}
 				ownerName={registCardInfo.ownerName}
 				expirationDate={registCardInfo.expirationDate}
 				cardNumber={registCardInfo.cardNumber}
+				theme={registCardInfo.theme}
+				cardSelectionTypeName={registCardInfo.cardSelectionTypeName}
 			/>
 			<div className="input-container flex-center w-100">
 				<input
 					className="input-underline w-75"
 					type="text"
-					placeholder="카드의 별칭을 입력해주세요."
+					placeholder="카드 별칭(선택)"
 					onChange={(e) => {
 						const { value } = e.target
 
 						setCardName(value)
+						// handleSetCardName(value)
 					}}
 				/>
 			</div>
diff --git a/src/components/page/addCard.tsx b/src/components/page/addCard.tsx
deleted file mode 100644
index 883805cab..000000000
--- a/src/components/page/addCard.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import CardBox from '../CardBox'
-import Container from '../container'
-import Input from '../input/input'
-
-type AddCardProps = {
-	onNext?: (data: any) => void
-}
-
-function AddCard(props: AddCardProps) {
-	return (
-		<>
-			<CardBox />
-
-			{/* 제어패턴 ** 각각 입력한거 모아서 다 데이터(registerData)에 저장해둬야함. */}
-
-			<Container title="카드 번호">
-				<Input type="text" />
-				{/* <Input type="text" />
-        <Input type="password" />
-        <Input type="password" /> */}
-			</Container>
-
-			<Container title="만료일">
-				<Input type="text" placeholder="MM" />
-				<Input type="text" placeholder="YY" />
-			</Container>
-
-			<Container title="카드 소유자 이름(선택)">
-				<Input type="text" />
-			</Container>
-
-			<Container title="보안코드(CVC/CVV)">
-				<Input type="password" />
-			</Container>
-
-			<Container title="카드 비밀번호">
-				<Input type="password" />
-				<Input type="password" />
-				<Input type="password" />
-				<Input type="password" />
-			</Container>
-
-			<div className="button-box">
-				<button type="button" className="button-text" onClick={props.onNext}>
-					다음
-				</button>
-			</div>
-		</>
-	)
-}
-
-export default AddCard
diff --git a/src/components/page/backupPage.tsx b/src/components/page/backupPage.tsx
deleted file mode 100644
index 328956634..000000000
--- a/src/components/page/backupPage.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useState } from 'react'
-import './App.css'
-import useFunnel from '../../hooks/useFunnel'
-import Navigation from '../navigation/navigation'
-import AddCard from './addCard'
-import Modal from '../modal/modal'
-
-export type Step = '카드추가' | '카드사선택' | '입력완료' | '카드추가완료'
-
-function BackUpPage() {
-  const [registerData, setRegisterData] = useState({})
-  // const [step, setStep] = useState<Step>('카드추가')
-  // const { step, setStep, Funnel, Step } = useFunnel<Step>('카드추가')
-  const { step, setStep, Funnel, Step } = useFunnel<Step>('카드추가')
-
-  // const [stepNum, setStepNum] = useState<number>(0)
-
-  // const stepName = ['카드추가', '카드사선택', '입력완료', '카드추가완료']
-
-  return (
-    <>
-      <Navigation currentStageName={step!}></Navigation>
-      {/* <Navigation currentStageName={step}></Navigation> */}
-
-      <Funnel>
-        <Step name="카드추가">
-          <AddCard
-            onNext={(data: any) => {
-              console.info('daya', data)
-              setRegisterData((prev) => ({ ...prev, 카드추가: data })) // 이하 동일
-              setStep('카드사선택')
-            }}
-          />
-        </Step>
-        <Step name="카드사선택">
-          <AddCard />
-          {/* modal 상태가 addcard에도 공유되어야함. */}
-          <Modal onNext={() => setStep('입력완료')} />
-        </Step>
-        <Step name="입력완료">
-          <AddCard />
-          <Modal onNext={() => setStep('카드추가완료')} />
-        </Step>
-      </Funnel>
-
-      {/* 비제어패턴 ** 데이터(registerData) 다 입력후 확인 누르면 저장해야함, 이 떄 유효성 검사도 진행(필수 input들이 다 들어왔는지) */}
-
-      {/* {step === '카드추가' && (
-      <카드추가
-        onNext={(data: any) => {
-          setRegisterData((prev) => ({ ...prev, 가입방식: data }))
-          setStep('카드사선택')
-        }}
-      />
-    )} */}
-    </>
-  )
-}
-
-export default BackUpPage
diff --git a/src/components/page/cardList.tsx b/src/components/page/cardList.tsx
deleted file mode 100644
index 04dc9479e..000000000
--- a/src/components/page/cardList.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function CardList() {
-    return (  );
-}
-
-export default CardList;
\ No newline at end of file
diff --git a/src/components/page/registCard.css b/src/components/page/registCard.css
index a37761676..b81add13b 100644
--- a/src/components/page/registCard.css
+++ b/src/components/page/registCard.css
@@ -1,34 +1,47 @@
 .input-color-highlight {
-  color: #04c09e;
+	color: #04c09e;
 }
 
 .dot-hightlight {
-  background: #04c09e;
-  border-radius: 50%;
-  width: 5px;
-  height: 5px;
-  text-align: center;
+	background: #04c09e;
+	border-radius: 50%;
+	width: 5px;
+	height: 5px;
+	text-align: center;
 }
 .dot-align {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 .auto-sizing-width-container {
-  display: flex;
-  gap: 10px;
+	display: flex;
+	gap: 10px;
 }
 
 .auto-sizing-width-item {
-  /* flex-grow: 1;
+	/* flex-grow: 1;
   flex-basis: 0; */
-  width: 10%;
+	width: 10%;
 }
 
 .auto-sizing-width-item-35 {
-  width: 35%;
+	width: 35%;
 }
 
 .container-flex {
-  display: flex;
-}
\ No newline at end of file
+	display: flex;
+}
+
+.input-background-default {
+	background: #ecebf1;
+	border-radius: 2px;
+}
+.divider {
+	display: flex;
+	align-items: center;
+}
+.title-align {
+	display: flex;
+	justify-content: space-between;
+}
diff --git a/src/components/page/registCard.tsx b/src/components/page/registCard.tsx
index 4f1a2632b..7b60e921c 100644
--- a/src/components/page/registCard.tsx
+++ b/src/components/page/registCard.tsx
@@ -3,27 +3,37 @@ import arrow from '../../assets/arrow.svg'
 import question from '../../assets/question.svg'
 import Container from '../container'
 import Input from '../input/input'
-import BasicLayout from '../layout/basicLayout'
-import './registCard.css'
+import BasicLayout from '../layout/BasicLayout'
+import './RegistCard.css'
 import CardBox from '../CardBox'
 import useInput from '../../hooks/useInput'
-
-export type RegisterDataType = {
+import Modal, { CardItemType, ThemeColorType } from '../modal/Modal'
+import {
+	CARD_NUMBER_LENGTH,
+	CARD_HOLDER_NAME_LENGTH,
+	EXPIRE_DATE_MAX_LENGTH,
+	EXPIRE_DATE_MAX_LENGTH_WITH_DEVIDER,
+	EXPIRE_DATE_DIVIDER_INDEX,
+	SECRET_CODE_MAX_LENTGH,
+} from '../../constants'
+
+export type RegisteredDataType = {
 	cardNumber: string
 	expirationDate: string
 	ownerName: string
 	securityCode?: string
 	secretCode?: string
+	theme?: ThemeColorType
+	cardSelectionTypeName: string
+	cardNickName?: string
 }
 
 type RegistCardProps = {
-	setRegisterData: (value: RegisterDataType) => void
+	setRegisterData: (value: RegisteredDataType) => void
 	onPrev?: () => void
 	onNext?: () => void
 }
 
-const CARD_NUMBER_LENGTH = 4
-
 /**
  * [리팩토링 요소]
  * 1) 마스킹 넘버 리턴하는것, validation은 받아서 처리하면됨,
@@ -31,6 +41,12 @@ const CARD_NUMBER_LENGTH = 4
 const RegistCard = (props: RegistCardProps) => {
 	const { setRegisterData, onPrev, onNext } = props
 
+	const [isOpen, setIsOpen] = useState<boolean>(false)
+	const [cardSelectionInfo, setCardSelectionInfo] = useState<CardItemType<ThemeColorType>>({
+		name: '',
+		theme: '',
+	})
+
 	// 카드번호 - 1번째
 	const { value: firstCardNumber, handleChange: handleChangeCardNumberFirstFunc } = useInput('')
 
@@ -63,9 +79,8 @@ const RegistCard = (props: RegistCardProps) => {
 	const [secondSecretMaskedCode, setSecondSecretMaskedCode] = useState<string>()
 
 	// 조건에 부합하면 - true리턴 / 조건에 부합하지 않으면 false 리턴
-	const validateNumberWithMaxLength = (value: string, maxLength?: number): boolean => {
-		const MAX_LENGTH = maxLength || 4
-		const isValidLength = value.length <= MAX_LENGTH
+	const validateNumberWithMaxLength = (value: string, maxLength: number): boolean => {
+		const isValidLength = value.length <= maxLength
 		const isNumber = !Number.isNaN(Number(value))
 
 		const isValid = [isValidLength, isNumber].every(Boolean)
@@ -85,12 +100,22 @@ const RegistCard = (props: RegistCardProps) => {
 			ownerName: ownerNameValue,
 			securityCode: securityCode,
 			secretCode: `${firstSecretCode}${secondSecretCode}`,
+			theme: cardSelectionInfo.theme,
+			cardSelectionTypeName: cardSelectionInfo.name,
 		})
 	}
 
 	return (
 		<>
 			<BasicLayout>
+				{isOpen && (
+					<Modal
+						onNext={() => {
+							setIsOpen(false)
+						}}
+						setModalInfo={setCardSelectionInfo}
+					></Modal>
+				)}
 				<BasicLayout.Header>
 					<button onClick={onPrev} style={{ display: 'flex' }}>
 						<img src={arrow} />
@@ -100,37 +125,54 @@ const RegistCard = (props: RegistCardProps) => {
 					</button>
 				</BasicLayout.Header>
 				<BasicLayout.Main>
-					<CardBox
+					<CardBox<ThemeColorType>
+						onClick={() => setIsOpen(true)}
 						cardNumber={`${firstCardNumber}${secondCardNumber}${thirdCardMaskedNumber}${fourthCardMaskedNumber}`}
 						expirationDate={expirationDate}
 						ownerName={ownerNameValue}
+						theme={cardSelectionInfo.theme}
+						cardSelectionTypeName={cardSelectionInfo.name}
 					/>
-					<Container title="카드 번호">
+					<Container title="카드 번호" childClassName="input-background-default">
 						<div className="container-flex">
 							<Input
 								type="text"
 								value={firstCardNumber}
 								onChange={(event) => {
-									if (!validateNumberWithMaxLength(event.target.value, 4)) {
+									if (
+										!validateNumberWithMaxLength(
+											event.target.value,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
 										return
 									}
 
 									handleChangeCardNumberFirstFunc(event)
 								}}
 							/>
-							{firstCardNumber.length === CARD_NUMBER_LENGTH && <div>-</div>}
+							{firstCardNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
 							<Input
 								type="text"
 								value={secondCardNumber}
 								onChange={(event) => {
-									if (!validateNumberWithMaxLength(event.target.value, 4)) {
+									if (
+										!validateNumberWithMaxLength(
+											event.target.value,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
 										return
 									}
 
 									handleChangeCardNumberSecondFunc(event)
 								}}
 							/>
-							{secondCardNumber.length === CARD_NUMBER_LENGTH && <div>-</div>}
+							{secondCardNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
 							{/* 카드번호 3번째 자리 */}
 							<Input
 								type="text"
@@ -139,7 +181,12 @@ const RegistCard = (props: RegistCardProps) => {
 									const newThirdCardNumber =
 										thirdCardNumber + event.target.value.replace(/\*/g, '')
 
-									if (!validateNumberWithMaxLength(newThirdCardNumber, 4)) {
+									if (
+										!validateNumberWithMaxLength(
+											newThirdCardNumber,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
 										return
 									}
 
@@ -152,7 +199,9 @@ const RegistCard = (props: RegistCardProps) => {
 									)
 								}}
 							/>
-							{thirdCardMaskedNumber.length === CARD_NUMBER_LENGTH && <div>-</div>}
+							{thirdCardMaskedNumber.length === CARD_NUMBER_LENGTH && (
+								<div className="divider">-</div>
+							)}
 
 							<Input
 								type="text"
@@ -161,7 +210,12 @@ const RegistCard = (props: RegistCardProps) => {
 									const newFourthCardNumber =
 										fourthCardNumber + event.target.value.replace(/\*/g, '')
 
-									if (!validateNumberWithMaxLength(newFourthCardNumber, 4)) {
+									if (
+										!validateNumberWithMaxLength(
+											newFourthCardNumber,
+											CARD_NUMBER_LENGTH,
+										)
+									) {
 										return
 									}
 
@@ -186,7 +240,7 @@ const RegistCard = (props: RegistCardProps) => {
 									if (
 										event.key === 'Backspace' &&
 										expirationDate.includes('/') &&
-										expirationDate.length === 3
+										expirationDate.length === EXPIRE_DATE_MAX_LENGTH
 									) {
 										event.preventDefault()
 										setExpirationDate(
@@ -197,11 +251,11 @@ const RegistCard = (props: RegistCardProps) => {
 								onChange={(event) => {
 									const { value } = event.target
 
-									if (value.length > 5) {
+									if (value.length > EXPIRE_DATE_MAX_LENGTH_WITH_DEVIDER) {
 										return
 									}
 									// 3번째 자리에 /를 삽입
-									if (value.length === 2) {
+									if (value.length === EXPIRE_DATE_DIVIDER_INDEX) {
 										if (!isMonth(value)) {
 											alert(
 												'월은 1이상 12이하 숫자여야 합니다. ex) 3월이라면 03으로 기입해주세요',
@@ -220,7 +274,9 @@ const RegistCard = (props: RegistCardProps) => {
 					</Container>
 					<Container
 						title="카드 소유자 이름(선택)"
-						titleRight={<span>{ownerNameValue.length}</span>}
+						titleRight={
+							<span>{`${ownerNameValue.length}/${CARD_HOLDER_NAME_LENGTH}`}</span>
+						}
 					>
 						<Input
 							placeholder="카드에 표시된 이름과 동일하게 입력하세요."
@@ -237,7 +293,6 @@ const RegistCard = (props: RegistCardProps) => {
 										securityCode + event.target.value.replace(/\*/g, '')
 
 									const isValidNumber = (input: string) => {
-										console.log('input', input, !Number.isNaN(Number(input)))
 										return !Number.isNaN(Number(input))
 									}
 									if (!isValidNumber(newSecurityCode)) {
@@ -267,7 +322,12 @@ const RegistCard = (props: RegistCardProps) => {
 										const newFirstSecretCode =
 											firstSecretCode + event.target.value.replace(/\*/g, '')
 
-										if (!validateNumberWithMaxLength(event.target.value, 1)) {
+										if (
+											!validateNumberWithMaxLength(
+												event.target.value,
+												SECRET_CODE_MAX_LENTGH,
+											)
+										) {
 											return
 										}
 										setFirstSecretCode(newFirstSecretCode)
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 000000000..9c244c530
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,6 @@
+export const CARD_NUMBER_LENGTH = 4
+export const CARD_HOLDER_NAME_LENGTH = 30
+export const EXPIRE_DATE_MAX_LENGTH = 3
+export const EXPIRE_DATE_MAX_LENGTH_WITH_DEVIDER = 5
+export const EXPIRE_DATE_DIVIDER_INDEX = 2
+export const SECRET_CODE_MAX_LENTGH = 1
diff --git a/src/hooks/useInput.tsx b/src/hooks/useInput.tsx
index aaef6cb8b..1ffd336fc 100644
--- a/src/hooks/useInput.tsx
+++ b/src/hooks/useInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 
 /*
 [input 버튼]
@@ -12,19 +12,17 @@ import { ChangeEvent, KeyboardEvent, useState } from 'react'
         * value를 가짐.   
 */
 export default function useInput(initialValue = '') {
-  // 입력 제약 로직을 커스텀 훅으로 분리 => 30자 제한 등에 사용 예정
-  const [value, setValue] = useState(initialValue)
+	// 입력 제약 로직을 커스텀 훅으로 분리 => 30자 제한 등에 사용 예정
+	const [value, setValue] = useState(initialValue)
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { value: currentInput } = e.target
-    //constraint 제약조건 추가시 validation 필요할 수 있음 -> 이에 따라 input 컴포넌트에서는 빨간 테두리 처리
-    console.log('inputValue', currentInput)
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const { value: currentInput } = e.target
+		//constraint 제약조건 추가시 validation 필요할 수 있음 -> 이에 따라 input 컴포넌트에서는 빨간 테두리 처리
+		setValue(currentInput)
+	}
 
-    setValue(currentInput)
-  }
-
-  return {
-    value,
-    handleChange,
-  }
+	return {
+		value,
+		handleChange,
+	}
 }
diff --git a/src/hooks/useStepper.tsx b/src/hooks/useStepper.tsx
index 9801e68c4..8c4092a3b 100644
--- a/src/hooks/useStepper.tsx
+++ b/src/hooks/useStepper.tsx
@@ -17,8 +17,7 @@ function useStepper<T>(defaultStep: T) {
 	}
 
 	const Stepper = ({ children }: StepperProps) => {
-		console.log('children', children)
-		const targetStep = children.find((childStep: any) => childStep.props.name === step)
+		const targetStep = children.find((childStep) => childStep.props.name === step)
 
 		return <>{targetStep}</>
 	}
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
deleted file mode 100644
index 62445fdc5..000000000
--- a/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
-  }
-};
\ No newline at end of file
diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
deleted file mode 100644
index c33be6ec5..000000000
--- a/src/stories/Button.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
deleted file mode 100644
index 61cf98aa0..000000000
--- a/src/stories/Header.stories.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Header } from './Header';
-
-const meta = {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut: Story = {};
diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx
deleted file mode 100644
index 015046013..000000000
--- a/src/stories/Header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-  <header>
-    <div className="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
-);
diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts
deleted file mode 100644
index f7a06817f..000000000
--- a/src/stories/Page.stories.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent, expect } from '@storybook/test';
-
-import { Page } from './Page';
-
-const meta = {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedOut: Story = {};
-
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};
diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx
deleted file mode 100644
index e11748301..000000000
--- a/src/stories/Page.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-import './page.css';
-
-type User = {
-  name: string;
-};
-
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
-
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};
diff --git a/src/stories/button.css b/src/stories/button.css
deleted file mode 100644
index dc91dc763..000000000
--- a/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
diff --git a/src/stories/header.css b/src/stories/header.css
deleted file mode 100644
index d9a70528a..000000000
--- a/src/stories/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}
diff --git a/src/stories/page.css b/src/stories/page.css
deleted file mode 100644
index 098dad118..000000000
--- a/src/stories/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}