From 8a3180cc6b38ac8ede235f02f692d7cbd63c82c4 Mon Sep 17 00:00:00 2001
From: Chaejung Kim <whenucan35@gmail.com>
Date: Tue, 24 Oct 2023 22:44:32 +0900
Subject: [PATCH] style: header zindex (#109)

---
 src/components/common/Header.tsx             |  2 +-
 src/components/common/HeaderWithButton.tsx   |  2 ++
 src/components/provider/ProviderGiftList.tsx | 25 ++++++++++++--------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index c8bb735..62e7c62 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -18,7 +18,7 @@ const LogoWrapper = styled.header`
   position: fixed;
   top: 0px;
   background: ${COLOR.WHITE};
-  z-index: 1;
+  z-index: 0.5;
 `;
 
 export default Header;
diff --git a/src/components/common/HeaderWithButton.tsx b/src/components/common/HeaderWithButton.tsx
index 9d4b303..9944acc 100644
--- a/src/components/common/HeaderWithButton.tsx
+++ b/src/components/common/HeaderWithButton.tsx
@@ -41,6 +41,8 @@ const LogoWrapper = styled.header`
   padding: 1rem 12rem;
   background: ${COLOR.WHITE};
   z-index: 1;
+  position: fixed;
+  top: 0px;
 `;
 
 const IconButton = styled.button`
diff --git a/src/components/provider/ProviderGiftList.tsx b/src/components/provider/ProviderGiftList.tsx
index 42fc01d..a36abe7 100644
--- a/src/components/provider/ProviderGiftList.tsx
+++ b/src/components/provider/ProviderGiftList.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState } from "react";
+import { useState } from "react";
 import List from "components/common/List";
-import { GiftList } from "types/giftList.type";
 import EditGiftModal from "./EditGiftModal";
-// import giftList from "data/giftData";
 import { useParams } from "react-router-dom";
 import useGift from "hooks/queries/useGift";
+import styled from "styled-components";
 
 export default function ProviderGiftList() {
   const { targetId } = useParams();
@@ -27,13 +26,15 @@ export default function ProviderGiftList() {
   return (
     <>
       {data && (
-        <List
-          giftList={data.giftList}
-          couponList={data.couponList}
-          type="editable"
-          onClickClose={handleDelete}
-          onClickEdit={handleEdit}
-        />
+        <ListWrapper>
+          <List
+            giftList={data.giftList}
+            couponList={data.couponList}
+            type="editable"
+            onClickClose={handleDelete}
+            onClickEdit={handleEdit}
+          />
+        </ListWrapper>
       )}
       {data && editedGiftId && (
         <EditGiftModal
@@ -45,3 +46,7 @@ export default function ProviderGiftList() {
     </>
   );
 }
+
+const ListWrapper = styled.div`
+  padding-bottom: 20rem;
+`;