From db2ee8ac0b0dfc04276c94f0e8f2dd3d679917ea Mon Sep 17 00:00:00 2001
From: Yoon-kyungLee <yk2588@nate.com>
Date: Tue, 19 Mar 2024 12:22:02 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Chore:=20zIndex=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 co-kkiri/src/components/commons/UserPopover.tsx | 2 +-
 co-kkiri/src/components/modals/ModalLayout.tsx  | 4 ++--
 co-kkiri/src/styles/tokens.ts                   | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/co-kkiri/src/components/commons/UserPopover.tsx b/co-kkiri/src/components/commons/UserPopover.tsx
index 4746d6d2..effff1bc 100644
--- a/co-kkiri/src/components/commons/UserPopover.tsx
+++ b/co-kkiri/src/components/commons/UserPopover.tsx
@@ -36,7 +36,7 @@ const Container = styled.div<{ $isOpen: boolean }>`
   position: absolute;
   opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
   transition: opacity 0.2s ease-in-out;
-  ${zIndex.dropdown}
+  ${zIndex.popover}
 
   ${mediaQueries.desktop} {
     right: 4rem;
diff --git a/co-kkiri/src/components/modals/ModalLayout.tsx b/co-kkiri/src/components/modals/ModalLayout.tsx
index df9ceee7..d2680476 100644
--- a/co-kkiri/src/components/modals/ModalLayout.tsx
+++ b/co-kkiri/src/components/modals/ModalLayout.tsx
@@ -59,7 +59,7 @@ export default function ModalLayout({
   );
 }
 
-const { color, overlayBackDropColor, mediaQueries } = DESIGN_TOKEN;
+const { color, overlayBackDropColor, mediaQueries, zIndex } = DESIGN_TOKEN;
 
 interface ModalBoxProps {
   $mobileWidth?: number;
@@ -78,7 +78,7 @@ const Container = styled.div<{ $isSidebar?: boolean }>`
   width: 100%;
   height: 100vh;
   background-color: ${overlayBackDropColor};
-  z-index: 2;
+  ${zIndex.modal}
 `;
 
 const ModalBox = styled.div<ModalBoxProps>`
diff --git a/co-kkiri/src/styles/tokens.ts b/co-kkiri/src/styles/tokens.ts
index 777736bb..e39d6135 100644
--- a/co-kkiri/src/styles/tokens.ts
+++ b/co-kkiri/src/styles/tokens.ts
@@ -57,6 +57,7 @@ const DESIGN_TOKEN = {
     popover: "z-index: 60",
     default: "z-index: 1",
     toast: "z-index: 120",
+    modal: "z-index: 100",
   },
   boxShadow: {
     content: "0px 4px 20px rgba(0, 0, 0, 0.08)",

From ace902b79a12e0d48d5290aca552c5976a7a2526 Mon Sep 17 00:00:00 2001
From: Yoon-kyungLee <yk2588@nate.com>
Date: Tue, 19 Mar 2024 12:40:10 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Chore:=20zIndex=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/commons/Gnb/Gnb.styled.ts     | 13 ++++++++-----
 co-kkiri/src/components/commons/Gnb/index.tsx    | 16 ++++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts b/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts
index 948c932c..57b625a3 100644
--- a/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts
+++ b/co-kkiri/src/components/commons/Gnb/Gnb.styled.ts
@@ -4,13 +4,16 @@ import DESIGN_TOKEN from "@/styles/tokens";
 const { color, typography, mediaQueries, zIndex } = DESIGN_TOKEN;
 
 export const Container = styled.div`
+  position: sticky;
+  top: 0;
+  ${zIndex.sticky};
+`;
+
+export const Box = styled.div`
   background-color: ${color.white};
   width: 100%;
   display: flex;
   justify-content: space-between;
-  position: sticky;
-  top: 0;
-  ${zIndex.default};
 
   ${mediaQueries.desktop} {
     padding: 2.2rem 4rem;
@@ -23,13 +26,13 @@ export const Container = styled.div`
   }
 `;
 
-export const LeftGroupBox = styled.div`
+export const LeftGroupWrapper = styled.div`
   display: flex;
   gap: 2rem;
   align-items: center;
 `;
 
-export const RightGroupBox = styled.div`
+export const RightGroupWrapper = styled.div`
   display: flex;
   gap: 3rem;
   align-items: center;
diff --git a/co-kkiri/src/components/commons/Gnb/index.tsx b/co-kkiri/src/components/commons/Gnb/index.tsx
index 595ae199..7f46ffd9 100644
--- a/co-kkiri/src/components/commons/Gnb/index.tsx
+++ b/co-kkiri/src/components/commons/Gnb/index.tsx
@@ -32,17 +32,17 @@ export default function Gnb({ user, onSideBarClick }: GnbProps) {
   };
 
   return (
-    <div ref={ref}>
-      <S.Container>
-        <S.LeftGroupBox>
+    <S.Container ref={ref}>
+      <S.Box>
+        <S.LeftGroupWrapper>
           <button onClick={onSideBarClick}>
             <img src={ICONS.category.src} alt={ICONS.category.alt} />
           </button>
           <Link to={HOME_PATH}>
             <S.Logo src={IMAGES.logo.src} alt={IMAGES.logo.alt} />
           </Link>
-        </S.LeftGroupBox>
-        <S.RightGroupBox>
+        </S.LeftGroupWrapper>
+        <S.RightGroupWrapper>
           <Link to={POST_PATH}>
             <S.PostButton>스터디 모집하기</S.PostButton>
           </Link>
@@ -51,10 +51,10 @@ export default function Gnb({ user, onSideBarClick }: GnbProps) {
           ) : (
             <S.SignButton onClick={handleAuthModalOpen}>로그인/회원가입</S.SignButton>
           )}
-        </S.RightGroupBox>
-      </S.Container>
+        </S.RightGroupWrapper>
+      </S.Box>
       {isAuthModalOpen && <AuthModal onClick={handleAuthModalOpen} onClose={handleAuthModalOpen} />}
       <UserPopover isOpen={isOpen} handleSelectOption={handlePopoverOpen} />
-    </div>
+    </S.Container>
   );
 }

From f2b9a5bf6b6056a382b2ffdd5e8080fb11e7eadc Mon Sep 17 00:00:00 2001
From: Yoon-kyungLee <yk2588@nate.com>
Date: Tue, 19 Mar 2024 12:40:27 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Fix:=20key=20=EC=BD=98=EC=86=94=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 co-kkiri/src/components/commons/UserPopover.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/co-kkiri/src/components/commons/UserPopover.tsx b/co-kkiri/src/components/commons/UserPopover.tsx
index effff1bc..6619de9d 100644
--- a/co-kkiri/src/components/commons/UserPopover.tsx
+++ b/co-kkiri/src/components/commons/UserPopover.tsx
@@ -15,12 +15,11 @@ export default function UserPopover({ isOpen, handleSelectOption }: UserPopoverP
     <Container $isOpen={isOpen}>
       <Box>
         {popover.map((options) => (
-          <Link to={options.path}>
+          <Link to={options.path} key={options.option}>
             <Option
               onClick={() => {
                 handleSelectOption(options.option);
-              }}
-              key={options.option}>
+              }}>
               {options.option}
             </Option>
           </Link>