پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های پروژه به صورت زیر است.

modal_starter.zip
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── components
│   │   └── Modal.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js

ظاهر کلی برنامه به شکل زیر است:

یکی از دوستان شما برای نوشتن یک کامپوننت مودال به مشکل برخورده‌است. او سعی دارد به صورتی لاجیک کدش را اعمال کند که با کلیک کردن بیرون از محوطه مودال، این مودال بسته شود:

• دکمه OPEN: با کلیک روی این دکمه باید مودال نمایش داده شود.
• مودال: بعد از نمایش مودال باید با کلیک (mousedown) خارج از این <div>، مودال بسته شود.

توجه: با اضافه کردن یک <div> پس زمینه و حل مسئله از این راه، نمره به شما تعلق نمی‌گیرد! شما نیاز دارید واقعا بسنجید که کلیک خارج از این کامپوننت بوده یا خیر، و نسبت به آن لاجیک موردنظر رو اعمال کنید.

نکات

• استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید.
• از حذف یا ویرایش data-testid های داده شده خودداری کنید.
• شما مجاز به نصب کتابخانه‌های خارجی از جمله npm نیستید.
• شما فقط مجاز به اعمال تغییرات در Modal.jsx هستید.
• می‌توانید فایل Modal.jsx را بعد از اعمال تغییرات به صورت مستقیم برای ما ارسال کنید.

آنچه باید آپلود کنید

فایل Modal.jsx نهایی را ذخیره کنید و به‌صورت تکی آپلود کنید. یا اگر قصد دارید به‌صورت فایل فشرده ارسال کنید، ساختار فایل باید به‌صورت زیر باشد:

[your-zip-file-name].zip
└── src
    └── components
        └── Modal.jsx