Skip to content

Commit

Permalink
[REFACTOR] 결제 수단 버튼 추가 및 디자인 세부 수정 (#28)
Browse files Browse the repository at this point in the history 
* [REFACTOR] 결제 방법 추가

* [REFACTOR] 결제하기 버튼 추가

* [REFACTOR] 드롭다운 오른쪽 정렬

* [REFACTOR] 드롭다운 버튼 색상 변경
  • Loading branch information
@kyukong
kyukong authored Mar 4, 2024
1 parent b595eac commit 07e2a77
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 30 deletions.
Binary file added src/assets/icon/kakao_pay.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icon/naver_pay.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icon/toss_pay.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 21 additions & 14 deletions src/components/common/Button/PaymentButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,28 @@
* @since 2024.02.26
* @author 김유빈
*/
function PaymentButton(props) {
function PaymentButton({text, value, url, onClick, buttonClassName, imgClassName, selectedItem}) {
return (
<button type="button"
className="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4
focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center
inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700
dark:text-white dark:hover:bg-gray-700 me-2 mb-2"
onClick={props.onClick}>
<img
src={props.url}
alt="toss"
width="24"
className="mr-2"/>
{props.text}
</button>
<div>
<button type="button"
style={{backgroundColor: selectedItem === value ? "#F8F8F8" : "white"}}
className={`text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4
focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center
inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700
dark:text-white dark:hover:bg-gray-700 me-2 mb-2 h-12 w-28 ${buttonClassName}`}
onClick={() => onClick(value)}>
{
url &&
<div className="flex items-center justify-center">
<img
src={url}
alt="toss"
className={`max-w-full max-h-full ${imgClassName}`}/>
</div>
}
{text}
</button>
</div>
)
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/common/Dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ function Dropdown({buttonId, dropdownId, title, categories, onSelect}) {
onClick={toggleDropdown}
data-dropdown-toggle={dropdownId}
data-dropdown-trigger="hover"
className="text-white bg-main-color-600 hover:bg-main-color-800 focus:ring-4 focus:outline-none
focus:ring-main-color-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex
items-center mb-6 mr-4"
className="text-gray-700 border border-gray-700 hover:bg-light-gray-100
focus:ring-4 focus:outline-none focus:ring-light-gray-200
font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-4"
type="button">
{title}
<svg className={`w-2.5 h-2.5 ms-3 ${isOpen ? 'transform rotate-180' : ''}`}
Expand Down
50 changes: 41 additions & 9 deletions src/pages/business/ad.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@ import ContentBox from "../../components/common/ContentBox/ContentBox";
import InputText from "../../components/common/Input/InputText";
import RadioGroup from "../../components/common/Radio/RadioGroup";
import PaymentButton from "../../components/common/Button/PaymentButton";
import TossImage from "../../assets/icon/toss.png";
import TossPayImage from "../../assets/icon/toss_pay.png";
import KakaoPayImage from "../../assets/icon/kakao_pay.png";
import NaverPayImage from "../../assets/icon/naver_pay.png";
import React, {useState} from "react";
import TossPayModal from "../../components/business/TossPayModal/TossPayModal";
import BuyerContentBox from "../../components/business/BuyerContentBox/BuyerContentBox";
import SelectedAdPost from "../../components/business/SelectedAdPost/SelectedAdPost";
import MyCommunityApi from "../../api/business/createAd/myCommunityApi";
import FileUpload from "../../components/common/Input/FileUpload";
import MyPopupApi from "../../api/business/createAd/myPopupApi";
import Button from "../../components/common/Button/Button";

/**
* Ad 페이지 제작
Expand All @@ -25,6 +28,7 @@ const Ad = () => {
const [isOpen, setOpen] = useState(false)
const [posts, setPosts] = useState([])
const [postId, setPostId] = useState(null)
const [selectedPayment, setSelectedPayment] = useState(null)

const handleMainImageFileChange = (event) => {
setMainImageFile(event.target.files[0])
Expand All @@ -33,6 +37,9 @@ const Ad = () => {
const handleClickTossPaymentButton = () => {
setOpen(true)
}
const handleSelectedPaymentItem = (item) => {
setSelectedPayment(item)
}

return (
<>
Expand All @@ -57,22 +64,43 @@ const Ad = () => {
<SelectedAdPost posts={posts} setPostId={setPostId}/>
</div>
<div className="flex-auto">
<BuyerContentBox/>
<ContentBox
title="최종 결제금액"
title="결제 방법"
content={
<>
<InputText title="총 결제금액" value={`${price} 원`} disabled="true"/>
<div className="flex items-center">
<PaymentButton
url={TossPayImage}
value="toss"
onClick={handleSelectedPaymentItem}
selectedItem={selectedPayment}/>
<PaymentButton
url={KakaoPayImage}
value="kakao"
onClick={handleSelectedPaymentItem}
selectedItem={selectedPayment}/>
<PaymentButton
url={NaverPayImage}
value="naver"
onClick={handleSelectedPaymentItem}
selectedItem={selectedPayment}/>
{isOpen && (
<TossPayModal
postId={postId}
postType={postType}
price={price}
file={mainImageFile}/>
)}
</div>
</>
}/>
<BuyerContentBox/>
<ContentBox
title="결제 방법"
title="최종 결제금액"
content={
<>
<PaymentButton text="토스페이" url={TossImage} onClick={handleClickTossPaymentButton}/>
{ isOpen && (
<TossPayModal postId={postId} postType={postType} price={price} file={mainImageFile}/>
)}
<InputText title="총 결제금액" value={`${formatNumberWithCommas(price)} 원`} disabled="true"/>
<Button text="결제하기" onClick={handleClickTossPaymentButton}/>
</>
}/>
</div>
Expand Down Expand Up @@ -126,4 +154,8 @@ function AdMainImage(onChange) {
return <FileUpload title="메인 이미지" onChange={onChange}/>
}

function formatNumberWithCommas(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

export default Ad;
10 changes: 6 additions & 4 deletions src/pages/business/plans.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@ function Plans() {
title="나의 사업계획서 목록"
content={
<>
<CategoryDropdown setCategory={setCategory}/>
<EntranceStatusDropdown setEntranceStatus={setEntranceStatus}/>
<SearchButton
onClick={getPlans(category, entranceStatus, page, limit, setTotal, setPlans)}/>
<div className="flex justify-end items-center mb-6">
<CategoryDropdown setCategory={setCategory}/>
<EntranceStatusDropdown setEntranceStatus={setEntranceStatus}/>
<SearchButton
onClick={getPlans(category, entranceStatus, page, limit, setTotal, setPlans)}/>
</div>
<MyPlanTable plans={plans} page={page} limit={limit} total={total} setPage={setPage}/>
</>
}/>
Expand Down

0 comments on commit 07e2a77

Please sign in to comment.