[Fix/#317] THE LAST QA였던 것 (#318)

* feat: 필터링 상태에 따라 엠티 뷰 텍스트 출력 * feat: 게스트 마이 클래스 엠티뷰 너비 수정 * feat: '공지사항' -> '공지 사항' 띄어쓰기 이슈 * feat: 띄어쓰기 및 줄바꿈 * feat: 신청자 관리에서 완료 모임 토스트 추가 * feat: https:// 관련 유효성 검사 수정 * feat: 띄어쓰기 등 라이팅 수정
PICK-PLE · Sep 20, 2024 · 40bd0f9 · 40bd0f9
1 parent ac7a5f9
commit 40bd0f9
Show file tree

Hide file tree

Showing 19 changed files with 93 additions and 61 deletions.
diff --git a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx
@@ -7,7 +7,7 @@ const ClassNoticeEmptyView = () => {
     <article>
       <div css={emptyReviewContainer}>
         <img css={imageStyle} src={graphicImage.NoticeImage} alt="notice graphics" />
-        <p css={textStyle}>아직 등록된 공지사항이 없어요</p>
+        <p css={textStyle}>아직 등록된 공지 사항이 없어요</p>
       </div>
     </article>
   );

diff --git a/src/pages/class/components/DeleteNoticeModal/DeleteNoticeModal.tsx b/src/pages/class/components/DeleteNoticeModal/DeleteNoticeModal.tsx
@@ -31,8 +31,8 @@ const DeleteNoticeModal = ({ onClose, noticeId, moimId }: DeleteNoticeModalProps
       onClose();
       navigate(`/class/${moimId}`);
     } else {
-      console.error('공지사항을 삭제하는데 에러가 발생했습니다.');
-      alert('공지사항을 삭제하는데 에러가 발생했습니다.');
+      console.error('공지 사항을 삭제하는데 에러가 발생했습니다.');
+      alert('공지 사항을 삭제하는데 에러가 발생했습니다.');
     }
   };
 

