feat: add top nav to mypage

Qfeed-Dev · Aug 20, 2023 · 391a635 · 391a635
1 parent 4cbb0de
commit 391a635
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/src/app/(padding)/mypage/select/[id]/page.tsx b/src/app/(padding)/mypage/select/[id]/page.tsx
@@ -9,6 +9,7 @@ import { colors, repeatBackgroundColor } from "styles/theme";
 
 import { useAppDispatch } from "src/hooks/useReduxHooks";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
+import NavigationTopBack from "src/components/navigations/NavigationTopBack";
 
 export default function SelectDetailPage({
     params
@@ -25,33 +26,28 @@ export default function SelectDetailPage({
         );
     };
     return (
-        <>
-            <Flex direction="column" align="center" gap={40}>
-                <Title typo="Headline1b">
-                    애인에게 가장 잘 해줄 것 같은 사람은?
-                </Title>
-                <Flex direction="column" gap={16}>
-                    {[0, 1, 2, 3, 5].map((idx: number) => (
-                        <HintItem
-                            key={idx}
-                            idx={idx}
-                            onClick={handleClickShowHint}
-                        >
-                            <Person typo="Subtitle2b" color="light_qblack">
-                                02년생 여자
-                            </Person>
-                            <Message>아이콘</Message>
-                            <Hint width={"auto"}>
-                                <HintText typo="Subtitle2b" idx={idx}>
-                                    첫 번째 글자 ㅁ
-                                </HintText>
-                            </Hint>
-                        </HintItem>
-                    ))}
-                </Flex>
-                <BottomNavigation />
+        <Flex direction="column" align="center" gap={94}>
+            <NavigationTopBack rightIcon={<div>아이콘</div>} />
+            <Title typo="Headline1b">
+                애인에게 가장 잘 해줄 것 같은 사람은?
+            </Title>
+            <Flex direction="column" gap={16}>
+                {[0, 1, 2, 3, 5].map((idx: number) => (
+                    <HintItem key={idx} idx={idx} onClick={handleClickShowHint}>
+                        <Person typo="Subtitle2b" color="light_qblack">
+                            02년생 여자
+                        </Person>
+                        <Message>아이콘</Message>
+                        <Hint width={"auto"}>
+                            <HintText typo="Subtitle2b" idx={idx}>
+                                첫 번째 글자 ㅁ
+                            </HintText>
+                        </Hint>
+                    </HintItem>
+                ))}
             </Flex>
-        </>
+            <BottomNavigation />
+        </Flex>
     );
 }
 

diff --git a/src/components/navigations/NavigationTopBack.tsx b/src/components/navigations/NavigationTopBack.tsx
@@ -3,17 +3,21 @@ import styled from "styled-components";
 import Flex from "../common/Flex";
 import Text from "../common/Text";
 
+import { useRouter } from "next/navigation";
+
 export interface NavProps {
     title?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
 }
 
 const NavigationTopBack = ({ title, leftIcon, rightIcon }: NavProps) => {
+    const router = useRouter();
+
     return (
         <NavWrapper justify="space-between">
             <Flex width="auto" gap={8}>
-                <div>이전</div>
+                <div onClick={() => router.back()}>이전</div>
                 {title && <Text typo="Headline1b">{title}</Text>}
             </Flex>
             {rightIcon}