Merge: Feature -> Develop

각 Page별 navigate 설정
GDG-Hackathon-77ia · Nov 15, 2024 · e40d610 · e40d610
2 parents ed7719c + d1944ce
commit e40d610
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 21 deletions.
diff --git a/src/pages/CharacterPage/index.style.ts b/src/pages/CharacterPage/index.style.ts
@@ -22,19 +22,28 @@ export const Header = styled.div`
     align-items: center;
 `;
 
-export const Logo = styled.div`
+export const Logo = styled.button`
     width: 175px;
     height: 60px;
 
     background-color: var(--color-gray);
     border-radius: 15px;
+    border: 0;
+    outline: 0;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     font-size: var(--font-size-l);
     font-weight: bold;
+
+    &:focus {
+        outline: none;
+    }
+    &:hover {
+        cursor: pointer;
+    }
 `;
 
 export const CharacterItem = styled.div`

diff --git a/src/pages/CharacterPage/index.tsx b/src/pages/CharacterPage/index.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
+import { GrowBar1 } from "@/components/GrowBar1";
 import { IconButton } from "@/components/IconButton";
 import { PointButton } from "@/components/PointButton";
 import { Temp } from "@/components/Temp";
@@ -10,7 +11,6 @@ import { useGetPoint } from "@/hooks/CharacterPage/useGetPoint";
 import { useUpGradeExperience } from "@/hooks/CharacterPage/useUpGradeExperience";
 
 import * as Styles from "./index.style";
