React 로 크리스마스 위시 리스트 앱 만들기

소개

이 프로젝트는 React 를 사용하여 축제 분위기의 크리스마스 위시리스트 빌더 웹 애플리케이션을 구축하는 과정을 안내합니다. 이 앱은 아름다운 전체 화면 크리스마스 테마 배경과 매력적인 눈 내리는 애니메이션을 특징으로 하여 휴일 분위기를 고조시킵니다. 사용자는 반투명 위시 벽에 소원을 추가할 수 있으며, 각 소원은 엽서 형태로 표시됩니다. 프론트엔드에는 React 를 사용하고, 스타일링과 애니메이션에는 CSS 를 사용합니다.

참고: 이 프로젝트는 주로 Material UI 와 React 를 사용하여 구축되었습니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

• React 프로젝트를 설정하고 종속성을 설치하는 방법
• React 에서 함수형 컴포넌트를 생성하는 방법
• useState 와 같은 React 훅을 사용하여 컴포넌트의 상태를 관리하는 방법
• props 를 사용하여 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달하는 방법
• React 에서 폼 제출을 처리하는 방법
• CSS 를 사용하여 React 애플리케이션의 스타일을 지정하는 방법
• React 와 CSS 를 사용하여 시각적으로 매력적이고 인터랙티브한 웹 애플리케이션을 구축하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

• React 프로젝트를 설정하고 필요한 종속성을 설치합니다.
• React 에서 함수형 컴포넌트를 생성하고 훅을 사용하여 상태를 관리합니다.
• props 를 사용하여 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달합니다.
• React 애플리케이션에서 폼 제출을 처리합니다.
• CSS 를 사용하여 React 애플리케이션의 스타일을 지정하여 시각적으로 매력적이고 인터랙티브한 사용자 인터페이스를 만듭니다.
• 크리스마스 테마 배경, 눈 내리는 애니메이션, 위시리스트 벽과 같은 기능을 통합하여 React 와 CSS 를 사용하여 완전한 웹 애플리케이션을 구축합니다.

의존성 설치

React 프로젝트 파일은 이미 환경에 있습니다.

1. 종속성 설치:

npm install

2. 필요한 디렉토리와 파일 생성:

mkdir src/components
touch src/components/{AddWishForm.js,WishList.js,Postcard.js,Snowflakes.js}
touch src/components/{Snowflakes.css,Postcard.css,WishList.css}

Snowflakes 컴포넌트 설정

떨어지는 눈 애니메이션을 표시하기 위해 snowflakes 컴포넌트를 생성합니다.

1. src/components/Snowflakes.js 파일에 다음을 작성합니다.

// Snowflakes.js - CSS 를 사용하여 떨어지는 눈송이를 생성합니다.
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // 눈송이를 나타내는 div 배열을 생성합니다.
  const snowflakes = Array.from({ length: 200 }).map((_, index) => (
    <div
      key={index}
      className="snowflake"
      style={{
        left: `${Math.random() * 100}vw`,
        animationDuration: `${Math.random() * 3 + 2}s`,
        animationDelay: `${Math.random() * 5}s`
      }}
    >
      ❅
    </div>
  ));

  return <div className="snow-container">{snowflakes}</div>;
};

export default Snowflakes;

2. src/components/Snowflakes.css 파일에 다음을 작성합니다.

/* Snowflakes.css - 떨어지는 눈송이 스타일 */
.snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  top: -2vh;
  color: #fff;
  font-size: 1em;
  opacity: 0.8;
  user-select: none;
  pointer-events: none;
  /* 클릭 이벤트를 통과시킵니다. */
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100vh);
  }
}

.snowflake {
  animation: snowfall linear infinite;
}

Add Wish Form 컴포넌트 생성

이 컴포넌트를 통해 사용자는 소원을 입력할 수 있습니다.

1. src/components/AddWishForm.js 파일에 다음을 작성합니다.

// AddWishForm.js - 새로운 소원을 추가하기 위한 Form 컴포넌트
import React, { useState } from "react";
import { TextField, Button, Box } from "@mui/material";

function AddWishForm({ onAddWish }) {
  const [wish, setWish] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    onAddWish(wish);
    setWish("");
  };

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      sx={{
        mt: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <TextField
        label="Your Wish"
        variant="outlined"
        value={wish}
        onChange={(e) => setWish(e.target.value)}
        sx={{ mr: 2 }}
      />
      <Button variant="contained" color="secondary" type="submit">
        Submit Wish
      </Button>
    </Box>
  );
}

