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

calendar 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-03 11:20:31 +09:00
parent 0b3c326768
commit f2b09cd2f8
7 changed files with 191 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -11,6 +11,7 @@
<link rel="icon" type="image/png" sizes="192x192" href="src/shared/ui/assets/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="src/shared/ui/assets/images/android-icon-192x192.png">
<link rel="stylesheet" href="src/shared/ui/assets/css/style.css"> <link rel="stylesheet" href="src/shared/ui/assets/css/style.css">
<link rel="stylesheet" href="src/shared/ui/assets/css/style-fix.css"> <link rel="stylesheet" href="src/shared/ui/assets/css/style-fix.css">
<link rel="stylesheet" href="src/shared/ui/assets/css/calendar.css">
<script type="module" src="src/shared/ui/assets/js/motion.js"></script> <script type="module" src="src/shared/ui/assets/js/motion.js"></script>
</head> </head>
<body> <body>

3
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

@@ -215,8 +215,7 @@ export const LinkPaymentHistoryWrap = () => {
<SortTypeBox <SortTypeBox
sortType={sortType} sortType={sortType}
onClickToSort={onClickToSort} onClickToSort={onClickToSort}
> ></SortTypeBox>
</SortTypeBox>
<div className="excrow"> <div className="excrow">
<div className="full-menu-keywords no-padding"> <div className="full-menu-keywords no-padding">
{ {

18
src/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap.tsx
View File

@@ -1,10 +1,19 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { useState } from 'react';
import { SortTypeKeys } from '@/entities/common/model/types';
export const SettlementAgencyDepositWrap = () => { export const SettlementAgencyDepositWrap = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
};
const onClickRegister = () => { const onClickRegister = () => {
navigate(PATHS.additionalService.settlementAgency.register); navigate(PATHS.additionalService.settlementAgency.register);
}; };
@@ -46,11 +55,10 @@ export const SettlementAgencyDepositWrap = () => {
</div> </div>
</div> </div>
<div className="filter-section"> <div className="filter-section">
<div className="sort-options"> <SortTypeBox
<button className="sort-btn active">최신순</button> sortType={sortType}
<span className="sort-divider">|</span> onClickToSort={onClickToSort}
<button className="sort-btn">고액순</button> ></SortTypeBox>
</div>
<div> <div>
<div className="full-menu-keywords no-padding"> <div className="full-menu-keywords no-padding">
<span className="keyword-tag active">전체</span> <span className="keyword-tag active">전체</span>

17
src/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap.tsx
View File

@@ -1,16 +1,24 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { useState } from 'react';
import { SortTypeKeys } from '@/entities/common/model/types';
export const SettlementAgencyManageWrap = () => { export const SettlementAgencyManageWrap = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const onClickToRegister = () => { const onClickToRegister = () => {
navigate(PATHS.additionalService.settlementAgency.register); navigate(PATHS.additionalService.settlementAgency.register);
}; };
const onClickToDetail = () => { const onClickToDetail = () => {
navigate(PATHS.additionalService.settlementAgency.detail); navigate(PATHS.additionalService.settlementAgency.detail);
}; };
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
};
return ( return (
<> <>
@@ -95,11 +103,10 @@ export const SettlementAgencyManageWrap = () => {
</div> </div>
</section> </section>
<section className="filter-section"> <section className="filter-section">
<div className="sort-options"> <SortTypeBox
<button className="sort-btn active">최신순</button> sortType={ sortType }
<span className="sort-divider">|</span> onClickToSort={ onClickToSort }
<button className="sort-btn">고액순</button> ></SortTypeBox>
</div>
<div className="excrow"> <div className="excrow">
<div className="notice-tabs sub"> <div className="notice-tabs sub">
<button className="tab36 on">전체</button> <button className="tab36 on">전체</button>

12
src/entities/common/ui/sort-type-box.tsx
View File

@@ -18,19 +18,19 @@ export const SortTypeBox = ({
return ( return (
<> <>
<div className="sort-options"> <div className="sort-options">
{ options.map((option: Record<string, any>, index: number) => ( { options.map((value: Record<string, any>, index: number) => (
<> <>
{ (index > 0) && { (index > 0) &&
<span <span
key={ option.key + '-divider' } key={ value.key + '-divider' }
className="sort-divider" className="sort-divider"
>|</span> >|</span>
} }
<span key={ option.key }> <span key={ value.key }>
<button <button
className={ `sort-btn ${(sortType === option.key)? 'active': ''}` } className={ `sort-btn ${(sortType === value.key)? 'active': ''}` }
onClick={ () => onClickToSort(option.key) } onClick={ () => onClickToSort(value.key) }
>{ option.label }</button> >{ value.label }</button>
</span> </span>
</> </>
))} ))}

118
src/shared/ui/assets/css/calendar.css Normal file
View File

@@ -0,0 +1,118 @@
/*datepicker styling*/
.calendar-container.calendar-style {
max-width: 768px;
display: flex;
justify-content: center;
padding: 10px;
background: white;
border-radius: 1rem;
box-shadow: none
}
.calendar-style .react-calendar {
max-width: 720px;
box-shadow: none;
background-color: white;
border-radius: 1rem;
padding: 0;
}
.calendar-style .react-calendar .react-calendar__navigation {
/* background-color: white;*/
}
.calendar-style .react-calendar .react-calendar__navigation button {
color: #2D3436;
padding: 0;
}
.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__prev-button,
.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__next-button {
position: relative;
top: -3px;
font-size: 2rem;
font-weight: 400;
line-height: inherit;
border-radius: 0;
}
.calendar-style .react-calendar__month-view__weekdays {
font-weight: 400 !important;
background-color: white;
}
.calendar-style .react-calendar__month-view__weekdays__weekday {
padding: 0.75rem 0.5rem;
font-size: 0.9rem;
color: #999;
font-weight: bold;
}
.calendar-style.react-calendar__navigation button {
font-size: 1.1rem;
}
.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__decade-view__years__year {
color: inherit !important;
}
.calendar-style .react-calendar__tile--active {
background-color: #3E6AFC !important;
color: white !important;
border-radius: 100px;
}
.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__year-view__months__month abbr {
color: white !important;
font-weight: bold;
}
.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__decade-view__years__year,
.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__century-view__decades__decade {
color: white !important;
font-weight: bold;
}
.react-calendar__tile--hasActive {
background: #3E6AFC !important;
color: white !important;
}
.react-calendar__tile {
/* color: #2D3436 !important; */
}
abbr[title] {
text-decoration: none;
}
.react-calendar__navigation button:hover {
background: transparent !important;
}
.tile-weekday{
color: var(--color-111111) !important;
}
.tile-saturday{
color: var(--color-4968BD) !important;
}
.tile-sunday{
color: #FF0000 !important;
}
@media (max-width: 768px) {
.calendar-style {
position: absolute;
left: 10px;
right: 10px;
max-width: 768px;
}
.calendar-style .react-calendar {
max-width: 100%;
}
}

51
src/shared/ui/calendar/nice-calendar.tsx
View File

@@ -19,6 +19,12 @@ interface NiceCalendarProps {
maxDate?: Date; maxDate?: Date;
}; };
interface TileClassNameProps {
activeStartDate: Date;
date: Date;
view: string;
};
const NiceCalendar = ({ const NiceCalendar = ({
calendarOpen, calendarOpen,
setCalendarOpen, setCalendarOpen,
@@ -84,12 +90,11 @@ const NiceCalendar = ({
}; };
const formatDay = (locale: string | undefined, date: Date) => { const formatDay = (locale: string | undefined, date: Date) => {
// For Korean locale, return only the day number without '일' // For Korean locale, return only the day number without '일'
if (currentLocale === 'ko') {
return date.getDate().toString(); return date.toLocaleString('en', {
} day: '2-digit',
return date.toLocaleString(currentLocale, {
day: 'numeric'
}); });
}; };
const formatShortWeekday = (locale: string | undefined, date: Date) => { const formatShortWeekday = (locale: string | undefined, date: Date) => {
return date.toLocaleString(currentLocale, { return date.toLocaleString(currentLocale, {
@@ -97,6 +102,30 @@ const NiceCalendar = ({
}); });
}; };
const tileClassName = ({
activeStartDate,
date,
view
}: TileClassNameProps) => {
if(view === 'month'){
const dayOfWeek = date.getDay();
let activeMonth = moment(activeStartDate).format('MM');
let itemMonth = moment(date).format('MM');
if(itemMonth === activeMonth){
if(dayOfWeek === 0){
return 'tile-sunday';
}
else if(dayOfWeek === 6){
return 'tile-saturday';
}
else{
return 'tile-weekday';
}
}
}
return null;
};
useEffect(() => { useEffect(() => {
setMinMaxValueDate(); setMinMaxValueDate();
@@ -107,7 +136,10 @@ const NiceCalendar = ({
{ (calendarOpen) && { (calendarOpen) &&
<> <>
<div className="bg-dim"></div> <div className="bg-dim"></div>
<CalendarWrapper onClick={ () => onClickToClose() }> <CalendarWrapper
className="calendar-container calendar-style"
onClick={ () => onClickToClose() }
>
<Calendar <Calendar
locale={currentLocale} locale={currentLocale}
minDate={ minDate } minDate={ minDate }
@@ -120,6 +152,8 @@ const NiceCalendar = ({
formatDay={ formatDay } formatDay={ formatDay }
formatShortWeekday={ formatShortWeekday } formatShortWeekday={ formatShortWeekday }
showNeighboringMonth={ true } showNeighboringMonth={ true }
calendarType='gregory'
tileClassName={ tileClassName }
></Calendar> ></Calendar>
</CalendarWrapper> </CalendarWrapper>
</> </>
@@ -129,11 +163,6 @@ const NiceCalendar = ({
}; };
const CalendarWrapper = styled.div` const CalendarWrapper = styled.div`
z-index: 1100; z-index: 1100;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
`; `;
export default NiceCalendar; export default NiceCalendar;