diff --git a/packages/user/index.html b/packages/user/index.html index a14309bf..18f7d931 100644 --- a/packages/user/index.html +++ b/packages/user/index.html @@ -38,8 +38,47 @@ - - + + + + + + + + + + + + + 현대자동차 캐스퍼 일렉트릭 이벤트 diff --git a/packages/user/public/images/racing/front/travel.webp b/packages/user/public/images/racing/front/travel.webp index 0d2f2d66..95dc4f0c 100644 Binary files a/packages/user/public/images/racing/front/travel.webp and b/packages/user/public/images/racing/front/travel.webp differ diff --git a/packages/user/src/App.tsx b/packages/user/src/App.tsx index a29ccb2e..83aea5f4 100644 --- a/packages/user/src/App.tsx +++ b/packages/user/src/App.tsx @@ -1,7 +1,7 @@ import { RouterProvider } from 'react-router-dom'; import ToasterStack from 'src/components/common/toast/ToasterStack.tsx'; import GlobalErrorBoundary from 'src/components/layout/GlobalErrorBoundary.tsx'; -import GlobalFallback from 'src/components/layout/GlobalFallback.tsx'; +import GlobalFallback from 'src/components/layout/fallback/GlobalFallback.tsx'; import AppProviders from 'src/libs/index.tsx'; import router from 'src/routes/router.tsx'; import CasperCursor from './components/cursor/CasperCursor.tsx'; diff --git a/packages/user/src/components/common/PendingContainer.tsx b/packages/user/src/components/common/PendingContainer.tsx index 0fbd981b..fb6bc840 100644 --- a/packages/user/src/components/common/PendingContainer.tsx +++ b/packages/user/src/components/common/PendingContainer.tsx @@ -1,7 +1,14 @@ export default function PendingContainer({ message }: { message: string }) { return ( -
- 로딩 중 이미지 +
+ 로딩 중 이미지

{message}

잠시만 기다려주세요...

diff --git a/packages/user/src/components/home/eventSteps/ContentsContainer.tsx b/packages/user/src/components/home/eventSteps/ContentsContainer.tsx index 404fc122..c61ae290 100644 --- a/packages/user/src/components/home/eventSteps/ContentsContainer.tsx +++ b/packages/user/src/components/home/eventSteps/ContentsContainer.tsx @@ -12,7 +12,7 @@ export default function ContentsContainer({ const contents = Children.toArray(children); return ( -
+
{contents.map((content, index) => ( // eslint-disable-next-line react/no-array-index-key diff --git a/packages/user/src/components/home/eventSteps/EventStep.tsx b/packages/user/src/components/home/eventSteps/EventStep.tsx index b25a9dd6..da7c7bbb 100644 --- a/packages/user/src/components/home/eventSteps/EventStep.tsx +++ b/packages/user/src/components/home/eventSteps/EventStep.tsx @@ -8,7 +8,7 @@ export default function EventStep({ step, title, children }: PropsWithChildren +

{stepLabel}

{title}

{children} diff --git a/packages/user/src/components/home/fastestQuiz/index.tsx b/packages/user/src/components/home/fastestQuiz/index.tsx index 5c5fe65d..33ed4c9e 100644 --- a/packages/user/src/components/home/fastestQuiz/index.tsx +++ b/packages/user/src/components/home/fastestQuiz/index.tsx @@ -6,7 +6,7 @@ import TopSection from './TopSection.tsx'; /** 선착순 퀴즈 설명 섹션 */ export default function FastestQuiz() { return ( -
+
diff --git a/packages/user/src/components/layout/LayoutFallback.tsx b/packages/user/src/components/layout/LayoutFallback.tsx deleted file mode 100644 index 84f282d4..00000000 --- a/packages/user/src/components/layout/LayoutFallback.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import DeferredWrapper from 'src/components/common/DeferredWrapper.tsx'; -import PendingContainer from 'src/components/common/PendingContainer.tsx'; - -export default function LayoutFallback() { - return ( - - - - ); -} diff --git a/packages/user/src/components/layout/GlobalFallback.tsx b/packages/user/src/components/layout/fallback/GlobalFallback.tsx similarity index 100% rename from packages/user/src/components/layout/GlobalFallback.tsx rename to packages/user/src/components/layout/fallback/GlobalFallback.tsx diff --git a/packages/user/src/components/layout/fallback/LayoutFallback.tsx b/packages/user/src/components/layout/fallback/LayoutFallback.tsx new file mode 100644 index 00000000..81b9e08b --- /dev/null +++ b/packages/user/src/components/layout/fallback/LayoutFallback.tsx @@ -0,0 +1,5 @@ +import PendingContainer from 'src/components/common/PendingContainer.tsx'; + +export default function LayoutFallback() { + return ; +} diff --git a/packages/user/src/components/layout/fallback/PageFallback.tsx b/packages/user/src/components/layout/fallback/PageFallback.tsx new file mode 100644 index 00000000..14aaa0df --- /dev/null +++ b/packages/user/src/components/layout/fallback/PageFallback.tsx @@ -0,0 +1,9 @@ +import PendingContainer from 'src/components/common/PendingContainer.tsx'; + +export default function PageFallback() { + return ( +
+ +
+ ); +} diff --git a/packages/user/src/components/layout/index.tsx b/packages/user/src/components/layout/index.tsx index ce5c4ebf..366f8158 100644 --- a/packages/user/src/components/layout/index.tsx +++ b/packages/user/src/components/layout/index.tsx @@ -1,4 +1,5 @@ import { Outlet } from 'react-router-dom'; +import InViewLoadSection from 'src/components/common/InViewLoadSection.tsx'; import useInitialize from 'src/hooks/useInitialize.ts'; import Banner from './banner/index.tsx'; import BodyContainer from './BodyContainer.tsx'; @@ -20,7 +21,7 @@ export default function Layout() {
-
+
diff --git a/packages/user/src/components/shared/modal/InfoStep.tsx b/packages/user/src/components/shared/modal/InfoStep.tsx index 4970f6f9..ac1e0f8f 100644 --- a/packages/user/src/components/shared/modal/InfoStep.tsx +++ b/packages/user/src/components/shared/modal/InfoStep.tsx @@ -3,7 +3,11 @@ import { PropsWithChildren } from 'react'; export default function InfoStep({ children }: PropsWithChildren) { return (
- modal + modal
{children}
); diff --git a/packages/user/src/pages/HomePage.tsx b/packages/user/src/pages/HomePage.tsx index 5d1075bc..ed8cdcc8 100644 --- a/packages/user/src/pages/HomePage.tsx +++ b/packages/user/src/pages/HomePage.tsx @@ -23,15 +23,17 @@ export default function HomePage() { return ( <> - component={EventPrizes} /> - component={EventSteps} /> + component={EventPrizes} className="h-[570px]" /> + component={EventSteps} className="h-[2650px]" /> {/* 배너 바로가기 기능 동작을 위해 view port load 하지 않음 */} - - - - component={QuizHint} /> - component={TeamsDescriptions} /> - component={EventGuidelines} /> +
+ + + +
+ component={QuizHint} className="h-[1320px]" /> + component={TeamsDescriptions} className="h-[1000px]" /> + component={EventGuidelines} className="h-[730px]" /> ); } diff --git a/packages/user/src/routes/router.tsx b/packages/user/src/routes/router.tsx index 74c27d54..29d8e1b5 100644 --- a/packages/user/src/routes/router.tsx +++ b/packages/user/src/routes/router.tsx @@ -1,7 +1,8 @@ import { lazy, Suspense } from 'react'; import { createBrowserRouter, Outlet, RouteObject } from 'react-router-dom'; -import GlobalFallback from 'src/components/layout/GlobalFallback.tsx'; -import LayoutFallback from 'src/components/layout/LayoutFallback.tsx'; +import GlobalFallback from 'src/components/layout/fallback/GlobalFallback.tsx'; +import LayoutFallback from 'src/components/layout/fallback/LayoutFallback.tsx'; +import PageFallback from 'src/components/layout/fallback/PageFallback.tsx'; import RoutePaths from 'src/constants/routePath.ts'; import { kakaoRedirectLoader, @@ -23,7 +24,7 @@ const routes: RouteObject[] = [ path: RoutePaths.Index, loader: rootLoader, errorElement: ( - }> + ), @@ -48,7 +49,7 @@ const routes: RouteObject[] = [ ), errorElement: ( - }> + ), @@ -56,7 +57,7 @@ const routes: RouteObject[] = [ { index: true, element: ( - }> + }> ), @@ -64,7 +65,7 @@ const routes: RouteObject[] = [ { path: RoutePaths.Event, element: ( - }> + }> ), diff --git a/packages/user/src/styles/index.css b/packages/user/src/styles/index.css index 63e9e233..c88df855 100644 --- a/packages/user/src/styles/index.css +++ b/packages/user/src/styles/index.css @@ -2,7 +2,7 @@ @tailwind components; @tailwind utilities; -/* font */ +/* font face */ @font-face { font-family: 'Tenada'; @@ -37,122 +37,111 @@ font-display: swap; } -/** default typography */ - -body { - @apply font-normal; -} - -h1 { - @apply text-heading-1 font-extrabold; -} - -h2 { - @apply text-heading-2 font-extrabold; -} - -h3 { - @apply text-heading-3 font-extrabold; -} - -h4 { - @apply text-heading-4 font-extrabold; -} - -h5 { - @apply text-heading-5 font-extrabold; -} - -h6 { - @apply text-heading-6 font-extrabold; -} +@layer base { + /** default typography */ -p { - @apply text-body-1 font-normal; -} + body { + @apply font-normal; + } -h1 > strong, -h2 > strong, -h3 > strong, -h4 > strong, -h5 > strong, -h6 > strong, -p > strong { - @apply text-primary; -} + h1, + h2, + h3, + h4, + h5, + h6 { + @apply font-extrabold; + } -/* scroll snap */ + h1 { + @apply text-heading-1; + } -main { - @apply scroll-my-15 snap-y snap-mandatory snap-normal overflow-auto; -} + h2 { + @apply text-heading-2; + } -/* 팀 소개 카드 리스트 */ + h3 { + @apply text-heading-3; + } -.group-description:hover > *:not(:hover), -.group-description:focus-within > *:not(:focus) { - @apply scale-100 opacity-40 transition-all duration-150; -} + h4 { + @apply text-heading-4; + } -.group-description > *:hover, -.group-description > *:focus { - @apply z-10 scale-110 opacity-100 transition-all duration-150; -} + h5 { + @apply text-heading-5; + } -/* 레이싱 unassigned 유형 카드 */ + h6 { + @apply text-heading-6; + } -.gradient-border { - @apply bg-gradient-border relative overflow-hidden p-1; -} + p { + @apply text-body-1 font-normal; + } -.gradient-border::before { - @apply bg-gradient-border absolute bottom-0 left-0 right-0 top-0 -z-10; - content: ''; - background-size: 200% 200%; - z-index: -1; -} + h1 > strong, + h2 > strong, + h3 > strong, + h4 > strong, + h5 > strong, + h6 > strong, + p > strong { + @apply text-primary; + } -/* shadcn ui */ + /* 기본 레이아웃 */ -@layer base { body { @apply bg-background text-foreground font-normal; } - * { - cursor: none; + /* 스크롤 스타일 */ + + main { + @apply scroll-my-15 snap-y snap-mandatory snap-normal overflow-auto; } - /* hover 상태에서 커서 스타일 */ - *:hover { + /* 커서 스타일링 */ + + * { cursor: none; } - /* active 상태에서 커서 스타일 */ - *:active { - cursor: none; + /* 스크롤바 숨김 */ + + *::-webkit-scrollbar { + display: none; } - /* focus 상태에서 커서 스타일 */ - *:focus { - cursor: none; + * { + scrollbar-width: none; } +} - /* disabled 상태에서 커서 스타일 */ - *:disabled { - cursor: none; +@layer components { + /* 팀 소개 카드 리스트 */ + .group-description:hover > *:not(:hover), + .group-description:focus-within > *:not(:focus) { + @apply scale-100 opacity-40 transition-all duration-150; } - /* selection 상태에서 커서 스타일 */ - ::selection { - cursor: none; + .group-description > *:hover, + .group-description > *:focus { + @apply z-10 scale-110 opacity-100 transition-all duration-150; } } -*::-webkit-scrollbar { - display: none; -} +@layer utilities { + .gradient-border { + @apply bg-gradient-border relative overflow-hidden p-1; + } -* { - scrollbar-width: none; + .gradient-border::before { + @apply bg-gradient-border absolute inset-0 -z-10; + content: ''; + background-size: 200% 200%; + z-index: -1; + } }