rename & fix: 라운지 -> 메인, 메인 랜딩으로 디렉토리 변경 (#971)

* rename: main -> landing 디렉터리 변경

* rename: lounge -> main 디렉터리 변경

* fix: 행사 목록 클릭하면 행사로 넘어가도록 수정

* fix: in progress check 20자 넘칠 때 깨지지 않게 설정

client/cypress/e2e/createEventByGuest.cy.ts

@@ -9,7 +9,7 @@ beforeEach(() => {
 
 describe('Flow: 비회원이 랜딩 페이지에서부터 이벤트를 생성 완료하는 flow', () => {
   it('비회원이 랜딩페이지에서 "정산 시작하기" 버튼을 누르면 로그인 페이지로 이동해야 한다.', () => {
-    cy.visit(ROUTER_URLS.main);
+    cy.visit(ROUTER_URLS.landing);
     cy.get('button').contains('정산 시작하기').click();
     cy.url().should('include', ROUTER_URLS.login);
   });

client/src/components/CreatedEventList/index.tsx

@@ -1,5 +1,5 @@
 import useRequestDeleteEvents from '@hooks/queries/event/useRequestDeleteEvents';
-import {useCreatedEventsPageContext} from '@pages/lounge/events/CreatedEvent.context';
+import {useCreatedEventsPageContext} from '@pages/main/events/CreatedEvent.context';
 import {CreatedEvent} from 'types/serviceType';
 import {CreatedEventItem} from '@components/Design/components/CreatedEventItem/CreatedEventItem';
 

client/src/components/Design/components/CreatedEventItem/CreatedEventItem.tsx

@@ -37,12 +37,13 @@ export function CreatedEventItem({isEditMode, setEditMode, isChecked, onChange,
   };
 
   return (
-    <Flex>
+    <Flex width="100%">
       {isEditMode && <Checkbox isChecked={isChecked} onChange={() => onChange(createdEvent)} />}
       <Flex
         justifyContent="spaceBetween"
         alignItems="center"
         paddingInline="0.5rem"
+        width="100%"
         onClick={onClick}
         css={touchAreaStyle}
         onTouchStart={handleTouchStart}

client/src/components/Design/components/CreatedEventItem/CreatedEventView.tsx

@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
+import {useNavigate} from 'react-router-dom';
+
 import {useTheme} from '@components/Design/theme/HDesignProvider';
 import {CreatedEvent} from 'types/serviceType';
 
-import Flex from '../Flex/Flex';
-import Text from '../Text/Text';
+import {TextButton, Flex, Text} from '@components/Design';
 
 import {inProgressCheckStyle} from './CreatedEventItem.style';
 
@@ -12,20 +13,28 @@ function InProgressCheck({inProgress}: {inProgress: boolean}) {
 
   return (
     <div css={inProgressCheckStyle({theme, inProgress})}>
-      <Text size="tiny" className="in-progress-check-text">
+      <Text size="tiny" className="in-progress-check-text" css={{whiteSpace: 'nowrap'}}>
         {inProgress ? '정산 중' : '정산 완료'}
       </Text>
     </div>
   );
 }
 
-export const CreatedEventView = ({eventName, isFinished}: CreatedEvent) => {
+export const CreatedEventView = ({eventName, isFinished, eventId}: CreatedEvent) => {
+  const navigate = useNavigate();
+
   return (
-    <Flex gap="0.5rem" minHeight="2.5rem" alignItems="center">
+    <Flex
+      width="100%"
+      gap="0.5rem"
+      minHeight="2.5rem"
+      alignItems="center"
+      onClick={() => navigate(`/event/${eventId}/admin`)}
+    >
       <InProgressCheck inProgress={!isFinished} />
-      <Text size="bodyBold" color="onTertiary">
+      <TextButton textSize="bodyBold" textColor="onTertiary">
         {eventName}
-      </Text>
+      </TextButton>
     </Flex>
   );
 };

client/src/constants/routerUrls.ts

@@ -1,15 +1,17 @@
 const EVENT = '/event';
 const EVENT_WITH_EVENT_ID = `${EVENT}/:eventId`;
 const SETTING = '/setting';
-const LOUNGE = '/lounge';
+const MAIN = '/main';
 
 export const PATHS = {
   home: '/home',
   admin: '/admin',
 };
 
 export const ROUTER_URLS = {
-  main: '/',
+  landing: '/',
+  main: MAIN,
+
   event: EVENT,
   createGuestEvent: `${EVENT}/create/guest`,
   createUserEvent: `${EVENT}/create/user`,
@@ -28,10 +30,9 @@ export const ROUTER_URLS = {
   login: '/login',
   setting: SETTING,
   withdraw: `${SETTING}/withdraw`,
-  lounge: LOUNGE,
-  createdEvents: `${LOUNGE}/events`,
-  editUserAccount: `${LOUNGE}/edit-account`,
-  editUserNickname: `${LOUNGE}/edit-nickname`,
+  createdEvents: `${MAIN}/events`,
+  editUserAccount: `${MAIN}/edit-account`,
+  editUserNickname: `${MAIN}/edit-nickname`,
   guestEventLogin: `${EVENT_WITH_EVENT_ID}/admin/login/guest`,
   userEventLogin: `${EVENT_WITH_EVENT_ID}/admin/login/user`,
   kakaoLoginRedirectUri: process.env.KAKAO_REDIRECT_URI,

client/src/pages/fallback/LoungePageError.tsx → client/src/pages/fallback/MainPageError.tsx

@@ -6,7 +6,7 @@ import {Button, Flex, Text} from '@components/Design';
 
 import getImageUrl from '@utils/getImageUrl';
 
-const LoungePageError = () => {
+const MainPageError = () => {
   const navigate = useNavigate();
 
   return (
@@ -21,4 +21,4 @@ const LoungePageError = () => {
   );
 };
 
-export default LoungePageError;
+export default MainPageError;

client/src/pages/fallback/LoungePageLoading.tsx → client/src/pages/fallback/MainPageLoading.tsx

@@ -4,7 +4,7 @@ import {Flex, Text} from '@components/Design';
 
 import getImageUrl from '@utils/getImageUrl';
 
-const LoungePageLoading = () => {
+const MainPageLoading = () => {
   return (
     <Flex flexDirection="column" justifyContent="center" alignItems="center" gap="1.5rem">
       <Image src={getImageUrl('runningDog', 'webp')} fallbackSrc={getImageUrl('runningDog', 'png')} width={200} />
@@ -16,4 +16,4 @@ const LoungePageLoading = () => {
   );
 };
 
-export default LoungePageLoading;
+export default MainPageLoading;

client/src/pages/main/MainPage.style.ts → client/src/pages/landing/LandingPage.style.ts

@@ -1,6 +1,6 @@
 import {css} from '@emotion/react';
 
-export const mainContainer = css({
+export const landingContainer = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'start',

client/src/pages/landing/LandingPage.tsx

@@ -0,0 +1,39 @@
+import Image from '@components/Design/components/Image/Image';
+import useRequestGetUserInfo from '@hooks/queries/user/useRequestGetUserInfo';
+
+import usePageBackground from '@hooks/usePageBackground';
+
+import getImageUrl from '@utils/getImageUrl';
+
+import Nav from './Nav/Nav';
+import {MainSection} from './Section/MainSection';
+import {DescriptionSection} from './Section/DescriptionSection';
+import {FeatureSection} from './Section/FeatureSection';
+import {backgroundImageStyle, backgroundStyle, landingContainer} from './LandingPage.style';
+import CreatorSection from './Section/CreatorSection/CreatorSection';
+
+const LandingPage = () => {
+  const {isVisible} = usePageBackground();
+  const {userInfo} = useRequestGetUserInfo();
+  const {isGuest} = userInfo;
+
+  return (
+    <div css={landingContainer}>
+      <Nav isGuest={isGuest} />
+      <MainSection isGuest={isGuest} />
+      <DescriptionSection />
+      <FeatureSection />
+      <CreatorSection />
+      <div css={backgroundStyle}>
+        <Image
+          css={backgroundImageStyle(isVisible)}
+          src={getImageUrl('mainSectionBackground', 'webp')}
+          alt=""
+          fallbackSrc={getImageUrl('mainSectionBackground', 'png')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;

client/src/pages/main/Nav/Nav.tsx → client/src/pages/landing/Nav/Nav.tsx

@@ -3,11 +3,11 @@ import {useNavigate} from 'react-router-dom';
 import {User} from 'types/serviceType';
 import {IconHeundeut} from '@components/Design/components/Icons/Icons/IconHeundeut';
 
-import {Button, Text, TopNav, IconButton} from '@HDesign/index';
+import {Button, TopNav} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
-import {navFixedStyle, navStyle, navWrapperStyle} from './Nav.style';
+import {navFixedStyle, navWrapperStyle} from './Nav.style';
 
 type NavProps = Pick<User, 'isGuest'>;
 

client/src/pages/landing/index.ts

@@ -0,0 +1 @@
+export {default as LandingPage} from './LandingPage';