diff --git a/public/image/profile/image_host_background_ver2.png b/public/image/profile/image_host_background_ver2.png new file mode 100644 index 00000000..3f9370f9 Binary files /dev/null and b/public/image/profile/image_host_background_ver2.png differ diff --git a/public/svg/ic_offline.svg b/public/svg/ic_offline.svg index b3b36381..424c002f 100644 --- a/public/svg/ic_offline.svg +++ b/public/svg/ic_offline.svg @@ -1,10 +1,3 @@ - - - - - - - - + diff --git a/src/apis/domains/moimSubmission/usePatchSubmitter.ts b/src/apis/domains/moimSubmission/usePatchSubmitter.ts index 416c323a..d5f70f7c 100644 --- a/src/apis/domains/moimSubmission/usePatchSubmitter.ts +++ b/src/apis/domains/moimSubmission/usePatchSubmitter.ts @@ -37,7 +37,7 @@ export const usePatchSubmitter = (isOngoing: boolean, onClose: () => void) => { }); onClose(); smoothScroll(0); - navigate('/myclass/host/myclass'); // 다시 모임 관리하는 host 페이지로 이동 + navigate('/mypage/host/myclass'); // 다시 모임 관리하는 host 페이지로 이동 }, }); }; diff --git a/src/assets/svg/IcOffline.tsx b/src/assets/svg/IcOffline.tsx index b64e520b..66efd33d 100644 --- a/src/assets/svg/IcOffline.tsx +++ b/src/assets/svg/IcOffline.tsx @@ -1,19 +1,14 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgIcOffline = (props: SVGProps) => ( - - - - - - - - + ); export default SvgIcOffline; diff --git a/src/components/common/DateSelect/DateSelect.style.ts b/src/components/common/DateSelect/DateSelect.style.ts index efb1cf39..2e8557c1 100644 --- a/src/components/common/DateSelect/DateSelect.style.ts +++ b/src/components/common/DateSelect/DateSelect.style.ts @@ -38,6 +38,10 @@ export const customInputStyle = (hasValue: boolean) => (theme: Theme) => css` box-shadow: none; background-color: ${theme.color.white}; } + + &::placeholder { + color: ${theme.color.midgray1}; + } `; export const iconStyle = (theme: Theme) => css` diff --git a/src/components/common/Notice/Notice.tsx b/src/components/common/Notice/Notice.tsx index 9bb00b3e..8f654a88 100644 --- a/src/components/common/Notice/Notice.tsx +++ b/src/components/common/Notice/Notice.tsx @@ -10,7 +10,7 @@ export interface NoticeProps extends HTMLAttributes { const Notice = ({ children, numberLabel, ...props }: NoticeProps) => { return (
- {numberLabel} + {numberLabel}

