리액트로 쇼핑몰 만들기

shopping.zip

0.00MB

index.js

0.00MB

위에는 다 소스 사용한 거

 

리액트 까는법

npx create-react-app <project name>

cd <project name>

npm start 

로 시작

 

Test.jsx

import React, { useState } from "react";

import Login from "./Login";

import WritePost from "./Write";

import Board from "./Board";

import "./Test.css"; // CSS 파일을 import

const Product = ({ name, price, image, addToCart }) => (

  <div className="product">

    <img src={image} alt={name} />

    <h3>{name}</h3>

    <p>{price}원</p>

    <button onClick={addToCart}>Add to Cart</button>

  </div>

);

const ShoppingCart = ({ cartItems }) => (

  <div className="shopping-cart">

    <h2>Shopping Cart</h2>

    <ul>

      {cartItems.map((item, index) => (

        <li key={index}>

          <strong>{item.name}</strong> - {item.price}원

        </li>

      ))}

    </ul>

  </div>

);

const Test = () => {

  const [cart, setCart] = useState([]);

  const products = [

    { id: 1, name: "Shoes", price: 5000, image: "/Shoes.jpg" },

    { id: 2, name: "T-shirt", price: 2000, image: "/T-shirt.jpg" },

    // Add more products as needed

  ];

  const [posts, setPosts] = useState([]);

  const addToCart = (product) => {

    setCart([...cart, product]);

  };

  const handleLogin = () => {

    console.log("User logged in!");

  };

    const handlePostSubmit = (newPost) => {

      setPosts([...posts, newPost]);

    };

  return (

    <div className="app">

      <header>

        <h1 id="minji">MINJI</h1>

        <h3 id="SSM">Simple Shopping Mall</h3>

        <Login onLogin={handleLogin} />

      </header>

      <div className="products">

        {products.map((product) => (

          <Product

            key={product.id}

            name={product.name}

            price={product.price}

            image={product.image}

            addToCart={() => addToCart(product)}

          />

        ))}

      </div>

      <ShoppingCart cartItems={cart} />

      <WritePost onPostSubmit={handlePostSubmit} />

      <Board posts={posts} />

    </div>

  );

};

export default Test;

 

Login.jsx

import React, { useState } from "react";

const Login = ({ onLogin, isLoggedIn }) => {

  const [isLogged, setIsLogged] = useState(isLoggedIn);

  const handleLogin = () => {

    setIsLogged(true);

    onLogin();

    alert("환영합니다!");

  };

  const handleLogout = () => {

    setIsLogged(false);

    // 추가적인 로그아웃 로직을 원하는대로 작성할 수 있습니다.

  };

  return (

    <button onClick={isLogged ? handleLogout : handleLogin} id="login">

      {isLogged ? "Logout" : "Login"}

    </button>

  );

};

export default Login;

Write.jsx

import React, { useState } from "react";

import "./Write.css";

const WritePost = ({ onPostSubmit }) => {

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

  const handleTitleChange = (e) => {

    setTitle(e.target.value);

  };

  const handleContentChange = (e) => {

    setContent(e.target.value);

  };

  const handleSubmit = () => {

    const newPost = {

      title,

      content,

    };

    onPostSubmit(newPost);

    // 추가적인 로직 및 상태 업데이트를 수행할 수 있습니다.

  };

  return (

    <div className="form-container">

      <h2>글쓰기</h2>

      <div className="form-group">

        <label htmlFor="title">제목</label>

        <input

          type="text"

          id="title"

          value={title}

          onChange={handleTitleChange}

        />

      </div>

      <div className="form-group">

        <label htmlFor="content">내용</label>

        <textarea

          id="content"

          value={content}

          onChange={handleContentChange}

          rows="6"

        />

        <button onClick={handleSubmit}>글쓰기</button>

      </div>

    </div>

  );

};

export default WritePost;

Board.jsx

import React from "react";

const Board = ({ posts }) => (

  <div className="board">

    <h2>게시판</h2>

    <ul>

      {posts.map((post, index) => (

        <li key={index}>

          <strong>{post.title}</strong> - {post.content}

        </li>

      ))}

    </ul>

  </div>

);

export default Board;

---

Test.css

.app {

  text-align: center;

}

header {

  background-color: #74a27b;

  padding: 20px;

}

#minji {

  float: left;

}

#SSH {

  margin: auto;

}

#login {

  float: right;

}

h1 {

  font-size: 36px;

  color: #e0eedd;

  margin: 0;

}

h3 {

  font-size: 24px;

  color: #d9db7b;

}

.products {

  display: flex;

  justify-content: space-around;

  flex-wrap: wrap;

  margin: 20px;

}

.product {

  border: 1px solid #ddd;

  padding: 10px;

  margin: 10px;

  text-align: center;

}

.product img {

  width: 300px;

  height: 200px;

  object-fit: cover;

  border-radius: 8px;

}

.shopping-cart {

  background-color: #f0f0f0;

  padding: 20px;

  margin-top: 20px;

}

ul {

  list-style: none;

  padding: 0;

}

li {

  font-size: 18px;

  color: #555;

  margin-bottom: 10px;

}

Write.css

/* WritePost.css */

.form-container {

  max-width: 600px;

  margin: 20px auto;

  padding: 20px;

  background-color: #f9f9f9;

  border: 1px solid #ddd;

  border-radius: 8px;

}

.form-group {

  margin-bottom: 20px;

}

.form-group label {

  display: block;

  font-size: 18px;

  font-weight: bold;

  margin-bottom: 8px;

}

.form-group input,

.form-group textarea {

  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid #ddd;

  border-radius: 4px;

}

.form-group textarea {

  resize: vertical;

}