개발 공부

메인화면Slider 를 사용해 새로 등록 된 상품을 10 개 까지 슬라이드로 보여줍니다버튼을 누르면 최대 8개씩 더 많은 상품을 보여줍니다. 정확한 email 과 password 를 입력하면 로그인,회원가입을 누르면회원가입 페이지로 이동합니다.유효성 검사를 거친 후에 가입하기를 누르면 가입을,취소를 누르면 이전 페이지로 돌아갑니다. 장바구니Header 의 position을 pixed로 Background 를 반투명 , z-index 를 높게 설정하여 페이지 위에 띄우고스크롤을 내려도 따라오도록 설정하였습니다.장바구니에 담은 상품들을 볼 수 있고 수량을 선택할 수 있으며 체크박스에 체크를 하면 총합계가 계산되며결제 페이지로 넘어갑니다. 결제 페이지체크한 상품들의 정보와 주문자의 정보를 띄우고배송메모를 선택..

상품의 상세페이지에서 주문하기 버튼을 누르면Modal 창이 뜨며 다시한번 주소와 사이즈 상품을 재차 확인하게 한 후에주문하기를 확정 시킵니다. 주문하기를 누르면 알림창이 뜨며마이페이지에 주문한 내역으로 가보면 자신이 주문한 상품이 추가되어 있습니다. 리액트코드는import React, { useEffect, useState } from 'react';import axios from 'axios';import './Mypage.css'; // 외부 스타일 시트 불러오기import Aside from '../Components/Aside';const Mypage = () => { const [ordersItems, setOrdersItems] = useState([]); // 사용자 주문 내역을 가져오는..

찜하기 기능은 상품 상세페이지에서 찜하기 버튼을 누르면Likes 테이블에 session 에 userCode 와 상세페이지의 productCode를 전달해데이터를 추가하는 로직입니다. 찜하기 버튼을 누르면 알람이 뜨게 되며 찜한 상품 페이지로 가보면  최근에 찜하기를 누른 상품부터 뜨도록 데이터를 저장할 때reverse() 메서드를 사용했습니다. import React, { useEffect, useState } from 'react';import './Cart.css';import axios from 'axios';import Aside from '../Components/Aside';const Like = () => { const [likeItems, setlikeItems] = useState([]..

상품 상세페이지에 장바구니에 담기를 누르면 각 유저에 해당 제품을 담기 위해서 userCode 와 productCode 가 필요합니다. 먼저 리액트로 프론트 코드부터 보면 import React, { useEffect, useState } from 'react'; import './Cart.css'; import Header from '../Components/Header'; import axios from 'axios'; const Cart = () => { const [cartItems, setCartItems] = useState([]); useEffect(() => { const fetchProducts = async () => { try { const response = await axios.g..

상세페이지로 이동 시키기 위해서 REST API 부터 만들겠습니다. ProductController 에서 각 productCode에 맞는 주소를 맵핑했습니다. @GetMapping("/getProduct/{productCode}") // 새로운 엔드포인트 추가 public ResponseEntity getProduct(@PathVariable("productCode") Long productCode) { Product product = productService.findByProductCode(productCode); if (product != null) { return new ResponseEntity(product, HttpStatus.OK); } else { return new ResponseEnt..