[Fix/#327] 자잘한 수정사항 반영 (#328)

* fix: 배너 순서 변경하기 * feat: HostInfoPage 엠티 뷰 클래스 - 리뷰 탭 비슷하게 새로 만들기 * fix: 배너 순서 다시 원래대로! * fix: 클래스 모임 개설 페이지 스크롤 맨 위로 * feat: bannerId 없으면 호스트 배너만 보이게 다시 순서 변경 * fix: 클래스 신청 시 답변 작성하는 textArea placeholder 수정 * fix: 링크 공유했을 때 멘트 '내가 PICK!한 경험과 지식으로 연결되는 곳'으로 수정 * feat: 베타기간 배너 추가, 댓글 상세 페이지 엠티뷰 간격 수정 * fix: Class 페이지 스크롤 수정
PICK-PLE · Sep 23, 2024 · 08a8919 · 08a8919
1 parent 3314879
commit 08a8919
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://pick-ple.com/" />
     <meta property="og:site_name" content="pick-ple" />
-    <meta property="og:title" content="내가 PICK!한 바로 '그 사람'과 함께하는 클래스 모임" />
+    <meta property="og:title" content="내가 PICK!한 경험과 지식으로 연결되는 곳" />
     <meta
       property="og:description"
       content="내가 PICK!한 사람과 함께 하는 클래스 모임을 통해 원하는 가치를 나누어 보세요." />

diff --git a/src/assets/lotties/home_banner3.json b/src/assets/lotties/home_banner3.json
diff --git a/src/assets/lotties/index.ts b/src/assets/lotties/index.ts
@@ -1,5 +1,6 @@
 import homeBanner1 from './home-banner1.json';
 import homeBanner2 from './home-banner2.json';
+import homeBanner3 from './home_banner3.json';
 import mainBanner from './main_banner.json';
 
-export { mainBanner, homeBanner1, homeBanner2 };
+export { mainBanner, homeBanner1, homeBanner2, homeBanner3 };
diff --git a/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.style.ts b/src/pages/class/components/ClassCommentListEmptyView/ClassCommentListEmptyView.style.ts
@@ -4,7 +4,8 @@ import { flexGenerator } from '@styles/generator';
 
 export const emptyViewContainer = css`
   ${flexGenerator('column', 'center', 'center')}
-  margin-top: 12.5rem;
+  margin-top: 3rem;
+  margin-bottom: 7rem;
 `;
 
 export const iconStyle = css`

diff --git a/src/pages/class/components/ClassPost/ClassPost.tsx b/src/pages/class/components/ClassPost/ClassPost.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
+import { smoothScroll } from '@utils';
 import { FunnelProps, StepProps } from 'src/hooks/useFunnel';
 
 import StepFour from '../StepFour/StepFour';
@@ -15,6 +16,9 @@ export interface ClassPostProps {
 }
 
 const ClassPost = ({ steps, nextClickHandler, Funnel, Step }: ClassPostProps) => {
+  useEffect(() => {
+    smoothScroll(0, false);
+  }, []);
   return (
     <Funnel>
       <Step name={steps[0]}>

diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx
@@ -112,6 +112,11 @@ const Class = () => {
   const shareTitle = 'PICK!PLE';
   const text = title ?? '';
 
+  const handleTabClick = (activeTab: '클래스소개' | '공지사항' | '리뷰') => {
+    setSelectTab(activeTab);
+    smoothScroll(660);
+  };
+
   const handleNoticePostClick = (moimId: string) => {
     navigate(`/class/${moimId}/notice/post`);
   };
@@ -174,19 +179,19 @@ const Class = () => {
           <button
             css={tabButtonStyle(selectTab === '클래스소개')}
             type="button"
-            onClick={() => setSelectTab('클래스소개')}>
+            onClick={() => handleTabClick('클래스소개')}>
             클래스 소개
           </button>
           <button
             css={tabButtonStyle(selectTab === '공지사항')}
             type="button"
-            onClick={() => setSelectTab('공지사항')}>
+            onClick={() => handleTabClick('공지사항')}>
             공지 사항
           </button>
           <button
             css={tabButtonStyle(selectTab === '리뷰')}
             type="button"
-            onClick={() => setSelectTab('리뷰')}>
+            onClick={() => handleTabClick('리뷰')}>
             리뷰
           </button>
         </div>

diff --git a/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx b/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx
@@ -136,7 +136,7 @@ const ClassApplyQuestion = ({ handlePageChange }: ClassApplyProps) => {
                       }
                       maxLength={200}
                       size="medium"
-                      placeholder="답변을 작성해 주세요."
+                      placeholder={`스픽커가 답변을 읽고, 참가자를 승인해요.\n답변을 정성스럽게 작성해 주세요.`}
                       isValid={validateLength(answer.answerList[`answer${index + 1}`])}
                       errorMessage="답변을 작성해 주세요."
                     />

diff --git a/src/pages/home/page/Home/config.ts b/src/pages/home/page/Home/config.ts
@@ -1,9 +1,9 @@
-import { homeBanner1, homeBanner2 } from 'src/assets/lotties';
+import { homeBanner3, homeBanner2 } from 'src/assets/lotties';
 
 export const bannerList = [
   {
     id: 1,
-    animationData: homeBanner1,
+    animationData: homeBanner3,
   },
   {
     id: 2,

diff --git a/src/pages/host/components/HostInfoClassEmptyView/HostInfoClassEmptyView.style.ts b/src/pages/host/components/HostInfoClassEmptyView/HostInfoClassEmptyView.style.ts
@@ -0,0 +1,36 @@
+import { Theme, css } from '@emotion/react';
+
+import { flexGenerator } from '@styles/generator';
+
+export const completedTabContainer = (theme: Theme) => css`
+  ${flexGenerator('column')}
+  height: 30rem;
+  width: 100%;
+  background-color: ${theme.color.bg_white0};
+`;
+
+export const textWrapper = css`
+  ${flexGenerator('column')}
+  width: 100%;
+  margin-top: 0.5rem;
+`;
+
+export const textStyle = (theme: Theme) => css`
+  color: ${theme.color.lightgray2};
+  ${theme.font['subhead05-sb-14']}
+`;
+
+export const detailWrapper = css`
+  ${flexGenerator('column', 'center', 'center')}
+  gap: 2rem;
+`;
+
+export const IcHostMyClassStyle = css`
+  width: 15rem;
+  height: 15rem;
+`;
+
+export const buttonWrapper = css`
+  margin-top: 2rem;
+  width: 18rem;
+`;
diff --git a/src/pages/host/components/HostInfoClassEmptyView/HostInfoClassEmptyView.tsx b/src/pages/host/components/HostInfoClassEmptyView/HostInfoClassEmptyView.tsx
@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@components';
+import { IcHostMypage } from '@svg';
+
+import {
+  buttonWrapper,
+  completedTabContainer,
+  IcHostMyClassStyle,
+  textStyle,
+  textWrapper,
+} from './HostInfoClassEmptyView.style';
+
+const HostInfoClassEmptyView = () => {
+  const navigate = useNavigate();
+
+  const handleButtonClick = () => {
+    navigate('/class/post/step1');
+  };
+  return (
+    <article css={completedTabContainer}>
+      <IcHostMypage css={IcHostMyClassStyle} />
+      <div css={textWrapper}>
+        <p css={textStyle}>아직 개설한 클래스가 없어요</p>
+        <p css={textStyle}>지금 바로 클래스를 개설해 보세요!</p>
+      </div>
+
+      <div css={buttonWrapper}>
+        <Button variant="round" onClick={handleButtonClick}>
+          클래스 개설하기
+        </Button>
+      </div>
+    </article>
+  );
+};
+
+export default HostInfoClassEmptyView;
diff --git a/src/pages/host/components/HostInfoReviewEmptyView/HostInfoReviewEmptyView.style.ts b/src/pages/host/components/HostInfoReviewEmptyView/HostInfoReviewEmptyView.style.ts
@@ -0,0 +1,18 @@
+import { css, Theme } from '@emotion/react';
+
+import { flexGenerator } from '@styles/generator';
+
+export const emptyReviewContainer = css`
+  ${flexGenerator('column')};
+  height: 30rem;
+`;
+
+export const imageStyle = css`
+  width: 15rem;
+  height: 15rem;
+`;
+
+export const textStyle = (theme: Theme) => css`
+  ${theme.font['subhead04-sb-15']};
+  color: ${theme.color.lightgray2};
+`;
diff --git a/src/pages/host/components/HostInfoReviewEmptyView/HostInfoReviewEmptyView.tsx b/src/pages/host/components/HostInfoReviewEmptyView/HostInfoReviewEmptyView.tsx
@@ -0,0 +1,16 @@
+import { graphicImage } from '@constants';
+
+import { emptyReviewContainer, imageStyle, textStyle } from './HostInfoReviewEmptyView.style';
+
+const HostInfoReviewEmptyView = () => {
+  return (
+    <article>
+      <div css={emptyReviewContainer}>
+        <img css={imageStyle} src={graphicImage.ReviewEmptyImage} alt="review graphics" />
+        <p css={textStyle}>아직 작성된 리뷰가 없어요</p>
+      </div>
+    </article>
+  );
+};
+
+export default HostInfoReviewEmptyView;
diff --git a/src/pages/host/page/HostInfoPage/HostInfoPage.tsx b/src/pages/host/page/HostInfoPage/HostInfoPage.tsx
@@ -8,9 +8,9 @@ import { useFetchReviewByHost } from '@apis/domains/review/useFetchReviewByHost'
 
 import { Button, Image, LogoHeader } from '@components';
 import { images } from '@constants';
-import { ClassReviewEmptyView } from '@pages/class/components';
 import { ClassListCard } from '@pages/classList/components';
-import { HostMyClassEmptyView } from '@pages/host/components';
+import HostInfoClassEmptyView from '@pages/host/components/HostInfoClassEmptyView/HostInfoClassEmptyView';
+import HostInfoReviewEmptyView from '@pages/host/components/HostInfoReviewEmptyView/HostInfoReviewEmptyView';
 import {
   classListCardStyle,
   hostActiveTabTextStyle,
@@ -153,7 +153,7 @@ const HostInfoPage = () => {
             {activeTab === '클래스' ? (
               <div>
                 {hostInfoClassData?.length === 0 ? (
-                  <HostMyClassEmptyView text="아직 개설한 클래스가 없어요" />
+                  <HostInfoClassEmptyView />
                 ) : (
                   <div css={hostCardWrapper}>
                     {sortedHostInfoByDayOfDay &&
@@ -173,7 +173,7 @@ const HostInfoPage = () => {
             ) : (
               <div>
                 {hostInfoReviewData?.length === 0 ? (
-                  <ClassReviewEmptyView />
+                  <HostInfoReviewEmptyView />
                 ) : (
                   <div css={hostCardWrapper}>
                     {hostInfoReviewData &&