Profile Page

This is the profile page where users can view and interact with their profile information, with layouts tailored for both PC and mobile devices.

Documentation for Profile Component

Overview

The Profile component is responsible for rendering the user’s profile page. It dynamically adjusts its layout based on the user’s screen size, displaying either the Pc component for larger screens or the Mobile component for smaller screens.

Implementation Details

• State Management:

  • isPc: A boolean state that determines whether the user is on a PC (large screen) or a mobile device (small screen).

• Responsive Design:

  • The component detects the user’s screen size on initial load and adjusts the layout accordingly. It listens for window resize events to update the layout if the screen size changes.

• Component Structure:

  • Pc: Rendered when the screen width is 1024 pixels or greater, providing a layout optimized for PC users.
  • Mobile: Rendered when the screen width is less than 1024 pixels, providing a layout optimized for mobile users.

Code Block

'use client'

import Pc from "@/components/profile/Pc";
import Mobile from "@/components/profile/Mobile";
import { useEffect, useState } from "react";

export default function Profile() {
  const [isPc, setIsPc] = useState<boolean | null>(null);

  useEffect(() => {
    const handleResize = () => {
      setIsPc(window.innerWidth >= 1024);
    };

    handleResize(); // Check initial screen width

    const debounceTimeout = setTimeout(() => {
      window.addEventListener("resize", handleResize);
    }, 500); // Delay adding the event listener by 500ms

    return () => {
      clearTimeout(debounceTimeout);
      window.removeEventListener("resize", handleResize);
    };
  }, []);


  return isPc === null ? null : isPc ? (
    <Pc />

  ) : (
    <Mobile />
  )
}