강사소개
강사 경력
-
+
{classList.length > 0 &&
-
+
+
+ )}
+
+ );
+};
+
+export default Report;
+
+const TableList = (props: IReportResponse) => {
+ const {
+ targetUser,
+ targetLecturer,
+ reason,
+ userReportType,
+ isAnswered,
+ userReportResponse,
+ } = props;
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const openModal = () => {
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
+
+ const target = targetUser
+ ? targetUser.nickname
+ : targetLecturer
+ ? targetLecturer.nickname
+ : null;
+ const status = isAnswered ? '처리완료' : '처리중';
+
+ const reportTypes = userReportType.map((type) => type.reportType.description);
+ const str = reportTypes.length > 1 ? ` 외 ${reportTypes.length - 1}` : '';
+
+ const response = userReportResponse?.description;
+
+ return (
+
+ {target}
+
+
+
+ {status}
+
+
+ );
+};
diff --git a/src/app/mypage/instructor/report/_components/ReportModal.tsx b/src/app/mypage/_components/Report/ReportModal.tsx
similarity index 78%
rename from src/app/mypage/instructor/report/_components/ReportModal.tsx
rename to src/app/mypage/_components/Report/ReportModal.tsx
index 88c1e2bfe..ee8955a77 100644
--- a/src/app/mypage/instructor/report/_components/ReportModal.tsx
+++ b/src/app/mypage/_components/Report/ReportModal.tsx
@@ -10,18 +10,13 @@ interface ReportModalProps {
response?: string;
}
-const ReportModal = ({
- isOpen,
- closeModal,
- target,
- reportTypes,
- reason,
- status,
- response,
-}: ReportModalProps) => {
+const ReportModal = (props: ReportModalProps) => {
+ const { isOpen, closeModal, target, reportTypes, reason, status, response } =
+ props;
+
return (
-
진행중인 강의 {classList.length}개
+
+
- {passListData.length > 0 &&
- (Views.MONTH);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [selectedEvent, setSelectedEvent] = useState([]);
const [selectedDate, setSelectedDate] = useState(null);
+ const router = useRouter();
const eventLists = useMemo(() => {
if (!scheduleData) return [];
@@ -49,6 +49,8 @@ const FullCalendar = ({
numberOfParticipants: data.numberOfParticipants,
maxCapacity: data.lecture.maxCapacity,
isGroup: data.lecture.isGroup,
+ lectureMethod:
+ type === 'user' ? data.lecture.lectureMethod.name : undefined,
}));
}, [scheduleData]);
@@ -58,11 +60,19 @@ const FullCalendar = ({
setView(newView);
};
+ const handleUserSelectSlotEvent = (slotInfo: IFullCalendarEvent) => {
+ router.push(
+ `/mypage/user/myclass/apply/${slotInfo.id}?type=${slotInfo.lectureMethod}`,
+ );
+ };
+
const closeModal = () => {
setModalIsOpen(false);
};
- const handleSelectSlotEvent = (slotInfo: SlotInfo | IFullCalendarEvent) => {
+ const handleInstructorSelectSlotEvent = (
+ slotInfo: SlotInfo | IFullCalendarEvent,
+ ) => {
setSelectedDate(slotInfo.start);
const eventsOnSelectedDate = eventLists.filter((event) =>
isSameDay(slotInfo.start, event.start),
@@ -77,8 +87,14 @@ const FullCalendar = ({
localizer={localizer}
formats={formats}
events={eventLists}
- onSelectSlot={handleSelectSlotEvent}
- onSelectEvent={handleSelectSlotEvent}
+ onSelectEvent={
+ type === 'user'
+ ? handleUserSelectSlotEvent
+ : handleInstructorSelectSlotEvent
+ }
+ onSelectSlot={
+ type === 'user' ? undefined : handleInstructorSelectSlotEvent
+ }
selectable={true}
views={['month', 'week', 'day']}
defaultView={Views.MONTH}
@@ -98,6 +114,7 @@ const FullCalendar = ({
}}
style={{ minHeight: '375px', minWidth: '425px', height: 637 }}
className="relative mx-auto mb-3.5 mt-6 w-full pr-8"
+ //className="relative mb-3.5 mt-6 w-full"
/>
{modalIsOpen && selectedEvent && selectedDate && (
diff --git a/src/app/mypage/instructor/manage/schedule/_components/ResponsiveEventCalendar.tsx b/src/app/mypage/_components/Calendar/ResponsiveEventCalendar.tsx
similarity index 87%
rename from src/app/mypage/instructor/manage/schedule/_components/ResponsiveEventCalendar.tsx
rename to src/app/mypage/_components/Calendar/ResponsiveEventCalendar.tsx
index 3c79230e6..6e50fa90d 100644
--- a/src/app/mypage/instructor/manage/schedule/_components/ResponsiveEventCalendar.tsx
+++ b/src/app/mypage/_components/Calendar/ResponsiveEventCalendar.tsx
@@ -1,9 +1,9 @@
import isSameDay from 'date-fns/isSameDay';
import ko from 'date-fns/locale/ko';
+import dynamic from 'next/dynamic';
import { useState } from 'react';
import { Calendar, Views } from 'react-big-calendar';
import { DayPicker, CaptionProps } from 'react-day-picker';
-import ResponsiveScheduleView from '@/app/dashboard/_components/ResponsiveScheduleView';
import { FormattedCaption } from '@/utils/calendarUtils/CalendarCaption';
import {
getSingleCalendarModifiers,
@@ -16,18 +16,23 @@ import { IMonthlyClassSchedules } from '@/types/class';
import 'react-day-picker/dist/style.css';
import '@/styles/calendar.css';
+const ResponsiveScheduleView = dynamic(
+ () => import('@/components/ScheduleView/ResponsiveScheduleView'),
+ {
+ ssr: false,
+ },
+);
+
interface ResponsiveEventCalendarProps {
date: Date;
// eslint-disable-next-line no-unused-vars
handleDateChange: (newDate: Date) => void;
scheduleData: IMonthlyClassSchedules[] | undefined;
+ mode?: 'dashboard';
}
-const ResponsiveEventCalendar = ({
- date,
- handleDateChange,
- scheduleData,
-}: ResponsiveEventCalendarProps) => {
+const ResponsiveEventCalendar = (props: ResponsiveEventCalendarProps) => {
+ const { date, handleDateChange, scheduleData, mode } = props;
const [selectedDate, setSelectedDate] = useState(date);
const classNames = getSingleCalendarClassNames('dashboard');
const clickableDates = scheduleData?.map(
@@ -91,7 +96,8 @@ const ResponsiveEventCalendar = ({
toolbar: DayToolBar,
}}
/>
-
);
diff --git a/src/app/mypage/_components/Report/Report.tsx b/src/app/mypage/_components/Report/Report.tsx
new file mode 100644
index 000000000..2bf370e13
--- /dev/null
+++ b/src/app/mypage/_components/Report/Report.tsx
@@ -0,0 +1,123 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { NoteSVG } from '@/icons/svg';
+import { getInstructorReport, getUserReport } from '@/lib/apis/reportApis';
+import Spinner from '@/components/Spinner/Spinner';
+import { IReportResponse } from '@/types/report';
+
+const ReportModal = dynamic(() => import('./ReportModal'));
+
+const Report = ({ type }: { type: 'instructor' | 'user' }) => {
+ const fetchReportList = async () => {
+ if (type === 'user') {
+ return await getUserReport(100, 0, 0, 0, 0, 'ALL');
+ } else {
+ return await getInstructorReport(100, 0, 0, 0, 0, 'ALL');
+ }
+ };
+
+ const { data, isLoading } = useQuery({
+ queryKey: ['report', type],
+ queryFn: fetchReportList,
+ });
+
+ return (
+ <>
+ 패스권 {passListData.length}개
asdasd
}
+ {passListData.length > 0 && 패스권 연결해주세용
}
{/* 추후 패스권 컴포넌트 연결 */}
신고내역
+ + {isLoading || !data ? ( +
+
+ ) : (
+ | 신고대상 | +신고사유 | +상태 | +
|---|
+ {reportTypes[0] + str}
+
+
+
+ -
+
-
신고유저
{target} @@ -39,7 +34,7 @@ const ReportModal = ({ - {reason}
-
-
신청자
-신청자
-
- -
-
연락처
-010-1234-5678
-
- -
-
신청 클래스
-- K-pop 한번에 정복할 수 있는 재미넘치는 댄스수업이에요. -
-
- -
-
수업일시
-23.09.15 13:00-15:00
-
- -
-
신청금액
-100,000원
-
- -
-
취소사유
-- 갑자기 독감에 걸려서 부득이하게 수업에 참여할 수 - 없게되었습니다... 웬만하면 그냥 갈텐데 독감은 전염성이 있어서 - 함부로가기가 좀 그렇네요. 만약에라도 그래도 참여해도 괜찮다면 - 연락주세요. 시간은 되니까 갈 수 있거든요~ 그대신 독감 옮겼다고 - 뭐라하면 안됩니다. -
-
- -
-
환불 요청 시간
-23.09.14 09:00
-
- -
-
환불금액
-90,000원
-
- -
-
환불계좌
-신한 100-234-1345583 (김민정)
-
- -
-
환불 상태
---환불대기
-- - - {isStatusDropdownOpened && ( --- )} -
- -
-
신청자
-신청자
-
- -
-
신청 클래스
-신청자
-
- -
-
수업일자
-신청자
-
- -
-
결제금액
-10000원
-
- -
- - {}} - className="mr-1.5 h-[18px] w-[18px] accent-sub-color1" - aria-label="상태변경 다중선택" - /> -- -- - {isNameDropdownOpened && ( --
- )} - 010-1234-5678
-120,000원
- -신한 1002-123-456789 (김민정)
- - - -환불대기
- -- - - {isStatusDropdownOpened && ( --- )} -
-
- {/* 반응형 */}
- -
- -- --- -- - {isNameDropdownOpened && ( -- 010-1234-1234 -
- )} - - - - {isStatusDropdownOpened && ( --- )} - -
-
-
-
상태
-환불대기
-
- -
-
신청정보
-setIsApplyModalOpened(true)} - > - 상세보기 -
-
- -
-
환불계좌
- -- 신한 1002-123-456789 (김민정) - --
-
- -
-
환불금액
-50,000원
-
-
-
- -
-
-
- - {}} - className="mr-1.5 h-[18px] w-[18px] accent-sub-color1" - aria-label="상태변경 다중선택" - /> - -- -
연락처
-환불금액
-환불계좌
- - - -상태
- -- - - {isStatusDropdownOpened && ( --- )} -
-
- {[...Array(8)].map((_, index) => (
- -
-
- - {schedule.time} -
- - {schedule.title} - {/* {` (${schedule.numberOfParticipants}/${schedule.maxCapacity})`} */} - -
- ))}
- - - {detail.type} - -
- {detail.content} - {index === 0 || index === 4 ? ( -
-
-
신고유저
- {target} -
- -
-
신고사유
-- {reportTypes.map((type) => ( - - {type} - - ))} --
- - {reason} -
- - {detail.type} - -
- {detail.content} - {index === 0 || index === 4 ? ( -
-
+
-
+ {schedules.map((schedule, index) => (
+
-
{schedule.title} - {` (${schedule.numberOfParticipants}/${schedule.maxCapacity})`} + {mode === 'dashboard' && ( + {` (${schedule.numberOfParticipants}/${schedule.maxCapacity})`} + )}
))}
diff --git a/src/components/Tooltip/TooltipMessages/TooltipMessages.tsx b/src/components/Tooltip/TooltipMessages/TooltipMessages.tsx
index f674c2474..47be415c0 100644
--- a/src/components/Tooltip/TooltipMessages/TooltipMessages.tsx
+++ b/src/components/Tooltip/TooltipMessages/TooltipMessages.tsx
@@ -1,6 +1,5 @@
-import { useRef } from 'react';
import { TooltipSVG } from '@/icons/svg';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
interface ITooltip {
setShow?: () => void;
diff --git a/src/components/uis/Receipt.tsx b/src/components/uis/Receipt.tsx
new file mode 100644
index 000000000..7acaf0e9e
--- /dev/null
+++ b/src/components/uis/Receipt.tsx
@@ -0,0 +1,112 @@
+import { Fragment } from 'react';
+import { ISSUER_CODE } from '@/constants/constants';
+import { getPaymentInfo } from '@/lib/apis/serverApis/paymentsApis';
+import { formatFullDateTime } from '@/utils/dateTimeUtils';
+
+const Receipt = async ({
+ searchParams,
+}: {
+ searchParams: { [key: string]: string };
+}) => {
+ const { orderId, type: searchType } = searchParams;
+ const receiptData = await getPaymentInfo(orderId);
+ if (receiptData instanceof Error) return;
+
+ const type = searchType === 'pass' ? '패스권' : '클래스';
+
+ const {
+ orderName,
+ updatedAt,
+ originalPrice,
+ finalPrice,
+ cardPaymentInfo,
+ paymentCouponUsage,
+ } = receiptData;
+
+ const issuer = cardPaymentInfo ? ISSUER_CODE[cardPaymentInfo.issuerCode] : '';
+ // 무통장, 패스권일 때 로직 추가 예정
+ const paymentDetails = [
+ {
+ type: `${type}명`,
+ content: orderName,
+ },
+ {
+ type: '승인일시',
+ content: formatFullDateTime(updatedAt),
+ },
+ {
+ type: '승인번호',
+ content: cardPaymentInfo?.approveNo,
+ },
+ {
+ type: '결제수단',
+ content: `${issuer} (${cardPaymentInfo?.number.slice(-4)})`,
+ },
+ {
+ type: '결제구분',
+ content:
+ cardPaymentInfo?.installmentPlanMonths === 0
+ ? '일시불'
+ : cardPaymentInfo?.installmentPlanMonths,
+ },
+
+ {
+ type: `${type} 금액`,
+ content: `${originalPrice.toLocaleString()} 원`,
+ },
+ ];
+
+ // 쿠폰 관련 추후 수정 필요
+ const couponDetails = paymentCouponUsage
+ ? {
+ type: '적용 쿠폰',
+ content: (
+ <>
+ - {paymentCouponUsage?.couponDiscountPrice?.toLocaleString()}원{' '}
+ - + {detail.type} + +
- {detail.content} + {index === 0 || index === 4 ? ( +
({paymentCouponUsage.couponTitle}) + {paymentCouponUsage.stackableCouponDiscountPrice && + paymentCouponUsage.stackableCouponTitle ? ( + <> +
- + {paymentCouponUsage.stackableCouponDiscountPrice.toLocaleString()} + 원
({paymentCouponUsage.stackableCouponTitle}) + + ) : null} + + ), + } + : {}; + + const receiptDetails = [...paymentDetails, couponDetails]; + + return ( +++ ); +}; + +export default Receipt; diff --git a/src/components/uis/Report.tsx b/src/components/uis/Report.tsx new file mode 100644 index 000000000..4ef0a8e13 --- /dev/null +++ b/src/components/uis/Report.tsx @@ -0,0 +1,97 @@ +'use client'; +import { useSearchParams, useRouter } from 'next/navigation'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-toastify'; +import { postLecturerReport, postUserReport } from '@/lib/apis/reportApis'; +import { useUserStore } from '@/store'; +import { UniqueButton } from '@/components/Button'; +import ReportCheckBox from '@/components/CheckBox/ReportCheckBox'; +import { ReportFormData, ReportType, IReportRequest } from '@/types/report.d'; + +const Report = () => { + const loggedInUserType = useUserStore((state) => state.userType); + const router = useRouter(); + const searchParams = useSearchParams(); + const { register, handleSubmit } = useFormConnection
+{orderId}
+
+ +-
+ {receiptDetails.map((detail, index) => (
+
+ + ))} +
+ ) : null} +++총 결제금액
++ {finalPrice.toLocaleString()}원 +
+(); + + const onSubmit = async (data: ReportFormData) => { + const reportTypes: ReportType[] = []; + + for (const [key, value] of Object.entries(data)) { + if (value === true) { + const reportTypeKey = Object.keys(ReportType).find( + (type) => ReportType[type as keyof typeof ReportType] === key, + ) as ReportType; + reportTypes.push(reportTypeKey); + } + } + + if (reportTypes.length === 0) { + toast.error('신고 유형을 한개 이상 입력해주세요!'); + return; + } + + const requestData: IReportRequest = { + reportTypes, + reason: data.reportDetail, + }; + + for (const [key, value] of searchParams.entries()) { + if ( + ['targetUserId', 'targetLecturerId', 'lectureReviewId'].includes(key) + ) { + requestData[ + key as 'targetUserId' | 'targetLecturerId' | 'lectureReviewId' + ] = Number(value); + } + } + + if (!requestData) return; + + const response = + loggedInUserType === 'user' + ? await postUserReport(requestData) + : await postLecturerReport(requestData); + + if (response === 201) { + toast.success('신고가 성공적으로 접수되었습니다!'); + router.back(); + } else if (response === 400) { + toast.error('이미 신고가 접수되었습니다!'); + } else { + toast.error(`신고 접수에 실패하였습니다. ${(
)}다시 시도해주세요!`); + } + }; + + return ( + + ); +}; + +export default Report; diff --git a/src/components/uis/ReviewSection.tsx b/src/components/uis/ReviewSection.tsx new file mode 100644 index 000000000..7adae0a14 --- /dev/null +++ b/src/components/uis/ReviewSection.tsx @@ -0,0 +1,221 @@ +'use client'; +import { useInfiniteQuery } from '@tanstack/react-query'; +import { + useParams, + useRouter, + usePathname, + useSearchParams, +} from 'next/navigation'; +import { useState, useRef, Fragment } from 'react'; +import { useClickAway } from 'react-use'; +import { + DEFAULT_REVIEW_COUNT, + FETCH_REVIEW_COUNT, +} from '@/constants/constants'; +import { StarSVG, ArrowUpSVG } from '@/icons/svg'; +import { getClassReviews, getInstructorReviews } from '@/lib/apis/reviewApis'; +import { formatShortDate } from '@/utils/dateTimeUtils'; +import SortDropdown from '@/components/Dropdown/SortDropdown'; +import { Review, UserReview } from '@/components/Review'; +import Spinner from '@/components/Spinner/Spinner'; +import { ReviewOrderType } from '@/types/review'; + +interface ReviewSectionProps { + stars: number; + type: 'class' | 'instructor'; +} + +const ReviewSection = (props: ReviewSectionProps) => { + const { stars, type } = props; + const { id } = useParams<{ id: string }>(); + const [isListOpened, setIsListOpened] = useState(false); + + const modalRef = useRef(null); + const pathname = usePathname(); + const router = useRouter(); + + const searchParams = useSearchParams(); + const sort = searchParams.get('sort') || '최신순'; + const page = Number(searchParams.get('page') || 0); + const firstId = Number(searchParams.get('firstId') || 0); + const lastId = Number(searchParams.get('lastId') || 0); + const nextQueryRef = useRef({ + sort, + page, + firstId, + lastId, + }); + + const selectedOption = decodeURIComponent( + sort || '최신순', + ) as ReviewOrderType; + + const fetchReviewList = async () => { + const prevQuery = { + sort, + page, + firstId, + lastId, + }; + + const reviewCount = page ? DEFAULT_REVIEW_COUNT : FETCH_REVIEW_COUNT; + + const fetchReviews = async (type: 'class' | 'instructor') => { + return await (type === 'class' ? getClassReviews : getInstructorReviews)( + id, + reviewCount, + page, + page + 1, + firstId, + lastId, + selectedOption, + ); + }; + + const reviews = await fetchReviews(type); + + if (reviews.totalItemCount) { + const nextQuery = { + ...prevQuery, + page: page + 1, + firstId: reviews.reviews[0].id, + lastId: reviews.reviews[reviews.reviews.length - 1].id, + }; + + nextQueryRef.current = nextQuery; + } + + handleSearchParams(prevQuery); + + return reviews; + }; + + const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = + useInfiniteQuery({ + queryKey: [type, id, selectedOption], + queryFn: fetchReviewList, + initialPageParam: 0, + getNextPageParam: (lastPage, pages) => { + const totalReviewsCount = pages.reduce( + (acc, item) => acc + item.reviews.length, + 0, + ); + if (totalReviewsCount < lastPage.totalItemCount) { + return pages.length + 1; + } else { + return undefined; + } + }, + }); + + useClickAway(modalRef, () => { + setIsListOpened(false); + }); + + const onClickList = (listValue: ReviewOrderType) => { + const queryObj = { + sort: listValue, + page: 0, + firstId: 0, + lastId: 0, + }; + + handleSearchParams(queryObj); + setIsListOpened(false); + }; + + const handleSearchParams = (params: { [key: string]: string | number }) => { + const currentParams = new URLSearchParams(window.location.search); + for (const key in params) { + currentParams.set(key, String(params[key])); + } + router.push(`${pathname}?${currentParams.toString()}`, { scroll: false }); + }; + + return ( ++ + ); +}; + +export default ReviewSection; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 0fd8ee595..91530c02e 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,6 +1,7 @@ import { InstagramSVG, LinkSVG, YoutubeSVG } from '../../public/icons/svg'; import { ConsentListType } from '@/types/auth'; -import { day, ReviewOrderType } from '@/types/class'; +import { day } from '@/types/class'; +import { ReviewOrderType } from '@/types/review'; import { TimeOfDay } from '@/types/types'; export const ProfileImgSize = { @@ -389,6 +390,10 @@ export const PASSES_TAKE = 8; export const REGIONS_SELECT_MAX = 30; +export const DEFAULT_REVIEW_COUNT = 3; + +export const FETCH_REVIEW_COUNT = 5; + export const INITIAL_SCHEDULE_PROGRESS = [ { text: '수업 완료', diff --git a/src/lib/apis/classApis.ts b/src/lib/apis/classApis.ts index 5f59ba784..bf283c53e 100644 --- a/src/lib/apis/classApis.ts +++ b/src/lib/apis/classApis.ts @@ -1,6 +1,4 @@ import { - IUserReview, - ReviewOrderType, ILecturerClassListResonse, ILecturerClassDetailResonse, IClassEditRequest, @@ -12,24 +10,6 @@ import { } from '@/types/class'; import { FetchError } from '@/types/types'; -export const getClassReviews = async ( - id: string, - order: ReviewOrderType, -): Promise++ ++ {type === 'class' ? '클래스' : '강사'} 후기{' '} + {data?.pages[0].totalItemCount || 0}건 +
+ + + {isListOpened && ( ++++ + ({stars}) + + )} + + {isFetching || !data ? ( ++ + {hasNextPage && !isFetchingNextPage && ( + + )} +++ ) : ( + data.pages.map((page, i) => ( ++ + {page.reviews.map((review) => ( + + )) + )} ++ ))} + => { + const query = `lectureId=${lectureId}&take=${displayCount}¤tPage=${currentPage}&targetPage=${targetPage}&firstItemId=${firstItemId}&lastItemId=${lastItemId}&orderBy=${orderBy}`; + + const response = await fetch(`/api/post/review/class?${query}`, { + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) throw new Error('클래스 리뷰 목록 조회 오류!'); + + const { data } = await response.json(); + + return data; +}; + +export const getInstructorReviews = async ( + lecturerId: string, + displayCount: number, + currentPage: number, + targetPage: number, + firstItemId: number, + lastItemId: number, + orderBy: ReviewOrderType, +): Promise => { + const query = `lecturerId=${lecturerId}&take=${displayCount}¤tPage=${currentPage}&targetPage=${targetPage}&firstItemId=${firstItemId}&lastItemId=${lastItemId}&orderBy=${orderBy}`; + + const response = await fetch(`/api/post/review/instructor?${query}`, { + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) throw new Error('강사 리뷰 조회 요청 오류!'); + + const { data } = await response.json(); + + return data; +}; + export const getWriteReviews = async ( orderBy: string, ): Promise ); -export default ToolBar; +export default BigCalendarToolBar; const NavButtonStyle = 'flex w-full h-full items-center justify-center hover:bg-gray-700'; -
+
-
-
- );
-};
-
-export default ApplyDetailModal;
diff --git a/src/app/mypage/instructor/refund/_components/DeclineModal.tsx b/src/app/mypage/instructor/refund/_components/DeclineModal.tsx
deleted file mode 100644
index 0c71f0563..000000000
--- a/src/app/mypage/instructor/refund/_components/DeclineModal.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useForm, Controller } from 'react-hook-form';
-import { toast } from 'react-toastify';
-import Button from '@/components/Button/Button';
-import Modal from '@/components/Modal/Modal';
-
-interface IFormValues {
- reason: string;
-}
-
-interface DeclineModalProps {
- isDeclineModalOpened: boolean;
- handleClosed: () => void;
- handleSubmitDeclineForm: () => void;
-}
-
-const DeclineModal = ({
- isDeclineModalOpened,
- handleClosed,
- handleSubmitDeclineForm,
-}: DeclineModalProps) => {
- const { handleSubmit, control } = useForm();
-
- const onSubmit = async (data: IFormValues) => {
- if (!data.reason || data.reason?.length < 15) {
- toast.error('환불 거절 사유를 15자 이상 작성해주세요!');
- return;
- }
-
- toast.success('환불을 거절하였습니다.');
- handleClosed();
- handleSubmitDeclineForm();
- };
-
- return (
-
-
- );
-};
-
-export default DeclineModal;
diff --git a/src/app/mypage/instructor/refund/_components/RefundList.tsx b/src/app/mypage/instructor/refund/_components/RefundList.tsx
deleted file mode 100644
index 8841c4417..000000000
--- a/src/app/mypage/instructor/refund/_components/RefundList.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { useState, useRef } from 'react';
-import { toast } from 'react-toastify';
-import { useClickAway } from 'react-use';
-import { CopySVG } from '@/icons/svg';
-import ApplyDetailModal from './ApplyDetailModal';
-import Button from '@/components/Button/Button';
-import Dropdown from '@/components/Dropdown/Dropdown';
-
-interface RefundListProps {
- statusOptions: any;
-}
-
-const RefundList = ({ statusOptions }: RefundListProps) => {
- const [isStatusDropdownOpened, setIsStatusDropdownOpened] = useState(false);
- const [isNameDropdownOpened, setIsNameDropdownOpened] = useState(false);
- const [isApplyModalOpened, setIsApplyModalOpened] = useState(false);
-
- const statusRef = useRef(null);
- const nameRef = useRef(null);
-
- useClickAway(statusRef, () => {
- setIsStatusDropdownOpened(false);
- });
-
- useClickAway(nameRef, () => {
- setIsNameDropdownOpened(false);
- });
-
- const handleCopyAccountNumber = () => {
- navigator.clipboard.writeText('신한 1002-123-456789').then(() => {
- toast.success('계좌번호가 복사되었습니다!');
- });
- };
-
- const handleCopyContact = () => {
- navigator.clipboard.writeText('01012341234').then(() => {
- toast.success('연락처가 복사되었습니다!');
- });
- };
-
- const applicantOptions = [
- {
- component: setIsApplyModalOpened(false)}
- statusOptions={statusOptions}
- />
-
- );
-};
-
-export default RefundList;
diff --git a/src/app/mypage/instructor/refund/page.tsx b/src/app/mypage/instructor/refund/page.tsx
deleted file mode 100644
index 1b03e47e6..000000000
--- a/src/app/mypage/instructor/refund/page.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { toast } from 'react-toastify';
-import { useClickAway } from 'react-use';
-import DeclineModal from './_components/DeclineModal';
-import RefundList from './_components/RefundList';
-import Button from '@/components/Button/Button';
-import Dropdown from '@/components/Dropdown/Dropdown';
-
-const RefundPage = () => {
- const [activeTab, setActiveTab] = useState(0);
- const [isStatusDropdownOpened, setIsStatusDropdownOpened] = useState(false);
- const [isDeclineModalOpened, setIsDeclineModalOpened] = useState(false);
- const statusRef = useRef(null);
-
- useClickAway(statusRef, () => {
- setIsStatusDropdownOpened(false);
- });
-
- const handleRefundComplete = () => {
- toast.success('환불처리가 완료되었습니다!');
- setIsStatusDropdownOpened(false);
- };
-
- const statusOptions = [
- {
- component:
- setIsDeclineModalOpened(false)}
- handleSubmitDeclineForm={handleSubmitDeclineForm}
- />
-
- );
-};
-
-export default RefundPage;
diff --git a/src/app/mypage/instructor/report/_components/ReportList.tsx b/src/app/mypage/instructor/report/_components/ReportList.tsx
deleted file mode 100644
index d3787b9c8..000000000
--- a/src/app/mypage/instructor/report/_components/ReportList.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import dynamic from 'next/dynamic';
-import { useState } from 'react';
-import { NoteSVG } from '@/icons/svg';
-import { IReportResponse } from '@/types/report';
-
-const ReportModal = dynamic(() => import('./ReportModal'));
-
-const ReportList = ({
- targetUser,
- targetLecturer,
- reason,
- userReportType,
- isAnswered,
- userReportResponse,
-}: IReportResponse) => {
- const [isModalOpen, setIsModalOpen] = useState(false);
-
- const openModal = () => {
- setIsModalOpen(true);
- };
-
- const closeModal = () => {
- setIsModalOpen(false);
- };
-
- const target = targetUser
- ? targetUser.nickname
- : targetLecturer
- ? targetLecturer.nickname
- : null;
- const status = isAnswered ? '처리완료' : '처리중';
-
- const reportTypes = userReportType.map((type) => type.reportType.description);
- const str = reportTypes.length > 1 ? ` 외 ${reportTypes.length - 1}` : '';
-
- const response = userReportResponse?.description;
-
- return (
-
- {target}
-
-
-
- {status}
-
-
- );
-};
-
-export default ReportList;
diff --git a/src/app/mypage/instructor/report/page.tsx b/src/app/mypage/instructor/report/page.tsx
index 88f437235..bf2d0d7d6 100644
--- a/src/app/mypage/instructor/report/page.tsx
+++ b/src/app/mypage/instructor/report/page.tsx
@@ -1,40 +1,9 @@
-'use client';
-import { useQuery } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
-import { getInstructorReport } from '@/lib/apis/reportApis';
+import Report from '../../_components/Report/Report';
-const ReportList = dynamic(() => import('./_components/ReportList'), {
- ssr: false,
-});
+const ReportPage = () => (
+
+
+);
-const ReportHistoryPage = () => {
- const { data, isLoading, error } = useQuery({
- queryKey: ['instructor', 'report'],
- queryFn: () => getInstructorReport(100, 0, 0, 0, 0, 'ALL'),
- });
-
- if (!data || error) return null;
-
- return (
-
-
-
-
-
- );
-};
-
-export default ReportHistoryPage;
+export default ReportPage;
diff --git a/src/app/mypage/user/myclass/apply/[id]/_components/CancelApplicationButton.tsx b/src/app/mypage/user/myclass/apply/[id]/_components/CancelApplicationButton.tsx
index a5e0dd181..6cf75af0d 100644
--- a/src/app/mypage/user/myclass/apply/[id]/_components/CancelApplicationButton.tsx
+++ b/src/app/mypage/user/myclass/apply/[id]/_components/CancelApplicationButton.tsx
@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
import { postRefund } from '@/lib/apis/paymentApis';
import { formatClassTime } from '@/utils/dateTimeUtils';
import CancelModal from './CancelModal';
-import UniqueButton from '@/components/Button/UniqueButton';
+import { UniqueButton } from '@/components/Button';
import { IApplyDetailResponse } from '@/types/class';
const CancelApplicationButton = (props: IApplyDetailResponse) => {
diff --git a/src/app/mypage/user/myclass/apply/[id]/_components/CancelModal.tsx b/src/app/mypage/user/myclass/apply/[id]/_components/CancelModal.tsx
index 7baad3717..88c34ea65 100644
--- a/src/app/mypage/user/myclass/apply/[id]/_components/CancelModal.tsx
+++ b/src/app/mypage/user/myclass/apply/[id]/_components/CancelModal.tsx
@@ -1,8 +1,8 @@
import { useForm, Controller } from 'react-hook-form';
import { toast } from 'react-toastify';
-import Button from '@/components/Button/Button';
-import Modal from '@/components/Modal/Modal';
import BankSelect from '@/app/instructor/apply/_components/InstructorAuth/BankSelect';
+import { Button } from '@/components/Button';
+import Modal from '@/components/Modal/Modal';
interface IFormValues {
bank: any;
diff --git a/src/app/mypage/user/myclass/apply/[id]/page.tsx b/src/app/mypage/user/myclass/apply/[id]/page.tsx
index c03f72cc9..cd1696e66 100644
--- a/src/app/mypage/user/myclass/apply/[id]/page.tsx
+++ b/src/app/mypage/user/myclass/apply/[id]/page.tsx
@@ -1,11 +1,11 @@
import Link from 'next/link';
import { ButtonStyles } from '@/constants/constants';
import { getApplyClassDetail } from '@/lib/apis/serverApis/classApi';
-import Back from './_components/Back';
import CancelApplicationButton from './_components/CancelApplicationButton';
import ClassLocation from './_components/ClassLocation';
import OneDayClass from './_components/OneDayClass';
import RegularClass from './_components/RegularClass';
+import { BackButton } from '@/components/Button';
import Notice from '@/components/ClassNotice/Notice';
const ApplyDetailPage = async ({
@@ -27,7 +27,7 @@ const ApplyDetailPage = async ({
(Views.MONTH);
- const router = useRouter();
-
- const eventLists = useMemo(() => {
- if (!scheduleData) return [];
- return scheduleData.map((data) => ({
- id: data.id,
- title: data.lecture.title,
- lectureId: data.lectureId,
- start: new Date(data.startDateTime),
- end: new Date(data.endDateTime),
- numberOfParticipants: data.numberOfParticipants,
- maxCapacity: data.lecture.maxCapacity,
- isGroup: data.lecture.isGroup,
- lectureMethod: data.lecture.lectureMethod.name,
- }));
- }, [scheduleData]);
-
- const onNavigate = (newDate: Date) => handleDateChange(newDate);
-
- const onView = (newView: View) => {
- setView(newView);
- };
-
- const handleSelectSlotEvent = (slotInfo: IFullCalendarEvent) => {
- router.push(
- `/mypage/user/myclass/apply/${slotInfo.id}?type=${slotInfo.lectureMethod}`,
- );
- };
-
- return (
- = {
- private: 'bg-sub-color1',
- group: 'bg-main-color',
- full: 'bg-sub-color2',
-};
-
-const ResponsiveScheduleView = ({
- selectedEvent,
-}: {
- selectedEvent: IMonthlyClassSchedules[];
-}) => {
- const schedules = useMemo(
- () =>
- selectedEvent.map((event) => {
- const status = event.lecture.isGroup
- ? 'group'
- : event.numberOfParticipants === event.lecture.maxCapacity
- ? 'full'
- : 'private';
- const formattedStart = formatTimeNoSec(event.startDateTime);
- const formattedEnd = formatTimeNoSec(event.endDateTime);
-
- return {
- status,
- title: event.lecture.title,
- time: `${formattedStart}-${formattedEnd}`,
- numberOfParticipants: event.numberOfParticipants,
- maxCapacity: event.lecture.maxCapacity,
- lectureId: event.lectureId,
- };
- }),
- [selectedEvent],
- );
-
- return (
- {
- label: string;
- view: View;
- // eslint-disable-next-line no-unused-vars
- onNavigate: (action: 'PREV' | 'NEXT' | 'TODAY' | 'DATE') => void;
- // eslint-disable-next-line no-unused-vars
- onView: (view: View) => void;
-}
-
-const views: { label: string; value: View }[] = [
- { label: 'Month', value: 'month' },
- { label: 'Week', value: 'week' },
-];
-
-const ToolBar = ({ label, view, onNavigate, onView }: IToolbarProps) => (
-
관리자 답변
{status === '처리중' ? (신고 처리 중입니다..
@@ -48,7 +43,7 @@ const ReportModal = ({ )}
+
diff --git a/src/app/mypage/instructor/pass/@managementPassModal/(.)management/page.tsx b/src/app/mypage/instructor/pass/@managementPassModal/(.)management/page.tsx
index 841052a31..c3fba706c 100644
--- a/src/app/mypage/instructor/pass/@managementPassModal/(.)management/page.tsx
+++ b/src/app/mypage/instructor/pass/@managementPassModal/(.)management/page.tsx
@@ -5,7 +5,7 @@ import { PassSVG } from '@/icons/svg';
import { createNewPass } from '@/lib/apis/passApis';
import { accessTokenReissuance } from '@/lib/apis/userApi';
import CreatePass from '../../_components/CreatePass';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import RouterModal from '@/components/Modal/RouterModal';
import { IcreatePass } from '@/types/pass';
import { FetchError } from '@/types/types';
diff --git a/src/app/mypage/instructor/pass/[id]/_components/PassInfo.tsx b/src/app/mypage/instructor/pass/[id]/_components/PassInfo.tsx
index 9b912652d..6332f8bfb 100644
--- a/src/app/mypage/instructor/pass/[id]/_components/PassInfo.tsx
+++ b/src/app/mypage/instructor/pass/[id]/_components/PassInfo.tsx
@@ -8,7 +8,7 @@ import { disabledPass, getPassForId } from '@/lib/apis/passApis';
import { accessTokenReissuance } from '@/lib/apis/userApi';
import { usePassSelectStore } from '@/store/passSelectStore';
import { reloadToast } from '@/utils/reloadMessage';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import InstructorPass from '@/components/Pass/InstructorPass';
import { FetchError } from '@/types/types';
diff --git a/src/app/mypage/instructor/pass/_components/PassNav.tsx b/src/app/mypage/instructor/pass/_components/PassNav.tsx
index 20aef2832..6c051ede1 100644
--- a/src/app/mypage/instructor/pass/_components/PassNav.tsx
+++ b/src/app/mypage/instructor/pass/_components/PassNav.tsx
@@ -1,7 +1,7 @@
import Link from 'next/link';
import React from 'react';
import { PassSVG } from '@/icons/svg';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
interface PassNavProps {
couponCount: number;
diff --git a/src/app/mypage/instructor/refund/_components/ApplyDetailModal.tsx b/src/app/mypage/instructor/refund/_components/ApplyDetailModal.tsx
deleted file mode 100644
index b7298436e..000000000
--- a/src/app/mypage/instructor/refund/_components/ApplyDetailModal.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useState, useRef } from 'react';
-import { useClickAway } from 'react-use';
-import Button from '@/components/Button/Button';
-import Dropdown from '@/components/Dropdown/Dropdown';
-import Modal from '@/components/Modal/Modal';
-
-interface ApplyDetailModalProps {
- isModalOpened: boolean;
- handleClosed: () => void;
- statusOptions: any;
-}
-
-const ApplyDetailModal = ({
- isModalOpened,
- handleClosed,
- statusOptions,
-}: ApplyDetailModalProps) => {
- const [isStatusDropdownOpened, setIsStatusDropdownOpened] = useState(false);
- const statusRef = useRef(null);
-
- useClickAway(statusRef, () => {
- setIsStatusDropdownOpened(false);
- });
-
- return (
-
diff --git a/src/app/mypage/instructor/coupon/@managementCouponModal/(.)management/page.tsx b/src/app/mypage/instructor/coupon/@managementCouponModal/(.)management/page.tsx
index e1a6f33f1..9ce16f445 100644
--- a/src/app/mypage/instructor/coupon/@managementCouponModal/(.)management/page.tsx
+++ b/src/app/mypage/instructor/coupon/@managementCouponModal/(.)management/page.tsx
@@ -11,8 +11,7 @@ import {
import { accessTokenReissuance } from '@/lib/apis/userApi';
import { createCouponUtils } from '@/utils/apiDataProcessor';
import { reloadToast } from '@/utils/reloadMessage';
-import Button from '@/components/Button/Button';
-import UniqueButton from '@/components/Button/UniqueButton';
+import { Button, UniqueButton } from '@/components/Button';
import CouponOption from '@/components/Coupon/CouponOption/CouponOption';
import RouterModal from '@/components/Modal/RouterModal';
import { CouponData, couponGET, createCouponData } from '@/types/coupon';
diff --git a/src/app/mypage/instructor/coupon/_components/CouponNav.tsx b/src/app/mypage/instructor/coupon/_components/CouponNav.tsx
index 2f29d9cf2..cb46746c2 100644
--- a/src/app/mypage/instructor/coupon/_components/CouponNav.tsx
+++ b/src/app/mypage/instructor/coupon/_components/CouponNav.tsx
@@ -1,7 +1,7 @@
import Link from 'next/link';
import React from 'react';
import { CouponSVG } from '@/icons/svg';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
interface CouponNavProps {
couponCount: number;
diff --git a/src/app/mypage/instructor/income/_components/AccountInfo.tsx b/src/app/mypage/instructor/income/_components/AccountInfo.tsx
index 19dd233a5..7044c8c8f 100644
--- a/src/app/mypage/instructor/income/_components/AccountInfo.tsx
+++ b/src/app/mypage/instructor/income/_components/AccountInfo.tsx
@@ -4,7 +4,7 @@ import { BANK_CODE_TO_NAME } from '@/constants/constants';
import { BigArrowSVG, MoneySVG } from '@/icons/svg';
import { getRecentAccount, getTotalIncome } from '@/lib/apis/incomeApis';
import { initialDateObject } from '../_lib/initialDate';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
interface AccountInfoProps {
view: 'main' | 'payment';
diff --git a/src/app/mypage/instructor/income/_components/IncomeTable.tsx b/src/app/mypage/instructor/income/_components/IncomeTable.tsx
index a98428fc0..6404e4ff8 100644
--- a/src/app/mypage/instructor/income/_components/IncomeTable.tsx
+++ b/src/app/mypage/instructor/income/_components/IncomeTable.tsx
@@ -11,7 +11,7 @@ import { CSVLink } from 'react-csv';
import { PAYMENT_STATUS } from '@/constants/constants';
import { ExcelSVG, BillSVG } from '@/icons/svg';
import { formatShortDate } from '@/utils/dateTimeUtils';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import PageSizeSelector from '@/components/Selector/PageSizeSelector';
import { ILecturerPayment } from '@/types/payment';
diff --git a/src/app/mypage/instructor/manage/member/[id]/_components/ClassApplied.tsx b/src/app/mypage/instructor/manage/member/[id]/_components/ClassApplied.tsx
index c6afb17e1..51adddcb9 100644
--- a/src/app/mypage/instructor/manage/member/[id]/_components/ClassApplied.tsx
+++ b/src/app/mypage/instructor/manage/member/[id]/_components/ClassApplied.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
import { useState } from 'react';
import useMediaQuery from '@/hooks/useMediaQuery';
import formatDate from '@/utils/formatDate';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import MobileModal from '@/components/Modal/MobileModal';
import { GetMyMemberData } from '@/types/instructor';
diff --git a/src/app/mypage/instructor/manage/myclass/[id]/_components/EditDayOff.tsx b/src/app/mypage/instructor/manage/myclass/[id]/_components/EditDayOff.tsx
index e00aefcb4..bfdef5b79 100644
--- a/src/app/mypage/instructor/manage/myclass/[id]/_components/EditDayOff.tsx
+++ b/src/app/mypage/instructor/manage/myclass/[id]/_components/EditDayOff.tsx
@@ -1,10 +1,9 @@
import { compareAsc } from 'date-fns';
import { useState, useMemo, useRef, useEffect } from 'react';
-import Button from '@/components/Button/Button';
-import UniqueButton from '@/components/Button/UniqueButton';
-import DayOffCalendar from '@/components/Calendar/BasicCalendar';
import { formatDateWithDay } from '@/utils/dateTimeUtils';
import { getUniqueDates, calculateUnSelectedDate } from '@/utils/parseUtils';
+import { Button, UniqueButton } from '@/components/Button';
+import DayOffCalendar from '@/components/Calendar/BasicCalendar';
/* eslint-disable no-unused-vars */
interface EditDayOffProps {
diff --git a/src/app/mypage/instructor/manage/myclass/[id]/_components/EditReservationComment.tsx b/src/app/mypage/instructor/manage/myclass/[id]/_components/EditReservationComment.tsx
index 4468fb434..76c60b748 100644
--- a/src/app/mypage/instructor/manage/myclass/[id]/_components/EditReservationComment.tsx
+++ b/src/app/mypage/instructor/manage/myclass/[id]/_components/EditReservationComment.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import UniqueButton from '@/components/Button/UniqueButton';
+import { UniqueButton } from '@/components/Button';
/* eslint-disable no-unused-vars */
interface EditReservationComment {
diff --git a/src/app/mypage/instructor/manage/review/_components/MyReview.tsx b/src/app/mypage/instructor/manage/review/_components/MyReview.tsx
index 72538f244..ab3b91766 100644
--- a/src/app/mypage/instructor/manage/review/_components/MyReview.tsx
+++ b/src/app/mypage/instructor/manage/review/_components/MyReview.tsx
@@ -6,8 +6,7 @@ import formatDate from '@/utils/formatDate';
import usePageNation from '@/utils/usePagenation';
import ClassFilterSelect from './ClassFilterSelect';
import Pagination from '@/components/Pagination/Pagination';
-import ReviewStatistics from '@/components/Review/ReviewStatistics';
-import UserReview from '@/components/Review/UserReview';
+import { UserReview, ReviewStatistics } from '@/components/Review';
import { OptionType } from '@/types/coupon';
import { GetMyLecturersReviews, MyLecturersReviewsData } from '@/types/review';
diff --git a/src/app/mypage/instructor/manage/schedule/page.tsx b/src/app/mypage/instructor/manage/schedule/page.tsx
index 47a9974c1..848473fdf 100644
--- a/src/app/mypage/instructor/manage/schedule/page.tsx
+++ b/src/app/mypage/instructor/manage/schedule/page.tsx
@@ -6,12 +6,15 @@ import { INITIAL_SCHEDULE_PROGRESS } from '@/constants/constants';
import { getMonthlyClassPlan } from '@/lib/apis/instructorApi';
import { getLectureProgress } from '@/utils/parseUtils';
-const FullCalendar = dynamic(() => import('./_components/FullCalendar'), {
- ssr: false,
-});
+const FullCalendar = dynamic(
+ () => import('../../../_components/Calendar/FullCalendar'),
+ {
+ ssr: false,
+ },
+);
const ResponsiveEventCalendar = dynamic(
- () => import('./_components/ResponsiveEventCalendar'),
+ () => import('../../../_components/Calendar/ResponsiveEventCalendar'),
{
ssr: false,
},
@@ -41,6 +44,7 @@ const SchedulePage = () => {
date={date}
handleDateChange={handleDateChange}
scheduleData={data}
+ type="instructor"
/>
@@ -49,6 +53,7 @@ const SchedulePage = () => {
date={date}
handleDateChange={handleDateChange}
scheduleData={data}
+ mode="dashboard"
/>
-
- - 신청정보 -
- -
-
- -
-
-
-
-
-
-
-
-
-
- - 환불 거절 -
- --
-
계좌번호 복사
, - onClick: handleCopyAccountNumber, - }, - { - component:연락처 복사
, - onClick: handleCopyContact, - }, - { - component: ( - - 채팅하기 - - ), - }, - { - component: ( - - 신고하기 - - ), - }, - { - component: ( - - 차단하기 - - ), - }, - ]; - - return ( - <> -환불완료
, - onClick: handleRefundComplete, - }, - { - component:환불취소
, - onClick: () => { - setIsDeclineModalOpened(true); - }, - }, - ]; - - const handleSubmitDeclineForm = () => { - setIsStatusDropdownOpened(false); - }; - - return ( -
-
-
-
-
-
- setActiveTab(0)} - className={ - activeTab === 0 - ? 'cursor-pointer font-bold text-sub-color1 underline underline-offset-4' - : 'cursor-pointer' - } - > - 환불요청(4) -
-setActiveTab(1)} - className={ - activeTab === 1 - ? 'cursor-pointer font-bold text-sub-color1 underline underline-offset-4' - : 'cursor-pointer' - } - > - 환불완료 -
-
- *환불요청을 한 수강생의 계좌로 강사가 환불금액 입금 후{' '}
-
- {`우측 [상태변경]->[환불완료]를 클릭하시면 수강생에게 환불완료 알림이 갑니다.`}
-
-
-
- {reportTypes[0] + str}
-
-
- {isModalOpen && (
-
- 신고내역
- -| 신고대상 | -신고사유 | -상태 | -
|---|
-
diff --git a/src/app/mypage/user/myclass/apply/_components/Calendar/FullCalendar.tsx b/src/app/mypage/user/myclass/apply/_components/Calendar/FullCalendar.tsx
deleted file mode 100644
index c4b56636e..000000000
--- a/src/app/mypage/user/myclass/apply/_components/Calendar/FullCalendar.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-import { useRouter } from 'next/navigation';
-import { useState, useMemo } from 'react';
-import { Calendar, View, Views } from 'react-big-calendar';
-import {
- localizer,
- formats,
- eventStyleGetter,
- messages,
-} from '@/utils/fullCalendarUtils';
-import ToolBar from './ToolBar';
-import { IMonthlyClassSchedules } from '@/types/class';
-import { IFullCalendarEvent } from '@/types/types';
-import '@/styles/fullCalendar.css';
-
-interface FullCalendarProps {
- date: Date;
- // eslint-disable-next-line no-unused-vars
- handleDateChange: (newDate: Date) => void;
- scheduleData: IMonthlyClassSchedules[] | undefined;
-}
-
-const FullCalendar = ({
- date,
- handleDateChange,
- scheduleData,
-}: FullCalendarProps) => {
- const [view, setView] = useState{lecture.title}
-
- FormattedCaption({
- displayMonth,
- }),
- }}
- className="flex w-fit justify-center py-3.5"
- />
-
-
-
-
-
- );
-};
-
-export default ResponsiveEventCalendar;
diff --git a/src/app/mypage/user/myclass/apply/_components/Calendar/ResponsiveScheduleView.tsx b/src/app/mypage/user/myclass/apply/_components/Calendar/ResponsiveScheduleView.tsx
deleted file mode 100644
index dc3468b31..000000000
--- a/src/app/mypage/user/myclass/apply/_components/Calendar/ResponsiveScheduleView.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { nanoid } from 'nanoid';
-import Link from 'next/link';
-import { useMemo } from 'react';
-import { formatTimeNoSec } from '@/utils/dateTimeUtils';
-import { IMonthlyClassSchedules } from '@/types/class';
-
-const statusColor: Record-
- {schedules.map((schedule) => (
-
-
-);
-
-export default ToolBar;
-
-const NavButtonStyle =
- 'flex w-[1.875rem] items-center justify-center hover:bg-gray-700';
-
-const getButtonClass = (isActive: boolean) =>
- `flex h-7 w-[4.25rem] items-center justify-center rounded-md border border-solid ${
- isActive
- ? 'border-black'
- : 'border-gray-500 text-gray-500 hover:border-gray-500 hover:bg-gray-700 hover:text-gray-500'
- }`;
diff --git a/src/app/mypage/user/myclass/apply/_components/CalendarView.tsx b/src/app/mypage/user/myclass/apply/_components/CalendarView.tsx
index e8b7b0fcf..b83a98184 100644
--- a/src/app/mypage/user/myclass/apply/_components/CalendarView.tsx
+++ b/src/app/mypage/user/myclass/apply/_components/CalendarView.tsx
@@ -6,17 +6,20 @@ import { getUserSchedulesCalendar } from '@/lib/apis/classApis';
import { getLectureProgress } from '@/utils/parseUtils';
import Spinner from '@/components/Spinner/Spinner';
-const FullCalendar = dynamic(() => import('./Calendar/FullCalendar'), {
- ssr: false,
- loading: () => (
-
-
-
-
-
- {label}
-
- {views.map((item, index) => (
-
- ))}
-
-
-
- ),
-});
+const FullCalendar = dynamic(
+ () => import('../../../../_components/Calendar/FullCalendar'),
+ {
+ ssr: false,
+ loading: () => (
+
+
+ ),
+ },
+);
const ResponsiveEventCalendar = dynamic(
- () => import('./Calendar/ResponsiveEventCalendar'),
+ () => import('../../../../_components/Calendar/ResponsiveEventCalendar'),
{
ssr: false,
loading: () => (
@@ -57,6 +60,7 @@ const CalendarView = () => {
date={date}
handleDateChange={handleDateChange}
scheduleData={data}
+ type="user"
/>
diff --git a/src/app/mypage/user/myclass/apply/_components/ClassList.tsx b/src/app/mypage/user/myclass/apply/_components/ClassList.tsx
index ed246d090..8bfc3dda6 100644
--- a/src/app/mypage/user/myclass/apply/_components/ClassList.tsx
+++ b/src/app/mypage/user/myclass/apply/_components/ClassList.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation';
import { MouseEvent } from 'react';
import { ButtonStyles } from '@/constants/constants';
import { formatShortDate } from '@/utils/dateTimeUtils';
-import UniqueButton from '@/components/Button/UniqueButton';
+import { UniqueButton } from '@/components/Button';
import ProfileImage from '@/components/Profile/ProfileImage';
import { IUserApplyClass } from '@/types/class';
diff --git a/src/app/mypage/user/payment-history/[orderId]/@modal/(...)receipt/page.tsx b/src/app/mypage/user/payment-history/[orderId]/@modal/(...)receipt/page.tsx
index ac450b4bb..84f8ea986 100644
--- a/src/app/mypage/user/payment-history/[orderId]/@modal/(...)receipt/page.tsx
+++ b/src/app/mypage/user/payment-history/[orderId]/@modal/(...)receipt/page.tsx
@@ -1,118 +1,14 @@
-import { Fragment } from 'react';
-import { ISSUER_CODE } from '@/constants/constants';
-import { getReceipt } from '@/lib/apis/serverApis/paymentsApis';
-import { formatFullDateTime } from '@/utils/dateTimeUtils';
import Modal from '@/components/Modal/ReceiptModal';
+import Receipt from '@/components/uis/Receipt';
const ReceiptModalPage = async ({
searchParams,
}: {
searchParams: { [key: string]: string };
-}) => {
- const { orderId } = searchParams;
- const receiptData = await getReceipt(orderId);
- if (receiptData instanceof Error) return;
-
- const {
- orderName,
- updatedAt,
- originalPrice,
- finalPrice,
- cardPaymentInfo,
- paymentCouponUsage,
- } = receiptData;
-
- const issuer = cardPaymentInfo ? ISSUER_CODE[cardPaymentInfo.issuerCode] : '';
-
- // 무통장, 패스권일 때 로직 추가 예정
- const paymentDetails = [
- {
- type: '클래스명',
- content: orderName,
- },
- {
- type: '승인일시',
- content: formatFullDateTime(updatedAt),
- },
- {
- type: '승인번호',
- content: cardPaymentInfo?.approveNo,
- },
- {
- type: '결제수단',
- content: `${issuer} (${cardPaymentInfo?.number.slice(-4)})`,
- },
- {
- type: '결제구분',
- content:
- cardPaymentInfo?.installmentPlanMonths === 0
- ? '일시불'
- : cardPaymentInfo?.installmentPlanMonths,
- },
-
- {
- type: '클래스 금액',
- content: `${originalPrice.toLocaleString()} 원`,
- },
- ];
-
- // 쿠폰 관련 추후 수정 필요
- const couponDetails = paymentCouponUsage
- ? {
- type: '적용 쿠폰',
- content: (
- <>
- - {paymentCouponUsage?.couponDiscountPrice?.toLocaleString()}원{' '}
-
({paymentCouponUsage.couponTitle}) - {paymentCouponUsage.stackableCouponDiscountPrice && - paymentCouponUsage.stackableCouponTitle ? ( - <> -
- - {paymentCouponUsage.stackableCouponDiscountPrice.toLocaleString()} - 원
({paymentCouponUsage.stackableCouponTitle}) - - ) : null} - - ), - } - : {}; - - const receiptDetails = [...paymentDetails, couponDetails]; - - return ( -
-
- );
-};
+}) => (
+
+
+);
export default ReceiptModalPage;
diff --git a/src/app/mypage/user/payment-history/[orderId]/Back.tsx b/src/app/mypage/user/payment-history/[orderId]/Back.tsx
deleted file mode 100644
index 87d1e4f49..000000000
--- a/src/app/mypage/user/payment-history/[orderId]/Back.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client';
-import { useRouter } from 'next/navigation';
-import { ArrowUpSVG } from '@/icons/svg';
-
-const Back = () => {
- const router = useRouter();
-
- return (
-
- );
-};
-
-export default Back;
diff --git a/src/app/mypage/user/payment-history/[orderId]/page.tsx b/src/app/mypage/user/payment-history/[orderId]/page.tsx
index 456f1008e..b678e060b 100644
--- a/src/app/mypage/user/payment-history/[orderId]/page.tsx
+++ b/src/app/mypage/user/payment-history/[orderId]/page.tsx
@@ -1,10 +1,10 @@
import Link from 'next/link';
-import Back from './Back';
import { getReceipt } from '@/lib/apis/serverApis/paymentsApis';
import {
formatKoreanDateTime,
formatFullDateTime,
} from '@/utils/dateTimeUtils';
+import { BackButton } from '@/components/Button';
const OrderDetail = async ({
params: { orderId },
@@ -83,7 +83,7 @@ const OrderDetail = async ({
return (
-
- );
-};
-
-export default ReportModal;
diff --git a/src/app/mypage/user/report/page.tsx b/src/app/mypage/user/report/page.tsx
index 3afbcec82..9d5181d47 100644
--- a/src/app/mypage/user/report/page.tsx
+++ b/src/app/mypage/user/report/page.tsx
@@ -1,110 +1,9 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { NoteSVG } from '@/icons/svg';
-import { getUserReport } from '@/lib/apis/reportApis';
-import ReportModal from './ReportModal';
-import { IReportResponse } from '@/types/report';
+import Report from '../../_components/Report/Report';
-const ReportHistoryPage = () => {
- const [userReportData, setUserReportData] = useState([]);
+const ReportPage = () => (
+
+
+);
- useEffect(() => {
- const fetchData = async () => {
- const reportData = await getUserReport(100, 0, 0, 0, 0, 'ALL');
- setUserReportData(reportData.reportList);
- };
-
- fetchData();
- }, []);
-
- return (
-
-
-
-
-
- );
-};
-
-export default ReportHistoryPage;
-
-const TableList = ({
- targetUser,
- targetLecturer,
- reason,
- userReportType,
- isAnswered,
- userReportResponse,
-}: IReportResponse) => {
- const [isModalOpen, setIsModalOpen] = useState(false);
-
- const openModal = () => {
- setIsModalOpen(true);
- };
-
- const closeModal = () => {
- setIsModalOpen(false);
- };
-
- const target = targetUser
- ? targetUser.nickname
- : targetLecturer
- ? targetLecturer.nickname
- : null;
- const status = isAnswered ? '처리완료' : '처리중';
-
- const reportTypes = userReportType.map((type) => type.reportType.description);
- const str = reportTypes.length > 1 ? ` 외 ${reportTypes.length - 1}` : '';
-
- const response = userReportResponse?.description;
-
- return (
-
- {target}
-
-
-
- {status}
-
-
- );
-};
+export default ReportPage;
diff --git a/src/app/mypage/user/review/@writeReviewModal/(.)writeReviewModal/_components/WriteReview.tsx b/src/app/mypage/user/review/@writeReviewModal/(.)writeReviewModal/_components/WriteReview.tsx
index 6e29f91cf..2469f77df 100644
--- a/src/app/mypage/user/review/@writeReviewModal/(.)writeReviewModal/_components/WriteReview.tsx
+++ b/src/app/mypage/user/review/@writeReviewModal/(.)writeReviewModal/_components/WriteReview.tsx
@@ -4,8 +4,8 @@ import { toast } from 'react-toastify';
import { writeReview } from '@/lib/apis/reviewApis';
import { accessTokenReissuance } from '@/lib/apis/userApi';
import ClassSelect from './ClassSelect';
-import Button from '@/components/Button/Button';
-import Rating from '@/components/Review/Rating';
+import { Button } from '@/components/Button';
+import { Rating } from '@/components/Review';
import { SelectClassType, WriteReviewData } from '@/types/review';
import { FetchError } from '@/types/types';
diff --git a/src/app/mypage/user/review/_components/MyReview.tsx b/src/app/mypage/user/review/_components/MyReview.tsx
index d44f9a647..de697af75 100644
--- a/src/app/mypage/user/review/_components/MyReview.tsx
+++ b/src/app/mypage/user/review/_components/MyReview.tsx
@@ -7,9 +7,8 @@ import { getWriteReviews } from '@/lib/apis/reviewApis';
import { accessTokenReissuance } from '@/lib/apis/userApi';
import { useUserStore } from '@/store';
import formatDate from '@/utils/formatDate';
-import Button from '@/components/Button/Button';
-import ReviewStatistics from '@/components/Review/ReviewStatistics';
-import UserReview from '@/components/Review/UserReview';
+import { Button } from '@/components/Button';
+import { ReviewStatistics, UserReview } from '@/components/Review';
import { ReservationDetails, WriteReview } from '@/types/review';
import { FetchError } from '@/types/types';
diff --git a/src/app/pass/[id]/apply/_components/PaymentForm.tsx b/src/app/pass/[id]/apply/_components/PaymentForm.tsx
index 34fc530d4..c0173a017 100644
--- a/src/app/pass/[id]/apply/_components/PaymentForm.tsx
+++ b/src/app/pass/[id]/apply/_components/PaymentForm.tsx
@@ -6,7 +6,7 @@ import { ArrowUpSVG } from '@/icons/svg';
import { postPassPaymentInfo, postPaymentCancel } from '@/lib/apis/paymentApis';
import { accessTokenReissuance } from '@/lib/apis/userApi';
import { usePaymentStore, useUserStore } from '@/store';
-import ApplyButton from '@/components/Button/ApplyButton';
+import { ApplyButton } from '@/components/Button';
import { IPassInfoForIdData } from '@/types/pass';
import { FetchError } from '@/types/types';
diff --git a/src/app/receipt/page.tsx b/src/app/receipt/page.tsx
index 8ea2667da..526b3b692 100644
--- a/src/app/receipt/page.tsx
+++ b/src/app/receipt/page.tsx
@@ -1,115 +1,15 @@
-import { Fragment } from 'react';
-import { ISSUER_CODE } from '@/constants/constants';
-import { getReceipt } from '@/lib/apis/serverApis/paymentsApis';
-import { formatFullDateTime } from '@/utils/dateTimeUtils';
+import Receipt from '@/components/uis/Receipt';
const ReceiptPage = async ({
searchParams,
}: {
searchParams: { [key: string]: string };
-}) => {
- const { orderId, type: searchType } = searchParams;
- const receiptData = await getReceipt(orderId);
- if (receiptData instanceof Error) return;
-
- const type = searchType === 'pass' ? '패스권' : '클래스';
-
- const {
- orderName,
- updatedAt,
- originalPrice,
- finalPrice,
- cardPaymentInfo,
- paymentCouponUsage,
- } = receiptData;
- const issuer = cardPaymentInfo ? ISSUER_CODE[cardPaymentInfo.issuerCode] : '';
- // 무통장, 패스권일 때 로직 추가 예정
- const paymentDetails = [
- {
- type: `${type}명`,
- content: orderName,
- },
- {
- type: '승인일시',
- content: formatFullDateTime(updatedAt),
- },
- {
- type: '승인번호',
- content: cardPaymentInfo?.approveNo,
- },
- {
- type: '결제수단',
- content: `${issuer} (${cardPaymentInfo?.number.slice(-4)})`,
- },
- {
- type: '결제구분',
- content:
- cardPaymentInfo?.installmentPlanMonths === 0
- ? '일시불'
- : cardPaymentInfo?.installmentPlanMonths,
- },
-
- {
- type: `${type} 금액`,
- content: `${originalPrice.toLocaleString()} 원`,
- },
- ];
-
- // 쿠폰 관련 추후 수정 필요
- const couponDetails = paymentCouponUsage
- ? {
- type: '적용 쿠폰',
- content: (
- <>
- - {paymentCouponUsage?.couponDiscountPrice?.toLocaleString()}원{' '}
-
({paymentCouponUsage.couponTitle}) - {paymentCouponUsage.stackableCouponDiscountPrice && - paymentCouponUsage.stackableCouponTitle ? ( - <> -
- - {paymentCouponUsage.stackableCouponDiscountPrice.toLocaleString()} - 원
({paymentCouponUsage.stackableCouponTitle}) - - ) : null} - - ), - } - : {}; - - const receiptDetails = [...paymentDetails, couponDetails]; - - return ( -
-
- -
- );
-};
+}) => (
+
+
+);
export default ReceiptPage;
diff --git a/src/app/report/page.tsx b/src/app/report/page.tsx
index 5355621b9..ce37438b3 100644
--- a/src/app/report/page.tsx
+++ b/src/app/report/page.tsx
@@ -1,97 +1,10 @@
'use client';
-import { useSearchParams, useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import { toast } from 'react-toastify';
-import { postLecturerReport, postUserReport } from '@/lib/apis/reportApis';
-import { useUserStore } from '@/store';
-import UniqueButton from '@/components/Button/UniqueButton';
-import ReportCheckBox from '@/components/CheckBox/ReportCheckBox';
-import { ReportFormData, ReportType, IReportRequest } from '@/types/report.d';
+import Report from '@/components/uis/Report';
-const ReportPage = () => {
- const loggedInUserType = useUserStore((state) => state.userType);
- const router = useRouter();
- const searchParams = useSearchParams();
- const { register, handleSubmit } = useForm();
-
- const onSubmit = async (data: ReportFormData) => {
- const reportTypes: ReportType[] = [];
-
- for (const [key, value] of Object.entries(data)) {
- if (value === true) {
- const reportTypeKey = Object.keys(ReportType).find(
- (type) => ReportType[type as keyof typeof ReportType] === key,
- ) as ReportType;
- reportTypes.push(reportTypeKey);
- }
- }
-
- if (reportTypes.length === 0) {
- toast.error('신고 유형을 한개 이상 입력해주세요!');
- return;
- }
-
- const requestData: IReportRequest = {
- reportTypes,
- reason: data.reportDetail,
- };
-
- for (const [key, value] of searchParams.entries()) {
- if (
- ['targetUserId', 'targetLecturerId', 'lectureReviewId'].includes(key)
- ) {
- requestData[
- key as 'targetUserId' | 'targetLecturerId' | 'lectureReviewId'
- ] = Number(value);
- }
- }
-
- if (!requestData) return;
-
- const response =
- loggedInUserType === 'user'
- ? await postUserReport(requestData)
- : await postLecturerReport(requestData);
-
- if (response === 201) {
- toast.success('신고가 성공적으로 접수되었습니다!');
- router.back();
- } else if (response === 400) {
- toast.error('이미 신고가 접수되었습니다!');
- } else {
- toast.error(`신고 접수에 실패하였습니다. ${(
)}다시 시도해주세요!`); - } - }; - - return ( - - ); -}; +const ReportPage = () => ( +
+
+);
export default ReportPage;
diff --git a/src/app/mypage/user/myclass/apply/[id]/_components/Back.tsx b/src/components/Button/BackButton.tsx
similarity index 62%
rename from src/app/mypage/user/myclass/apply/[id]/_components/Back.tsx
rename to src/components/Button/BackButton.tsx
index 43057499f..afdae9ac3 100644
--- a/src/app/mypage/user/myclass/apply/[id]/_components/Back.tsx
+++ b/src/components/Button/BackButton.tsx
@@ -2,14 +2,14 @@
import { useRouter } from 'next/navigation';
import { ArrowUpSVG } from '@/icons/svg';
-const Back = () => {
+const BackButton = ({ size = 34 }: { size?: number }) => {
const router = useRouter();
return (
);
};
-export default Back;
+export default BackButton;
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 8a40cd6fc..60667ec52 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -26,6 +26,14 @@ const meta: Meta = {
options: ['primary', 'default', 'secondary'],
control: { type: 'radio' },
},
+ disabled: {
+ description: '버튼 비활성화 여부',
+ defaultValue: { summary: true },
+ control: { type: 'boolean' },
+ table: {
+ type: { summary: 'boolean' },
+ },
+ },
},
};
@@ -48,3 +56,11 @@ export const Secondary: Story = {
),
};
+
+export const Disabled: Story = {
+ render: () => (
+
+ ),
+};
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index dd77e90d0..5ad209195 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,41 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
import { ButtonSizes, ButtonStyles } from '../../constants/constants';
-interface ButtonProps {
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
size?: 'small' | 'medium' | 'large' | 'full';
color?: 'primary' | 'default' | 'secondary';
- children?: React.ReactNode;
- type?: 'button' | 'submit';
- onClick?: () => void;
- disabled?: boolean;
}
-const Button = ({
- size = 'medium',
- color = 'default',
- children,
- type = 'button',
- onClick,
- disabled = false,
-}: ButtonProps) => {
- const DisabledStyled = {
- secondary:
- 'bg-gray-500 text-white group flex w-full items-center justify-center rounded-md ',
- default: 'hover:bg-white active:text-sub-color1 active:bg-white',
- primary:
- 'hover:text-white hover:bg-main-color active:text-white active:bg-main-color',
- };
+const Button = (props: ButtonProps) => {
+ const {
+ size = 'medium',
+ color = 'default',
+ disabled = false,
+ children,
+ ...rest
+ } = props;
- const styles = `${
- disabled ? DisabledStyled[color] : ButtonStyles[color]
- } group ${size === 'full' ? 'h-full' : `h-[${ButtonSizes[size]}px]`}`;
+ const styles = (() => {
+ if (disabled) {
+ return 'group flex h-[35px] w-full cursor-not-allowed items-center justify-center rounded-md border border-solid border-gray-300 bg-white text-gray-300';
+ } else {
+ return `${ButtonStyles[color]} ${
+ size === 'full' ? 'h-full' : `h-[${ButtonSizes[size]}px]`
+ }`;
+ }
+ })();
return (
-
);
diff --git a/src/components/ClassPreview/ClassPreview.tsx b/src/components/ClassPreview/ClassPreview.tsx
index af48eab6f..5de2ae7fb 100644
--- a/src/components/ClassPreview/ClassPreview.tsx
+++ b/src/components/ClassPreview/ClassPreview.tsx
@@ -7,7 +7,7 @@ import ResponsiveClassPreview from './ResponsiveClassPreview';
import Carousel from '../Carousel/Carousel';
import Like from '../Like/Like';
import ProfileImage from '../Profile/ProfileImage';
-import Review from '../Review/Review';
+import { Review } from '../Review';
import { ClassCardType } from '@/types/class';
const ClassPreview = (props: ClassCardType) => {
diff --git a/src/components/Coupon/CouponOption/SelectClassModal.tsx b/src/components/Coupon/CouponOption/SelectClassModal.tsx
index fab43d1e4..52e2fda4e 100644
--- a/src/components/Coupon/CouponOption/SelectClassModal.tsx
+++ b/src/components/Coupon/CouponOption/SelectClassModal.tsx
@@ -1,7 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
import { CheckMarkSVG, PlusesSVG } from '@/icons/svg';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import MobileModal from '@/components/Modal/MobileModal';
import { SelectClassType } from '@/types/coupon';
diff --git a/src/components/Dropdown/SortDropdown.tsx b/src/components/Dropdown/SortDropdown.tsx
index c696f4d03..e6df5fb21 100644
--- a/src/components/Dropdown/SortDropdown.tsx
+++ b/src/components/Dropdown/SortDropdown.tsx
@@ -1,6 +1,6 @@
'use client';
import { filterOption } from '@/constants/constants';
-import { ReviewOrderType } from '@/types/class';
+import { ReviewOrderType } from '@/types/review';
interface SortDropdownProps {
selectedOption: ReviewOrderType;
diff --git a/src/components/Filter/Review/ReviewFilter.tsx b/src/components/Filter/Review/ReviewFilter.tsx
index b12a7984b..9d5c47fdd 100644
--- a/src/components/Filter/Review/ReviewFilter.tsx
+++ b/src/components/Filter/Review/ReviewFilter.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import Rating from '@/components/Review/Rating';
+import { Rating } from '@/components/Review';
interface ReviewFilter {
rate: number;
+ // eslint-disable-next-line no-unused-vars
handleRate: (value: number) => void;
}
diff --git a/src/components/InstructorCard/InstructorCard.tsx b/src/components/InstructorCard/InstructorCard.tsx
index baeb7665d..f0ee45d87 100644
--- a/src/components/InstructorCard/InstructorCard.tsx
+++ b/src/components/InstructorCard/InstructorCard.tsx
@@ -1,25 +1,26 @@
'use client';
import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
import ImagesViewer from './ImagesViewer';
import { StarSVG } from '../../../public/icons/svg';
import Like from '../Like/Like';
-import Review from '../Review/Review';
+import { Review } from '../Review';
import { InstructorCardProps } from '@/types/types';
-const InstructorCard = ({
- id,
- name,
- address,
- genres,
- imgURL,
- average,
- teamAffiliation,
- href,
- largeImg,
- isLiked,
- likeEvent,
-}: InstructorCardProps) => {
+const InstructorCard = (props: InstructorCardProps) => {
+ const {
+ id,
+ name,
+ address,
+ genres,
+ imgURL,
+ average,
+ teamAffiliation,
+ href,
+ largeImg,
+ isLiked,
+ likeEvent,
+ } = props;
const [focus, setFocus] = useState(false);
const onFocus = () => {
diff --git a/src/components/MyInfo/ConsentReceiptModification.tsx b/src/components/MyInfo/ConsentReceiptModification.tsx
index b2c68729a..2ea65e338 100644
--- a/src/components/MyInfo/ConsentReceiptModification.tsx
+++ b/src/components/MyInfo/ConsentReceiptModification.tsx
@@ -2,7 +2,7 @@
import { useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import Modal from '../Modal/Modal';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
// 현재 동의 현황 Props로 받은 후
const ConsentReceiptModification = () => {
diff --git a/src/components/MyInfo/Info.tsx b/src/components/MyInfo/Info.tsx
index 08af75973..09cac09d9 100644
--- a/src/components/MyInfo/Info.tsx
+++ b/src/components/MyInfo/Info.tsx
@@ -10,7 +10,7 @@ import NicknameUpdate from './UpdateModal/UpdateList/NicknameUpdate';
import PhoneNumberUpdate from './UpdateModal/UpdateList/PhoneNumberUpdate';
import ProfileUpdate from './UpdateModal/UpdateList/ProfileUpdate';
import SocialUpdate from './UpdateModal/UpdateList/SocialUpdate';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import ProfileImg from '@/components/Profile/ProfileImage';
import { social } from '@/types/auth';
diff --git a/src/components/MyInfo/UpdateModal/UpdateList/AccountUpdate.tsx b/src/components/MyInfo/UpdateModal/UpdateList/AccountUpdate.tsx
index 2bbe8b6c2..57aaaa0fb 100644
--- a/src/components/MyInfo/UpdateModal/UpdateList/AccountUpdate.tsx
+++ b/src/components/MyInfo/UpdateModal/UpdateList/AccountUpdate.tsx
@@ -6,7 +6,7 @@ import BankSelect from '@/app/instructor/apply/_components/InstructorAuth/BankSe
import { BANK_CODE_TO_NAME } from '@/constants/constants';
import { updateBankAccount } from '@/lib/apis/instructorApi';
import { accessTokenReissuance } from '@/lib/apis/userApi';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import UpdateModalContainer from '@/components/MyInfo/UpdateModal/UpdateModalContainer';
import {
accountCertificationAction,
diff --git a/src/components/MyInfo/UpdateModal/UpdateList/EmailUpdate.tsx b/src/components/MyInfo/UpdateModal/UpdateList/EmailUpdate.tsx
index e714ad417..cae5ac94d 100644
--- a/src/components/MyInfo/UpdateModal/UpdateList/EmailUpdate.tsx
+++ b/src/components/MyInfo/UpdateModal/UpdateList/EmailUpdate.tsx
@@ -6,7 +6,7 @@ import { toast } from 'react-toastify';
import { accessTokenReissuance, updateMyProfile } from '@/lib/apis/userApi';
import { useUserStore } from '@/store';
import UpdateModalContainer from '../UpdateModalContainer';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import {
EmailFormValues,
certificationAction,
diff --git a/src/components/MyInfo/UpdateModal/UpdateList/NicknameUpdate.tsx b/src/components/MyInfo/UpdateModal/UpdateList/NicknameUpdate.tsx
index a1eff6b40..2141aa49b 100644
--- a/src/components/MyInfo/UpdateModal/UpdateList/NicknameUpdate.tsx
+++ b/src/components/MyInfo/UpdateModal/UpdateList/NicknameUpdate.tsx
@@ -12,7 +12,7 @@ import {
} from '@/lib/apis/userApi';
import { useUserStore } from '@/store';
import UpdateModalContainer from '../UpdateModalContainer';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import { FetchError } from '@/types/types';
interface NicknameUpdateProps {
diff --git a/src/components/MyInfo/UpdateModal/UpdateList/PhoneNumberUpdate.tsx b/src/components/MyInfo/UpdateModal/UpdateList/PhoneNumberUpdate.tsx
index 6ce53934b..7a4e04011 100644
--- a/src/components/MyInfo/UpdateModal/UpdateList/PhoneNumberUpdate.tsx
+++ b/src/components/MyInfo/UpdateModal/UpdateList/PhoneNumberUpdate.tsx
@@ -6,7 +6,7 @@ import { toast } from 'react-toastify';
import { accessTokenReissuance, updateMyProfile } from '@/lib/apis/userApi';
import { useUserStore } from '@/store';
import UpdateModalContainer from '../UpdateModalContainer';
-import Button from '@/components/Button/Button';
+import { Button } from '@/components/Button';
import { certificationAction, certificationState } from '@/types/info';
import { FetchError } from '@/types/types';
diff --git a/src/components/MyInfo/UpdateModal/UpdateModalContainer.tsx b/src/components/MyInfo/UpdateModal/UpdateModalContainer.tsx
index 9e0da2f4c..ba843002b 100644
--- a/src/components/MyInfo/UpdateModal/UpdateModalContainer.tsx
+++ b/src/components/MyInfo/UpdateModal/UpdateModalContainer.tsx
@@ -1,5 +1,4 @@
-import Button from '@/components/Button/Button';
-import UniqueButton from '@/components/Button/UniqueButton';
+import { Button, UniqueButton } from '@/components/Button';
interface UpdateModalContainerProps {
title: string;
diff --git a/src/components/Profile/ProfileImage.tsx b/src/components/Profile/ProfileImage.tsx
index 50e378272..4b63f7444 100644
--- a/src/components/Profile/ProfileImage.tsx
+++ b/src/components/Profile/ProfileImage.tsx
@@ -1,6 +1,6 @@
import Image from 'next/image';
import { ProfileImgSize } from '@/constants/constants';
-import { ProfileSVG } from '@/icons/svg';
+import { ProfileSVG } from '../../../public/icons/svg';
interface ProfileProps {
src?: string | null;
diff --git a/src/components/Review/Rating.tsx b/src/components/Review/Rating.tsx
index dfe75f5bc..9b510bc8e 100644
--- a/src/components/Review/Rating.tsx
+++ b/src/components/Review/Rating.tsx
@@ -1,6 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
-import { BigStar, StarSVG } from '@/icons/svg';
+import { BigStar, StarSVG } from '../../../public/icons/svg';
interface ReadonlyProps {
rate: number;
diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx
index d6271cd60..c1cce3e70 100644
--- a/src/components/Review/Review.tsx
+++ b/src/components/Review/Review.tsx
@@ -1,5 +1,5 @@
import { nanoid } from 'nanoid';
-import { StarSVG } from '@/../public/icons/svg';
+import { StarSVG } from '../../../public/icons/svg';
interface ReviewProps {
average: number;
diff --git a/src/components/Review/UserReview.tsx b/src/components/Review/UserReview.tsx
index 868b2234a..8600cf2aa 100644
--- a/src/components/Review/UserReview.tsx
+++ b/src/components/Review/UserReview.tsx
@@ -1,9 +1,9 @@
'use client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
-import { LikeSVG } from '@/icons/svg';
import { postReviewLikes, deleteReviewLikes } from '@/lib/apis/classApis';
import Review from './Review';
+import { LikeSVG } from '../../../public/icons/svg';
import Profile from '../Profile/ProfileImage';
interface UserReviewProps {
diff --git a/src/components/Review/index.ts b/src/components/Review/index.ts
new file mode 100644
index 000000000..f5490742b
--- /dev/null
+++ b/src/components/Review/index.ts
@@ -0,0 +1,7 @@
+export { default as Rating } from './Rating';
+
+export { default as Review } from './Review';
+
+export { default as ReviewStatistics } from './ReviewStatistics';
+
+export { default as UserReview } from './UserReview';
diff --git a/src/app/dashboard/_components/ResponsiveScheduleView.tsx b/src/components/ScheduleView/ResponsiveScheduleView.tsx
similarity index 77%
rename from src/app/dashboard/_components/ResponsiveScheduleView.tsx
rename to src/components/ScheduleView/ResponsiveScheduleView.tsx
index 86b8c9808..922cb01a9 100644
--- a/src/app/dashboard/_components/ResponsiveScheduleView.tsx
+++ b/src/components/ScheduleView/ResponsiveScheduleView.tsx
@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid';
import Link from 'next/link';
import { useMemo } from 'react';
import { formatTimeNoSec } from '@/utils/dateTimeUtils';
@@ -10,11 +9,12 @@ const statusColor: Record = {
full: 'bg-sub-color2',
};
-const ResponsiveScheduleView = ({
- selectedEvent,
-}: {
+interface ResponsiveScheduleViewProps {
selectedEvent: IMonthlyClassSchedules[];
-}) => {
+ mode?: 'dashboard';
+}
+const ResponsiveScheduleView = (props: ResponsiveScheduleViewProps) => {
+ const { selectedEvent, mode } = props;
const schedules = useMemo(
() =>
selectedEvent.map((event) => {
@@ -39,9 +39,9 @@ const ResponsiveScheduleView = ({
);
return schedules.length ? (
-
({paymentCouponUsage.couponTitle}) - {paymentCouponUsage.stackableCouponDiscountPrice && - paymentCouponUsage.stackableCouponTitle ? ( - <> -
- - {paymentCouponUsage.stackableCouponDiscountPrice.toLocaleString()} - 원
({paymentCouponUsage.stackableCouponTitle}) - - ) : null} - - ), - } - : {}; - - const receiptDetails = [...paymentDetails, couponDetails]; - - return ( -
-
- -
- Connection
-{orderId}
-- -
-
- {receiptDetails.map((detail, index) => (
-
- ) : null} -
-
-
- {/* 결제 취소 API 연동 필요 */}
-
- 총 결제금액
-- {finalPrice.toLocaleString()}원 -
-
-
diff --git a/src/app/mypage/user/report/ReportModal.tsx b/src/app/mypage/user/report/ReportModal.tsx
deleted file mode 100644
index 88c1e2bfe..000000000
--- a/src/app/mypage/user/report/ReportModal.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import Modal from '@/components/Modal/Modal';
-
-interface ReportModalProps {
- isOpen: boolean;
- closeModal: () => void;
- target: string | null;
- reportTypes: string[];
- reason: string;
- status: '처리중' | '처리완료';
- response?: string;
-}
-
-const ReportModal = ({
- isOpen,
- closeModal,
- target,
- reportTypes,
- reason,
- status,
- response,
-}: ReportModalProps) => {
- return (
- 결제 상세
-
-
-
-
- 관리자 답변
- {status === '처리중' ? ( -신고 처리 중입니다..
- ) : ( -{response}
- )} -
-
-
-
- 신고내역
- -| 신고대상 | -신고사유 | -상태 | -
|---|
- {reportTypes[0] + str}
-
-
-
- ({paymentCouponUsage.couponTitle}) - {paymentCouponUsage.stackableCouponDiscountPrice && - paymentCouponUsage.stackableCouponTitle ? ( - <> -
- - {paymentCouponUsage.stackableCouponDiscountPrice.toLocaleString()} - 원
({paymentCouponUsage.stackableCouponTitle}) - - ) : null} - - ), - } - : {}; - - const receiptDetails = [...paymentDetails, couponDetails]; - - return ( -
Connection
-{orderId}
-- -
-
- {receiptDetails.map((detail, index) => (
-
- ) : null} -
-
-
- {/* 결제 취소 API 연동 필요 */}
-
- 총 결제금액
-- {finalPrice.toLocaleString()}원 -
-
+
+ )}다시 시도해주세요!`); - } - }; - - return ( - - ); -}; +const ReportPage = () => ( +
-
- {schedules.map((schedule) => (
-