refactor: 상품 상세 페이지 Header 컴포넌트 생성 (#171)

- ProductDetailMain에 있던 Header를 분리

fe/src/components/ProductDetail/ProductDetailHeader/index.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ICON_NAME } from '@constants/iconName';
+
+import Icon from '@components/common/Icon';
+import * as S from './style';
+
+const ProductDetailHeader = () => {
+  const navigate = useNavigate();
+  return (
+    <S.Header>
+      <button onClick={() => navigate(-1)}>
+        <Icon name={ICON_NAME.CHEVRON_LEFT} />
+      </button>
+      <Icon name={ICON_NAME.ELLIPSIS} />
+    </S.Header>
+  );
+};
+
+export default ProductDetailHeader;

fe/src/components/ProductDetail/ProductDetailHeader/style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+
+  width: 100%;
+  height: 44px;
+  padding: 16px;
+`;
+
+export { Header };

fe/src/components/ProductDetail/ProductDetailMain/index.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { ICON_NAME } from '@constants/index';
 import { getTextWithTimeStamp } from '@utils/index';
@@ -35,17 +34,8 @@ const ProductDetailMain = ({
 }: ProductDetailMainProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const navigate = useNavigate();
-
   return (
     <>
-      <S.Header>
-        <button onClick={() => navigate(-1)}>
-          <Icon name={ICON_NAME.CHEVRON_LEFT} />
-        </button>
-        <Icon name={ICON_NAME.ELLIPSIS} />
-      </S.Header>
-
       <S.Product>
         <S.ProductImgListLayout>
           <S.ProductImgList>

fe/src/components/ProductDetail/ProductDetailMain/style.ts

@@ -2,16 +2,6 @@ import styled, { css } from 'styled-components';
 
 import Button from '@components/common/Button';
 
-const Header = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: fixed;
-
-  width: 100%;
-  height: 44px;
-  padding: 16px;
-`;
 const Product = styled.section`
   overflow-y: scroll;
 
@@ -186,7 +176,6 @@ const ChattingDetailButton = styled(Button)`
 `;
 
 export {
-  Header,
   Product,
   ProductInfo,
   ProductImgListLayout,

fe/src/pages/ProductDetail/index.tsx

@@ -5,6 +5,7 @@ import { REQUEST_URL } from '@constants/index';
 
 import useFetch, { REQUEST_METHOD } from '@hooks/useFetch';
 
+import ProductDetailHeader from '@components/ProductDetail/ProductDetailHeader';
 import ProductDetailMain from '@components/ProductDetail/ProductDetailMain';
 import ProductDetailToolBar from '@components/ProductDetail/ProductDetailToolBar';
 
@@ -107,6 +108,7 @@ const ProductDetail = () => {
       {responseState === 'LOADING' && <div>loading</div>}
       {responseState === 'SUCCESS' && postData && (
         <>
+          <ProductDetailHeader />
           <ProductDetailMain {...postData} interestCount={interestCount} />
           <ProductDetailToolBar
             isInterested={isInterested}