-import { GrowBar1 } from "@/components/GrowBar1";
 
 export const CharacterPage = () => {
     const navigate = useNavigate();
@@ -28,11 +28,14 @@ export const CharacterPage = () => {
         refetch(); // 경험치 및 캐릭터 데이터 다시 가져오기
         pointRefetch(); // 포인트 데이터 다시 가져오기
     };
+    const handleLogoClick = () => {
+        navigate("/main");
+    };
 
     return (
         <Styles.Container>
             <Styles.Header>
-                <Styles.Logo>Logo</Styles.Logo>
+                <Styles.Logo onClick={handleLogoClick}>Logo</Styles.Logo>
                 <IconButton variant="book" onClick={handleBookClick} />
             </Styles.Header>
 

diff --git a/src/pages/CheckEndPage/index.tsx b/src/pages/CheckEndPage/index.tsx
@@ -1,17 +1,23 @@
 import { useNavigate } from "react-router-dom";
+
+import { useMyPage } from "@/hooks/MyPage/useMyPage";
+
 import { Button } from "../../components/Button";
 import { PageBar } from "../../components/PageBar";
 import { Text } from "../../components/Text";
 import * as Styles from "./index.style";
-import { useMyPage } from "@/hooks/MyPage/useMyPage";
 
 export const CheckEndPage = () => {
     const { userData, loading } = useMyPage();
     const navi = useNavigate();
 
+    const handleBackArrow = () => {
+        navi("/mypage");
+    };
+
     return (
         <Styles.Container>
-            <PageBar pageName="문진표 작성" />
+            <PageBar pageName="문진표 작성" onClick={handleBackArrow} />
             <Styles.Wrapper>
                 <Styles.TextContainer>
                     <Text size="l" weight="normal" color="white">

diff --git a/src/pages/CheckPage/index.tsx b/src/pages/CheckPage/index.tsx
@@ -25,6 +25,10 @@ export const CheckPage = (): JSX.Element => {
     const [initialAnswers, setInitialAnswers] = useState<number[]>([]); // 초기 불러온 answer 상태
     const navi = useNavigate();
 
+    const handleBackArrow = () => {
+        navi("/mypage");
+    };
+
     useEffect(() => {
         // 불러온 데이터를 초기 상태로 설정
         const fetchInitialAnswers = async () => {
@@ -74,7 +78,7 @@ export const CheckPage = (): JSX.Element => {
     return (
         <Styles.Container>
             <Styles.FixedHeader>
-                <PageBar pageName="문진표 작성" />
+                <PageBar pageName="문진표 작성" onClick={handleBackArrow} />
             </Styles.FixedHeader>
 
             <Styles.QuestionsContainer>

diff --git a/src/pages/CheckStartPage/index.tsx b/src/pages/CheckStartPage/index.tsx
@@ -1,17 +1,23 @@
 import { useNavigate } from "react-router-dom";
+
+import { useMyPage } from "@/hooks/MyPage/useMyPage";
+
 import { Button } from "../../components/Button";
 import { PageBar } from "../../components/PageBar";
 import { Text } from "../../components/Text";
 import * as Styles from "./index.style";
-import { useMyPage } from "@/hooks/MyPage/useMyPage";
 
 export const CheckStartPage = () => {
     const { userData, loading } = useMyPage();
     const navi = useNavigate();
 
+    const handleBackArrow = () => {
+        navi("/mypage");
+    };
+
     return (
         <Styles.Container>
-            <PageBar pageName="문진표 작성" />
+            <PageBar pageName="문진표 작성" onClick={handleBackArrow} />
             <Styles.Wrapper>
                 <Styles.TextContainer>
                     <Text size="l" weight="normal" color="white">

diff --git a/src/pages/MainPage/index.style.ts b/src/pages/MainPage/index.style.ts
@@ -22,19 +22,28 @@ export const Header = styled.div`
     align-items: center;
 `;
 
-export const Logo = styled.div`
+export const Logo = styled.button`
     width: 175px;
     height: 60px;
 
     background-color: var(--color-gray);
     border-radius: 15px;
+    border: 0;
+    outline: 0;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     font-size: var(--font-size-l);
     font-weight: bold;
+
+    &:focus {
+        outline: none;
+    }
+    &:hover {
+        cursor: pointer;
+    }
 `;
 
 export const HeaderIcons = styled.div`

diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
@@ -37,6 +37,9 @@ export const MainPage = () => {
     const handleCharacterClick = () => {
         navigate("/character");
     };
+    const handleLogoClick = () => {
+        navigate("/main");
+    };
     const handlePopUp = useCallback(() => {
         setIsPopUpOpen((prev) => !prev);
     }, []);
@@ -52,7 +55,7 @@ export const MainPage = () => {
     return (
         <Styles.Container>
             <Styles.Header>
-                <Styles.Logo>Logo</Styles.Logo>
+                <Styles.Logo onClick={handleLogoClick}>Logo</Styles.Logo>
                 <Styles.HeaderIcons>
                     <IconButton variant="calendar" onClick={handleCalendarClick} />
                     <IconButton variant="user" onClick={handleUserClick} />

diff --git a/src/pages/MemoPage/index.tsx b/src/pages/MemoPage/index.tsx
@@ -1,4 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
 import { Button } from "../../components/Button";
 import { PageBar } from "../../components/PageBar";
 import * as Styles from "./index.style";
@@ -18,6 +20,7 @@ export const MemoPage = (): JSX.Element => {
     const [isPopUpOpen, setIsPopUpOpen] = useState(false);
     const inputRef = useRef<HTMLTextAreaElement | null>(null);
     const calendarRef = useRef<HTMLDivElement | null>(null);
+    const navigate = useNavigate();
 
     // 오늘 날짜를 문자열 형식으로 가져오기
     const today = new Date().toISOString().split("T")[0];
@@ -90,9 +93,13 @@ export const MemoPage = (): JSX.Element => {
 
     const daysInMonth = getDaysInMonth(currentYear, currentMonth);
 
+    const handleBackArrow = () => {
+        navigate("/main");
+    };
+
     return (
         <Styles.ScreenContainer>
-            <PageBar pageName="메모 보기" />
+            <PageBar pageName="메모 보기" onClick={handleBackArrow} />
             <Styles.UpWrapper>
                 <Styles.Header>
                     <Styles.SelectWrapper>
@@ -171,4 +178,4 @@ export const MemoPage = (): JSX.Element => {
             )}
         </Styles.ScreenContainer>
     );
-};
+};
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -1,15 +1,18 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+
+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";
 import { useMyPage } from "../../hooks/MyPage/useMyPage";
 import * as Styles from "./index.style";
 import { withdrawMember } from "@/apis/auth/member";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useSettingCharacter } from "@/hooks/CharacterSettingPage/useSettingCharacter";
-import { Button } from "@/components/Button";
 
 export const MyPage = () => {
     const { userData, loading } = useMyPage();
@@ -39,11 +42,15 @@ export const MyPage = () => {
         handlePopUp();
     }, [handleCharacterName, handlePopUp, refetchCharacter]);
 
+    const handleBackArrow = () => {
+        navi("/main");
+    };
+
     return (
         <Styles.Container>
-            <PageBar pageName="마이페이지" />
+            <PageBar pageName="마이페이지" onClick={handleBackArrow} />
             <Styles.ProfileContainer>
-                <CharacterBG width="150px" height="150px" imageUrl={Character} onClick={() => navi("/character")}/>
+                <CharacterBG width="150px" height="150px" imageUrl={Character} onClick={() => navi("/character")} />
                 <Styles.NameContainer>
                     <Text size="s" weight="bold">
                         ({name}) {/* name을 표시 */}
@@ -115,4 +122,4 @@ export const MyPage = () => {
             </Styles.TextContainer>
         </Styles.Container>
     );
-};
+};
diff --git a/src/pages/PointRecordPage/index.tsx b/src/pages/PointRecordPage/index.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from "react-router-dom";
+
 import { PointRecord } from "@/components/PointRecord";
 
 import { useGetPointRecord } from "@/hooks/PointRecordPage/useGetPointRecord";
@@ -8,11 +10,16 @@ import * as Styles from "./index.style";
 
 export const PointRecordPage = () => {
     const { data: recordList } = useGetPointRecord(); // data 배열을 recordList로 가져옴
+    const navigate = useNavigate();
+
+    const heandleBackArrow = () => {
+        navigate("/character");
+    };
 
     return (
         <Styles.Container>
             <Styles.FixedHeader>
-                <PageBar pageName="포인트 조회" />
+                <PageBar pageName="포인트 조회" onClick={heandleBackArrow} />
             </Styles.FixedHeader>
             <br />
             <Text size="l" weight="bold" color="black">

diff --git a/src/pages/RecordPage/index.tsx b/src/pages/RecordPage/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { Chat } from "@/components/Chat";
 import { PageBar } from "@/components/PageBar";
@@ -10,6 +11,7 @@ import * as Styles from "./index.style";
 export const RecordPage = () => {
     const [date, setDate] = useState(new Date());
     const [active, setActive] = useState(0);
+    const navigate = useNavigate();
 
     const handleTabClick = (index: number) => {
         setActive(index);
@@ -23,6 +25,10 @@ export const RecordPage = () => {
         setDate((prevDate) => new Date(prevDate.getTime() + 24 * 60 * 60 * 1000));
     };
 
+    const handleBackArrow = () => {
+        navigate("/mypage");
+    };
+
     const messages: { variant: "AI" | "USER"; text: string; spacing: number }[] = [
         { variant: "AI", text: "무엇을 도와드릴까요?", spacing: 5 },
         { variant: "USER", text: "안녕하세요", spacing: 25 },
@@ -35,7 +41,7 @@ export const RecordPage = () => {
     return (
         <Styles.Container>
             <Styles.FixedHeader>
-                <PageBar pageName="내 기록 보기" />
+                <PageBar pageName="내 기록 보기" onClick={handleBackArrow} />
             </Styles.FixedHeader>
 
             <Styles.DateContainer>

diff --git a/src/pages/WriteDiaryPage/index.tsx b/src/pages/WriteDiaryPage/index.tsx
@@ -25,10 +25,14 @@ export const WriteDiaryPage = () => {
         navigate("/main");
     };
 
+    const handleBackArrow = () => {
+        navigate("/main");
+    };
+
     return (
         <Styles.Container>
             <Styles.FixedHeader>
-                <PageBar pageName="일기 작성" />
+                <PageBar pageName="일기 작성" onClick={handleBackArrow} />
             </Styles.FixedHeader>
 
             <Styles.TextContainer>