nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

현금영수증 리스트

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-21 16:21:57 +09:00
parent 81d977b97d
commit 841a9d8542
44 changed files with 1208 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
src/shared/ui/assets/css/style.css
View File

@@ -295,12 +295,6 @@ footer {
justify-content: space-around;
align-items: center;
z-index: 1000;
border-top: 0.1px solid var(--color-E5E5E5);
will-change: transform;
}
.bottom-tabbar.snapping {
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.tab-button {
@@ -1267,7 +1261,7 @@ input[type="radio"] {
border-radius: 50%;
background: var(--color-CCCCCC);
cursor: pointer;
transition: all 0.4s ease;
transition: all 0.2s ease;
}
.banner-dot.active {
@@ -1499,7 +1493,7 @@ input[type="radio"] {
}
.option-list {
padding: 0 10px;
padding: 0 10px 10px 10px;
display: flex;
flex-direction: column;
gap: 16px;
@@ -2397,13 +2391,13 @@ div .credit-period {
bottom: 0;
left: 0;
right: 0;
padding: 20px 26px calc(env(safe-area-inset-bottom, 0px) + 26px) 26px;
padding: 20px 26px 16px 26px;
z-index: 500;
background: var(--color-white);
}
.apply-row.bottom-padding {
bottom: calc(env(safe-area-inset-bottom) + 26px) !important;
bottom: 70px !important;
}
.apply-row.two-button button:first-child {
@@ -2902,6 +2896,10 @@ div .credit-period {
width: 100%;
}
.bottomsheet-content.expand {
margin-bottom: 0;
}
.bottom-btn {
display: flex;
justify-content: space-between;
@@ -4155,6 +4153,14 @@ ul.txn-amount-detail li span:last-child {
font-size: 5px;
}
.label.desc.dot {
padding-left: 23px;
}
.label.desc.dot::before {
left: 8px;
}
.kv-row.pl-10 {
padding-left: 15px;
}
@@ -5626,8 +5632,8 @@ ul.txn-amount-detail li span:last-child {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0;
padding-bottom: 16px;
}
.faq-search .ic16.search {
position: absolute;
@@ -5646,9 +5652,14 @@ ul.txn-amount-detail li span:last-child {
}
.faq-filter {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 12px;
border: 1px solid #D9D9D9;
border-radius: 8px;
margin-top: 10px;
}
.faq-filter .text {
font-size: 15px;
color: var(--color-2D3436);
@@ -5954,228 +5965,140 @@ ul.txn-amount-detail li span:last-child {
box-sizing: border-box;
}
/* 분할승인 상세 */
.separate-approval-main {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
/* 82 bottomsheet - 세금 계산서 세부내역 조회 (아코디언 펼침) */
.bottomsheet .tax-detail-accordion {
padding: 0;
}
.separate-approval-main .tab-content {
height: 100%;
}
.separate-approval-main .tab-pane.sub.active {
height: 100%;
.bottomsheet .tax-detail-accordion .summary {
display: flex;
flex-direction: column;
}
.separate-approval-section {
padding: 0;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.approval-cards-wrapper {
gap: 16px;
padding-bottom: 20px;
}
.separate-approval-main .apply-row.two-button {
flex-shrink: 0;
position: sticky;
bottom: 0;
background: white;
z-index: 10;
}
/* 분할승인 안내 박스 */
.approval-notice-box {
background: var(--color-white);
padding: 8px;
margin-bottom: 16px;
border-radius: 12px;
flex-shrink: 0;
}
.approval-notice-box p {
font-size: var(--fs-15);
color: var(--color-666666);
line-height: 1.5;
margin: 0;
}
.approval-notice-box p + p {
margin-top: 4px;
}
/* 분할승인 카드 */
.approval-card {
position: relative;
background: var(--color-white);
border: 2px solid var(--color-d6d6d6);
border-radius: 16px;
padding: 16px;
margin-bottom: 16px;
transition: all 0.4s ease;
}
.approval-card.selected {
border-color: var(--color-3E6AFC);
background: var(--color-F4F8FF);
}
/* 분할승인 체크박스 */
.approval-card .card-checkbox {
display: block !important;
position: absolute;
top: 16px;
left: 16px;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
appearance: none;
border: 2px solid var(--color-d6d6d6);
border-radius: 5px;
background-color: var(--color-white);
cursor: pointer;
outline: none;
box-sizing: border-box;
z-index: 1;
}
.approval-card .card-checkbox:focus,
.approval-card .card-checkbox:active {
outline: none !important;
box-shadow: none !important;
border-color: var(--color-d6d6d6);
}
.approval-card .card-checkbox:checked {
background-color: var(--color-3E6AFC);
border-color: var(--color-3E6AFC);
outline: none;
}
.approval-card .card-checkbox:checked::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 6px;
height: 11px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 분할승인 카드 헤더 */
.approval-card .card-header {
.bottomsheet .tax-detail-accordion .summary .row {
display: flex;
gap: 10px;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding-bottom: 12px;
padding-left: 36px;
border-bottom: 1px solid var(--color-E5E5E5);
}
.approval-card .card-tag {
font-size: var(--fs-14);
font-weight: var(--fw-700);
padding: 2px 8px;
border-radius: 4px;
color: var(--color-666666);
background: var(--color-F3F3F3);
transition: all 0.4s ease;
}
.approval-card .card-tag.main-tag {
color: var(--color-3E6AFC);
background: var(--color-E9F1FB);
}
.approval-card.selected .card-tag {
color: var(--color-3E6AFC);
background: var(--color-E9F1FB);
}
.approval-card .card-tid {
font-size: var(--fs-16);
.bottomsheet .tax-detail-accordion .summary .label {
flex: 1 1 auto;
color: var(--color-2D3436);
font-weight: var(--fw-500);
letter-spacing: -0.5px;
}
/* 분할승인 카드 바디 */
.approval-card .card-body {
margin-bottom: 16px;
.bottomsheet .tax-detail-accordion .summary .value {
flex: 0 0 auto;
font-family: Pretendard;
font-weight: 500;
font-size: 17px;
line-height: 1.5;
color: var(--color-2D3436);
}
.approval-card .info-list {
list-style: none;
padding: 0;
margin: 0;
.bottomsheet .tax-detail-accordion .list {
display: flex;
flex-direction: column;
gap: 8px;
gap: 5px;
}
.approval-card .info-list li {
.bottomsheet .tax-detail-accordion .list-header {
display: flex;
gap: 10px;
padding: 10px 0 6px 0;
border-bottom: 1px solid #D9D9D9;
}
.bottomsheet .tax-detail-accordion .list-header .head-date {
flex: 1 1 auto;
font-size: 15px;
color: #666;
}
.bottomsheet .tax-detail-accordion .list-header .head-amount {
flex: 0 0 auto;
font-size: 15px;
color: #666;
margin-left: auto;
}
.bottomsheet .tax-detail-accordion .item {
position: relative;
display: flex;
align-items: center;
font-size: var(--fs-14);
gap: 10px;
padding: 6px 0 6px 6px;
}
.bottomsheet .tax-detail-accordion .item .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-3E6AFC);
}
.bottomsheet .tax-detail-accordion .item .date {
font-size: 17px;
color: #666;
}
.bottomsheet .tax-detail-accordion .item .amount {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
height: 30px;
padding-right: 30px;
}
.bottomsheet .tax-detail-accordion .item .amount .text {
font-size: 17px;
font-weight: 500;
color: var(--color-2D3436);
}
.approval-card .info-list .label {
min-width: 85px;
color: var(--color-666666);
font-weight: var(--fw-400);
.bottomsheet .tax-detail-accordion .item .amount .arrow {
width: 25px;
height: 25px;
transform: rotate(90deg);
top: 8px;
}
.approval-card .info-list .value {
color: var(--color-2D3436);
font-weight: var(--fw-500);
.bottomsheet .tax-detail-accordion .item .amount .arrow.up {
transform: rotate(270deg);
}
/* 분할승인 카드 푸터 */
.approval-card .card-footer {
padding-top: 12px;
border-top: 1px solid var(--color-E5E5E5);
}
.approval-card .period-selector {
.bottomsheet .tax-detail-accordion .item-detail {
display: flex;
align-items: center;
gap: 12px;
flex-direction: column;
gap: 6px;
background: #F4F8FF;
padding: 10px 0;
}
.approval-card .period-selector label {
font-size: var(--fs-14);
color: var(--color-666666);
font-weight: var(--fw-500);
min-width: 60px;
.bottomsheet .tax-detail-accordion .item-detail .labels,
.bottomsheet .tax-detail-accordion .item-detail .values {
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.approval-card .period-selector select {
.bottomsheet .tax-detail-accordion .item-detail .labels span {
display: inline-block;
flex: 1;
height: 36px;
font-size: var(--fs-14);
padding: 6px 30px 6px 12px;
border: 1px solid var(--color-d6d6d6);
border-radius: 4px;
background-color: var(--color-white);
transition: all 0.2s ease;
text-align: center;
font-size: 15px;
color: var(--color-2D3436);
}
.bottomsheet .tax-detail-accordion .item-detail .values span {
flex: 1;
text-align: center;
font-size: 16px;
font-weight: 600;
color: var(--color-2D3436);
}
/* Scrollbar hide utility class */
.scrollbar-hide::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

4
src/shared/ui/assets/images/ico_input_del.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#666666"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.622 6.78805C12.7847 6.62534 13.0485 6.62534 13.2113 6.78805C13.374 6.95077 13.374 7.21459 13.2113 7.37731L10.5892 9.99935L13.2113 12.6214C13.374 12.7841 13.374 13.0479 13.2113 13.2106C13.0485 13.3734 12.7847 13.3734 12.622 13.2106L9.99996 10.5886L7.37792 13.2106C7.2152 13.3734 6.95138 13.3734 6.78866 13.2106C6.62595 13.0479 6.62595 12.7841 6.78866 12.6214L9.4107 9.99935L6.78867 7.37731C6.62595 7.21459 6.62595 6.95077 6.78867 6.78805C6.95138 6.62534 7.2152 6.62534 7.37792 6.78805L9.99996 9.41009L12.622 6.78805Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 804 B

BIN
src/shared/ui/assets/images/ico_sign.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/shared/ui/assets/images/receip_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

66
src/shared/ui/menu/index.tsx
View File

@@ -9,6 +9,8 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItem
import { useEffect, useRef, useState } from 'react';
import { useLocation } from 'react-router';
import { setHomeReloadKey } from '@/pages/home/home-page';
import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
// 상수 정의
const SCROLL_ANIMATION_DURATION = 800;
@@ -17,7 +19,7 @@ const BUTTON_SCROLL_OFFSET = 30;
// 타입 정의
interface ShortButton {
menuId: string;
menuId: number;
menuName: string;
index: number;
}
@@ -34,12 +36,15 @@ export const Menu = ({
favoriteEdit
}: MenuProps) => {
const userMids = useStore.getState().UserStore.userMids;
const userInfo = useStore.getState().UserStore.userInfo;
const location = useLocation();
const { navigate } = useNavigate();
const { mutateAsync: shortcutSave } = useShortcutSaveMutation();
const [shortBtns, setShortBtns] = useState<ShortButton[]>([]);
const [editMode, setEditMode] = useState(false);
const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
const [changeMenuId, setChangeMenuId] = useState<string>();
const [shortBtnIdx, setShortBtnIdx] = useState(0);
const buttonRefs = useRef<Array<HTMLDivElement>>([]);
@@ -48,6 +53,25 @@ export const Menu = ({
const isButtonScrolling = useRef<boolean>(false);
const scrollTimer = useRef<NodeJS.Timeout | null>(null);
const lastScrollTop = useRef<number>(0);
// const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
const callShortcutSave = () => {
if(userInfo.usrid){
let userFavorite = useStore.getState().UserStore.userFavorite;
let menuIds = userFavorite.map((value, index) => {
return value.menuId;
});
let params: ShortcutSaveParams = {
usrid: userInfo.usrid,
isDefault: false,
menuIds: menuIds
};
shortcutSave(params).then((rs: ShortcutSaveResponse) => {
});
}
};
const onClickToNavigate = (path: string) => {
onClickToMenuClose();
@@ -65,7 +89,7 @@ export const Menu = ({
}
};
const onClickToMenuNavigate = (menuId: string, index: number) => {
const onClickToMenuNavigate = (menuId: number, index: number) => {
isButtonScrolling.current = true;
setShortBtnIdx(index);
scrollCategoryButtonToLeft(index);
@@ -102,6 +126,9 @@ export const Menu = ({
const onClickToMenuClose = () => {
if(editMode){
setEditMode(false);
callShortcutSave();
// 여기에 저장 로직?
}
else{
setMenuOn(false);
@@ -114,20 +141,23 @@ export const Menu = ({
const getMenuCategory = () => {
let rs = [];
for(let i=0;i<MenuItems.length;i++){
rs.push(
<MenuCategory
key={ `menu-category-${i}` }
menuId={ MenuItems[i]?.menuId }
menuIcon={ MenuItems[i]?.menuIcon }
menuName={ MenuItems[i]?.menuName }
subMenu={ MenuItems[i]?.subMenu }
setMenuOn={ setMenuOn }
editMode={ editMode }
setChangeMenuId= { setChangeMenuId }
buttonRefs={ buttonRefs }
itemIndex={ i }
/>
);
if(MenuItems[i]){
rs.push(
<MenuCategory
key={ `menu-category-${i}` }
menuId={ MenuItems[i]?.menuId }
menuIcon={ MenuItems[i]?.menuIcon }
menuName={ MenuItems[i]?.menuName }
subMenu={ MenuItems[i]?.subMenu }
setMenuOn={ setMenuOn }
editMode={ editMode }
setChangeMenuId= { setChangeMenuId }
buttonRefs={ buttonRefs }
itemIndex={ i }
/>
);
}
}
return rs;
};
@@ -255,7 +285,7 @@ export const Menu = ({
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="설정"
alt="닫기"
/>
</button>
</div>