{
diff --git a/src/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap.tsx b/src/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap.tsx
index 2d1a812..862befe 100644
--- a/src/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap.tsx
+++ b/src/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap.tsx
@@ -1,10 +1,19 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
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 = () => {
const { navigate } = useNavigate();
+ const [sortType, setSortType] = useState(SortTypeKeys.LATEST);
+
+ const onClickToSort = (sort: SortTypeKeys) => {
+ setSortType(sort);
+ };
+
const onClickRegister = () => {
navigate(PATHS.additionalService.settlementAgency.register);
};
@@ -46,11 +55,10 @@ export const SettlementAgencyDepositWrap = () => {
-
-
- |
-
-
+
전체
diff --git a/src/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap.tsx b/src/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap.tsx
index 3fb021a..4f18d06 100644
--- a/src/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap.tsx
+++ b/src/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap.tsx
@@ -1,16 +1,24 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
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 = () => {
const { navigate } = useNavigate();
+ const [sortType, setSortType] = useState(SortTypeKeys.LATEST);
+
const onClickToRegister = () => {
navigate(PATHS.additionalService.settlementAgency.register);
};
const onClickToDetail = () => {
navigate(PATHS.additionalService.settlementAgency.detail);
};
+ const onClickToSort = (sort: SortTypeKeys) => {
+ setSortType(sort);
+ };
return (
<>
@@ -95,11 +103,10 @@ export const SettlementAgencyManageWrap = () => {
-
-
- |
-
-
+
diff --git a/src/entities/common/ui/sort-type-box.tsx b/src/entities/common/ui/sort-type-box.tsx
index 29e6e1f..741f50a 100644
--- a/src/entities/common/ui/sort-type-box.tsx
+++ b/src/entities/common/ui/sort-type-box.tsx
@@ -18,19 +18,19 @@ export const SortTypeBox = ({
return (
<>
- { options.map((option: Record
, index: number) => (
+ { options.map((value: Record, index: number) => (
<>
{ (index > 0) &&
|
}
-
+
+ className={ `sort-btn ${(sortType === value.key)? 'active': ''}` }
+ onClick={ () => onClickToSort(value.key) }
+ >{ value.label }
))}
diff --git a/src/shared/ui/assets/css/calendar.css b/src/shared/ui/assets/css/calendar.css
new file mode 100644
index 0000000..f32d6a6
--- /dev/null
+++ b/src/shared/ui/assets/css/calendar.css
@@ -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%;
+ }
+}
+
diff --git a/src/shared/ui/calendar/nice-calendar.tsx b/src/shared/ui/calendar/nice-calendar.tsx
index 05fc859..7c25140 100644
--- a/src/shared/ui/calendar/nice-calendar.tsx
+++ b/src/shared/ui/calendar/nice-calendar.tsx
@@ -19,6 +19,12 @@ interface NiceCalendarProps {
maxDate?: Date;
};
+interface TileClassNameProps {
+ activeStartDate: Date;
+ date: Date;
+ view: string;
+};
+
const NiceCalendar = ({
calendarOpen,
setCalendarOpen,
@@ -84,12 +90,11 @@ const NiceCalendar = ({
};
const formatDay = (locale: string | undefined, date: Date) => {
// For Korean locale, return only the day number without '일'
- if (currentLocale === 'ko') {
- return date.getDate().toString();
- }
- return date.toLocaleString(currentLocale, {
- day: 'numeric'
+
+ return date.toLocaleString('en', {
+ day: '2-digit',
});
+
};
const formatShortWeekday = (locale: string | undefined, date: Date) => {
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(() => {
setMinMaxValueDate();
@@ -107,7 +136,10 @@ const NiceCalendar = ({
{ (calendarOpen) &&
<>
- onClickToClose() }>
+ onClickToClose() }
+ >
@@ -129,11 +163,6 @@ const NiceCalendar = ({
};
const CalendarWrapper = styled.div`
z-index: 1100;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
`;
export default NiceCalendar;
\ No newline at end of file