Merge pull request #225 from part3-4team-Taskify/minji

[Fix, Refactor] signup: 중복 이메일 가입 에러 토스트 처리 / InvitedDashboard: 컴포넌트 깜빡임 fix

Author: ozen0718

src/components/gnb/MemberListMenu.tsx

@@ -24,7 +24,7 @@ const MemberListMenu: React.FC<MemberListMenuProps> = ({
       ref={ref}
       className={clsx(
         "absolute top-full right-0 w-[140px] sm:w-[190px] z-50",
-        "bg-white border border-[var(--color-gray3)] shadow",
+        "bg-white border border-[var(--color-gray3)] rounded-lg shadow",
         "transition-all duration-200 ease-out",
         isListOpen
           ? "opacity-100 translate-y-0"

src/components/gnb/UserMenu.tsx

@@ -16,7 +16,7 @@ const dropdownButtonStyles = clsx(
   "flex justify-center md:justify-start items-center",
   "w-full px-3 py-3 gap-3",
   "text-sm lg:text-base text-black3",
-  "hover:text-[var(--primary)] hover:bg-[#f9f9f9] cursor-pointer"
+  "hover:text-[var(--primary)] hover:bg-[var(--color-violet8)] cursor-pointer"
 );
 
 const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
@@ -38,7 +38,7 @@ const UserMenu: React.FC<UserMenuProps> = ({ isMenuOpen, setIsMenuOpen }) => {
       ref={ref}
       className={clsx(
         "absolute top-full right-0 w-full z-50",
-        "bg-white border border-[var(--color-gray3)] shadow",
+        "bg-white border border-[var(--color-gray3)] rounded-lg shadow",
         "transition-all duration-200 ease-out",
         isMenuOpen
           ? "opacity-100 translate-y-0"

src/components/landing/Section1.tsx

@@ -50,7 +50,7 @@ export default function Section1() {
       {/* CTA 버튼들 */}
       <div
         className="sm:mt-[70px] mt-[45px] flex gap-4 flex-col sm:flex-row
-      min-w-0 w-full sm:max-w-[380px] max-w-[280px]"
+      min-w-0 w-full sm:max-w-[420px] max-w-[280px]"
       >
         <GuestModeButton />
         <button

src/components/modalInput/chips/SelectTagColorChip.tsx

@@ -0,0 +1,47 @@
+// 태그 색상 변경용 태그 컬러칩
+import clsx from "clsx";
+
+export const tagColors = [
+  {
+    textColor: "text-[var(--sortTextBlue)]",
+    bgColor: "bg-[var(--sortTextBgBlue)]",
+  },
+  {
+    textColor: "text-[var(--sortTextPink)]",
+    bgColor: "bg-[var(--sortTextBgPink)]",
+  },
+  {
+    textColor: "text-[var(--sortTextGreen)]",
+    bgColor: "bg-[var(--sortTextBgGreen)]",
+  },
+  {
+    textColor: "text-[var(--sortTextOrange)]",
+    bgColor: "bg-[var(--sortTextBgOrange)]",
+  },
+];
+
+interface SelectTagColorChipProps {
+  selectedColorIndex: number;
+  setSelectedColorIndex: (index: number) => void;
+}
+
+export function SelectTagColorChip({
+  selectedColorIndex,
+  setSelectedColorIndex,
+}: SelectTagColorChipProps) {
+  return (
+    <div className="flex gap-2 mt-2">
+      {tagColors.map((color, idx) => (
+        <div
+          key={idx}
+          onClick={() => setSelectedColorIndex(idx)}
+          className={clsx(
+            "w-5 h-5 rounded-full cursor-pointer transition",
+            color.bgColor,
+            selectedColorIndex === idx && "ring-[1.5px] ring-[var(--primary)]"
+          )}
+        />
+      ))}
+    </div>
+  );
+}

src/components/table/invited/InvitedDashBoard.tsx

@@ -198,6 +198,8 @@ export default function InvitedDashBoard({
   agreeInvitation,
 }: InvitedDashBoardProps) {
   const { user } = useUserStore();
+  const [isInitialized, setIsInitialized] = useState(false);
+
   const [searchTitle, setSearchTitle] = useState("");
   const [invitationData, setInvitationData] = useState<Map<CursorId, Invite[]>>(
     new Map()
@@ -264,6 +266,10 @@ export default function InvitedDashBoard({
             return newMap;
           });
 
+          setTimeout(() => {
+            setIsInitialized(true);
+          }, 0);
+
           if (newInvitations.length < ITEMS_PER_PAGE) {
             setHasMore(false);
           }
@@ -291,6 +297,8 @@ export default function InvitedDashBoard({
     });
   };
 
+  if (!isInitialized) return null;
+
   return (
     <div>
       {invitationArray.length === 0 ? (

src/pages/signup.tsx

@@ -8,6 +8,7 @@ import Input from "@/components/input/Input";
 import { Modal } from "@/components/modal/Modal";
 import { CustomBtn } from "@/components/button/CustomButton";
 import { toast } from "react-toastify";
+import { AxiosError } from "axios";
 
 export default function SignUpPage() {
   const [email, setEmail] = useState("");
@@ -54,8 +55,13 @@ export default function SignUpPage() {
         setIsSuccessModalOpen(true);
       });
     } catch (error) {
-      console.error("회원가입 실패", error);
-      toast.error("회원가입에 실패했습니다.");
+      const AxiosError = error as AxiosError<{ message: string }>;
+      if (AxiosError.response?.status === 409) {
+        toast.error("중복된 이메일입니다.");
+      } else {
+        console.error("회원가입 실패", error);
+        toast.error("회원가입에 실패했습니다.");
+      }
     }
   };