# پروژه اولیه پروژه اولیه را از [این لینک](/problemset/assignments/4367/download_problem_initial_project/265388/) دانلود کنید. ساختار فایل‌های پروژه به صورت زیر است. ``` modal_starter.zip ├── eslint.config.js ├── index.html ├── package.json ├── package-lock.json ├── src │ ├── App.css │ ├── App.jsx │ ├── components │ │ └── <mark class="violet">Modal.jsx</mark> │ ├── index.css │ └── main.jsx └── vite.config.js ``` <details class="yellow"> <summary> **راه‌اندازی** </summary> فایل دانلود شده را از حالت فشرده خارج و دستور `npm install` را در `root` پروژه اجرا کنید. *همچنین برای اجرای پروژه به صورت لوکال، می‌توانید از دستور* `npm run dev` *استفاده کنید.* </details> ظاهر کلی برنامه به شکل زیر است:  یکی از دوستان شما برای نوشتن یک کامپوننت مودال به مشکل برخورده‌است. او سعی دارد به صورتی لاجیک کدش را اعمال کند که با کلیک کردن بیرون از محوطه مودال، این مودال بسته شود: + **دکمه OPEN:** با کلیک روی این دکمه باید مودال نمایش داده شود. + **مودال:** بعد از نمایش مودال باید با کلیک (*mousedown*) خارج از این `<div>`، مودال بسته شود. **توجه:** با اضافه کردن یک `<div>` پس زمینه و حل مسئله از این راه، نمره به شما تعلق نمی‌گیرد! شما نیاز دارید واقعا بسنجید که کلیک خارج از این کامپوننت بوده یا خیر، و نسبت به آن لاجیک موردنظر رو اعمال کنید. # نکات + استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید. + از حذف یا ویرایش `data-testid` های داده شده خودداری کنید. + شما مجاز به نصب کتابخانه‌های خارجی از جمله `npm` نیستید. + شما فقط مجاز به اعمال تغییرات در `Modal.jsx` هستید. + می‌توانید فایل `Modal.jsx` را بعد از اعمال تغییرات به صورت مستقیم برای ما ارسال کنید. # آنچه باید آپلود کنید فایل `Modal.jsx` نهایی را ذخیره کنید و به‌صورت تکی آپلود کنید. یا اگر قصد دارید به‌صورت فایل فشرده ارسال کنید، ساختار فایل باید به‌صورت زیر باشد: ``` [your-zip-file-name].zip └── src └── components └── <mark class="violet">Modal.jsx</mark> ```