تجربه: 2

سن: 18 الی 30

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.10.15

آخرین تاریخ : 2025.11.07

شرح تسک

در حال حاضر تمامی مودال‌های داخلی پروژه متاورس رنگ طراحی و پیاده‌سازی شده‌اند، اما برخی از آن‌ها دارای ایرادات ظاهری و مشکلات ریسپانسیو هستند.
هدف این تسک، بررسی دقیق تمامی مودال‌ها و رفع کامل این موارد است تا در تمام رزولوشن‌ها و مرورگرها عملکردی یکدست و استاندارد داشته باشند.

جزئیات و الزامات فنی

• بررسی و رفع مشکلات ظاهری (UI) شامل:

  • عدم تراز یا فاصله نادرست اجزا (Padding / Margin)

  • ناسازگاری رنگ‌ها یا فونت‌ها با سیستم دیزاین

  • ایرادات در نمایش آیکون‌ها یا دکمه‌ها

• بررسی و رفع مشکلات ریسپانسیو (Responsive) شامل:

  • نمایش صحیح مودال‌ها در دستگاه‌های موبایل، تبلت و دسکتاپ

  • جلوگیری از اسکرول یا برش محتوای مودال در ابعاد کوچک

  • تنظیم درست اندازه، فاصله و رفتار المان‌ها در حالت‌های مختلف رزولوشن

• هماهنگی کامل با سیستم دیزاین متاورس رنگ و استفاده از کامپوننت‌های موجود در پروژه

• اطمینان از عملکرد صحیح مودال‌ها در دو نسخه‌ی Light و Dark

• بررسی و تست نهایی در مرورگرهای Chrome, Safari, Firefox, Edge

گام‌های کاری پیشنهادی

1. شناسایی و مستندسازی تمامی مودال‌های موجود و مشکلات هرکدام.

2. اصلاح استایل‌ها و ساختار ریسپانسیو در سطح CSS یا Layout.

3. تست روی چند سایز استاندارد (موبایل، تبلت، لپ‌تاپ، مانیتور Full HD).

4. بررسی نهایی با تیم طراحی جهت هماهنگی با سیستم دیزاین.

5. تحویل نسخه نهایی و ثبت تغییرات در Pull Request.

معیار پذیرش (Acceptance Criteria)

• تمامی مودال‌ها در تمام دستگاه‌ها و مرورگرها بدون برش، پرش یا اسکرول اضافی نمایش داده شوند.

• ظاهر گرافیکی مودال‌ها (فونت، رنگ، فاصله‌ها، سایه و ...) مطابق با سیستم دیزاین باشد.

• نسخه‌های Light و Dark مودال‌ها بدون ایراد بصری باشند.

• هیچ تغییر خارج از محدوده‌ی طراحی اصلی اعمال نشده باشد.

• تست موفق توسط QA یا کارفرما تأیید گردد.

تحویل‌دادنی‌ها (Deliverables)

• نسخه نهایی اصلاح‌شده مودال‌ها در محیط تست یا توسعه

• مستند کوتاه شامل فهرست مودال‌های بررسی‌شده و تغییرات اعمال‌شده

• ویدیو یا اسکرین‌شات قبل و بعد از اصلاح (در صورت نیاز)
  

توجه فرمایید : بخش های مختلفی که به صورت تکراری داخل صفحات داخلی متاورس رنگ استفاده شده مانند جداول , دکمه ها استفاده شده اند همه به صورت استایک کامپئننت و از یکجا فراخوانی شوند 

اولویت

متوسط رو به بالا — این تسک مستقیماً بر تجربه کاربری در بخش‌های داخلی سامانه تأثیر دارد.

---------------------------------------------------------------------------------------------------------

ذکر منابع مرتبط به تسک :

دسترسی به ریپازیتوری پروژه ریکت داخلی متارنگ :

https://github.com/iranpsc/Metaverse-Rang-Front-React

لینک فیگما بخش های داخلی متارنگ :

https://www.figma.com/design/lHgvuzgJhUFACNpMBJK0jI/ui?node-id=34-1989&t=0VPAk1dawHgxTSif-1

لینک سایت رسمی پروژه :

https://rgb.irpsc.com/fa

دسترسی به سامانه مدیریت بر مدیران :

https://crm.irpsc.com

لیست مودال ها به همراه تب ها و زیر مجموعه های آن که میبایست تمامی ان ها بررسی و مشکلات ui و ریسپانسیو برطرف گردد:
https://drive.google.com/file/d/15oxW6ERA0QvXXpsxeTrV5BuaTPw90kzp/view?usp=sharing