웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 12일차

썸네일 - 뤼튼 생성 AI 이미지

 

 

디테일 작업을 완료한 후 v0.1.0 테스트 배포까지 완료한 과정을 포스팅해보겠습니다.

 

🎏 멤버 소개 페이지를 모달로

 

멤버 소개 페이지를 만들었지만 막상 작성 할 내용이 많지 않아 비효율적이라고 느껴졌습니다.

그래서 UX를 수정하기로 생각했고 페이지대신 간단하게 모달로 수정하기로 결심했습니다.

혹시 모르니 기존 코드를 없애지는 않고 header에 모달을 추가하는 코드를 작성했습니다.

'use client';

import { useState } from "react";

export default function Header({ memberData }) {
    const [selectedMember, setSelectedMember] = useState(null);

    const openModal = (member) => {
        setSelectedMember(member);
    };

    const closeModal = () => {
        setSelectedMember(null);
    };

<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
    {memberData.map((member) => (
        <button
            key={member.memberId}
            onClick={() => openModal(member)}
            className="flex items-center mr-5 hover:underline focus:outline-none"
        >
            {member.iconUrl && (
                <img
                    src={member.iconUrl}
                    alt={`${member.memberName}의 아이콘`}
                    className="w-6 h-6 rounded-full mr-2"
                />
            )}
            {member.memberName}
        </button>
    ))}
</nav>

{selectedMember && (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-96 relative">
            <button
                onClick={closeModal}
                className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
            >
                ❌
            </button>
            <div className="flex flex-col items-center">
                <img
                    src={selectedMember.imageUrl || selectedMember.iconUrl}
                    alt={`프로필 이미지`}
                    className="w-16 h-16 rounded-full mb-4"
                />
                <h2 className="text-lg font-bold mb-2">
                    {selectedMember.realName} ({selectedMember.memberName})
                </h2>
                <p className="text-gray-600 dark:text-gray-300 text-center mb-4">
                    {selectedMember.introduction || ""}
                </p>
                <div className="w-full border-t pt-4">
                    <p className="text-sm text-gray-500 dark:text-gray-400">🚩 <b>목표</b> : {selectedMember.goal || "설정된 목표 없음"}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">🚀 <b>직책</b> : {selectedMember.position || "설정된 직책 없음"}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">📅 <b>첫 참여일</b> : {selectedMember.firstDate}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">⏰ <b>총 활동 시간</b> : {Math.floor(selectedMember.totalTime)}시간</p>

                    <div className="flex space-x-4 mt-2">
                        {selectedMember.portfolio && (
                            <a href={selectedMember.portfolio} className="text-blue-500 flex items-center">
                                💼포트폴리오
                            </a>
                        )}
                        {selectedMember.blog && (
                            <a href={selectedMember.blog} className="text-blue-500 flex items-center">
                                ✏️블로그
                            </a>
                        )}
                        {selectedMember.gitHub && (
                            <a href={selectedMember.gitHub} className="text-blue-500 flex items-center">
                                🐙GitHub
                            </a>
                        )}
                    </div>
                </div>
            </div>
        </div>
    </div>
)}

 

새로운 페이지로 넘어가는 것보다는 모달이 더 깔끔한 거 같습니다.

 

🎯 배포

 

생각보다 배포 과정은 굉장히 간단했습니다.

 

1. Github repository에 코드를 올린다.

2. vercel에서 github를 연동한다.

https://vercel.com/home

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

3. 프로젝트에 환경 변수를 설정한다.

4. 배포한다.

 

이후 수정할 때도 main branch에 merge하기만 하면 자동으로 배포된 사이트에도 적용됩니다.

Github에 Releases도 작성해주었습니다.

 

 

스터디원분들께 피드백도 받고 각종 버그도 수정해서 v1.0.0을 위해 달려봐야겠습니다.🔥