Judul
Deskripsi konten di sini...
);
```
* **Pendekatan Baru (Atomic Design Komposit & Tokenized):**
Kita pisahkan Atom (`Button`, `CardContainer`), menyusunnya ke dalam *Molecule*, dan menerapkan *design tokens* yang terpusat di Tailwind config:
```javascript
// tailwind.config.js yang dioptimalkan untuk Enterprise Atomic Design
module.exports = {
content: [
"./src/components/atoms/**/*.{js,ts,jsx,tsx}",
"./src/components/molecules/**/*.{js,ts,jsx,tsx}",
"./src/components/organisms/**/*.{js,ts,jsx,tsx}",
"./src/pages/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: {
brand: {
primary: 'var(--color-primary)',
surface: 'var(--color-surface)',
}
}
}
},
plugins: [],
}
```
> [!TIP]
> Gunakan CSS Custom Properties (CSS Variables) yang terikat dengan tema Tailwind. Ini memungkinkan integrasi *design token* lintas tim (Figma ke Code) tanpa harus melakukan *rebuild* seluruh aset CSS setiap kali ada perubahan nilai warna atau spasi minor.
## 4. Tindakan Darurat: Menghidupkan Kembali Layanan dalam Hitungan Menit
Situasi sudah genting. Kami tidak punya waktu untuk refactoring total kode komponen saat itu juga. Yang kami butuhkan adalah intervensi infrastruktur instan untuk memangkas ukuran aset dan memulihkan kesehatan server dalam waktu kurang dari 60 detik.
Berikut adalah satu baris perintah darurat via terminal SSH yang langsung kami eksekusi di server produksi untuk membersihkan cache CDN Cloudflare, memaksa pembaharuan Nginx, dan menerapkan kompresi Brotli tingkat tinggi secara agresif pada aset statis:
```bash
# Emergency Runbook: Purge CDN Cache, Restart Nginx, dan Terapkan Brotli Compression
curl -X POST "https://api.cloudflare.com/client/v4/zones/YOUR_ZONE_ID/purge_cache" -H "Authorization: Bearer YOUR_API_TOKEN" -H "Content-Type: application/json" '{"purge_everything":true}' && systemctl reload nginx && echo "Nginx reloaded & Cloudflare cache purged successfully at $(date)"
```
Selain itu, kami langsung mendorong *hotfix* konfigurasi Nginx untuk mengaktifkan kompresi tingkat maksimal pada file CSS yang membengkak tersebut, memberikan ruang napas bagi klien yang sedang melakukan *fetching* data:
```nginx
# /etc/nginx/conf.d/compression.conf
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/xml text/javascript application/javascript application/x-javascript application/xml;
```
Dalam kurun waktu 3 menit setelah eksekusi perintah tersebut, metrik latensi p99 berangsur turun drastis kembali ke angka normal, dan error 504 di Nginx lenyap seketika. Layanan kembali bernapas.
## 5. Kebijakan Retrospektif: Menambal Celah agar Tak Pernah Terulang
Insiden dini hari itu memberikan tamparan keras bagi tim engineering kami. Agar mimpi buruk ini tidak terulang, kami merumuskan kebijakan defensif baru yang wajib dipatuhi oleh seluruh engineer:
1. **Penerapan Linting Ketat untuk Kelas Tailwind:** Kami mengintegrasikan `eslint-plugin-tailwindcss` ke dalam pipeline CI/CD GitHub Actions. Setiap pull request yang mengandung nilai *arbitrary* terlarang (`w-[123px]`) atau duplikasi utility yang berlebihan akan otomatis ditolak oleh sistem.
2. **Audit Ukuran Aset Otomatis di CI/CD:** Menambahkan *budget size check* pada file CSS keluaran *build*. Jika ukuran file CSS produksi melampaui batas toleransi 50 Kilobita (*gzipped*), pipeline deployment akan *fail* secara otomatis sebelum sempat menyentuh server produksi.
3. **Pemisahan Desain Token yang Ketat:** Seluruh variabel warna dan jarak kini wajib bersumber dari satu *single source of truth* JSON yang diekspor langsung dari token desain Figma menggunakan token-transformer, kemudian disuntikkan ke dalam file konfigurasi Tailwind secara otomatis setiap awal pekan.
Mari kita lihat contoh implementasi pola komposisi komponen berbasis *Atomic Design* yang bersih dan terstandarisasi setelah perbaikan total:
```jsx
// src/components/atoms/Button.jsx (Atom murni yang reusable)
import React from 'react';
import clsx from 'clsx'; // Utility untuk menggabungkan class dengan aman
export const Button = ({ variant = 'primary', children, className, ...props }) => {
const baseStyles = "px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2";
const variants = {
primary: "bg-brand-primary text-white hover:bg-opacity-90 focus:ring-brand-primary/50",
secondary: "bg-gray-100 text-gray-800 hover:bg-gray-200 focus:ring-gray-300"
};
return (