✨ Feat(#11): 할 일 카드 생성 모달 컴포넌트 구현

next.config.mjs

@@ -2,14 +2,7 @@
 const nextConfig = {
   reactStrictMode: false,
   images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
-        port: '',
-        pathname: '/taskify/profile_image/**',
-      },
-    ],
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
   },
 };
 

src/components/Modal/EditCardModal/MemberProfile.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image';
+
+import getProfileColorStyle from '@/utils/getProfileColorStyle';
+
+export default function MemberProfile({
+  userId,
+  nickname,
+  profileImageUrl,
+}: {
+  userId: number;
+  nickname: string;
+  profileImageUrl: string | null;
+}) {
+  return (
+    <div className='flex items-center'>
+      <div
+        className='align-center relative mr-[10px] flex size-[26px] items-center justify-center rounded-full border-solid border-white'
+        style={profileImageUrl ? {} : getProfileColorStyle(userId)}
+      >
+        {profileImageUrl ? (
+          <Image src={profileImageUrl} alt='프로필' fill style={{ objectFit: 'cover' }} className='rounded-full' />
+        ) : (
+          <p className={`font-montserrat font-semibold leading-6 text-white`}>{nickname.substring(0, 1)}</p>
+        )}
+      </div>
+      <p>{nickname}</p>
+    </div>
+  );
+}

src/components/Modal/EditCardModal/MembersDropDown.tsx

@@ -0,0 +1,39 @@
+import MemberProfile from './MemberProfile';
+
+export default function MembersDropDown({
+  members,
+  onSelectMember,
+}: {
+  members: {
+    userId: number;
+    nickname: string;
+    profileImageUrl: string | null;
+  }[];
+  onSelectMember: (userId: number) => void;
+}) {
+  return (
+    <ul className='absolute top-[110%] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2'>
+      {members.map((member) => {
+        return (
+          <li
+            className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-light-hover md:text-[16px]'
+            key={`member-${member.userId}`}
+            onClick={() => {
+              onSelectMember(member.userId);
+            }}
+          >
+            <MemberProfile userId={member.userId} nickname={member.nickname} profileImageUrl={member.profileImageUrl} />
+          </li>
+        );
+      })}
+      <li
+        className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] text-gray-9f transition-all hover:bg-violet-light-hover md:text-[16px]'
+        onClick={() => {
+          onSelectMember(0);
+        }}
+      >
+        <p className='w-full text-center'>담당자 선택 안함</p>
+      </li>
+    </ul>
+  );
+}

src/components/Modal/EditCardModal/TagsWrapper.tsx

@@ -0,0 +1,18 @@
+export default function TagsWrapper({ tags, onTagClick }: { tags: string[]; onTagClick: (tag: string) => void }) {
+  return (
+    <div className='mt-[10px] flex flex-wrap gap-[10px]'>
+      {tags.map((tag) => (
+        <div
+          // 태그 컬러만 지정해주면 됨
+          className='cursor-pointer text-nowrap rounded-[6px] border border-gray-d9 px-1'
+          key={`tag-${tag}-key`}
+          onClick={() => {
+            onTagClick(tag);
+          }}
+        >
+          {tag}
+        </div>
+      ))}
+    </div>
+  );
+}