refactor: z-index 상수화하기

woowacourse-teams · Nov 15, 2024 · 4de4145 · 4de4145
1 parent e07f41c
commit 4de4145
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 25 deletions.
diff --git a/frontend/src/components/common/calendar/Calendar.style.ts b/frontend/src/components/common/calendar/Calendar.style.ts
@@ -1,8 +1,9 @@
 import styled from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 export const CalendarContainer = styled.section`
   position: absolute;
-  z-index: 999;
+  z-index: ${Z_INDEX.dropdown};
 
   width: 400px;
   padding: 2rem;

diff --git a/frontend/src/components/common/dropdown/Dropdown.style.ts b/frontend/src/components/common/dropdown/Dropdown.style.ts
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const dropdown = keyframes`
   0% {
@@ -37,7 +38,7 @@ export const DropdownToggle = styled.button<{ $error: boolean }>`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  z-index: 1;
+  z-index: ${Z_INDEX.dropdown};
   right: 0;
 
   display: flex;

diff --git a/frontend/src/components/common/header/ProfileDropdown.style.ts b/frontend/src/components/common/header/ProfileDropdown.style.ts
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const dropdown = keyframes`
   0% {
@@ -17,7 +18,7 @@ export const ProfileContainer = styled.div`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  z-index: 1;
+  z-index: ${Z_INDEX.dropdown};
   right: 0;
 
   display: flex;

diff --git a/frontend/src/components/common/loading/Loading.style.ts b/frontend/src/components/common/loading/Loading.style.ts
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const moveUpDown = keyframes`
     0% {
@@ -19,7 +20,7 @@ export const LoadingContainer = styled.div`
 
   svg {
     position: absolute;
-    z-index: 1001;
+    z-index: ${Z_INDEX.loading};
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -32,7 +33,7 @@ export const LoadingContainer = styled.div`
 
 export const BackDrop = styled.div`
   position: fixed;
-  z-index: 1000;
+  z-index: ${Z_INDEX.loadingBackdrop};
   top: 0;
   left: 0;
 

diff --git a/frontend/src/components/common/timeDropdown/TimeDropdown.style.ts b/frontend/src/components/common/timeDropdown/TimeDropdown.style.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 //TimeDropdown
 export const TimeDropdownContainer = styled.section`
@@ -24,7 +25,7 @@ export const TimeDropdownToggle = styled.input<{ $error: boolean }>`
 //TimePicker
 export const TimePickerWrapper = styled.div`
   position: absolute;
-  z-index: 999;
+  z-index: ${Z_INDEX.dropdown};
 
   display: flex;
   gap: 1rem;

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -33,7 +33,6 @@ export const Overlay = styled.div`
   pointer-events: auto;
 
   position: absolute;
-  z-index: 10;
   top: 60px;
   left: 0;
 

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -61,20 +61,6 @@ const FeedbackCard = ({
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
 
       <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
-        {!feedbackCardData.isWrited && (
-          <S.Overlay>
-            <S.ButtonWrapper>
-              <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
-              <Button
-                variant={feedbackType === "develop" ? "primary" : "secondary"}
-                onClick={handleNavigateUserFeedbackPage}
-              >
-                피드백 작성하러가기
-              </Button>
-            </S.ButtonWrapper>
-          </S.Overlay>
-        )}
-
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -142,6 +128,20 @@ const FeedbackCard = ({
             </S.ButtonWrapper>
           )}
         </S.FeedbackContent>
+
+        {!feedbackCardData.isWrited && (
+          <S.Overlay>
+            <S.ButtonWrapper>
+              <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
+              <Button
+                variant={feedbackType === "develop" ? "primary" : "secondary"}
+                onClick={handleNavigateUserFeedbackPage}
+              >
+                피드백 작성하러가기
+              </Button>
+            </S.ButtonWrapper>
+          </S.Overlay>
+        )}
       </S.FeedbackCardContainer>
     </>
   );

diff --git a/frontend/src/components/roomDetailPage/controlButton/ControlButton.style.ts b/frontend/src/components/roomDetailPage/controlButton/ControlButton.style.ts
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const dropdown = keyframes`
   0% {
@@ -35,7 +36,7 @@ export const IconWrapper = styled.div<{ $isOpen: boolean }>`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  z-index: 1;
+  z-index: ${Z_INDEX.dropdown};
   right: 0;
 
   display: flex;

diff --git a/frontend/src/pages/callback/CallbackPage.style.ts b/frontend/src/pages/callback/CallbackPage.style.ts
@@ -41,7 +41,6 @@ export const LoadingContainer = styled.div`
   border-radius: 25px;
 
   p {
-    z-index: 999;
     font: ${({ theme }) => theme.TEXT.medium_bold};
     color: ${({ theme }) => theme.COLOR.grey4};
   }

diff --git a/frontend/src/pages/callback/CallbackPage.tsx b/frontend/src/pages/callback/CallbackPage.tsx
@@ -21,8 +21,8 @@ const CallbackPage = () => {
     <S.CallbackPageContainer>
       <S.Character src={thinkingCharacter} alt="로그인 중" />
       <S.LoadingContainer>
-        <p>로그인 중...</p>
         <S.LoadingBar />
+        <p>로그인 중...</p>
       </S.LoadingContainer>
     </S.CallbackPageContainer>
   );

diff --git a/frontend/src/pages/intro/IntroPage.style.ts b/frontend/src/pages/intro/IntroPage.style.ts
@@ -4,7 +4,6 @@ import media from "@/styles/media";
 // 헤더
 export const HeaderContainer = styled.header`
   position: fixed;
-  z-index: 100;
   top: 0;
   left: 20px;
 

diff --git a/frontend/src/styles/zIndex.ts b/frontend/src/styles/zIndex.ts
@@ -0,0 +1,10 @@
+export const Z_INDEX = {
+  base: 0,
+  dropdown: 100,
+  modalBackdrop: 200,
+  modal: 300,
+  tooltip: 400,
+  toast: 500,
+  loadingBackdrop: 900,
+  loading: 1000,
+};