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 = () => { - +