[Next.js] React 복습 및 약간의 실습 - 프로파일 화면 만들기

app/composition/user-detail.tsx 파일 작성

'use client';

import React from 'react';

interface ProfilePictureProps { src: string; }
interface ProfileDetailsProps { name: string; email: string; }
interface ContactButtonProps { onClick: () => void; }

interface UserProfileCardProps {
    user: {
        profilePicture: string;
        name: string;
        email: string;
    };
    onContactClick: () => void;
}

const ProfilePicture = ({src}: ProfilePictureProps) => {
    return <img src={src} alt="Profile" className="w-24 h-24 border-2 border-gray-300 rounded-full" />;
};

const ProfileDetails = ({name, email} : ProfileDetailsProps) => {
    return (
        <div className='text-left'>
            <h3 className='text-xl font-bold'>{name}</h3>
            <p className='text-sm text-gray-600'>{email}</p>
        </div>
    );
};

const ContactButton = ({onClick} : ContactButtonProps) => {
    return <button onClick={onClick} className='px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700'>Contact</button>;
}

export const UserProfileCard = ({user, onContactClick}: UserProfileCardProps) => {
    return (
        <div className='flex flex-col items-center p-4 bg-white rounded shadow-lg'>
            <ProfilePicture src={user.profilePicture} />
            <ProfileDetails name={user.name} email={user.email} />
            <ContactButton onClick={onContactClick} />
        </div>
    )
}

export default UserProfileCard

1. 클라이언트에서만 작성하는 코드인 경우 'use client' 를 써준다.

즉 , 쓰지 않으면 코드는 서버에서 동작 한다.

 

2. 당연한데 햇갈리지만, 함수 컴포넌트 선언에서 인수 뒤 콜론은 typescript 여서 인터페이스로 선언한 타입을 선언해 주는거다.

 

3. 테일윈드

px-4 패딩 left, right 4

py-4 패딩 top, bottom 4

Padding - Tailwind CSS

Padding - Tailwind CSS

flow flow-col : flow 정렬 기본이 flow-row 이므로 flow-col 을 써줘야 한다.

 

app/composition/user-detail.tsx

'use client'

import UserProfileCard from './user-profile-card'

export default function UserDetail() {
    const user = {
        profilePicture: 'profile/1.jpg',
        name: 'HanTJ',
        email: 'hantj@example.com'
    }

    const handleContactClick = () => {window.alert('Contact button clicked!');};

    return (
        <>
            <h1>사용자프로필</h1>
            <UserProfileCard user={user} onContactClick={handleContactClick} />
        </>
    )
}

 

app/composition/page.tsx

각 폴더별로 page.tsx 로 만들면, 웹에서 접근시에 해당 페이지를 보여준다. 즉, 라우터 구성 방법인거다

localhost:3000/composition 으로 접근하면 이 페이지가 최종적으로 보여지는것

import UserDetail from "./user-detail";

export default function Home() {
    return (
        <main className="flex flex-col p-4">
            <UserDetail />
        </main>
    )
}