diff --git a/src/pages/class/components/NoticeCard/NoticeCard.tsx b/src/pages/class/components/NoticeCard/NoticeCard.tsx
@@ -72,7 +72,7 @@ const NoticeCard = ({ noticeData, onClick }: NoticeCardProps) => {
       <section css={noticeWrapper}>
         <h3 css={noticeTitle}>{title}</h3>
         <p css={noticeContent}>{content}</p>
-        {noticeImageUrl && <img css={noticeImage} src={noticeImageUrl} alt="공지사항 이미지" />}
+        {noticeImageUrl && <img css={noticeImage} src={noticeImageUrl} alt="공지 사항 이미지" />}
         <div css={noticeInfo}>
           <div css={noticeDate}>{formatCreatedDate(date ?? '')}</div>
           <div css={noticeComment}>

diff --git a/src/pages/class/components/StepOne/StepOne.style.ts b/src/pages/class/components/StepOne/StepOne.style.ts
@@ -45,6 +45,15 @@ export const referTextStyle = (theme: Theme) => css`
   color: ${theme.color.midgray1};
   ${theme.font['body02-r-14']}
 `;
+
+export const referPurpleTextStyle = (theme: Theme) => css`
+  ${flexGenerator('row', 'flex-start')};
+  width: 100%;
+
+  color: ${theme.color.purple1};
+  ${theme.font['body02-r-14']}
+`;
+
 export const footerStyle = css`
   width: 100%;
 `;

diff --git a/src/pages/class/components/StepOne/StepOne.tsx b/src/pages/class/components/StepOne/StepOne.tsx
@@ -26,6 +26,7 @@ import {
   layoutStyle,
   mainStyle,
   preventDragStyle,
+  referPurpleTextStyle,
   referTextStyle,
   sectionStyle,
   subTitleStyle,
@@ -125,19 +126,29 @@ const StepOne = ({ onNext }: StepProps) => {
           <section css={sectionStyle(1)}>
             <QuestionText numberLabel="Q3">어디에서 진행할 예정이신가요?</QuestionText>
             {classPostState.isOffline ? (
-              <Input
-                value={classPostState.offlineSpot}
-                onChange={(e) => handleInputChange(e, 'offlineSpot')}
-                placeholder="ex. 00시 00구 00동"
-                isValid={true}
-                isCountValue={false}
-              />
+              <>
+                <Input
+                  value={classPostState.offlineSpot}
+                  onChange={(e) => handleInputChange(e, 'offlineSpot')}
+                  placeholder="ex. 00시 00구 00동"
+                  isValid={true}
+                  isCountValue={false}
+                />
+                <h6 css={referPurpleTextStyle}>
+                  *정확한 장소는 추후 참가자에게만 공지 사항으로 전달해 주세요.
+                </h6>
+              </>
             ) : (
-              <Select
-                value={classPostState.onlineSpot}
-                onChange={handleSelectChange}
-                placeholder="사용할 플랫폼을 선택해 주세요."
-                options={options}></Select>
+              <>
+                <Select
+                  value={classPostState.onlineSpot}
+                  onChange={handleSelectChange}
+                  placeholder="사용할 플랫폼을 선택해 주세요."
+                  options={options}></Select>
+                <h6 css={referPurpleTextStyle}>
+                  *접속 링크는 추후 참가자에게만 공지 사항으로 전달해 주세요.
+                </h6>
+              </>
             )}
           </section>
           <section css={sectionStyle(1)}>

diff --git a/src/pages/class/components/StepThree/StepThree.tsx b/src/pages/class/components/StepThree/StepThree.tsx
@@ -77,9 +77,9 @@ const StepThree = ({ onNext }: StepProps) => {
       <div css={layoutStyle}>
         <header css={headerStyle}>
           <h4 css={titleStyle}>클래스 모임 개설</h4>
-          <h1 css={subTitleStyle}>개최할 클래스를 소개해주세요</h1>
+          <h1 css={subTitleStyle}>개최할 클래스를 소개해 주세요</h1>
           <span css={headerSpanStyle}>
-            스픽커와 클래스를 잘 나타내는
+            스픽커님과 클래스를 잘 나타내는
             <br />
             대표 이미지를 업로드해 주세요!
           </span>

diff --git a/src/pages/class/components/StepTwo/StepTwo.tsx b/src/pages/class/components/StepTwo/StepTwo.tsx
@@ -40,7 +40,7 @@ const StepTwo = ({ onNext }: StepProps) => {
           <span css={headerSpanStyle}>
             참가자가 해당 질문에 답변할 예정이에요.
             <br />
-            질문은 1개 이상 작성해 주세요.
+            질문은 최소 1개 이상 작성해 주세요.
           </span>
         </header>
         <main css={mainStyle}>
@@ -49,21 +49,21 @@ const StepTwo = ({ onNext }: StepProps) => {
               numberLabel="Q1"
               maxLength={50}
               value={classPostState.questionList.question1}
-              placeholder="질문을 입력하세요."
+              placeholder="질문을 입력해 주세요."
               onChange={(e) => handleQuestionChange(e, 'question1')}
             />
             <QuestionInput
               numberLabel="Q2"
               maxLength={50}
               value={classPostState.questionList.question2}
-              placeholder="(선택) 질문을 입력하세요."
+              placeholder="(선택) 질문을 입력해 주세요."
               onChange={(e) => handleQuestionChange(e, 'question2')}
             />
             <QuestionInput
               numberLabel="Q3"
               maxLength={50}
               value={classPostState.questionList.question3}
-              placeholder="(선택) 질문을 입력하세요."
+              placeholder="(선택) 질문을 입력해 주세요."
               onChange={(e) => handleQuestionChange(e, 'question3')}
             />
           </section>

diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx
@@ -149,7 +149,7 @@ const Class = () => {
           </Swiper>
         </div>
         <section css={classInfo}>
-          <Label variant="dDay">{`마감${dDayText(dayOfDay)}`}</Label>
+          <Label variant="dDay">{dayOfDay < 0 ? '모집 마감' : `모집${dDayText(dayOfDay)}`}</Label>
           <h1 css={classNameStyle}>{title}</h1>
           <ul css={classInfoList}>
             <li>

diff --git a/src/pages/class/page/ClassNotice/ClassNotice.tsx b/src/pages/class/page/ClassNotice/ClassNotice.tsx
@@ -78,7 +78,7 @@ const ClassNotice = () => {
 
   return (
     <div css={noticePostBackground}>
-      <Header title="공지사항 작성하기" />
+      <Header title="공지 사항 작성하기" />
       <div css={noticePostLayout}>
         <main css={noticePostMain}>
           <Input

diff --git a/src/pages/class/page/ClassNoticeDetail/ClassNoticeDetail.tsx b/src/pages/class/page/ClassNoticeDetail/ClassNoticeDetail.tsx
@@ -47,7 +47,7 @@ const ClassNoticeDetail = () => {
   return (
     <>
       <div css={classNoticeDetailContainer}>
-        <Header title="공지사항" isLine={true} />
+        <Header title="공지 사항" isLine={true} />
         {/* @notice NoticeCard와 똑같은 스타일 코드인데, props 타입이 달라서 그대로 들고 왔습니다. */}
         <div css={noticeLayout}>
           <article css={noticeCardContainer}>
@@ -72,14 +72,16 @@ const ClassNoticeDetail = () => {
             <ClassCommentListEmptyView />
           ) : (
             <div css={commentListWrapper}>
-              {commentList?.map((comment) => (
-                <CommentBox
-                  key={comment.commentId}
-                  comment={comment}
-                  noticeId={noticeId ?? ''}
-                  host={noticeDetail?.isOwner}
-                />
-              ))}
+              {commentList
+                ?.sort((a, b) => (a.commentId ?? 0) - (b.commentId ?? 0))
+                .map((comment) => (
+                  <CommentBox
+                    key={comment.commentId}
+                    comment={comment}
+                    noticeId={noticeId ?? ''}
+                    host={noticeDetail?.isOwner}
+                  />
+                ))}
               <div ref={commentEndRef} />
             </div>
           )}

diff --git a/src/pages/dev/page/Components/Components.tsx b/src/pages/dev/page/Components/Components.tsx
@@ -496,7 +496,7 @@ const Components = () => {
           <LogoHeader />
 
           <h3 css={subTitleStyle}>Header</h3>
-          <Header title="공지사항" />
+          <Header title="공지 사항" />
         </section>
 
         <section css={secttionContainer}>
@@ -521,7 +521,7 @@ const Components = () => {
 
         <section css={secttionContainer}>
           <h2 css={titleStyle}>NavigateBox</h2>
-          <NavigateBox path="">공지사항</NavigateBox>
+          <NavigateBox path="">공지 사항</NavigateBox>
         </section>
 
         {/* <section css={secttionContainer}>

diff --git a/src/pages/guest/components/GuestMyClassEmptyView/GuestMyClassEmptyView.style.ts b/src/pages/guest/components/GuestMyClassEmptyView/GuestMyClassEmptyView.style.ts
@@ -22,12 +22,12 @@ export const textStyle = (theme: Theme) => css`
   ${theme.font['subhead05-sb-14']}
 `;
 
-export const detailWrapper = css`
-  ${flexGenerator('column', 'center', 'center')}
-  gap: 2rem;
-`;
-
 export const svgStyle = css`
   width: 15rem;
   height: 15rem;
 `;
+
+export const buttonWrapper = css`
+  width: 17.7rem;
+  margin-top: 2rem;
+`;
diff --git a/src/pages/guest/components/GuestMyClassEmptyView/GuestMyClassEmptyView.tsx b/src/pages/guest/components/GuestMyClassEmptyView/GuestMyClassEmptyView.tsx
@@ -5,10 +5,10 @@ import { graphicImage, routePath } from '@constants';
 
 import {
   completedTabContainer,
-  detailWrapper,
   textStyle,
   textWrapper,
   svgStyle,
+  buttonWrapper,
 } from './GuestMyClassEmptyView.style';
 
 interface GuestMyClassEmptyViewProps {
@@ -23,11 +23,11 @@ const GuestMyClassEmptyView = ({ text }: GuestMyClassEmptyViewProps) => {
   return (
     <article css={completedTabContainer}>
       <img src={graphicImage.GuestMyPageImage} alt="게스트 마이페이지 이미지" css={svgStyle} />
-      <div css={detailWrapper}>
-        <div css={textWrapper}>
-          <p css={textStyle}>{text}</p>
-          <p css={textStyle}>다양한 클래스를 둘러보세요:{')'}</p>
-        </div>
+      <div css={textWrapper}>
+        <p css={textStyle}>{text}</p>
+        <p css={textStyle}>다양한 클래스를 둘러보세요:{')'}</p>
+      </div>
+      <div css={buttonWrapper}>
         <Button variant="round" onClick={handleButtonClick}>
           클래스 둘러보기
         </Button>

diff --git a/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx b/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx
@@ -112,7 +112,9 @@ const GuestMyClass = () => {
             <GuestMyClassEmptyView
               text={
                 activeTab === '신청한'
-                  ? `${selectedStatus} 중인 클래스가 없어요`
+                  ? selectedStatus === '입금 대기' || selectedStatus === '승인 대기'
+                    ? `${selectedStatus} 중인 클래스가 없어요`
+                    : `${selectedStatus}된 클래스가 없어요`
                   : '아직 참가한 클래스가 없어요'
               }
             />

diff --git a/src/pages/host/components/StepOne/StepOne.tsx b/src/pages/host/components/StepOne/StepOne.tsx
@@ -43,19 +43,19 @@ const StepOne = ({ onNext }: StepProps) => {
               value={hostApplyState.intro}
               onChange={(e) => handleInputChange(e, 'intro')}
               isValid={isIntroValid}
-              errorMessage="빈칸을 입력해주세요."
+              errorMessage="내용을 입력해 주세요."
             />
           </section>
           <section css={sectionStyle}>
-            <QuestionText numberLabel="Q2">스픽커가 되고 싶은 이유를 말해주세요!</QuestionText>
+            <QuestionText numberLabel="Q2">스픽커가 되고 싶은 이유를 이야기해 주세요!</QuestionText>
             <TextArea
               size="medium"
               maxLength={300}
               placeholder={`클래스에서 어떤 가치를 공유하고 싶으신가요? \n그 이유는 무엇인가요?`}
               value={hostApplyState.goal}
               onChange={(e) => handleInputChange(e, 'goal')}
               isValid={isGoalValid}
-              errorMessage="빈칸을 입력해주세요."
+              errorMessage="내용을 입력해 주세요."
             />
           </section>
           <section css={sectionStyle}>

diff --git a/src/pages/host/components/StepTwo/StepTwo.tsx b/src/pages/host/components/StepTwo/StepTwo.tsx
@@ -52,7 +52,7 @@ const StepTwo = ({ onNext }: StepProps) => {
         </header>
         <main css={mainStyle}>
           <section css={sectionStyle}>
-            <QuestionText numberLabel="Q4">픽플에서 사용할 닉네임을 작성해주세요.</QuestionText>
+            <QuestionText numberLabel="Q4">픽플에서 사용할 닉네임을 작성해 주세요.</QuestionText>
             <Input
               ref={nicknameRef}
               value={hostApplyState.nickname}
@@ -63,7 +63,7 @@ const StepTwo = ({ onNext }: StepProps) => {
               placeholder="ex. 픽픽이 (최대 10자)"
               isValid={!isNicknameDuplicate && isNicknameValid}
               errorMessage={
-                isNicknameDuplicate ? '* 이미 존재하는 닉네임이에요.' : '닉네임을 입력해 주세요.'
+                isNicknameDuplicate ? '* 이미 존재하는 닉네임이에요.' : '내용을 입력해 주세요.'
               }
               maxLength={10}
               isCountValue={true}
@@ -72,7 +72,7 @@ const StepTwo = ({ onNext }: StepProps) => {
           <section css={sectionStyle}>
             <QuestionText numberLabel="Q5">
               스픽커님을 잘 나타낼 수 있는 키워드를 <br />
-              작성해주세요.
+              작성해 주세요.
             </QuestionText>
             <Input
               value={hostApplyState.userKeyword}
@@ -83,18 +83,19 @@ const StepTwo = ({ onNext }: StepProps) => {
               isValid={isUserKeywordvalid}
               maxLength={20}
               isCountValue={true}
+              errorMessage="내용을 입력해 주세요."
             />
           </section>
           <section css={sectionStyle}>
-            <QuestionText numberLabel="Q6">클래스 운영 계획에 대해 말해주세요.</QuestionText>
+            <QuestionText numberLabel="Q6">클래스 운영 계획에 대해 이야기해 주세요.</QuestionText>
             <TextArea
               size="medium"
               maxLength={300}
-              placeholder={`픽플에서 개최하고 싶은 클래스의 주제, 내용 등을 작성해 주세요!`}
+              placeholder={'픽플에서 개최하고 싶은 클래스의 주제, 내용 등을 \n작성해 주세요!'}
               value={hostApplyState.plan}
               onChange={(e) => handleInputChange(e, 'plan')}
               isValid={isPlanValid}
-              errorMessage="운영 계획을 입력해 주세요."
+              errorMessage="내용을 입력해 주세요."
             />
           </section>
           <section css={sectionStyle}>

diff --git a/src/pages/host/hooks/useHostApplyInputValidation.ts b/src/pages/host/hooks/useHostApplyInputValidation.ts
@@ -9,7 +9,7 @@ const useHostApplyInputValidation = () => {
   };
 
   const validateUrl = (q3: string) => {
-    const urlPattern = /^https:\/\/www\.[\w-]+(\.[\w-]+)+\/?([^\s]*)?$/i;
+    const urlPattern = /^https:\/\/[\w-]+(\.[\w-]+)+\/?([^\s]*)?$/i;
     return urlPattern.test(q3);
   };
 

diff --git a/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx b/src/pages/host/page/HostInfoEditPage/HostInfoEditPage.tsx
@@ -74,7 +74,7 @@ const HostInfoEditPage = () => {
   };
 
   const validateUrl = (url: string) => {
-    const urlPattern = /^https:\/\/www\.[\w-]+(\.[\w-]+)+\/?([^\s]*)?$/i;
+    const urlPattern = /^https:\/\/[\w-]+(\.[\w-]+)+\/?([^\s]*)?$/i;
 
     if (url.length > 0) {
       setIsSocialLinkValidate(urlPattern.test(url));

diff --git a/src/pages/host/page/MyClassManage/MyClassManage.tsx b/src/pages/host/page/MyClassManage/MyClassManage.tsx
@@ -44,8 +44,15 @@ const MyClassManage = () => {
 
   //check하는 과정
   const toggleChecked = (index: number) => {
-    // isOngoing = false / isMoimSubmissionApproved = true 일 때 체크 불가능 + '참가자 확정인 클래스' 토스트 띄우기
-    if (isMoimSubmissionApproved || !isOngoing) {
+    // isOngoing = false 일 때 체크 불가능 + '완료된 모임 안내' 토스트 띄우기
+    if (!isOngoing) {
+      setToastText('이미 진행이 완료된 클래스예요.');
+      showToast();
+      return;
+    }
+
+    // isMoimSubmissionApproved = true 일 때 체크 불가능 + '참가자 확정인 클래스' 토스트 띄우기
+    if (isOngoing && isMoimSubmissionApproved) {
       setToastText('이미 참가자가 확정된 클래스예요.');
       showToast();
       return;
@@ -180,7 +187,7 @@ const MyClassManage = () => {
         )}
 
         {isToastVisible && (
-          <Toast isVisible={isToastVisible} toastBottom={10} toastIcon={true}>
+          <Toast isVisible={isToastVisible} toastBottom={isOngoing ? 10 : 3} toastIcon={true}>
             {toastText}
           </Toast>
         )}