♻️ 종료된 모임에 대한 Footer 처리 업데이트

종료된 모임에 대한 Footer 처리 업데이트
karrotmvp · Nov 30, 2021 · a37cf14 · a37cf14
1 parent ac16fb6
commit a37cf14
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/src/components/MeetingDetailPage/components/Footer.tsx b/src/components/MeetingDetailPage/components/Footer.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import styled from '@emotion/styled';
+import { MeetingDetail } from 'meeting';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { COLOR } from '../../../constant/color';
@@ -9,31 +10,36 @@ import { codeAtom, userInfoAtom, UserInfoType } from '../../../store/user';
 import { authHandler } from '../../../util/withMini';
 
 interface Props {
+  data: MeetingDetail | undefined;
   onClickJoinHandler: (
     userInfo: UserInfoType,
   ) => (e?: React.MouseEvent) => void;
 }
 
-function Footer({ onClickJoinHandler }: Props): ReactElement {
+function Footer({ data, onClickJoinHandler }: Props): ReactElement {
   const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
   const setCode = useSetRecoilState(codeAtom);
 
   return (
     <FooterWrapper className="meeting-detail__footer-nav-bar">
-      <JoinBtn
-        onClick={
-          !userInfo
-            ? authHandler(
-                onClickJoinHandler,
-                setCode,
-                setUserInfo,
-                'detail_page_join',
-              )
-            : onClickJoinHandler(userInfo)
-        }
-      >
-        {MEETING_DETAIL.JOIN_NOW}
-      </JoinBtn>
+      {data?.live_status === 'live' ? (
+        <JoinBtn
+          onClick={
+            !userInfo
+              ? authHandler(
+                  onClickJoinHandler,
+                  setCode,
+                  setUserInfo,
+                  'detail_page_join',
+                )
+              : onClickJoinHandler(userInfo)
+          }
+        >
+          {MEETING_DETAIL.JOIN_NOW}
+        </JoinBtn>
+      ) : (
+        <DisableBtn>{MEETING_DETAIL.CLOSE_MEETING}</DisableBtn>
+      )}
     </FooterWrapper>
   );
 }
@@ -75,4 +81,22 @@ const JoinBtn = styled.div`
   }
 `;
 
+const DisableBtn = styled.div`
+  flex: 1;
+  width: 100%;
+  height: 4.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.6rem;
+  background-color: ${COLOR.TEXTAREA_LIGHT_GREY};
+  color: ${COLOR.TEXT_WHITE};
+  font-weight: 600;
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+  text-align: center;
+  letter-spacing: -0.03rem;
+  white-space: normal;
+`;
+
 export default Footer;
diff --git a/src/components/MeetingDetailPage/index.tsx b/src/components/MeetingDetailPage/index.tsx
@@ -274,7 +274,7 @@ const MeetingDetailPage = () => {
             data={data?.description.recommend_topic}
           />
         </DescriptionWrapper>
-        {data?.live_status !== 'live' && isRoot && (
+        {isRoot && (
           <>
             <Divider size="1.2rem" />
             <GoHomeWrapper>
@@ -296,14 +296,14 @@ const MeetingDetailPage = () => {
         <Divider size="1.2rem" />
         <MeetingMannerCard className="meeting-detail__manner-card" />
       </ContentsWrapper>
-      {data?.live_status !== 'live' ? (
+      {data?.live_status !== 'live' && data?.live_status !== 'finish' ? (
         <AlarmFooter
           data={data}
           alarmHandler={alarmHandler}
           fromFeed={fromFeed ? true : false}
         />
       ) : (
-        <Footer onClickJoinHandler={onClickJoinHandler} />
+        <Footer onClickJoinHandler={onClickJoinHandler} data={data} />
       )}
     </PageWrapper>
   );

diff --git a/src/constant/message.ts b/src/constant/message.ts
@@ -62,7 +62,7 @@ export const MEETING_DETAIL = {
   DESCRIPTION_TITLE1: '이런 분이면 참여해보세요!',
   DESCRIPTION_TITLE2: '이런 주제로 대화를 나눠보세요!',
   JOIN_NOW: '지금 참여하기',
-  CLOSE_MEETING: '내일 열리는 모임이에요',
+  CLOSE_MEETING: '이미 종료된 모임이에요',
   JOIN_LATER: ' 후에 만나요',
   IS_VIDEO: '이 모임은 줌(zoom)으로 진행돼요. 카메라를 켜지 않아도 괜찮아요!',
   IS_VOICE: '이 모임에서는 음성으로 이웃과 실시간 대화를 나눠요.',