diff --git a/src/assets/IconButton/diary.png b/src/assets/IconButton/diary.png
new file mode 100644
index 0000000..9039be7
Binary files /dev/null and b/src/assets/IconButton/diary.png differ
diff --git a/src/assets/logo/level1.gif b/src/assets/logo/level1.gif
new file mode 100644
index 0000000..3240444
Binary files /dev/null and b/src/assets/logo/level1.gif differ
diff --git a/src/assets/logo/level2.gif b/src/assets/logo/level2.gif
new file mode 100644
index 0000000..50203f5
Binary files /dev/null and b/src/assets/logo/level2.gif differ
diff --git a/src/assets/logo/level3.gif b/src/assets/logo/level3.gif
new file mode 100644
index 0000000..e9b5551
Binary files /dev/null and b/src/assets/logo/level3.gif differ
diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
new file mode 100644
index 0000000..29f1117
Binary files /dev/null and b/src/assets/logo/logo.png differ
diff --git a/src/components/CharacterBG/index.style.ts b/src/components/CharacterBG/index.style.ts
index 7016475..55e514c 100644
--- a/src/components/CharacterBG/index.style.ts
+++ b/src/components/CharacterBG/index.style.ts
@@ -4,7 +4,7 @@ export const Container = styled.button<{ width: string; height: string }>`
width: ${(props) => props.width};
height: ${(props) => props.height};
aspect-ratio: 1 / 1;
- background-color: var(--color-lightgray);
+ background-color: var(--color-white);
border-radius: 50%;
box-shadow: 0px 0px 50px -8px var(--color-primary);
@@ -18,6 +18,6 @@ export const Container = styled.button<{ width: string; height: string }>`
`;
export const Character = styled.img`
- //width: 80%;
+ width: 85%;
height: auto;
`;
diff --git a/src/components/CharacterBG/index.tsx b/src/components/CharacterBG/index.tsx
index a5b2e3c..99e6a79 100644
--- a/src/components/CharacterBG/index.tsx
+++ b/src/components/CharacterBG/index.tsx
@@ -1,17 +1,27 @@
+import level1Gift from "@/assets/logo/level1.gif";
+import level2Gift from "@/assets/logo/level2.gif";
+import level3Gift from "@/assets/logo/level3.gif";
+
import * as Styles from "./index.style";
export interface CharacterBGProps {
width: string;
height: string;
- imageUrl: string;
onClick?: () => void;
+ level?: number;
}
-export const CharacterBG = ({ width, height, imageUrl, onClick }: CharacterBGProps) => {
+export const CharacterBG = ({ width, height, onClick, level }: CharacterBGProps) => {
+ const levelGifList: { [key: number]: string } = {
+ 1: level1Gift,
+ 2: level2Gift,
+ 3: level3Gift,
+ };
+
return (
-
+
);
};
diff --git a/src/components/IconButton/index.style.ts b/src/components/IconButton/index.style.ts
index 54b5e63..3c15db9 100644
--- a/src/components/IconButton/index.style.ts
+++ b/src/components/IconButton/index.style.ts
@@ -1,8 +1,8 @@
import styled from "@emotion/styled";
export const ButtonElement = styled.button<{ onClick?: () => void }>`
- width: 40px;
- height: 40px;
+ width: 35px;
+ height: 35px;
background-color: var(--color-white);
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index ecf8ca3..9f58aad 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -1,12 +1,13 @@
import bookIcon from "@/assets/IconButton/book.png";
import calendarIcon from "@/assets/IconButton/calendar.png";
import chatIcon from "@/assets/IconButton/chat.png";
+import diaryIcon from "@/assets/IconButton/diary.png";
import userIcon from "@/assets/IconButton/user.png";
import * as Styles from "./index.style";
export interface IconButtonProps {
- variant: "calendar" | "user" | "chat" | "book";
+ variant: "calendar" | "user" | "chat" | "book" | "diary";
onClick?: () => void;
}
@@ -16,6 +17,7 @@ export const IconButton = ({ variant = "book", onClick }: IconButtonProps) => {
user: userIcon,
chat: chatIcon,
book: bookIcon,
+ diary: diaryIcon,
};
return (
diff --git a/src/components/PageBar/index.style.ts b/src/components/PageBar/index.style.ts
index 37be91a..958e842 100644
--- a/src/components/PageBar/index.style.ts
+++ b/src/components/PageBar/index.style.ts
@@ -22,7 +22,6 @@ export const Arrow = styled.button`
width: 10px;
margin-left: 20px;
- background-image: url(${backArrow});
background-image: url(${backArrow});
background-size: contain;
background-repeat: no-repeat;
diff --git a/src/components/Temp/index.style.ts b/src/components/Temp/index.style.ts
index 6cc1b0c..056cfbd 100644
--- a/src/components/Temp/index.style.ts
+++ b/src/components/Temp/index.style.ts
@@ -2,11 +2,11 @@ import { TempProps } from ".";
import styled from "@emotion/styled";
-export const TempElement = styled.div`
+export const TempElement = styled.button`
width: ${(props) => props.width};
height: ${(props) => props.height};
- background-color: var(--color-gray);
+ background-color: var(--color-white);
border: 0;
border-radius: 15px;
@@ -15,3 +15,7 @@ export const TempElement = styled.div`
align-items: center;
justify-content: center;
`;
+
+export const TempImg = styled.img`
+ width: 100%;
+`;
diff --git a/src/components/Temp/index.tsx b/src/components/Temp/index.tsx
index 9358fce..aed3569 100644
--- a/src/components/Temp/index.tsx
+++ b/src/components/Temp/index.tsx
@@ -1,14 +1,25 @@
+import level1Gift from "@/assets/logo/level1.gif";
+import level2Gift from "@/assets/logo/level2.gif";
+import level3Gift from "@/assets/logo/level3.gif";
+
import * as Styles from "./index.style";
export interface TempProps {
width: string;
height: string;
+ level?: number;
}
export const Temp = (props: TempProps) => {
+ const levelGifList: { [key: number]: string } = {
+ 1: level1Gift,
+ 2: level2Gift,
+ 3: level3Gift,
+ };
+
return (
- 캐릭터
+
);
};
diff --git a/src/pages/CharacterPage/index.style.ts b/src/pages/CharacterPage/index.style.ts
index a9473c1..9b6cdce 100644
--- a/src/pages/CharacterPage/index.style.ts
+++ b/src/pages/CharacterPage/index.style.ts
@@ -1,5 +1,7 @@
import styled from "@emotion/styled";
+import logoImg from "@/assets/logo/logo.png";
+
export const Container = styled.div`
max-width: 440px;
height: 100vh;
@@ -22,10 +24,10 @@ export const Header = styled.div`
`;
export const Logo = styled.button`
- width: 175px;
+ width: 160px;
height: 60px;
- background-color: var(--color-gray);
+ background-color: var(--color-white);
border-radius: 15px;
border: 0;
outline: 0;
@@ -34,6 +36,11 @@ export const Logo = styled.button`
justify-content: center;
align-items: center;
+ background-image: url(${logoImg});
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+
font-size: var(--font-size-l);
font-weight: bold;
diff --git a/src/pages/CharacterPage/index.tsx b/src/pages/CharacterPage/index.tsx
index 05f6c6e..cd7c24b 100644
--- a/src/pages/CharacterPage/index.tsx
+++ b/src/pages/CharacterPage/index.tsx
@@ -35,7 +35,7 @@ export const CharacterPage = () => {
return (
- Logo
+
@@ -55,7 +55,7 @@ export const CharacterPage = () => {
3단계 입니다
)}
-
+
{name}
diff --git a/src/pages/MainPage/index.style.ts b/src/pages/MainPage/index.style.ts
index befe223..6a9c29b 100644
--- a/src/pages/MainPage/index.style.ts
+++ b/src/pages/MainPage/index.style.ts
@@ -1,5 +1,7 @@
import styled from "@emotion/styled";
+import logoImg from "@/assets/logo/logo.png";
+
export const Container = styled.div`
max-width: 400px;
height: 100vh;
@@ -23,10 +25,10 @@ export const Header = styled.div`
`;
export const Logo = styled.button`
- width: 175px;
+ width: 160px;
height: 60px;
- background-color: var(--color-gray);
+ background-color: var(--color-white);
border-radius: 15px;
border: 0;
outline: 0;
@@ -35,6 +37,11 @@ export const Logo = styled.button`
justify-content: center;
align-items: center;
+ background-image: url(${logoImg});
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+
font-size: var(--font-size-l);
font-weight: bold;
@@ -47,7 +54,7 @@ export const Logo = styled.button`
`;
export const HeaderIcons = styled.div`
- width: 35%;
+ width: 48%;
display: flex;
align-items: center;
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index 919639d..745786f 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -7,6 +7,7 @@ import { IconButton } from "@/components/IconButton";
import { Text } from "@/components/Text";
import { TextArea } from "@/components/TextArea";
+import { useGetCharacter } from "@/hooks/CharacterPage/useGetCharacter";
import { useGetQuestion } from "@/hooks/MainPage/useGetQuestion";
import { useGetUser } from "@/hooks/MainPage/useGetUser";
import { useWriteAnswer } from "@/hooks/MainPage/useWriteAnswer";
@@ -15,9 +16,10 @@ import * as Styles from "./index.style";
export const MainPage = () => {
const navigate = useNavigate();
- const { data: name } = useGetUser();
+ const { data: userName } = useGetUser();
const { id, question, AnsweredToday, answer, fetchData } = useGetQuestion();
const { handleWriteAnswer: writeAnswer, inputRef } = useWriteAnswer();
+ const { level } = useGetCharacter();
const [isPopUpOpen, setIsPopUpOpen] = useState(false);
@@ -38,6 +40,10 @@ export const MainPage = () => {
const handleLogoClick = () => {
navigate("/main");
};
+
+ const handleDiaryClick = () => {
+ navigate("/diary");
+ };
const handlePopUp = useCallback(() => {
if (AnsweredToday) return;
setIsPopUpOpen((prev) => !prev);
@@ -52,8 +58,9 @@ export const MainPage = () => {
return (
- Logo
+
+
@@ -61,10 +68,10 @@ export const MainPage = () => {
- {name ? name : "user"}님 기다렸어요!
+ {userName ? userName : "user"}님 기다렸어요!
-
+
TODAY - {today.getMonth() + 1}월 {today.getDate()}일
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index 33fdf6b..bdc79bd 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -6,7 +6,6 @@ import { Button } from "@/components/Button";
import { useGetCharacter } from "@/hooks/CharacterPage/useGetCharacter";
import { useSettingCharacter } from "@/hooks/CharacterSettingPage/useSettingCharacter";
-import Character from "../../assets/react.svg";
import { CharacterBG } from "../../components/CharacterBG";
import { PageBar } from "../../components/PageBar";
import { Text } from "../../components/Text";
@@ -16,7 +15,7 @@ import { withdrawMember } from "@/apis/auth/member";
export const MyPage = () => {
const { userData, loading } = useMyPage();
- const { name, refetch: refetchCharacter } = useGetCharacter(); // name과 refetchCharacter 가져오기
+ const { name, level, refetch: refetchCharacter } = useGetCharacter(); // name과 refetchCharacter 가져오기
const navi = useNavigate();
const inputRef = useRef(null);
const [isPopUpOpen, setIsPopUpOpen] = useState(false);
@@ -50,7 +49,7 @@ export const MyPage = () => {
- navi("/character")} />
+ navi("/character")} />
({name}) {/* name을 표시 */}
diff --git a/src/pages/WriteDiaryPage/index.tsx b/src/pages/WriteDiaryPage/index.tsx
index 801152b..1b67d96 100644
--- a/src/pages/WriteDiaryPage/index.tsx
+++ b/src/pages/WriteDiaryPage/index.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/Button";
import { Temp } from "@/components/Temp";
import { TextArea } from "@/components/TextArea";
+import { useGetCharacter } from "@/hooks/CharacterPage/useGetCharacter";
import { useWriteDiary } from "@/hooks/WriteDiaryPage/useWriteDiary";
import { PageBar } from "../../components/PageBar";
@@ -14,6 +15,7 @@ export const WriteDiaryPage = () => {
const navigate = useNavigate();
const { answer1Ref, answer2Ref, answer3Ref, handleWriteDiary } = useWriteDiary();
+ const { level } = useGetCharacter();
const handleSubmitClick = () => {
handleWriteDiary([
@@ -44,7 +46,7 @@ export const WriteDiaryPage = () => {
-
+