TEAM-ALOM · Anhye0n · Nov 5, 2024 · Oct 31, 2024 · Oct 31, 2024 · Oct 31, 2024
diff --git a/index.html b/index.html
@@ -1,10 +1,28 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- Preconnect and DNS Prefetch for Faster Font Loading -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+
+    <!-- Google Fonts: Roboto, Noto Sans KR with Display Swap -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto&family=Noto+Sans+KR&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Pretendard via JSDelivr CDN -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>세모 - 세종대의 모든 것</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@tanstack/react-query-devtools": "^5.59.8",
     "axios": "^1.7.7",
     "jotai": "^2.10.0",
+    "overlay-kit": "^1.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

diff --git a/public/images/image.jpg b/public/images/image.jpg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,20 @@
+import { RouterProvider } from 'react-router-dom';
+import { ReactOverlayProvider } from './configs/react/providers/OverlayProvider';
+import { QueryProvider } from './configs/react/providers/QueryProvider';
+import { routes } from './pages/routes';
+import { SemoGlobalStyles } from './ui/styles/SemoGlobalStyles';
+import { SemoThemeProvider } from './ui/styles/SemoThemeProvider';
+
 function App() {
   return (
-    <div className='App'>
-      <h1>Hello World</h1>
-    </div>
+    <ReactOverlayProvider>
+      <QueryProvider>
+        <RouterProvider router={routes} />
+        <SemoThemeProvider>
+          <SemoGlobalStyles />
+        </SemoThemeProvider>
+      </QueryProvider>
+    </ReactOverlayProvider>
   );
 }
 

diff --git a/src/configs/react/libs/ReactToastify.tsx b/src/configs/react/libs/ReactToastify.tsx
diff --git a/src/configs/react/libs/overlay-kit.ts b/src/configs/react/libs/overlay-kit.ts
@@ -0,0 +1,3 @@
+import { overlay } from 'overlay-kit';
+
+export const overlayKit = overlay;
diff --git a/src/configs/react/providers/OverlayProvider.tsx b/src/configs/react/providers/OverlayProvider.tsx
@@ -0,0 +1,9 @@
+import { OverlayProvider } from 'overlay-kit';
+
+export const ReactOverlayProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <OverlayProvider>{children}</OverlayProvider>;
+};
diff --git a/src/configs/react/providers/QueryProvider.tsx b/src/configs/react/providers/QueryProvider.tsx
@@ -5,10 +5,6 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import {
-  SpecificHttpException,
-  UnauthorizedException,
-} from '@semo-client/configs/http-client/httpErrors';
 
 export const QueryProvider = ({ children }: { children: ReactNode }) => {
   const queryClient = useRef(
@@ -24,14 +20,7 @@ export const QueryProvider = ({ children }: { children: ReactNode }) => {
         },
       },
       queryCache: new QueryCache({
-        onError: (error: unknown) => {
-          if (error instanceof UnauthorizedException) {
-            return;
-          }
-          if (error instanceof SpecificHttpException) {
-            return;
-          }
-        },
+        onError: () => {},
       }),
     }),
   );

