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

[Fix, Style] TaskModal: 분리 전으로 롤백 / Landing: 버튼 너비 반응형 적용 / Card: 컨테이너 높이 반응형 적용

Author: ozen0718

src/api/members.ts

@@ -1,24 +1,13 @@
 import axiosInstance from "./axiosInstance";
 import { apiRoutes } from "./apiRoutes";
-
-// 멤버 타입 정의
-export interface Member {
-  id: number;
-  userId: number;
-  email: string;
-  nickname: string;
-  profileImageUrl: string | null;
-  isOwner: boolean;
-  createdAt?: string;
-  updatedAt?: string;
-}
+import { MemberType } from "@/types/users";
 
 // 🔹 대시보드 멤버 목록 조회
 export const getMembers = async ({
   dashboardId,
 }: {
   dashboardId: number;
-}): Promise<Member[]> => {
+}): Promise<MemberType[]> => {
   if (!dashboardId) {
     console.error("dashboardId가 없습니다.");
     return [];
@@ -31,7 +20,7 @@ export const getMembers = async ({
       },
     });
 
-    const members: Member[] = response.data.members || [];
+    const members: MemberType[] = response.data.members || [];
     return members;
   } catch (error) {
     console.error("getMembers API 실패:", error);

src/components/button/GuestModeButton.tsx

@@ -33,7 +33,7 @@ export default function GuestModeButton() {
     <button
       onClick={handleGuestLogin}
       className="flex items-center justify-center
-      sm:w-[220px] w-[280px] h-[54px]
+      w-full h-[54px]
       rounded-lg bg-white cursor-pointer
       text-[var(--primary)] font-medium sm:text-[18px] text-[16px]"
     >

src/components/columnCard/Card.tsx

@@ -25,7 +25,8 @@ export default function Card({
         flex flex-col md:flex-row lg:flex-col cursor-pointer
         sm:items-center items-start
         rounded-md bg-white border border-gray-200 p-4
-        w-[284px] md:w-[510px] md:h-[93px] lg:w-[314px] lg:h-auto
+        w-[284px] md:w-[510px]
+        lg:w-[314px] lg:h-auto min-h-[93px]
       `}
     >
       {/* 이미지 영역 */}
@@ -89,10 +90,10 @@ export default function Card({
 
           {/* 마감일 */}
           <div
-            className="flex items-center justify-between
-          lg:gap-37 gap-8 sm:pr-4 text-[var(--color-gray1)]"
+            className="flex items-center justify-between gap-8
+          w-full text-[var(--color-gray1)]"
           >
-            <div className="flex items-center gap-1">
+            <div className="flex flex-1 items-center gap-1">
               <Image
                 src="/svgs/calendar.svg"
                 alt="calendar"

src/components/landing/Section1.tsx

@@ -48,12 +48,15 @@ export default function Section1() {
       </span>
 
       {/* CTA 버튼들 */}
-      <div className="sm:mt-[70px] mt-[45px] flex gap-4 flex-col sm:flex-row">
+      <div
+        className="sm:mt-[70px] mt-[45px] flex gap-4 flex-col sm:flex-row
+      min-w-0 w-full sm:max-w-[220px] max-w-[280px]"
+      >
         <GuestModeButton />
         <button
           onClick={handleMainClick}
           className="flex items-center justify-center
-          sm:w-[220px] w-[280px] h-[54px]
+          w-full h-[54px]
           rounded-lg bg-[var(--primary)] cursor-pointer
           text-[var(--color-white)] font-medium sm:text-[18px] text-[16px]"
         >

src/components/modalDashboard/CardDetailModal.tsx

@@ -16,6 +16,7 @@ import type { ColumnType } from "@/types/task";
 
 interface CardDetailModalProps {
   card: CardDetailType;
+  currentUserId: number;
   dashboardId: number;
   createdByMe: boolean;
   onClose: () => void;

src/components/modalInput/chips/TagColorChip.tsx

@@ -0,0 +1,72 @@
+// 태그 색상 변경용 태그 컬러칩
+import clsx from "clsx";
+
+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 Tag {
+  text: string;
+  textColor: string;
+  bgColor: string;
+}
+
+interface TagColorChipProps {
+  tags: Tag[];
+  selectedTagIndex: number | null;
+  setTags: (tags: Tag[]) => void;
+  onValueChange: (newTags: string[]) => void;
+}
+
+export function TagColorChip({
+  tags,
+  selectedTagIndex,
+  setTags,
+  onValueChange,
+}: TagColorChipProps) {
+  return (
+    <>
+      {selectedTagIndex !== null && (
+        <div className="flex gap-2">
+          {tagColors.map((color, colorIdx) => (
+            <div
+              key={colorIdx}
+              onClick={() => {
+                const updatedTags = [...tags];
+                updatedTags[selectedTagIndex] = {
+                  ...updatedTags[selectedTagIndex],
+                  textColor: color.textColor,
+                  bgColor: color.bgColor,
+                };
+                setTags(updatedTags);
+                onValueChange(updatedTags.map((tag) => tag.text));
+              }}
+              className={clsx(
+                "w-5 h-5 rounded-full cursor-pointer",
+                color.bgColor,
+                selectedTagIndex !== null &&
+                  tags[selectedTagIndex]?.bgColor === color.bgColor &&
+                  "ring-[1.5px] ring-[var(--primary)]"
+              )}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}