Yêu Cầu Chỉnh Sửa: Header Alignment & Khu Vực Nội Dung CMS Trang BigFan

Ngày cập nhật: 08/07/2026 | Cập nhật lần cuối: 08/07/2026
Loại: UI/UX Header Alignment + CMS Content Box + Content Review

Ảnh feedback & tham khảo:

1. Vấn Đề Hiện Tại

Trên màn hình BigFan:

Tiêu đề chữ "BigFan" và mũi tên quay lại (back arrow <-) đang bị căn chỉnh lệch hẳn xuống phía dưới của thanh Header.
Khoảng trống phía trên sát Status Bar quá nhiều, trong khi khoảng trống phía dưới sát mép dưới của Header lại quá hẹp.
Điều này gây mất cân đối thị giác và mất tính nhất quán so với các màn hình khác (ví dụ: màn hình ở Ảnh tham khảo), nơi các phần tử điều hướng được căn giữa hoàn hảo theo chiều dọc của Header.

2. Yêu Cầu Chỉnh Sửa

Căn giữa theo chiều dọc (Vertical Center): Điều chỉnh lại CSS/Style để chữ "BigFan" và mũi tên back được căn giữa hoàn hảo theo chiều dọc của phần hiển thị nội dung trên Header.
Xử lý khoảng cách động với Status Bar (Dynamic Safe Area):
- Tránh sử dụng các giá trị padding/margin cố định (paddingTop: 40, v.v.) vì kích thước Status Bar trên mỗi dòng máy iOS/Android là khác nhau.
- Sử dụng thư viện react-native-safe-area-context để lấy chính xác chiều cao vùng an toàn (insets.top) và áp dụng riêng cho phần khoảng đệm phía trên của Header container.
- Phần chứa nội dung (nút Back, tiêu đề) nên được bao bọc trong một container riêng có chiều cao cố định (ví dụ height: 56px hoặc 44px) và sử dụng alignItems: 'center' để đảm bảo căn giữa tuyệt đối.

3. Gợi Ý Cấu Trúc Code (React Native)

Cấu trúc chuẩn giúp tránh lỗi lệch vị trí trên các thiết bị:

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const BigFanHeader = ({ onBackPress }) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[
      styles.headerContainer, 
      { paddingTop: insets.top } // Thêm padding động bằng với chiều cao Status Bar
    ]}>
      <View style={styles.headerContent}>
        {/* Nút quay lại (Back) */}
        <TouchableOpacity style={styles.backButton} onPress={onBackPress}>
          <Text style={styles.backArrowText}>←</Text> 
        </TouchableOpacity>

        {/* Tiêu đề trang */}
        <Text style={styles.headerTitle}>BigFan</Text>

        {/* Cột mốc ảo bên phải để giữ tiêu đề ở chính giữa */}
        <View style={styles.placeholder} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: '#5A3D28', // Màu nâu của màn hình BigFan
    width: '100%',
  },
  headerContent: {
    height: 56, // Chiều cao chuẩn của header content
    flexDirection: 'row',
    alignItems: 'center', // Căn giữa hoàn hảo các phần tử theo chiều dọc
    justifyContent: 'space-between',
    paddingHorizontal: 16,
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backArrowText: {
    color: '#FFFFFF',
    fontSize: 24,
  },
  headerTitle: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  placeholder: {
    width: 40, // Độ rộng bằng với nút back để tiêu đề căn giữa chuẩn xác
  }
});

Checklist Kỹ Thuật — Header Alignment

Tìm file định nghĩa màn hình/Header của trang BigFan.
Gỡ bỏ các thuộc tính margin/padding cứng không chính xác đối với Header.
Tích hợp useSafeAreaInsets để tính toán khoảng đệm phía trên (paddingTop) một cách tự động theo thiết bị.
Đặt nội dung Header (Nút back, Tiêu đề) vào một View con có thuộc tính alignItems: 'center' và chiều cao cố định để đảm bảo căn giữa dọc.
Test hiển thị trên nhiều thiết bị thực tế hoặc giả lập (đặc biệt là iOS có tai thỏ/Dynamic Island và Android có nốt ruồi) để xác nhận Header không bị lệch dưới hay đè lên Status Bar.

4. Khu Vực Nội Dung Trống (Vùng Đỏ) — Xây Sẵn Box CMS, Nhập Nội Dung Sau

Hiện trạng

Trên màn hình BigFan hiện có một khoảng trống lớn (được khoanh vùng đỏ và đánh dấu mũi tên trong ảnh feedback) nằm giữa phần giới thiệu ngắn và nút "Tham gia cộng đồng Facebook". Khu vực này hiện chưa có nội dung, gây mất thẩm mỹ và lãng phí không gian màn hình.

Quyết định thiết kế

Dev xây dựng sẵn container/box — Admin nhập nội dung từ CMS sau. Không hardcode nội dung trực tiếp vào code. Tất cả text trong box này phải được lấy từ CMS.