diff --git a/src/features/background-image/model/backgroundImages.ts b/src/features/background-image/model/backgroundImages.ts
@@ -0,0 +1,2 @@
+export const FALLBACK_BACKGROUND_URL = 'images/image.jpg';
+export const backgroundImagePaths: string[] = ['images/image.jpg'];
diff --git a/src/features/background-image/service/fetchImageWithFallback.ts b/src/features/background-image/service/fetchImageWithFallback.ts
@@ -0,0 +1,16 @@
+interface FetchImageWithFallbackParams {
+  imageUrl: string;
+  onSuccess: () => void;
+  onError: () => void;
+}
+
+export const fetchImageWithFallback = ({
+  imageUrl,
+  onSuccess,
+  onError,
+}: FetchImageWithFallbackParams) => {
+  const img = new Image();
+  img.src = imageUrl;
+  img.onload = onSuccess;
+  img.onerror = onError;
+};
diff --git a/src/features/background-image/service/getRandomImageUrl.ts b/src/features/background-image/service/getRandomImageUrl.ts
@@ -0,0 +1,7 @@
+import { backgroundImagePaths } from '../model/backgroundImages';
+
+export const getRandomImageUrl = () => {
+  return backgroundImagePaths[
+    Math.floor(Math.random() * backgroundImagePaths.length)
+  ];
+};
diff --git a/src/features/background-image/ui/components/BackgroundImageView.tsx b/src/features/background-image/ui/components/BackgroundImageView.tsx
@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+import { fadeIn } from '@semo-client/ui/styles/keyframes/fades';
+import { useBackgroundImageLoader } from '../hooks/useBackgroundImageLoader';
+
+export const BackgroundImageView = () => {
+  const { backgroundImageUrl, isImageReady } = useBackgroundImageLoader();
+
+  return (
+    <>
+      <FullScreenBackground
+        imageUrl={backgroundImageUrl}
+        isImageReady={isImageReady}
+      >
+        <Overlay />
+      </FullScreenBackground>
+    </>
+  );
+};
+
+const FullScreenBackground = styled.div<{
+  imageUrl: string;
+  isImageReady: boolean;
+}>`
+  width: 100vw;
+  height: 100vh;
+
+  background-image: ${({ imageUrl }) => `url(${imageUrl})`};
+  opacity: ${({ isImageReady }) => (isImageReady ? 1 : 0)};
+
+  ${({ isImageReady }) =>
+    isImageReady &&
+    css`
+      animation: ${fadeIn} 0.35s linear;
+    `};
+
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+`;
+
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
diff --git a/src/features/background-image/ui/hooks/useBackgroundImageLoader.ts b/src/features/background-image/ui/hooks/useBackgroundImageLoader.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { FALLBACK_BACKGROUND_URL } from '../../model/backgroundImages';
+import { fetchImageWithFallback } from '../../service/fetchImageWithFallback';
+import { getRandomImageUrl } from '../../service/getRandomImageUrl';
+
+export const useBackgroundImageLoader = () => {
+  const [backgroundImageUrl, setBackgroundImageUrl] = useState<string>('');
+  const [isImageReady, setIsImageReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    const imageUrl = getRandomImageUrl();
+    setBackgroundImageUrl(imageUrl);
+
+    fetchImageWithFallback({
+      imageUrl,
+      onSuccess: () => setIsImageReady(true),
+      onError: () => {
+        setBackgroundImageUrl(FALLBACK_BACKGROUND_URL);
+        setIsImageReady(true);
+      },
+    });
+  }, []);
+
+  return { backgroundImageUrl, isImageReady };
+};
diff --git a/src/features/clock/model/greetingMessageTemplates.ts b/src/features/clock/model/greetingMessageTemplates.ts
@@ -0,0 +1,5 @@
+export const greetingMessageTemplates = [
+  '길동 님은 잠 안 자시나요? A+ 자신 있으시겠죠? 😊',
+  '님! 오늘도 즐코하세요 😊',
+  '님! 오늘도 화이팅 😊',
+];
diff --git a/src/features/clock/service/formatDate.ts b/src/features/clock/service/formatDate.ts
@@ -0,0 +1,11 @@
+export const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  const weekday = new Intl.DateTimeFormat('ko-KR', { weekday: 'short' }).format(
+    date,
+  );
+
+  return `${year}년 ${month}월 ${day}일 (${weekday})`;
+};
diff --git a/src/features/clock/service/formatTime.ts b/src/features/clock/service/formatTime.ts
@@ -0,0 +1,7 @@
+export const formatTime = (date: Date): string => {
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${hours} ${minutes} ${seconds}`;
+};
diff --git a/src/features/clock/service/getRadomGreetingMessage.ts b/src/features/clock/service/getRadomGreetingMessage.ts
@@ -0,0 +1,7 @@
+import { greetingMessageTemplates } from '../model/greetingMessageTemplates';
+
+export const getRandomGreetingMessage = () => {
+  return greetingMessageTemplates[
+    Math.floor(Math.random() * greetingMessageTemplates.length)
+  ];
+};
diff --git a/src/features/clock/ui/components/Clock.tsx b/src/features/clock/ui/components/Clock.tsx
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { formatDate } from '../../service/formatDate';
+import { formatTime } from '../../service/formatTime';
+import { useTimeTick } from '../hooks/useTimeTick';
+import { GreetingMessage } from './GreetingMessage';
+
+export const Clock = () => {
+  const { time } = useTimeTick();
+
+  return (
+    <ClockContainer>
+      <DateDisplay>{formatDate(time)}</DateDisplay>
+      <TimeDisplay>{formatTime(time)}</TimeDisplay>
+      <GreetingMessage />
+    </ClockContainer>
+  );
+};
+
+const ClockContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  margin: 88px auto 56px;
+`;
+
+const DateDisplay = styled.div`
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+`;
+
+const TimeDisplay = styled.div`
+  width: 700px;
+  text-align: center;
+  font-size: 160px;
+  font-weight: 100;
+  line-height: 214.8px;
+  color: #ffffff;
+`;
diff --git a/src/features/clock/ui/components/GreetingMessage.tsx b/src/features/clock/ui/components/GreetingMessage.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { useGreetingMessage } from '../hooks/useGreetingMessage';
+
+export const GreetingMessage = () => {
+  const { greetingMessage } = useGreetingMessage();
+  return <StyledMessage>{greetingMessage}</StyledMessage>;
+};
+
+const StyledMessage = styled.div`
+  font-size: 24px;
+  color: #fff;
+  font-weight: 400;
+`;
diff --git a/src/features/clock/ui/hooks/useGreetingMessage.ts b/src/features/clock/ui/hooks/useGreetingMessage.ts
@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+import { getRandomGreetingMessage } from '../../service/getRadomGreetingMessage';
+
+export const useGreetingMessage = () => {
+  const greetringMessageRef = useRef(getRandomGreetingMessage());
+
+  return {
+    greetingMessage: greetringMessageRef.current,
+  };
+};
diff --git a/src/features/clock/ui/hooks/useTimeTick.tsx b/src/features/clock/ui/hooks/useTimeTick.tsx
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export const useTimeTick = () => {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return { time };
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { overlay } from 'overlay-kit';

		export const overlayKit = overlay;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const FALLBACK_BACKGROUND_URL = 'images/image.jpg';
		export const backgroundImagePaths: string[] = ['images/image.jpg'];