선택n집중

ProductBuy-BuyInputBox 구매하기를 누르면 진행되는 배송지 위치 , 이름 , 연락처 정보를 받아야한다.물론 유저데이터에 저장해 놓은 값을 쓸수도 있지만보통은 새로운 배송지 입력이 가능하도록 하는 기능들이 있는것을 보았다. 내 구현목표는1. 새로운 배송지를 입력할 수 있게 만들것.2. 현재 배송지도 값을 변경할 수 있도록 할것.3. 배송 메세지를 직접입력 가능하도록 할것.4. 입력 유효를 확인하여 구매하기 버튼 활성화를 할 것. form의 기능을 제대로 써야하지만 ,우리는 미리 만들어 놓은 데이터를 import 하거나 세션에 올려놓은 정보들로 찾고 있기 때문에 제대로 된 form 의 기능을 쓰지 못했다. 유저정보의 데이터는 나중에 정보 업데이트에 이용해야겠지만 , 현재로는 값을 저장하는데 ..

ProductBuy [/goods/:category/:id/buy] 단품 구매를 위한 페이지를 제작하게 되었다.form 에서 구매하기 버튼을 누르면 이컴포넌트가 실행되는데팀원들의 니즈는 단품에 대한 수량변경이 여기서도 가능했으면 좋겠다. 라는 점이였다.form에서 한거 들고오면되지...laction을 통해 state로 가지고 온값을 일치시켜서 먼저 초기값으로 넣어주는 작업을 하였다.  const location = useLocation(); const { category, id } = useParams(); const { options, btnValue, totalPrice } = location.state || {}; options가 옵션에 대한 내용,btnValue가 선택된 값,tot..

ProductDetails-ProductForm 폼에서 필요한 정보는내가 선택한 상품에 대한정보 (구매 금액이나 옵션을 불러와야하니까.)유저에 대한 정보가 필요하다.(유저가 없으면 구매 진행이 되면 안되니까.)프롭스의 형태로 선택된 상품에 대해 받아오고,세션스토리지에서 로그인 후 올려준 유저 정보를 가져온다. 기본으로 구성된 옵션은 두개였다.처음엔 "포장 옵션도 갯수 만들어주세요" 라는 팀원의 요구에충분히 만들 수 있을 거라 생각했는데생각보다 너무 어려웠다.값을 추후 저장하여 보내주기도 해야하고 다시 세션에 저장도 해야하니 제대로된 형태를 준비해야했다.  // select 옵션에 대한 state const [options, setOptions] = useState({ content..

ProductDetails [/goods/:category/:id]  프로젝트 구현이 어느정도 되기 시작하면서 , 로그인을 맡은 친구가 로그인에 성공하면 해당 유저의 데이터를 객체형식으로 세션스토리지로 보내줬다.그 세션스토리지의 여부로 인하여 로그인상태인지 판별할 수 있었고,또는 세션스토리지 정보를 바탕으로 세션스토리지의 값을 변경하기 위한 첫 연습이였다. url의 category와 id 로 해당 상품을 찾아낼 수 있었다.const { category, id } = useParams(); // 아이템을 찾기위한 url 소스 const selectedProduct = GoodsItems.find((item) => item.category === category && item.id === parseInt(i..

ProductList -ProductResult  상위 ProductList 에서 필터링 된 결과 물이 나열되는 컴포넌트이다. 나는 이전에 기본적으로 grid 를 이용하여 grid-template-cloumns 를 repeat(4,1fr)을 지정해 두었다.가로 4의 고정값을 가지고 있으면서,나는 그럼 8개 (가로 4 * 세로 2) 이상이 넘어가면 페이지 네이션을 구현하고싶었다. 페이지네이션에 대한 유투브 자료들을 보면서 내가 해보고싶은 방법을 정리했다.원리는 다음과 같았다.1.페이지 수를 유동적으로 만들것. 페이지 수 =  총갯수에서 현재 표현할 갯수 의 올림 의 계산이 나온다.올림을 이용하는 메서드가 있었고 .그로인해 이런 공식을 만들 수 있었다.//현재 보여질 페이지 아이템 수.const itemsP..

ProductList [/goods/:category] 처음에는 메뉴를 구성하는 객체를 map 을 통해  메뉴바를 구성해준 뒤 ,  {productMenu.map((items, i) => ( {items.description} ))} useParams를 통해 값을 받아온다. const { category } = useParams();  goodsItem 의 복사본을 형성한 후 ,let filteredItems = GoodsItems.slice();.filter((items) => items.category === category);filter을 통해 item을 정리한후 결과 값이 나오는 하위 컴포넌트로 전달하는 간단하다면 간단한 메뉴바의 구성이였다. 하지만 리스트에서 가장 중요한부..

app.js app.js 는 연결하는 용도로 페이징 처리하는데 사용했다. return ( } /> } /> }> } /> } /> );}; * 의 사용으로 각자의 것만 확장하는 마지막 node 페이지는 굳이 명시하지 않고 *사용내부적으로 Routes 와 Route의 사용으로 마지막 페이징 처리를 하였다.사실 현재 프로젝트 내에서는 저것보다 훨씬 많다... 처음에 메인을 맡아준 친구가 급하게 header에서 각자 작업할 수 있도록 link를 연결해주었다.덕분에 나의 index 페이지가 생기면서 거기서 부터 작업할 수 있었다. 그중의 상품관련을 맡게 된 나는  } /> ..