Yêu cầu kỹ thuật (Dev)

Xây dựng component BigFanContentBox: Một box card trắng, bo góc (borderRadius: 12), có padding thoáng (padding: 16), đổ bóng nhẹ.
Box này render có điều kiện (conditional rendering): Chỉ hiển thị khi CMS trả về dữ liệu. Nếu Admin chưa nhập nội dung → ẩn hoàn toàn box, không để khoảng trắng.
Cấu trúc dữ liệu CMS cần hỗ trợ các trường sau cho box này:

Trường CMS	Kiểu dữ liệu	Bắt buộc	Mô tả
`bigfan_box_title`	String	Không	Tiêu đề box (nếu có, hiển thị in đậm phía trên)
`bigfan_box_body`	Text (Rich Text)	Có	Nội dung chính — đoạn mô tả giới thiệu cộng đồng BigFan
`bigfan_box_image_url`	URL	Không	Ảnh banner tùy chọn phía trên nội dung
`bigfan_box_visible`	Boolean	Có	Bật/Tắt hiển thị box (mặc định: `false` — ẩn cho đến khi Admin bật)

Gợi ý cấu trúc code:

// BigFanContentBox — chỉ render khi CMS bật và có nội dung
{cmsData?.bigfan_box_visible && cmsData?.bigfan_box_body ? (
  <View style={styles.contentBox}>
    {/* Tiêu đề — chỉ hiển thị nếu có */}
    {cmsData.bigfan_box_title ? (
      <Text style={styles.boxTitle}>{cmsData.bigfan_box_title}</Text>
    ) : null}

    {/* Ảnh banner tùy chọn */}
    {cmsData.bigfan_box_image_url ? (
      <Image source={{ uri: cmsData.bigfan_box_image_url }} style={styles.boxBanner} />
    ) : null}

    {/* Nội dung chính */}
    <Text style={styles.boxBody}>{cmsData.bigfan_box_body}</Text>
  </View>
) : null}

5. Yêu Cầu Review & Viết Lại Nội Dung (Content Review)

[!IMPORTANT] Content chưa được review cho App. Toàn bộ nội dung chữ trên màn hình BigFan (và các màn hình khác) cần được bộ phận Content/Marketing soát lại trước khi chính thức ra mắt người dùng.

Các nội dung cần Content team xử lý

#	Vị trí	Nội dung hiện tại	Yêu cầu
1	Dòng mô tả dưới slide BigFan	"Cập nhật ưu đãi cộng đồng, voucher và quà tặng sinh nhật dành cho thành viên Golden Lotus."	Xem xét lại — có thể viết hấp dẫn, cụ thể hơn
2	Tiêu đề trang BigFan	"Người nhận quà mới nhất"	Xem xét lại cho phù hợp định vị thương hiệu
3	Khu vực box nội dung mới	(Trống — chưa có)	Content team viết mới: Đoạn giới thiệu cộng đồng BigFan Golden Lotus
4	Nút CTA	"Tham gia cộng đồng Facebook"	Giữ nguyên hoặc điều chỉnh ngắn gọn hơn

Gợi ý hướng nội dung cho box mới (để Content team tham khảo)

Box nội dung nên truyền tải ý nghĩa của cộng đồng BigFan và lý do khách hàng nên tham gia, ví dụ:

Nhận voucher ưu đãi độc quyền từ cộng đồng.
Cơ hội nhận quà sinh nhật đặc biệt từ Golden Lotus.
Tham gia minigame và sự kiện nội bộ dành riêng cho thành viên.
Kết nối với cộng đồng yêu thích chăm sóc sức khoẻ & sắc đẹp.

Checklist cho Content Team

Soát lại toàn bộ chữ trên màn hình BigFan (tiêu đề, mô tả, nhãn nút).
Viết nội dung mới cho box giới thiệu BigFan (trường bigfan_box_body trong CMS) — khoảng 50-100 chữ, giọng văn thân thiện, gần gũi.
Confirm với Marketing về link Facebook Group/Fanpage chính xác cho nút CTA.
Bàn giao nội dung đã duyệt cho Dev/Admin để nhập vào CMS.

1. Vấn Đề Hiện Tại​

2. Yêu Cầu Chỉnh Sửa​

3. Gợi Ý Cấu Trúc Code (React Native)​

Checklist Kỹ Thuật — Header Alignment​

4. Khu Vực Nội Dung Trống (Vùng Đỏ) — Xây Sẵn Box CMS, Nhập Nội Dung Sau​

Hiện trạng​

Quyết định thiết kế​

Yêu cầu kỹ thuật (Dev)​

5. Yêu Cầu Review & Viết Lại Nội Dung (Content Review)​

Các nội dung cần Content team xử lý​

Gợi ý hướng nội dung cho box mới (để Content team tham khảo)​

Checklist cho Content Team​