{children}

); diff --git a/src/components/common/NumberLabel/NumberLabel.tsx b/src/components/common/NumberLabel/NumberLabel.tsx index 2d927708..8512ccc5 100644 --- a/src/components/common/NumberLabel/NumberLabel.tsx +++ b/src/components/common/NumberLabel/NumberLabel.tsx @@ -1,13 +1,16 @@ -import { PropsWithChildren } from 'react'; - import { IcNumberLabel } from '@svg'; import { wrapperStyle, textStyle } from './NumberLabel.style'; -const NumberLabel = ({ children, ...props }: PropsWithChildren) => { +interface NumberLabelProps { + withIcon?: boolean; + children: React.ReactNode; +} + +const NumberLabel = ({ withIcon = false, children, ...props }: NumberLabelProps) => { return (
- + {withIcon && } {children}
); diff --git a/src/components/common/TextArea/TextArea.style.ts b/src/components/common/TextArea/TextArea.style.ts index a8c3ad80..c6f95e7d 100644 --- a/src/components/common/TextArea/TextArea.style.ts +++ b/src/components/common/TextArea/TextArea.style.ts @@ -12,7 +12,7 @@ export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (t ${flexGenerator('column', 'space-between', 'flex-end')} width: 100%; min-width: 33.5rem; - padding: 1.2rem 1.6rem; + padding: 1.2rem 1.5rem; border: 1px solid ${isError && isFocused @@ -39,6 +39,7 @@ export const textAreaStyle = (theme: Theme) => css` width: 100%; height: 100%; resize: none; + padding: 0; color: ${theme.color.blackgray}; background-color: ${theme.color.white}; diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts index 632b30d6..3481d54d 100644 --- a/src/components/common/TimeSelect/TimeSelect.style.ts +++ b/src/components/common/TimeSelect/TimeSelect.style.ts @@ -10,18 +10,25 @@ export const timeSelectContainer = css` export const timeSelectWrapper = (theme: Theme) => css` ${flexGenerator('column', 'center', 'flex-start')}; - width: 100%; - padding: 1rem 1.6rem; gap: 0.3rem; + width: 100%; border: 1px solid ${theme.color.lightgray1}; border-radius: 10px; + position: relative; cursor: pointer; `; +export const labelWrapper = css` + ${flexGenerator()}; + width: 100%; + padding: 1rem 1.6rem; +`; + export const selectStyle = (hasValue: boolean) => (theme: Theme) => css` - display: flex; - width: 13rem; + ${flexGenerator('column', 'flex-start', 'flex-start')} + gap: 0.3rem; + width: 100%; border: none; border-radius: 4px; color: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; @@ -38,26 +45,13 @@ export const textStyle = (theme: Theme) => css` ${theme.font['body03-r-12']}; `; -export const iconStyle = css` - ${flexGenerator()} - width: 2.4rem; - height: 2.4rem; - right: 0; - position: absolute; - - cursor: pointer; -`; - -export const labelWrapper = css` - position: relative; - width: 100%; -`; - export const svgStyle = (hasValue: boolean) => (theme: Theme) => css` path { fill: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; } + cursor: pointer; + width: 2.4rem; height: 2.4rem; `; @@ -65,18 +59,15 @@ export const svgStyle = (hasValue: boolean) => (theme: Theme) => css` export const dropdownStyle = (theme: Theme) => css` position: absolute; top: 100%; - left: -1.6rem; - right: 0; z-index: 1; background-color: ${theme.color.white}; border: 1px solid ${theme.color.lightgray1}; border-radius: 10px; - width: 16.2rem; + width: 100%; max-height: 200px; - padding-right: 5rem; - margin-top: 1.5rem; + margin-top: 0.5rem; overflow-y: auto; diff --git a/src/components/common/TimeSelect/TimeSelect.tsx b/src/components/common/TimeSelect/TimeSelect.tsx index 1262224d..118642c5 100644 --- a/src/components/common/TimeSelect/TimeSelect.tsx +++ b/src/components/common/TimeSelect/TimeSelect.tsx @@ -7,7 +7,6 @@ import { timeSelectWrapper, selectStyle, textStyle, - iconStyle, labelWrapper, svgStyle, dropdownStyle, @@ -66,51 +65,49 @@ const TimeSelect = ({
toggleDropdown('start')}>
-
+ {startTime !== null ? generateTimeOptions()[startTime].label : '선택'} - - -
- {startDropdownOpen && ( -
- {generateTimeOptions().map((option) => ( -
handleStartTimeChange(option.value)}> - {option.label} -
- ))} -
- )} + +
+ {startDropdownOpen && ( +
+ {generateTimeOptions().map((option) => ( +
handleStartTimeChange(option.value)}> + {option.label} +
+ ))} +
+ )}
+
startTime !== null && toggleDropdown('end')}> -
+ {endTime !== null ? generateTimeOptions()[endTime].label : '선택'} - - -
- {endDropdownOpen && ( -
- {generateTimeOptions() - .filter((option) => startTime === null || option.value > startTime) - .map((option) => ( -
handleEndTimeChange(option.value)}> - {option.label} -
- ))} -
- )} +
+ {endDropdownOpen && ( +
+ {generateTimeOptions() + .filter((option) => startTime === null || option.value > startTime) + .map((option) => ( +
handleEndTimeChange(option.value)}> + {option.label} +
+ ))} +
+ )}
); diff --git a/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx b/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx index 18c99e4f..8283ddd8 100644 --- a/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx +++ b/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx @@ -26,7 +26,7 @@ const AccountNumberInput = ({ value, onChange }: AccountNumberInputProps) => { value={value} onChange={handleInputChange} inputLabel="계좌 번호" - placeholder="'-' 없이 입력" + placeholder="'-' 없이 숫자만 입력해 주세요." isValid={true} isCountValue={false} /> diff --git a/src/constants/images/index.ts b/src/constants/images/index.ts index fe249f84..0088de9d 100644 --- a/src/constants/images/index.ts +++ b/src/constants/images/index.ts @@ -1,7 +1,7 @@ export const CheckModalImage = '/image/icons/image_check_modal.png'; export const GuestProfileImage = '/image/profile/image_guest_profile.png'; export const HostProfileImage = '/image/profile/image_host_profile.png'; -export const HostBackGroundImage = '/image/profile/image_host_background.png'; +export const HostBackGroundImage = '/image/profile/image_host_background_ver2.png'; export const PicksightBanner = '/image/banners/picksight-banner.png'; export const PicksightMain = '/image/banners/picksight-main.png'; export const PicksightImage = '/image/banners/picksight-image.png'; diff --git a/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx b/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx index 1c80bef0..6dfd1832 100644 --- a/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx +++ b/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx @@ -22,6 +22,12 @@ const HostSubmitter = () => { mutate({ submitterId }); }; + const sortedHostSubmitterList = hostSubmitterList?.sort((a, b) => { + const idA = a.submitterId ?? Number.MAX_SAFE_INTEGER; // undefined일 경우 가장 뒤로 정렬 + const idB = b.submitterId ?? Number.MAX_SAFE_INTEGER; + return idA - idB; + }); + return (

PICKPLE 스픽커 승인

@@ -30,22 +36,22 @@ const HostSubmitter = () => { 신청 순서 - 게스트 ID + 참가자 ID 닉네임 - [1] 호스트 소개 - [2] 모임 목표 - [3] 호스트 설명 링크 - [4] 호스트 닉네임 + [1] 스픽커 소개 + [2] 클래스 목표 + [3] 스픽커 설명 링크 + [4] 스픽커 닉네임 [5] 키워드 - [6] 모임 계획 + [6] 클래스 계획 [7] 이메일 상태 승인여부 - {hostSubmitterList?.map((item, index) => ( - + {sortedHostSubmitterList?.map((item) => ( + {item.submitterId} {item.guestId} {item.guestNickname} diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx index 01cae924..d0081aa5 100644 --- a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx +++ b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx @@ -30,6 +30,12 @@ const MoimSubmitter = () => { mutate({ moimSubmissionId }); }; + const sortedMoimSubmitterList = moimSubmitterList?.sort((a, b) => { + const idA = a.moimSubmissionId ?? Number.MAX_SAFE_INTEGER; // undefined일 경우 가장 뒤로 정렬 + const idB = b.moimSubmissionId ?? Number.MAX_SAFE_INTEGER; + return idA - idB; + }); + const renderApprovalStatus = (item: MoImSubmitterListGetResponse) => { switch (item.moimSubmissionState) { case 'pendingPayment': @@ -73,8 +79,8 @@ const MoimSubmitter = () => { - {moimSubmitterList?.map((item, index) => ( - + {sortedMoimSubmitterList?.map((item) => ( + {item.moimSubmissionId} {item.date} {item.guestId} diff --git a/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts b/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts index dae2738e..ff704721 100644 --- a/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts +++ b/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts @@ -11,6 +11,7 @@ export const articleContainer = css` export const articleTitle = (theme: Theme) => css` color: ${theme.color.blackgray}; ${theme.font['subhead01-sb-18']} + white-space: pre-wrap; `; export const articleCotent = (theme: Theme) => css` diff --git a/src/pages/article/page/Picksight/Picksight.tsx b/src/pages/article/page/Picksight/Picksight.tsx index d64d6ddb..e436a614 100644 --- a/src/pages/article/page/Picksight/Picksight.tsx +++ b/src/pages/article/page/Picksight/Picksight.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Button, Header, Image } from '@components'; +import { Button, Header } from '@components'; import ArticleParagraph from '@pages/article/components/ArticleParagraph/ArticleParagraph'; import { IcDropdownRight } from '@svg'; import { smoothScroll } from '@utils'; @@ -40,11 +40,11 @@ const Picksight = () => {

1호 스픽커가 알려주는

픽플 사용설명서

- +
@@ -52,7 +52,7 @@ const Picksight = () => { 픽플에는 스픽커와 참가자가 있어요. - +
{ diff --git a/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.tsx b/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.tsx index 130982ef..ca012d28 100644 --- a/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.tsx +++ b/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.tsx @@ -8,7 +8,7 @@ const ClassCommentListEmptyView = () => { 댓글이 없어요
-

아직 작성된 댓글이 없어요.

+

아직 작성된 댓글이 없어요

); diff --git a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx index 9e8bac42..2e41fe7e 100644 --- a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx +++ b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx @@ -7,7 +7,7 @@ const ClassNoticeEmptyView = () => {
notice graphics -

아직 등록된 공지사항이 없습니다

+

아직 등록된 공지사항이 없어요

); diff --git a/src/pages/class/components/CommentInput/CommentInput.tsx b/src/pages/class/components/CommentInput/CommentInput.tsx index b89b265d..28374520 100644 --- a/src/pages/class/components/CommentInput/CommentInput.tsx +++ b/src/pages/class/components/CommentInput/CommentInput.tsx @@ -63,7 +63,7 @@ const CommentInput = ({ noticeId }: CommentInputProps) => { value={value} onChange={handleInputChange} css={inputStyle} - placeholder="댓글을 남겨보세요" + placeholder="댓글을 남겨보세요." />
diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx index 8a5e5899..067bfb98 100644 --- a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx +++ b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx @@ -56,7 +56,6 @@ const GuestClassRegisterCard = ({ const handleButtonClick = () => { handleModalClose(); - handlePageChange(); }; return ( @@ -88,7 +87,11 @@ const GuestClassRegisterCard = ({ {isModalOpen && ( - + )} diff --git a/src/pages/class/components/StepOne/StepOne.tsx b/src/pages/class/components/StepOne/StepOne.tsx index ea00bacc..370c12a4 100644 --- a/src/pages/class/components/StepOne/StepOne.tsx +++ b/src/pages/class/components/StepOne/StepOne.tsx @@ -136,7 +136,7 @@ const StepOne = ({ onNext }: StepProps) => { )} @@ -152,17 +152,17 @@ const StepOne = ({ onNext }: StepProps) => { *픽플은 최소 10분 이상의 네트워킹 시간을 권장합니다.
- 몇 명의 게스트와 함께하고 싶으신가요? + 몇 명의 참가자와 함께하고 싶으신가요?
*참가자는 최대 15명까지 모집 가능합니다.
- 참가비를 알려주세요. + 참가비를 등록해 주세요.
- *모임 인원과 주제, 시간 등을 고려하여 정해주세요. + *클래스 인원과 주제, 시간 등을 고려하여 설정해주세요.
@@ -178,7 +178,7 @@ const StepOne = ({ onNext }: StepProps) => { handleAccountChange(e, 'bank')} - placeholder="은행명을 입력해주세요." + placeholder="은행명을 입력해 주세요." inputLabel="입금 은행" isValid={true} isCountValue={false} diff --git a/src/pages/class/components/StepThree/StepThree.tsx b/src/pages/class/components/StepThree/StepThree.tsx index 862dc4df..e7a4fc5b 100644 --- a/src/pages/class/components/StepThree/StepThree.tsx +++ b/src/pages/class/components/StepThree/StepThree.tsx @@ -89,20 +89,20 @@ const StepThree = ({ onNext }: StepProps) => { handleInputChange(e, 'title')} - placeholder="제목을 입력하세요." + placeholder="제목을 입력해 주세요." isValid={isTitleValid} - errorMessage="제목을 입력해주세요" + errorMessage="제목을 입력해 주세요." maxLength={28} isCountValue={true} />