Skip to content

[김혜성] Payment 미션 Step1 (공사중) #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hyesung99 wants to merge 13 commits into
base: hyesung-main
Choose a base branch
from
Open

[김혜성] Payment 미션 Step1 (공사중) #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6027357
feat : responsive utils
hyesung99 Jul 29, 2024
bff1623
feat : breakpoint css-variable로 관리
hyesung99 Jul 29, 2024
6fe07b1
feat : Flex primitive 컴포넌트 추가
hyesung99 Jul 29, 2024
2e3d17d
feat : debounce 작성
hyesung99 Aug 5, 2024
dec1c77
feat : useResponsive custom hook
hyesung99 Aug 5, 2024
a6b5a2f
feat : Flex 공통 컴포넌트 추가
hyesung99 Aug 5, 2024
5fb5cbf
feat : Responsive utils
hyesung99 Aug 5, 2024
cc26d83
feat : Portal 추가
hyesung99 Aug 5, 2024
58841c5
feat : useClickOutside
hyesung99 Aug 5, 2024
79514ec
feat : useKeybind
hyesung99 Aug 5, 2024
3c9556f
feat : Modal 컴포넌트 추가
hyesung99 Aug 5, 2024
5bd4e66
feat : useFunnel
hyesung99 Aug 5, 2024
032ec58
refactor : useFunnel 제네릭 수정
hyesung99 Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,15 @@
"preview": "vite preview"
},
"dependencies": {
"@vanilla-extract/css": "^1.15.3",
"@vanilla-extract/css-utils": "^0.1.4",
"@vanilla-extract/dynamic": "^2.1.1",
"@vanilla-extract/recipes": "^0.5.3",
"framer-motion": "^11.3.19",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react-dom": "^18.3.1",
"react-router-dom": "^6.25.1",
"zustand": "^4.5.4"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.5",
Expand All @@ -29,6 +36,7 @@
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.15.0",
"@vanilla-extract/vite-plugin": "^4.0.13",
"@vitejs/plugin-react-swc": "^3.5.0",
"@vitest/coverage-v8": "^2.0.3",
"@vitest/ui": "^1.6.0",
Expand Down
647 changes: 629 additions & 18 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

323 changes: 10 additions & 313 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,317 +1,14 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Test from "./pages/Test";

function App() {
return (
<>
<h1>React Clean Code Payments CSS example</h1>
<h2>1️⃣ 카드 추가</h2>
<div className="root">
<div className="app">
<h3 className="page-title">
카드 추가
</h3>
<div className="card-box">
<div className="empty-card">
<div className="card-top"></div>
<div className="card-middle">
<div className="small-card__chip"></div>
</div>
<div className="card-bottom">
<div className="card-bottom__info">
<span className="card-text">NAME</span>
<span className="card-text">MM / YY</span>
</div>
</div>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 번호</span>
<div className="input-box">
<input className="input-basic" type="text"/>
<input className="input-basic" type="text"/>
<input className="input-basic" type="password"/>
<input className="input-basic" type="password"/>
</div>
</div>
<div className="input-container">
<span className="input-title">만료일</span>
<div className="input-box w-50">
<input className="input-basic" type="text" placeholder="MM"/>
<input className="input-basic" type="text" placeholder="YY"/>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 소유자 이름(선택)</span>
<input
type="text"
className="input-basic"
placeholder="카드에 표시된 이름과 동일하게 입력하세요."
/>
</div>
<div className="input-container">
<span className="input-title">보안코드(CVC/CVV)</span>
<input className="input-basic w-25" type="password"/>
</div>
<div className="input-container">
<span className="input-title">카드 비밀번호</span>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
</div>
<div className="button-box">
<span className="button-text">다음</span>
</div>
</div>
</div>

<h2>2️⃣ 카드 추가 - 카드사 선택</h2>
<div className="root">
<div className="app">
<h3 className="page-title">
카드 추가
</h3>
<div className="card-box">
<div className="small-card">
<div className="card-top">
<span className="card-text">클린카드</span>
</div>
<div className="card-middle">
<div className="small-card__chip"></div>
</div>
<div className="card-bottom">
<div className="card-bottom__number">
<span className="card-text">1111 - 2222 - oooo - oooo</span>
</div>
<div className="card-bottom__info">
<span className="card-text">NAME</span>
<span className="card-text">MM / YY</span>
</div>
</div>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 번호</span>
<div className="input-box">
<input className="input-basic" type="text" value="1111"/>
<input className="input-basic" type="text" value="2222"/>
<input className="input-basic" type="password" value="1111"/>
<input className="input-basic" type="password" value="1111"/>
</div>
</div>
<div className="input-container">
<span className="input-title">만료일</span>
<div className="input-box w-50">
<input className="input-basic" type="text" placeholder="MM"/>
<input className="input-basic" type="text" placeholder="YY"/>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 소유자 이름(선택)</span>
<input
type="text"
className="input-basic"
placeholder="카드에 표시된 이름과 동일하게 입력하세요."
/>
</div>
<div className="input-container">
<span className="input-title">보안코드(CVC/CVV)</span>
<input className="input-basic w-25" type="password"/>
</div>
<div className="input-container">
<span className="input-title">카드 비밀번호</span>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
<input className="input-basic w-15" type="password"/>
</div>
<div className="button-box">
<span className="button-text">다음</span>
</div>
</div>
<div className="modal-dimmed">
<div className="modal">
<div className="flex-center">
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
</div>
<div className="flex-center">
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
<div className="modal-item-container">
<div className="modal-item-dot"></div>
<span className="modal-item-name">클린 카드</span>
</div>
</div>
</div>
</div>
</div>

<h2>3️⃣ 카드 추가 - 입력 완료</h2>
<div className="root">
<div className="app">
<h3 className="page-title">
카드 추가
</h3>
<div className="card-box">
<div className="small-card">
<div className="card-top">
<span className="card-text">클린카드</span>
</div>
<div className="card-middle">
<div className="small-card__chip"></div>
</div>
<div className="card-bottom">
<div className="card-bottom__number">
<span className="card-text">1111 - 2222 - oooo - oooo</span>
</div>
<div className="card-bottom__info">
<span className="card-text">프롱이</span>
<span className="card-text">12 / 23</span>
</div>
</div>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 번호</span>
<div className="input-box">
<input className="input-basic" type="text" value="1111"/>
<input className="input-basic" type="text" value="2222"/>
<input className="input-basic" type="password" value="1111"/>
<input className="input-basic" type="password" value="1111"/>
</div>
</div>
<div className="input-container">
<span className="input-title">만료일</span>
<div className="input-box w-50">
<input
className="input-basic"
type="text"
placeholder="MM"
value="12"
/>
<input
className="input-basic"
type="text"
placeholder="YY"
value="23"
/>
</div>
</div>
<div className="input-container">
<span className="input-title">카드 소유자 이름(선택)</span>
<input type="text" className="input-basic" value="프롱이"/>
</div>
<div className="input-container">
<span className="input-title">보안코드(CVC/CVV)</span>
<input className="input-basic w-25" type="password" value="111"/>
</div>
<div className="input-container">
<span className="input-title">카드 비밀번호</span>
<input className="input-basic w-15" type="password" value="1"/>
<input className="input-basic w-15" type="password" value="1"/>
<input className="input-basic w-15" type="password" value="1"/>
<input className="input-basic w-15" type="password" value="1"/>
</div>
<div className="button-box">
<span className="button-text">다음</span>
</div>
</div>
</div>

<h2>4️⃣ 카드 추가 완료</h2>
<div className="root">
<div className="app flex-column-center">
<div className="flex-center">
<h2 className="page-title mb-10">카드등록이 완료되었습니다.</h2>
</div>
<div className="card-box">
<div className="big-card">
<div className="card-top">
<span className="card-text__big">클린카드</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__big">1111 - 2222 - oooo - oooo</span>
</div>
<div className="card-bottom__info">
<span className="card-text__big">프롱이</span>
<span className="card-text__big">12 / 23</span>
</div>
</div>
</div>
</div>
<div className="input-container flex-center w-100">
<input
className="input-underline w-75"
type="text"
placeholder="카드의 별칭을 입력해주세요."
/>
</div>
<div className="button-box mt-50">
<span className="button-text">다음</span>
</div>
</div>
</div>

<h2>5️⃣ 카드 목록</h2>
<div className="root">
<div className="app flex-column-center">
<div className="flex-center">
<h2 className="page-title mb-10">보유 카드</h2>
</div>
<div className="card-box">
<div className="small-card">
<div className="card-top">
<span className="card-text">클린카드</span>
</div>
<div className="card-middle">
<div className="small-card__chip"></div>
</div>
<div className="card-bottom">
<div className="card-bottom__number">
<span className="card-text">1111 - 2222 - oooo - oooo</span>
</div>
<div className="card-bottom__info">
<span className="card-text">프롱이</span>
<span className="card-text">12 / 23</span>
</div>
</div>
</div>
</div>
<span className="card-nickname">법인카드</span>
<div className="card-box">
<div className="empty-card">+</div>
</div>
</div>
</div>
</>
)
<Router>
<Routes>
<Route path="/" element={<Test />} />
</Routes>
</Router>
);
}

export default App
export default App;
24 changes: 24 additions & 0 deletions src/components/common/Flex.css.ts
View file
Open in desktop
Copy link
Author

@hyesung99 hyesung99 Aug 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용하지 않는 파일입니다...!

Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { style } from "@vanilla-extract/css";
import { createResponsiveStyle } from "../../utils/responsive";
import { FlexProps } from "./Flex";

export const flexBase = style({
display: "flex",
});

export const createFlexStyle = ({
direction,
justify,
align,
wrap,
gap,
}: FlexProps) => {
return style([
flexBase,
createResponsiveStyle("flexDirection", direction || "row"),
createResponsiveStyle("justifyContent", justify || "flex-start"),
createResponsiveStyle("alignItems", align || "stretch"),
createResponsiveStyle("flexWrap", wrap || "nowrap"),
createResponsiveStyle("gap", gap || 0),
]);
};
Loading