feat: 키워드 호버했을 때 삭제 아이콘 표시

woowacourse-teams · Nov 11, 2024 · 969ccad · 969ccad
1 parent 372385a
commit 969ccad
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 16 deletions.
diff --git a/frontend/src/@types/icon.ts b/frontend/src/@types/icon.ts
@@ -26,6 +26,7 @@ type IconKind =
   | "githubLogo"
   | "notificationBell"
   | "search"
-  | "add";
+  | "add"
+  | "delete";
 
 export default IconKind;
diff --git a/frontend/src/components/common/icon/Icon.tsx b/frontend/src/components/common/icon/Icon.tsx
@@ -17,6 +17,7 @@ import {
   MdCalendarMonth,
   MdCheck,
   MdClear,
+  MdDeleteOutline,
   MdExpandMore,
   MdInfoOutline,
   MdInsertLink,
@@ -63,6 +64,7 @@ const ICON: { [key in IconKind]: IconType } = {
   notificationBell: MdNotificationsNone,
   search: MdOutlineSearch,
   add: MdAdd,
+  delete: MdDeleteOutline,
 };
 
 interface IconProps {

diff --git a/frontend/src/components/common/keyword/Keyword.style.ts b/frontend/src/components/common/keyword/Keyword.style.ts
@@ -13,6 +13,8 @@ export const KeywordLabelContainer = styled.div`
 `;
 
 export const KeywordButton = styled.button`
+  position: relative;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,4 +30,24 @@ export const KeywordButton = styled.button`
   background-color: ${({ theme }) => theme.COLOR.grey0};
   border: 1px solid ${({ theme }) => theme.COLOR.grey0};
   border-radius: 15px;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: ${({ theme }) => theme.COLOR.white};
+
+    opacity: 0;
+  }
+
+  &:hover {
+    opacity: 0.5;
+    background-color: ${({ theme }) => theme.COLOR.grey3};
+  }
+
+  &:hover svg {
+    opacity: 1;
+  }
 `;
diff --git a/frontend/src/components/common/keyword/Keyword.tsx b/frontend/src/components/common/keyword/Keyword.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useState } from "react";
+import Icon from "@/components/common/icon/Icon";
 import { Input } from "@/components/common/input/Input";
 import * as S from "@/components/common/keyword/Keyword.style";
 
@@ -45,6 +46,7 @@ const Keyword = ({ currentKeywords, onKeywordsChange, error }: KeywordProps) =>
               title="키워드를 클릭하면 삭제돼요"
             >
               {keyword}
+              <Icon kind="delete" size="2.2rem" />
             </S.KeywordButton>
           ))}
         </S.KeywordLabelContainer>

diff --git a/frontend/src/components/roomForm/RoomFormLayout.style.ts b/frontend/src/components/roomForm/RoomFormLayout.style.ts
@@ -26,7 +26,7 @@ export const RowContainer = styled.div`
 
   ${media.large`
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
   `}
 `;
 
@@ -39,6 +39,10 @@ export const ContentLabel = styled.span`
     font: ${({ theme }) => theme.TEXT.semiSmall};
     color: ${({ theme }) => theme.COLOR.error};
   }
+
+  ${media.large`
+    line-height: 30px;
+  `}
 `;
 
 export const ContentInput = styled.div`

diff --git a/frontend/src/config/serverUrl.ts b/frontend/src/config/serverUrl.ts
@@ -7,7 +7,9 @@ const getServerUrl = () => {
   if (hostType === "release") {
     return "https://api.code-review-area.com";
   }
-  return "http://localhost:8080";
+  return "https://api.code-review-area.com";
+
+  // return "http://localhost:8080";
 };
 
 export const serverUrl = getServerUrl();
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -15,7 +15,7 @@ const enableMocking = async () => {
     return;
   }
   const { worker } = await import("./mocks/browser");
-  return worker.start();
+  // return worker.start();
 };
 
 const queryClient = new QueryClient({
@@ -32,17 +32,17 @@ const queryClient = new QueryClient({
 
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-    <React.StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <ToastProvider>
-            <GlobalStyles />
-            <Toast />
-            <RouterProvider router={router} />
-          </ToastProvider>
-        </ThemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    </React.StrictMode>,
+    // <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <ToastProvider>
+          <GlobalStyles />
+          <Toast />
+          <RouterProvider router={router} />
+        </ToastProvider>
+      </ThemeProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>,
+    // </React.StrictMode>,
   );
 });