From d36a07078ae9b55873eb0d214ba0fbbb39b70eb3 Mon Sep 17 00:00:00 2001 From: chaeneey <127743435+chaeneey@users.noreply.github.com> Date: Thu, 19 Sep 2024 15:42:12 +0900 Subject: [PATCH] =?UTF-8?q?[Fix/#297]=20=EA=B8=B0=ED=9A=8D,=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20QA=20(#303)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 스픽커가 만든 모임 정렬 * feat: ClassApplyRule 아이콘 추가 * feat: ClassApplyDeposit 에 들어가는 게스트 클래스 레지스터 카드 디자인 수정 * feat: HostInfoPage 디자인 수정사항 반영 * feat: HostInfoPage -> class 선택 시 스크롤 맨 위로 올라가게 수정 * feat: api에 스픽커 베테랑 여부 isVeteran 추가 (HostInfoCard, HostInfoPage, HostInfoCardWithLink) * feat: DepositModal x 버튼에onClose 달아주기 * feat: ApplicantListModal 스크롤 만들기 + SimpleUserProfile medium 사이즈 변경 * feat: 관리자 페이지 - 승인 / 거절 / 환불 / 완료 상태 부분 처리하기 * chore: HostInfoEditPage placeholder 수정 * chore: 'https:// 로 시작하는' 문구 추가하기 * chore: MyClassManage console.log 제거 * feat: isReviewed 상태에 따라 버튼 다르게 보이게 / 리뷰 보기 버튼 누르면 클래스 - 리뷰 탭으로 이동 * feat: TimeSelect 스타일 수정 (크기 맞추고, 스크롤 만들기) * refactor: 코드리뷰 반영 (관리자 페이지 승인여부 부분 switch문으로 수정) * chore: renderApprovalStatus로 함수명 바꾸기 * chore: yarn generate-types 하기 * chore: index.ts 저장했음 * feat: Class 페이지 호스트가 참여하기 버튼 누를 경우 토스트 메시지 뜨게 * feat: 스크롤 수정, 버튼 disabled * fix: qa 반영하기 --- .../submitter/usePatchMoimSubmitter.ts | 2 +- src/apis/queryKeys/queryKeys.ts | 1 - .../common/DateSelect/DateSelect.tsx | 2 +- .../common/NumberLabel/NumberLabel.tsx | 3 + .../SimpleUserProfile.style.ts | 14 +- .../SimpleUserProfile/SimpleUserProfile.tsx | 2 +- .../common/TimeSelect/TimeSelect.style.ts | 21 ++- .../MoimSubmitter/MoimSubmitter.style.ts | 38 +++--- .../MoimSubmitter/MoimSubmitter.tsx | 126 +++++++++--------- .../article/page/Picksight/Picksight.tsx | 8 +- .../GuestClassRegisterCard.style.ts | 4 +- .../GuestClassRegisterCard.tsx | 6 +- src/pages/class/page/Class/Class.style.ts | 2 +- src/pages/class/page/Class/Class.tsx | 39 ++++-- .../ClassApplyDeposit.style.ts | 5 + .../ClassApplyDeposit/ClassApplyDeposit.tsx | 3 +- .../ClassListCard/ClassListCard.tsx | 6 +- .../classList/page/ClassList/ClassList.tsx | 5 + .../components/DepositModal/DepositModal.tsx | 1 + .../guest/components/MoimCard/MoimCard.tsx | 15 ++- .../ApplicantListModal.style.ts | 24 +++- .../ApplicantListModal/ApplicantListModal.tsx | 2 +- .../HostInfoEditPage/HostInfoEditPage.tsx | 6 +- .../page/HostInfoPage/HostInfoPage.style.ts | 6 +- .../host/page/HostInfoPage/HostInfoPage.tsx | 8 +- .../HostInfoCardWithLink.style.ts | 3 +- .../HostInfoCardWithLink.tsx | 6 +- src/utils/window.ts | 4 +- 28 files changed, 225 insertions(+), 137 deletions(-) diff --git a/src/apis/domains/submitter/usePatchMoimSubmitter.ts b/src/apis/domains/submitter/usePatchMoimSubmitter.ts index 678a4d24..36ccd59f 100644 --- a/src/apis/domains/submitter/usePatchMoimSubmitter.ts +++ b/src/apis/domains/submitter/usePatchMoimSubmitter.ts @@ -23,7 +23,7 @@ export const usePatchMoimSubmitter = () => { mutationFn: ({ moimSubmissionId }: PatchMoimSubmitterRequest) => patchMoimSubmitter({ moimSubmissionId }), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL_REQUEST] }); + queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL] }); }, }); }; diff --git a/src/apis/queryKeys/queryKeys.ts b/src/apis/queryKeys/queryKeys.ts index 79f5f627..cc91b0d4 100644 --- a/src/apis/queryKeys/queryKeys.ts +++ b/src/apis/queryKeys/queryKeys.ts @@ -26,7 +26,6 @@ export const QUERY_KEY = { HOST_SUBMITTER: 'hostSubmitter', HOST_SUBMIT_REQUEST: 'hostSubmitRequest', MOIM_SUBMITTER_ALL: 'moimSubmitterAll', - MOIM_SUBMITTER_ALL_REQUEST: 'miomSubmitterAllRequest', HOST_INFO: 'hostInfo', HOST_INFO_CLASS: 'hostInfoClass', HOST_INFO_REVIEW: 'hostInfoReview', diff --git a/src/components/common/DateSelect/DateSelect.tsx b/src/components/common/DateSelect/DateSelect.tsx index 6de97f62..dba0c231 100644 --- a/src/components/common/DateSelect/DateSelect.tsx +++ b/src/components/common/DateSelect/DateSelect.tsx @@ -44,7 +44,7 @@ const CustomInput = React.forwardRef( const DateSelect = ({ selected, onChange }: DateSelectProps) => { const today = dayjs(); - const minSelectableDate = today.add(3, 'day'); + const minSelectableDate = today.add(2, 'day'); return (
diff --git a/src/components/common/NumberLabel/NumberLabel.tsx b/src/components/common/NumberLabel/NumberLabel.tsx index 98151f59..2d927708 100644 --- a/src/components/common/NumberLabel/NumberLabel.tsx +++ b/src/components/common/NumberLabel/NumberLabel.tsx @@ -1,10 +1,13 @@ import { PropsWithChildren } from 'react'; +import { IcNumberLabel } from '@svg'; + import { wrapperStyle, textStyle } from './NumberLabel.style'; const NumberLabel = ({ children, ...props }: PropsWithChildren) => { return (
+ {children}
); diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts b/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts index 8abfdbff..60e906c5 100644 --- a/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts +++ b/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts @@ -14,9 +14,12 @@ export const profileWrapperSizeStyle = { gap: 1.2rem; `, medium: css` - gap: 1rem; + gap: 1.2rem; `, small: css` + gap: 1rem; + `, + xSmall: css` gap: 0.5rem; `, }; @@ -39,10 +42,14 @@ export const imgSizeStyle = { height: 4.2rem; `, medium: css` + width: 3.6rem; + height: 3.6rem; + `, + small: css` width: 2.5rem; height: 2.5rem; `, - small: css` + xSmall: css` width: 1.8rem; height: 1.8rem; `, @@ -64,6 +71,9 @@ export const usernameSizeStyle = { ${theme.font['subhead05-sb-14']} `, small: (theme: Theme) => css` + ${theme.font['subhead05-sb-14']} + `, + xSmall: (theme: Theme) => css` ${theme.font['body04-m-12']} `, }; diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx b/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx index aeccc279..98cac77f 100644 --- a/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx +++ b/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx @@ -10,7 +10,7 @@ import { } from './SimpleUserProfile.style'; export interface SimpleUserProfileProps extends React.HTMLAttributes { - size: 'small' | 'medium' | 'large' | 'xlarge'; + size: 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge'; username: string; userImgUrl?: string; } diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts index ffb63c45..632b30d6 100644 --- a/src/components/common/TimeSelect/TimeSelect.style.ts +++ b/src/components/common/TimeSelect/TimeSelect.style.ts @@ -65,15 +65,30 @@ export const svgStyle = (hasValue: boolean) => (theme: Theme) => css` export const dropdownStyle = (theme: Theme) => css` position: absolute; top: 100%; - left: 0; + left: -1.6rem; right: 0; - z-index: 1000; + z-index: 1; + background-color: ${theme.color.white}; border: 1px solid ${theme.color.lightgray1}; border-radius: 10px; + + width: 16.2rem; max-height: 200px; + padding-right: 5rem; + margin-top: 1.5rem; + overflow-y: auto; - margin-top: 0.5rem; + + &::-webkit-scrollbar { + display: block; + } + + &::-webkit-scrollbar-thumb { + background-color: ${theme.color.lightgray0}; + border: 5px solid ${theme.color.white}; + border-radius: 10px; + } `; export const optionStyle = (theme: Theme) => css` diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts index 448464e4..4be4a788 100644 --- a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts +++ b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts @@ -24,22 +24,24 @@ export const titleStyle = (theme: Theme) => css` ${theme.font['subhead01-sb-18']} `; -export const thStyle = (theme: Theme) => css` - background-color: #f2f2f2; - padding: 0.5rem; - text-align: center; - vertical-align: middle; - word-break: keep-all; - border: 1px solid ${theme.color.lightgray1}; - ${theme.font['subhead05-sb-14']} - - max-width: 10rem; -`; - -export const tdStyle = (theme: Theme) => css` - padding: 0.5rem; - text-align: center; - border: 1px solid ${theme.color.lightgray0}; - word-break: break-all; - ${theme.font['subhead06-m-14']} +export const trStyle = (theme: Theme) => css` + & > th { + background-color: #f2f2f2; + padding: 0.5rem; + text-align: center; + vertical-align: middle; + word-break: keep-all; + border: 1px solid ${theme.color.lightgray1}; + ${theme.font['subhead05-sb-14']} + + max-width: 10rem; + } + + & > td { + padding: 0.5rem; + text-align: center; + border: 1px solid ${theme.color.lightgray0}; + word-break: break-all; + ${theme.font['subhead06-m-14']} + } `; diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx index 8e4742d5..01cae924 100644 --- a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx +++ b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx @@ -1,5 +1,3 @@ -import { useEffect } from 'react'; - import { useFetchMoimSubmitterList } from '@apis/domains/submitter/useFetchMoimSubmitter'; import { usePatchMoimSubmitter } from '@apis/domains/submitter/usePatchMoimSubmitter'; @@ -7,96 +5,98 @@ import { tableContainerStyle, tableLayoutStyle, tableStyle, - tdStyle, - thStyle, titleStyle, + trStyle, } from '@pages/admin/components/MoimSubmitter/MoimSubmitter.style'; +import { components } from '@schema'; + +type MoImSubmitterListGetResponse = components['schemas']['MoimSubmissionAllResponse']; + const MOIM_SUBMITTER_STATUS = { pendingPayment: '입금 대기', pendingApproval: '승인 대기', + approved: '승인', + rejected: '거절', + refunded: '환불', + completed: '완료', }; const MoimSubmitter = () => { - const { data: moimSubmitterList, refetch } = useFetchMoimSubmitterList() || []; + const { data: moimSubmitterList } = useFetchMoimSubmitterList() || []; const { mutate } = usePatchMoimSubmitter(); - useEffect(() => { - refetch(); - }, [moimSubmitterList, refetch]); + const handleButtonClick = (moimSubmissionId: number) => { + mutate({ moimSubmissionId }); + }; - if (moimSubmitterList === null || moimSubmitterList === undefined) { - return null; - } + const renderApprovalStatus = (item: MoImSubmitterListGetResponse) => { + switch (item.moimSubmissionState) { + case 'pendingPayment': + return ; - const handleButtonClick = (moimSubmissionId: number) => { - mutate( - { moimSubmissionId }, - { - onSuccess: () => { - refetch(); - }, - } - ); + case 'pendingApproval': + return
확인
; + + default: + return ( +
+ {MOIM_SUBMITTER_STATUS[item.moimSubmissionState as keyof typeof MOIM_SUBMITTER_STATUS]} +
+ ); + } }; + return (

PICKPLE 참가자 입금 확인

- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - {moimSubmitterList.map((item, index) => ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + ))} diff --git a/src/pages/article/page/Picksight/Picksight.tsx b/src/pages/article/page/Picksight/Picksight.tsx index a35c43a3..d64d6ddb 100644 --- a/src/pages/article/page/Picksight/Picksight.tsx +++ b/src/pages/article/page/Picksight/Picksight.tsx @@ -1,8 +1,10 @@ +import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button, Header, Image } from '@components'; import ArticleParagraph from '@pages/article/components/ArticleParagraph/ArticleParagraph'; import { IcDropdownRight } from '@svg'; +import { smoothScroll } from '@utils'; import Footer from 'src/components/common/Footer/Footer'; import { PicksightImage, PicksightMain } from 'src/constants/images'; @@ -20,6 +22,10 @@ import { const Picksight = () => { const navigate = useNavigate(); + useEffect(() => { + smoothScroll(0, false); + }, []); + const handleSpickerApplyClick = () => { navigate('/mypage/host'); }; @@ -44,7 +50,7 @@ const Picksight = () => {

픽플에는 스픽커와 - 참가자가 있어요. + 참가자가 있어요.

diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts index 1d89ce04..78e681d3 100644 --- a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts +++ b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts @@ -10,7 +10,7 @@ export const cardContainerStyle = (theme: Theme) => css` width: 100%; padding: 1.5rem; - border: 0.5px solid ${theme.color.lightgray0}; + border: 1px solid ${theme.color.lightgray0}; border-radius: 10px; `; @@ -36,7 +36,7 @@ export const spotAndDateSectionStyle = css` `; export const textSpanStyle = (theme: Theme) => css` color: ${theme.color.blackgray}; - ${theme.font['body02-r-14']} + ${theme.font['subhead06-m-14']} `; export const iconAndSpanStyle = css` diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx index fcd0ac5a..8a5e5899 100644 --- a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx +++ b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx @@ -65,11 +65,7 @@ const GuestClassRegisterCard = ({

{title}

- +
diff --git a/src/pages/class/page/Class/Class.style.ts b/src/pages/class/page/Class/Class.style.ts index 5c99bbdf..970cd3f2 100644 --- a/src/pages/class/page/Class/Class.style.ts +++ b/src/pages/class/page/Class/Class.style.ts @@ -77,7 +77,7 @@ export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) => css` export const tabSectionStyle = (theme: Theme) => css` background-color: ${theme.color.bg_white0}; width: 100%; - min-height: 75rem; + min-height: 60rem; padding: 2.8rem 2rem; `; diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx index f7cef505..c86c0dab 100644 --- a/src/pages/class/page/Class/Class.tsx +++ b/src/pages/class/page/Class/Class.tsx @@ -1,6 +1,6 @@ import { useAtom } from 'jotai'; import { Suspense, useEffect, useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useNavigate, useParams, useLocation } from 'react-router-dom'; import { Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -54,7 +54,13 @@ import 'swiper/css/pagination'; const Class = () => { const { windowWidth } = useWindowSize(); const navigate = useNavigate(); - const [selectTab, setSelectTab] = useState<'클래스소개' | '공지사항' | '리뷰'>('클래스소개'); + const location = useLocation(); + const currentTab = location.state?.tab; + const [selectTab, setSelectTab] = useState<'클래스소개' | '공지사항' | '리뷰'>( + currentTab === 'review' ? '리뷰' : '클래스소개' + ); + const [toastText, setToastText] = useState(''); + const { moimId } = useParams(); const { handleCopyToClipboard } = useClipboard(); const { showToast, isToastVisible } = useToast(); @@ -64,11 +70,19 @@ const Class = () => { const { data: moimDescription, isLoading: isMoimDescriptionLoading } = useFetchMoimDescription( moimId ?? '' ); - const { data: moimNoticeList } = useFetchMoimNoticeList(moimId ?? ''); useEffect(() => { - window.scrollTo(0, 0); + smoothScroll(0, false); }, []); + + useEffect(() => { + if (currentTab === 'review') { + smoothScroll(660); + } + }, [currentTab]); + + const { data: moimNoticeList } = useFetchMoimNoticeList(moimId ?? ''); + if (isMoimDetailLoading || isMoimDescriptionLoading) { return ; } @@ -103,13 +117,19 @@ const Class = () => { }; const handleApplyButtonClick = () => { - smoothScroll(0); - navigate(isSubmitted ? `/mypage/guest/myclass` : `/class/${moimId}/apply`); + if (moimDetail.hostId === hostId) { + setToastText('스픽커님이 개설한 클래스예요!'); + showToast(); + } else { + smoothScroll(0); + navigate(isSubmitted ? `/mypage/guest/myclass` : `/class/${moimId}/apply`); + } }; const handleShareButtonClick = async () => { const shareSuccess = await handleShare(url, shareTitle, text, handleCopyToClipboard); if (shareSuccess === false) { + setToastText('클립보드에 모임 링크를 복사했어요!'); showToast(); } }; @@ -195,17 +215,14 @@ const Class = () => { )}
-
{isToastVisible && ( - 클립보드에 모임 링크를 복사했어요! + {toastText} )} diff --git a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts index 4009d3eb..f09b4976 100644 --- a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts +++ b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts @@ -16,6 +16,11 @@ export const dipositWrapperStyle = css` width: 100%; `; +export const depositHeaderStyle = css` + ${flexGenerator('column', 'flex-start', 'flex-start')} + gap: 0.3rem; +`; + export const depositSpanStyle = (theme: Theme) => css` color: ${theme.color.purple2}; ${theme.font['subhead05-sb-14']} diff --git a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx index e7cb8dca..e7d2ce1b 100644 --- a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx +++ b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx @@ -12,6 +12,7 @@ import { depositSpanStyle, depositMainStyle, dipositWrapperStyle, + depositHeaderStyle, } from './ClassApplyDeposit.style'; import { MoimIdPathParameterType } from '@types'; @@ -31,7 +32,7 @@ const ClassApplyDeposit = ({ handlePageChange }: ClassApplyProps) => { return (
-
+
클래스 모임 신청

클래스 신청이 완료되었습니다!
이제 참가비를 입금해주세요. diff --git a/src/pages/classList/components/ClassListCard/ClassListCard.tsx b/src/pages/classList/components/ClassListCard/ClassListCard.tsx index e658d64b..e5329a80 100644 --- a/src/pages/classList/components/ClassListCard/ClassListCard.tsx +++ b/src/pages/classList/components/ClassListCard/ClassListCard.tsx @@ -41,7 +41,11 @@ const ClassListCard = ({ classListData, variant }: ClassListCardProps) => {
{title}
- + {`${date}. (${dayOfWeek}) ${startTime}~${endTime}`}
diff --git a/src/pages/classList/page/ClassList/ClassList.tsx b/src/pages/classList/page/ClassList/ClassList.tsx index 669de55c..78a64a80 100644 --- a/src/pages/classList/page/ClassList/ClassList.tsx +++ b/src/pages/classList/page/ClassList/ClassList.tsx @@ -8,6 +8,7 @@ import { LogoHeader, Spinner } from '@components'; import { CATEGORY_ICON, CATEGORY_NAME } from '@constants'; import { ClassListEmptyView, ClassListCard } from '@pages/classList/components'; import Error from '@pages/error/Error'; +import { smoothScroll } from '@utils'; import { IcNjobActive, IcInvestmentActive, @@ -100,6 +101,10 @@ const ClassList = () => { refetch(); }, [selectedCategory, refetch]); + useEffect(() => { + smoothScroll(0, false); + }, []); + const handleCategoryClick = (category: string) => { setSearchParams({ category }); }; diff --git a/src/pages/guest/components/DepositModal/DepositModal.tsx b/src/pages/guest/components/DepositModal/DepositModal.tsx index b75570ed..1716a85a 100644 --- a/src/pages/guest/components/DepositModal/DepositModal.tsx +++ b/src/pages/guest/components/DepositModal/DepositModal.tsx @@ -33,6 +33,7 @@ interface DepositModalProps { const DepositModal = ({ onClose, fee }: DepositModalProps) => { const [isErrorModalOpen, setIsErrorModalOpen] = useState(false); + const handleErrorModalToggle = () => { setIsErrorModalOpen((prev) => !prev); }; diff --git a/src/pages/guest/components/MoimCard/MoimCard.tsx b/src/pages/guest/components/MoimCard/MoimCard.tsx index 966e0a9e..5578e7d2 100644 --- a/src/pages/guest/components/MoimCard/MoimCard.tsx +++ b/src/pages/guest/components/MoimCard/MoimCard.tsx @@ -29,20 +29,23 @@ interface MoimCardProps { } const MoimCard = ({ guestMyClassData }: MoimCardProps) => { - const { moimSubmissionState, title, hostNickname, dateList, fee, imageUrl, moimId } = + const { moimSubmissionState, title, hostNickname, dateList, fee, imageUrl, moimId, isReviewed } = guestMyClassData; const navigate = useNavigate(); const [isOpen, setIsOpen] = useState(false); + const handleButtonClick = () => { setIsOpen(!isOpen); }; - const handleCardClick = () => { navigate(`/class/${moimId}`); }; const handleWriteReviewClick = () => { navigate(`/mypage/guest/myclass/${moimId}/review/write`); }; + const handleWatchReviewClick = () => { + navigate(`/class/${moimId}`, { state: { tab: 'review' } }); + }; return (
@@ -83,11 +86,15 @@ const MoimCard = ({ guestMyClassData }: MoimCardProps) => { 입금하기 ) : null} + {moimSubmissionState === 'completed' && ( - )} + {isOpen && ( diff --git a/src/pages/host/components/ApplicantListModal/ApplicantListModal.style.ts b/src/pages/host/components/ApplicantListModal/ApplicantListModal.style.ts index 14bc97ea..d7459753 100644 --- a/src/pages/host/components/ApplicantListModal/ApplicantListModal.style.ts +++ b/src/pages/host/components/ApplicantListModal/ApplicantListModal.style.ts @@ -43,15 +43,27 @@ export const applicantCountStyle = (theme: Theme) => css` export const mainStyle = css` ${flexGenerator()}; - min-width: 30.1rem; - padding: 1rem; + width: 30.1rem; + height: 17.5rem; + padding: 1rem 0.7rem 0rem 2rem; `; -export const ulStyle = css` - ${flexGenerator('column')}; + +export const ulStyle = (theme: Theme) => css` + overflow-y: auto; + ${flexGenerator('column', 'flex-start', 'flex-start')}; gap: 1.4rem; - min-width: 28.1rem; width: 100%; - padding: 1rem 2rem; + height: 100%; + + &::-webkit-scrollbar { + display: block; + width: 0.4rem; + } + + &::-webkit-scrollbar-thumb { + background-color: ${theme.color.lightgray0}; + border-radius: 3px; + } `; export const liStyle = css` diff --git a/src/pages/host/components/ApplicantListModal/ApplicantListModal.tsx b/src/pages/host/components/ApplicantListModal/ApplicantListModal.tsx index d0de35d3..2b0dac00 100644 --- a/src/pages/host/components/ApplicantListModal/ApplicantListModal.tsx +++ b/src/pages/host/components/ApplicantListModal/ApplicantListModal.tsx @@ -59,7 +59,7 @@ const ApplicantListModal = ({ {submitterList?.map((submitter) => (
  • diff --git a/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx b/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx index 3211f603..7481bf34 100644 --- a/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx +++ b/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx @@ -211,9 +211,11 @@ const HostInfoEditPage = () => { onChange={(e) => handleInputChange(e, 'socialLink')} inputLabel="소셜 링크" errorMessage={ - isSocailLinkValidate ? '* 필수 입력 항목이에요.' : '올바른 URL 형식을 입력해주세요' + isSocailLinkValidate + ? '* 필수 입력 항목이에요.' + : '* https:// 로 시작하는 올바른 URL 형식을 입력해주세요' } - placeholder="닉네임을 입력해주세요" + placeholder="소셜 링크를 입력해주세요" isCountValue={false} isValid={ !isSocialLinkTouched || diff --git a/src/pages/host/page/HostInfoPage/HostInfoPage.style.ts b/src/pages/host/page/HostInfoPage/HostInfoPage.style.ts index 61c5d880..4c5bab0c 100644 --- a/src/pages/host/page/HostInfoPage/HostInfoPage.style.ts +++ b/src/pages/host/page/HostInfoPage/HostInfoPage.style.ts @@ -67,8 +67,8 @@ export const hostNameMarkWrapper = css` `; export const hostNameWrapper = css` - ${flexGenerator()} - gap: 0.4rem + ${flexGenerator()}; + gap: 0.4rem; `; export const hostNameStyle = (theme: Theme) => css` @@ -125,7 +125,7 @@ export const hostTabTextStyle = (theme: Theme) => css` color: ${theme.color.midgray1}; ${theme.font['subhead01-sb-18']} padding-bottom: 1.5rem; - border-bottom: 1px solid ${theme.color.midgray1}; + border-bottom: 1px solid ${theme.color.lightgray1}; `; export const hostActiveTabTextStyle = (theme: Theme) => css` diff --git a/src/pages/host/page/HostInfoPage/HostInfoPage.tsx b/src/pages/host/page/HostInfoPage/HostInfoPage.tsx index cdcade4e..3940b57f 100644 --- a/src/pages/host/page/HostInfoPage/HostInfoPage.tsx +++ b/src/pages/host/page/HostInfoPage/HostInfoPage.tsx @@ -9,7 +9,6 @@ import { useFetchReviewByHost } from '@apis/domains/review/useFetchReviewByHost' import { Button, Image, LogoHeader } from '@components'; import { images } from '@constants'; import { ClassReviewEmptyView } from '@pages/class/components'; -import { hostNameStyle } from '@pages/class/components/HostInfoCard/HostInfoCard.style'; import { ClassListCard } from '@pages/classList/components'; import HostClassEmptyView from '@pages/host/components/HostClassEmptyView/HostClassEmptyView'; import { @@ -37,6 +36,7 @@ import { hostTabContentWrapper, hostTabTextStyle, hostTabWrapper, + hostNameStyle, } from '@pages/host/page/HostInfoPage/HostInfoPage.style'; import { userAtom } from '@stores'; import { IcEdit, IcSpickerMark } from '@svg'; @@ -73,8 +73,10 @@ const HostInfoPage = () => { const { data: hostInfoClassData } = useFetchMoimListByHost(Number(hostId)); const sortedHostInfoByDayOfDay = hostInfoClassData - ?.filter((data) => data.dayOfDay && data.dayOfDay >= 0) // dayOfDay가 0 이상인 요소 필터링 - .concat(hostInfoClassData.filter((data) => data.dayOfDay && data.dayOfDay < 0)); // dayOfDay가 0 미만인 요소 뒤에 추가 + ?.filter((data) => (data.dayOfDay ?? 0) === 0) + .concat(hostInfoClassData.filter((data) => data.dayOfDay && data.dayOfDay > 0)) + .sort((a, b) => (a.dayOfDay ?? 0) - (b.dayOfDay ?? 0)) + .concat(hostInfoClassData.filter((data) => data.dayOfDay && data.dayOfDay < 0)); const { data: hostInfoReviewData } = useFetchReviewByHost(Number(hostId)); diff --git a/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.style.ts b/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.style.ts index fc46509f..2aed92b3 100644 --- a/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.style.ts +++ b/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.style.ts @@ -85,7 +85,8 @@ export const hostKeywordStyle = (theme: Theme) => css` `; export const hostCountWrapper = (theme: Theme) => css` - color: ${theme.color.darkgray} ${theme.font['body04-m-12']}; + color: ${theme.color.darkgray}; + ${theme.font['body04-m-12']}; `; export const hostCountColorStyle = (theme: Theme) => css` diff --git a/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.tsx b/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.tsx index ac11ea2b..93296508 100644 --- a/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.tsx +++ b/src/pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink.tsx @@ -33,7 +33,7 @@ interface hostInfoCardWithLinkListProps { } const HostInfoCardWithLink = ({ hostInfoCardWithLinkList }: hostInfoCardWithLinkListProps) => { const navigate = useNavigate(); - const { hostNickName, hostImageUrl, keyword, moimCount, attendeeCount, hostId } = + const { hostNickName, hostImageUrl, keyword, moimCount, isVeteran, attendeeCount, hostId } = hostInfoCardWithLinkList; const handleButtonClick = () => { @@ -59,11 +59,11 @@ const HostInfoCardWithLink = ({ hostInfoCardWithLinkList }: hostInfoCardWithLink

    {hostNickName}

    • - {moimCount && moimCount >= 2 ? ( + {isVeteran && (
    베테랑
    - ) : null} + )}

    {keyword} diff --git a/src/utils/window.ts b/src/utils/window.ts index 343948f5..61d6af13 100644 --- a/src/utils/window.ts +++ b/src/utils/window.ts @@ -1,7 +1,7 @@ -export const smoothScroll = (top: number): void => { +export const smoothScroll = (top: number, isSmooth: boolean = true): void => { window.scrollTo({ top, left: 0, - behavior: 'smooth', + behavior: isSmooth ? 'smooth' : 'instant', }); };
    신청 순서신청 일시참가자 ID닉네임카카오 닉네임클래스 ID클래스명스픽커명[1] 질문[1] 답변 [2] 질문[2] 답변 [3] 질문[3] 답변상태승인여부
    신청 순서신청 일시참가자 ID닉네임카카오 닉네임클래스 ID클래스명스픽커명[1] 질문[1] 답변 [2] 질문[2] 답변 [3] 질문[3] 답변상태승인여부
    {item.moimSubmissionId}{item.date}{item.guestId}{item.guestNickname}{item.kakaoNickname}{item.moimId}{item.moimTitle}{item.hostNickname}{item.questionList?.question1}{item.answerList?.answer1}{item.questionList?.question2}{item.answerList?.answer2}{item.questionList?.question3}{item.answerList?.answer3} + {moimSubmitterList?.map((item, index) => ( +
    {item.moimSubmissionId}{item.date}{item.guestId}{item.guestNickname}{item.kakaoNickname}{item.moimId}{item.moimTitle}{item.hostNickname}{item.questionList?.question1}{item.answerList?.answer1}{item.questionList?.question2}{item.answerList?.answer2}{item.questionList?.question3}{item.answerList?.answer3} { MOIM_SUBMITTER_STATUS[ item.moimSubmissionState as keyof typeof MOIM_SUBMITTER_STATUS ] } - {item.moimSubmissionState === 'pendingApproval' ? ( -
    확인
    - ) : ( - - )} -     		{renderApprovalStatus(item)}