Merge pull request #104 from GDG-Hackathon-77ia/feature#101

로고, 메인 캐릭터 추가

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;
 `;

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 (
         <Styles.Container width={width} height={height} onClick={onClick}>
-            <Styles.Character src={imageUrl} alt="character" />
+            <Styles.Character src={levelGifList[level ?? 1]} alt="character" />
         </Styles.Container>
     );
 };

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);
 

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 (

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;

src/components/Temp/index.style.ts

@@ -2,11 +2,11 @@ import { TempProps } from ".";
 
 import styled from "@emotion/styled";
 
-export const TempElement = styled.div<TempProps>`
+export const TempElement = styled.button<TempProps>`
     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<TempProps>`
     align-items: center;
     justify-content: center;
 `;
+
+export const TempImg = styled.img`
+    width: 100%;
+`;

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 (
         <Styles.TempElement width={props.width} height={props.height}>
-            캐릭터
+            <Styles.TempImg src={levelGifList[props.level ?? 1]} alt="temp" />
         </Styles.TempElement>
     );
 };

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;
 

src/pages/CharacterPage/index.tsx

@@ -35,7 +35,7 @@ export const CharacterPage = () => {
     return (
         <Styles.Container>
             <Styles.Header>
-                <Styles.Logo onClick={handleLogoClick}>Logo</Styles.Logo>
+                <Styles.Logo onClick={handleLogoClick}></Styles.Logo>
                 <IconButton variant="book" onClick={handleBookClick} />
             </Styles.Header>
 
@@ -55,7 +55,7 @@ export const CharacterPage = () => {
                         3단계 입니다
                     </Text>
                 )}
-                <Temp width="300px" height="270px" />
+                <Temp width="300px" height="270px" level={level} />
                 <Text size="l" color="black" weight="bold">
                     {name}
                 </Text>

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;

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,19 +58,20 @@ export const MainPage = () => {
     return (
         <Styles.Container>
             <Styles.Header>
-                <Styles.Logo onClick={handleLogoClick}>Logo</Styles.Logo>
+                <Styles.Logo onClick={handleLogoClick}></Styles.Logo>
                 <Styles.HeaderIcons>
+                    <IconButton variant="diary" onClick={handleDiaryClick} />
                     <IconButton variant="calendar" onClick={handleCalendarClick} />
                     <IconButton variant="user" onClick={handleUserClick} />
                     <IconButton variant="chat" onClick={handleChatClick} />
                 </Styles.HeaderIcons>
             </Styles.Header>
             <Styles.Header>
                 <Text size="l" color="black" weight="bold">
-                    {name ? name : "user"}님 기다렸어요!
+                    {userName ? userName : "user"}님 기다렸어요!
                 </Text>
             </Styles.Header>
-            <CharacterBG width="350px" height="350px" imageUrl="" onClick={handleCharacterClick}></CharacterBG>
+            <CharacterBG width="350px" height="350px" onClick={handleCharacterClick} level={level}></CharacterBG>
             <Styles.QContainer onClick={handlePopUp}>
                 <Text size="s" color="gray" weight="normal">
                     TODAY - {today.getMonth() + 1}월 {today.getDate()}일

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<HTMLInputElement | null>(null);
     const [isPopUpOpen, setIsPopUpOpen] = useState(false);
@@ -50,7 +49,7 @@ export const MyPage = () => {
         <Styles.Container>
             <PageBar pageName="마이페이지" onClick={handleBackArrow} />
             <Styles.ProfileContainer>
-                <CharacterBG width="150px" height="150px" imageUrl={Character} onClick={() => navi("/character")} />
+                <CharacterBG width="150px" height="150px" level={level} onClick={() => navi("/character")} />
                 <Styles.NameContainer>
                     <Text size="s" weight="bold">
                         ({name}) {/* name을 표시 */}

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 = () => {
                 </Text>
             </Styles.TextContainer>
 
-            <Temp width="200px" height="180px"></Temp>
+            <Temp width="200px" height="180px" level={level}></Temp>
 
             <Styles.QContainer>
                 <Text size="m" weight="bold" color="black">