diff --git a/src/assets/icon/notification_empty.svg b/src/assets/icon/notification_empty.svg index 3b988a20..80f8394b 100644 --- a/src/assets/icon/notification_empty.svg +++ b/src/assets/icon/notification_empty.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/src/components/LandingPage/components/MeetingCard/MeetingCard.tsx b/src/components/LandingPage/components/MeetingCard/MeetingCard.tsx index 5dd26bf9..5044039b 100644 --- a/src/components/LandingPage/components/MeetingCard/MeetingCard.tsx +++ b/src/components/LandingPage/components/MeetingCard/MeetingCard.tsx @@ -199,7 +199,7 @@ const MeetingCardWrapper = styled.div` border: 1px solid ${props => props.live_status === 'tomorrow' - ? COLOR.GRAY_000 + ? COLOR.GRAY_200 : COLOR.TEXTAREA_LIGHT_GRAY}; box-sizing: border-box; margin-top: ${props => (props.idx === 0 ? '1.8rem' : 0)}; diff --git a/src/components/LandingPage/components/MeetingList/MeetingList.tsx b/src/components/LandingPage/components/MeetingList/MeetingList.tsx index 1306b09d..4d50301b 100644 --- a/src/components/LandingPage/components/MeetingList/MeetingList.tsx +++ b/src/components/LandingPage/components/MeetingList/MeetingList.tsx @@ -29,11 +29,21 @@ function MeetingList({ title, className }: Props): ReactElement { return ( - {title} - {title !== LANDING.CURRENT_MEETING && ( - - {meetings && meetings.length.toString()} - + {title === LANDING.UPCOMING_MEETING ? ( + + {LANDING.UPCOMING_MEETING_01} + + {meetings && meetings.length.toString()} + + {LANDING.UPCOMING_MEETING_02} + + ) : ( + + {title} + + {meetings && meetings.length.toString()} + + )} diff --git a/src/components/LandingPage/index.tsx b/src/components/LandingPage/index.tsx index cd124881..01f41906 100644 --- a/src/components/LandingPage/index.tsx +++ b/src/components/LandingPage/index.tsx @@ -13,7 +13,11 @@ import home_banner from '../../assets/image/home_banner.png'; import suggestion_img from '../../assets/image/suggestion_img.png'; import { COLOR } from '../../constant/color'; import { LANDING } from '../../constant/message'; -import { currMeetings, meetingsAtom } from '../../store/meeting'; +import { + currMeetings, + meetingsAtom, + upcomingMeetings, +} from '../../store/meeting'; import { userInfoAtom } from '../../store/user'; import CustomScreenHelmet from '../common/CustomScreenHelmet'; import CurrMeetingList from './components/MeetingList/CurrMeetingList'; @@ -25,6 +29,7 @@ const LandingPage: React.FC = () => { const setMeetings = useSetRecoilState(meetingsAtom); const currMeetingsValue = useRecoilValue(currMeetings); + const upcomingMeetingsValue = useRecoilValue(upcomingMeetings); const userInfo = useRecoilValue(userInfoAtom); const redirectUrl = useRedirect(); @@ -72,11 +77,15 @@ const LandingPage: React.FC = () => { )} - - + {upcomingMeetingsValue.length !== 0 && ( +
+ + +
+ )} { + logEvent(analytics, 'sub_onboard__success'); logEvent(analytics, 'onBoard__success', { start_time: startTime, end_time: new Date(), @@ -48,6 +49,7 @@ function OnBoardPage(): ReactElement { }; useEffect(() => { + logEvent(analytics, 'sub_onboard__show'); logEvent(analytics, 'onBoard__show', { start_time: startTime, }); diff --git a/src/constant/color.ts b/src/constant/color.ts index 02e88e6a..4e473c45 100644 --- a/src/constant/color.ts +++ b/src/constant/color.ts @@ -6,6 +6,7 @@ export const COLOR = { BACKGROUND_WHITE: '#ffffff', MODAL_WRAPPER_BLACK: 'rgba(25,25,26, 0.75)', GRAY_000: '#FAFAFA', + GRAY_200: '#EDEDED', GRAY_300: '#DFE1E3', GRAY_400: '#DFE1E3', GRAY_500: '#A6AAAE', diff --git a/src/constant/message.ts b/src/constant/message.ts index c90722ad..d4f7d6c8 100644 --- a/src/constant/message.ts +++ b/src/constant/message.ts @@ -27,6 +27,8 @@ export const LANDING = { NAVIGATOR_TITLE: '랜선동네모임', CURRENT_MEETING: '지금 바로 모임에 참여해 보세요', UPCOMING_MEETING: '오늘 참여할 수 있는 모임', + UPCOMING_MEETING_01: '오늘', + UPCOMING_MEETING_02: '개 모임이 남아있어요.', TOMORROW_MEETING: '미리 보는 내일 모임', START_MEETING_LATER: ' 후 모임이 시작돼요', CURR_MEETING_SUB_TITLE: '지금 바로 모임에서 동네 이웃들과 대화를 나눠보세요!', @@ -60,7 +62,7 @@ export const MEETING_DETAIL = { DESCRIPTION_TITLE1: '이런 분이면 참여해보세요!', DESCRIPTION_TITLE2: '이런 주제로 대화를 나눠보세요!', JOIN_NOW: '지금 참여하기', - CLOSE_MEETING: '오늘은 종료된 모임이에요', + CLOSE_MEETING: '내일 열리는 모임이에요', JOIN_LATER: ' 후에 만나요', GREEN_BOX_INFO: '모든 모임은 줌(Zoom) 화상 회의로 진행돼요. 줌 앱을 다운로드한 후 이용해 주세요. 카메라를 켜지 않아도 괜찮아요!',