export default AddWishForm;

Wish List 및 Postcard 컴포넌트 구현

추가된 소원을 엽서 스타일의 반투명 소원 벽에 표시합니다.

1. src/components/WishList.js 파일에 다음을 작성합니다.

// WishList.js - 소원 벽에 소원을 표시하는 컴포넌트
import React from "react";
import Postcard from "./Postcard";
import "./WishList.css";

function WishList({ wishes, onRemoveWish }) {
  return (
    <div className="wish-wall">
      {wishes.map((wish, index) => (
        <Postcard key={index} wish={wish} onRemoveWish={onRemoveWish} />
      ))}
    </div>
  );
}

export default WishList;

2. src/components/Postcard.js 파일에 다음을 작성합니다.

// Postcard.js - 각 소원을 엽서로 표시합니다.
import React from "react";
import { Card, CardContent, Typography, IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import "./Postcard.css";

function Postcard({ wish, onRemoveWish }) {
  return (
    <Card className="postcard">
      <CardContent>
        <IconButton
          className="delete-button"
          onClick={() => onRemoveWish(wish)}
          size="small"
        >
          <CloseIcon fontSize="inherit" />
        </IconButton>
        <Typography variant="h6" component="div">
          {wish}
        </Typography>
      </CardContent>
    </Card>
  );
}

export default Postcard;

애플리케이션 스타일 적용

애플리케이션이 원하는 모양과 느낌을 갖도록 합니다.

1. src/App.css 파일에 다음을 작성합니다.

/* App.css - 배경 이미지를 포함한 전역 스타일 */
.App {
  color: #fff;
  font-family: "Your-Christmas-Theme-Font", sans-serif;
}
.app-container {
  margin-top: -4vh;
  position: relative;
  z-index: 2;
  background: url("./tijana-drndarski-1L4q_S1atmc-unsplash.jpg") no-repeat
    center center;
  background-size: cover;
  min-height: 100vh;
  min-width: 200vh;
  color: #fff;
}

2. src/components/Postcard.css 파일에 다음을 작성합니다.

.postcard {
  width: 200px;
  height: 140px;
  margin: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  transform: rotate(-5deg);
}

.postcard:nth-child(odd) {
  transform: rotate(5deg);
}

.delete-button {
  position: absolute;
  top: 0;
  right: 0;
}

3. src/components/WishList.css 파일에 다음을 작성합니다.

.wish-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

App 컴포넌트 조립

메인 애플리케이션 컴포넌트를 구성합니다.

1. src/App.js 파일에 다음을 작성합니다.

// App.js - 메인 애플리케이션 컴포넌트
import React, { useState } from "react";
import AddWishForm from "./components/AddWishForm";
import WishList from "./components/WishList";
import Snowflakes from "./components/Snowflakes";
import { Container, Button, Box } from "@mui/material";
import "./App.css";

function App() {
  const [wishes, setWishes] = useState([]);
  const [showForm, setShowForm] = useState(false);

  const handleAddWish = (newWish) => {
    setWishes([...wishes, newWish]);
    setShowForm(false);
  };

  const handleRemoveWish = (wish) => {
    setWishes(wishes.filter((item) => item !== wish));
  };

  return (
    <Container maxWidth="md" className="app-container">
      <Snowflakes />
      <Box sx={{ my: 4, textAlign: "center" }}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => setShowForm(!showForm)}
        >
          {showForm ? "Close" : "Add Wish"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

프로젝트 실행

마침내, 크리스마스 위시 리스트 빌더 (Christmas Wish List Builder) 를 실제로 볼 시간입니다.

npm start

이 명령은 기본 웹 브라우저에서 애플리케이션을 실행합니다. 크리스마스 테마의 위시 리스트 앱이 떨어지는 눈송이, 반투명 위시 벽, 엽서 스타일의 위시와 함께 표시되어야 합니다.

요약

이 프로젝트에서 React 를 사용하여 크리스마스 위시 리스트 빌더를 성공적으로 구축했습니다. 전체 화면의 축제 배경, 매력적인 눈송이 효과, 사용자가 엽서 형태로 위시를 추가하고 볼 수 있는 반투명 위시 벽을 특징으로 합니다. 이 프로젝트는 React 및 CSS 기술을 향상시킬 뿐만 아니라 재미있고 인터랙티브한 웹 애플리케이션으로 휴가 분위기를 조성합니다.