Merge branch 'feature' into #137_1차-테스트-이슈수정

Author: dlwnsl

package-lock.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
+    "react-toastify": "^11.0.2",
     "redux": "^5.0.1"
   },
   "devDependencies": {

package.json

@@ -9,8 +9,6 @@
   background: none;
   padding: 0 16px;
 
-  font-size: 16px;
-  font-weight: 500;
   color: var(--gray);
 
   cursor: pointer;

public/images/img_landingimage1.svg

@@ -3,9 +3,7 @@
 }
 
 .text {
-  font-size: 16px;
   font-weight: 400;
-  color: var(--black-medium);
   cursor: pointer;
 }
 

public/images/img_textlogo.svg

@@ -11,6 +11,8 @@
 }
 
 .status {
+  max-width: 100%;
+
   font-size: 12px;
   line-height: 18px;
 }
@@ -48,6 +50,8 @@
 }
 
 .dot {
+  flex-shrink: 0;
+
   display: inline-block;
   width: 6px;
   height: 6px;

src/components/common/button/NavButton.module.css

@@ -1,6 +1,6 @@
 import styles from '@/components/common/dropdown/Dropdown.module.css';
 import useDropdown from '@/hooks/useDropdown';
-import { PropsWithChildren } from 'react';
+import { MouseEvent, PropsWithChildren, useEffect, useRef } from 'react';
 
 type Menu = {
   label: string;
@@ -18,14 +18,32 @@ function Dropdown({
   onMenuClick,
 }: PropsWithChildren<DropdownProps>) {
   const { isOpen, toggleDropdown, closeDropdown } = useDropdown();
+  const ref = useRef<HTMLDivElement | null>();
 
   const handleMenuClick = (value: string) => {
     onMenuClick(value);
     closeDropdown();
   };
 
+  useEffect(() => {
+    const handleClickOutside = (e: Event) => {
+      const target = e.target as HTMLDivElement;
+      if (ref.current && !ref.current.contains(target)) closeDropdown();
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [ref]);
+
   return (
-    <div className={styles.dropdown}>
+    <div
+      ref={ref}
+      className={styles.dropdown}
+      onClick={(e) => e.stopPropagation()}
+    >
       <button
         type="button"
         className={styles['btn-dropdown']}

src/components/common/checkbox/CheckBox.module.css

@@ -3,9 +3,7 @@
 }
 
 .title {
-  font-size: 16px;
   font-weight: 400;
-  color: var(--black-medium);
   cursor: pointer;
 }
 
@@ -22,7 +20,6 @@
   border-radius: 8px;
   width: 100%;
   height: 50px;
-  font-size: 16px;
   font-weight: 400;
 }
 

src/components/common/chip/Chip.module.css

@@ -7,10 +7,26 @@
   font-size: 18px;
   line-height: 26px;
   color: var(--black-medium);
-  margin-bottom: 8px;
 
   @media screen and (max-width: 743px) {
     font-size: 16px;
     line-height: 24px;
   }
 }
+
+.topic-box {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 8px;
+}
+
+.require {
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--violet);
+
+  @media screen and (max-width: 743px) {
+    font-size: 14px;
+  }
+}