diff --git a/src/app/api/sentence/route.ts b/src/app/api/sentence/route.ts
index 428981e5b43f72b2cfa9ddb69b20146907017233..2824adf500cc5c8f3fab23cf1fa7af83e9771cbf 100644
--- a/src/app/api/sentence/route.ts
+++ b/src/app/api/sentence/route.ts
@@ -8,7 +8,7 @@ export async function GET() {
} catch (error) {
console.error('Error in sentence API:', error);
return NextResponse.json(
- { error: '문장을 불러오는데 실패했습니다.' },
+ { result: false,error: '문장을 불러오는데 실패했습니다.' },
{ status: 500 }
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fbb825f2e247cb82554ad45132f841e319acedeb..1f0a691d6cd1a2e6351592dadb645842410bc4d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import * as S from '@/style/App.style';
// hooks
import { useBookInfo } from "@/hooks/useBookInfo";
+import { useDelayState } from "@/hooks/useDelayState";
// components
import ScrollArea from "@/components/ScrollArea";
@@ -16,6 +17,7 @@ import LinkButton from "@/components/LinkButton";
export default function Home() {
const [loading, error, book_info] = useBookInfo();
+ const delay_loading = useDelayState(loading, 200);
const [scroll, setScroll] = useState(0);
const button_link = useMemo(() => {
@@ -27,9 +29,15 @@ export default function Home() {
<S.StyledSection>
<S.TopLogo src="/ajoulib_logo_4x.png" alt="AjouLib Logo" />
<PageTitleArea scroll={scroll}/>
- <ScrollArea book_info={book_info} onScroll={setScroll}/>
- <LinkButton scroll={scroll} href={button_link}/>
- <StyleElements scroll={scroll}/>
+ <S.LoadingCharacterContainer className={!loading ? "fading" : ""}>
+ <S.LoadingCharacter src="/ajoulib_reading_chito.png" alt="AjouLib Chito"/>
+ </S.LoadingCharacterContainer>
+ <ScrollArea
+ book_info={!delay_loading ? book_info : null} onScroll={setScroll}
+ className={!loading ? "visibling" : ""}
+ />
+ <LinkButton scroll={scroll} href={button_link}/>
+ <StyleElements scroll={scroll}/>
</S.StyledSection>
</S.AppSection>
</S.GlobalSection>;
diff --git a/src/components/ScrollArea/index.tsx b/src/components/ScrollArea/index.tsx
index 27fccbc9a5c322af811e62b1519cca13dbde5d26..2d3d13d0c2ef6b3f2cfc4b68edf8f86b1cce7b2f 100644
--- a/src/components/ScrollArea/index.tsx
+++ b/src/components/ScrollArea/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, HTMLAttributes } from "react";
// style
import * as S from "./style";
@@ -15,9 +15,9 @@ import TextArea from "@/components/TextArea";
type ScrollAreaProps = {
book_info: BookInfo | null;
onScroll: (v: number) => void;
-}
+} & Omit<HTMLAttributes<HTMLTableSectionElement>, "onScroll">;
-const ScrollArea: React.FC<ScrollAreaProps> = ({ book_info, onScroll }) => {
+const ScrollArea: React.FC<ScrollAreaProps> = ({ book_info, onScroll, ...props }) => {
const [scroll, handleScroll] = useScrollState();
@@ -28,6 +28,7 @@ const ScrollArea: React.FC<ScrollAreaProps> = ({ book_info, onScroll }) => {
return <S.ScrollAreaWrap
onScroll={handleScroll}
style={{marginTop: `-${Math.min(scroll/2, 30)}%`}}
+ {...props}
>
<IntroArea topRate={scroll} info={book_info}/>
<TextArea topRate={scroll} sentence={book_info?.sentence || ""}/>
diff --git a/src/components/ScrollArea/style.ts b/src/components/ScrollArea/style.ts
index 3da2246029f4028a4b393f8418b8f12a0cb87850..2ff722c7737baa2b3b56ad7524b86f777a2c4962 100644
--- a/src/components/ScrollArea/style.ts
+++ b/src/components/ScrollArea/style.ts
@@ -8,6 +8,19 @@ export const ScrollAreaWrap = styled.section`
overflow-y: auto;
+ opacity: 0;
+ transform: scale(0.9);
+ transition: opacity .2s cubic-bezier(0, 1, 1, 1);
+
+ &.visibling {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
@media (min-height: 760px) {
margin-top: 0 !important;
}
diff --git a/src/hooks/useDelayState.ts b/src/hooks/useDelayState.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d30ad6301861f3cf2eace8dfeb2d926c5e23610
--- /dev/null
+++ b/src/hooks/useDelayState.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+import { useState } from "react";
+
+export const useDelayState = (initialState: any, delay: number) => {
+ const [state, setState] = useState(initialState);
+ useEffect(() => {
+ setTimeout(() => setState(initialState), delay);
+ }, [initialState, delay]);
+ return state;
+};
\ No newline at end of file
diff --git a/src/style/App.style.ts b/src/style/App.style.ts
index eeb6fc68f8dc201699155fb277a55b27e523cd26..0f4c23607e31fdb8fef346d358fcfe0e21f5645a 100644
--- a/src/style/App.style.ts
+++ b/src/style/App.style.ts
@@ -1,4 +1,5 @@
import styled from "styled-components";
+import { breathe, breathe_out } from "./App.transition";
export const GlobalSection = styled.section`
width: 100vw;
@@ -24,6 +25,45 @@ export const AppSection = styled.section`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+
+ overflow: hidden;
+
+ @media screen and (max-width: 650px) {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ }
+`;
+
+export const LoadingCharacterContainer = styled.section`
+ width: 12rem;
+ height: 12rem;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ opacity: 1;
+ transition: opacity .2s cubic-bezier(0, 1, 1, 1);
+
+ &.fading {
+ opacity: 0;
+ }
+`;
+
+export const LoadingCharacter = styled.img`
+ width: 12rem;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ animation: ${breathe} 1.5s cubic-bezier(0, 1, 1, 1) infinite;
+ transition: opacity 2s ease-in-out, animation 0.2s ease-out;
+
+ z-index: 1;
`;
export const StyledSection = styled.section`
diff --git a/src/style/App.transition.ts b/src/style/App.transition.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45537da41b96ce6ac25da5c637b9c1b21f6e982d
--- /dev/null
+++ b/src/style/App.transition.ts
@@ -0,0 +1,26 @@
+import { keyframes } from "styled-components";
+
+export const breathe = keyframes`
+ 0% {
+ transform: translate(-50%, -50%) scale(0.9);
+ opacity: 0.3;
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: translate(-50%, -50%) scale(0.9);
+ opacity: 0.3;
+ }
+`;
+
+export const breathe_out = keyframes`
+ 99% {
+ transform: translate(-50%, -50%) scale(0.9);
+ opacity: 0;
+ }
+ 100% {
+ display: none;
+ }
+`;
\ No newline at end of file