1차 프로젝트 [SPAOGAME] -상품상세페이지편
- 마지막 타겟에만 css 변경하기
이 부분에서도 굉장히 많은 고민을 했다.
내가 원하는건 마지막에 선택된 target의 border만 찐ㅎㅐ지길 바랬건만..
일단 클릭하기만 하면 모든게 찐해지는 마법스~☠️☠️
👉🏽 해결방법은?
---------------------------------------------(함수)
constructor() {
super();
this.state = {
targetnamecolor: ['옵션을 선택하세요'],
cartcolor: '',
gray: true,
targetnamesize: ['옵션을 선택하세요'],
cartsize: '',
count: 0,
countprice: 0,
activeBtnByColor: 0,
activeBtnBySize: 0,
};
}
changeByTargetNameColor = (e, idx) => {
this.setState({
targetnamecolor: e.target.name,
cartcolor: '- ' + e.target.name.toUpperCase() + ' /',
activeBtnByColor: idx,
});
};
changeByTargetNameSize = (e, idx) => {
this.setState({
targetnamesize: e.target.name,
cartsize: e.target.name,
activeBtnBySize: idx,
});
};
---------------------------------------------(랜더부분)
{colors.map((item, idx) => (
<button
name={item}
onClick={e => this.changeByTargetNameColor(e, idx)}
className={
this.state.activeBtnByColor === idx ? 'black_btn' : 'gray_btn'
}
>
{item.toUpperCase()}
</button>
))}
<div>
<span className="null_btn">[필수] </span>
<span className="null_btn">{targetnamecolor}</span>
</div>
<div className="choice_title">Size</div>
{size.map((item, idx) => (
<button
name={item}
className={
this.state.activeBtnBySize === idx ? 'black_btn' : 'gray_btn'
}
onClick={e => this.changeByTargetNameSize(e, idx)}
>
{item.toUpperCase()}
</button>
))}-
먼저
constructor로state에activeBtnByColor: 0,activeBtnBySize: 0의 상태를 갖고있는다. -
사용자가
onClick을 하면 인자로idx를 받고activeBtnByColor: 0,activeBtnBySize: 0의 값을idx로 바꿔준다. -
colors또는size에서map을 돌릴때idx를 인자로 받고,onClick시changeByTargetNameColor혹은changeByTargetNameSize를 콜백함수로 즉시 실행한다. -
이때, 삼항연산자로
map에서 받은 각 버튼의idx랑onClick시,changeByTargetNameColor또는changeByTargetNameSize로 인해 값이 바뀐idx가 같을 시에만className='black_btn'으로 바꿔준다.
이해가...가시나요....? 이해 안가시는 부분 댓글 달아주세요(😅)
- 모든 조건을 충족해야만 장바구니 버튼 활성화
-----------------------------------------------(함수부분)
notIsValidOption = (count, cartcolor, cartsize) => {
return count > 0 && cartcolor !== '' && cartsize !== '' ? false : true;
};
-----------------------------------------------(랜더부분)
<button
className="cart"
onClick={this.goToCart}
disabled={this.notIsValidOption(count, cartcolor, cartsize)}
>수량이 1개 이상이고 컬러와 사이즈가 빈값이 아닐 시에 disalbed는 false가되어 활성화 되고, 그렇지 않으면 true가 되어 비활성화 된다.
이건 뭐 간단한 부분..!
- 리뷰작성과 댓글작성
이부분에서 아쉬운점은 리뷰작성 창을 모달로 바꾸지 못한점이다..ㅠ_ㅠ
리팩토링 과정에서 꼭 모달로 바꾸리라!💪🏼
이 과정은 일반적인 게시판 글 작성, 댓글작성 로직과 똑같기 때문에 생략하겠다.
이 부분에서 헤맸던 부분은 모델링 과정에서 원래
posting_info와 comment_info가 동등한 위치에 있었는데, 후기component도 map을 돌려서 뿌려주고 있고, 그안에 댓글component도 map을 돌려 뿌려주는데, 이렇게 되면 모든 포스팅에 모든 댓글이 한번에 뿌려졌다.
ex) 1번 후기글에 댓글 1-1,1-2,1-3, / 2번 후기글에 댓글 2-1,2-2,2-3 이런식으로 뿌려져야하는데 1번 후기글에 1-1,1-2,1-3,2-1,2-2,2-3
2번 후기글에 1-1,1-2,1-3,2-1,2-2,2-3 (내가 방법을 못찾은걸수도🙄..?)
기존모델링
{
"goods_detail": [
{
"product_id": 13,
"name": "[포우먼] 배색 가디건",
"price": 39000,
"colors": ["Red", "Blue", "Brown", "Green"],
"size": ["L", "XL", "FREE"],
"image_list": [
"http://spao.com/web/product/small/202108/504512a2f6a19164be6fcb40b04b1bec.jpg",
"http://spao.com/web/product/extra/small/202108/85bcadb79d42d3d51deaa27a3cb59eb0.jpg",
"http://spao.com/web/product/extra/small/202108/e0f67f571208ae84ec6b8a0d3ca40ff8.jpg",
"http://spao.com/web/product/extra/small/202108/b5b47c7f246c0a1564e52e2d17a41235.jpg",
"http://spao.com/web/product/extra/small/202108/3df208f9655c478e2804edf933a8cec1.jpg",
"http://spao.com/web/product/extra/small/202108/cc7a3d4e587f0d94905cbeaef2a540ae.jpg"
],
"posting_info": [
{
"posting_id": 3,
"posting_writer": "김현진",
"posting_title": "3번째후기글",
"posting_content": "내용33333333333333",
"posting_image": [],
"posting_date": "2021-10-09"
},
{
"posting_id": 2,
"posting_writer": "이기용",
"posting_title": "2번째후기글",
"posting_content": "내용22222222222222222222222222222222222222222222222222222222222",
"posting_image": [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4pqgOThbQJwXbIFeO59wZKDR-AQ9E4qADmw&usqp=CAU",
"https://mblogthumb-phinf.pstatic.net/MjAxODA1MDdfMTY1/MDAxNTI1Njk2NDIwMjQ1.pTtCRxeZKJ0wTXpyobCtHs1PyU51aZC78LqVfPMFDOIg.NZU8W4VGTvT95VI0XRq2ng7LyGC_9h07AANnVDObDzIg.PNG.jsrwnmejs/2018-05-07_21%3B31%3B33.PNG?type=w2"
],
"posting_date": "2021-10-09"
},
{
"posting_id": 1,
"posting_writer": "정경훈",
"posting_title": "1번째후기글",
"posting_content": "내용111111111111111111111111111111111111111111111111111111111111111111111111111",
"posting_image": [
"https://mblogthumb-phinf.pstatic.net/MjAxODA1MDdfMjAg/MDAxNTI1Njk2NDE2MTkx.c0eLQK-e2wlOEd_oLTXRnrFJ5_QNElxc9GbgjHUO8fIg.ydwTasmnjROtieAIloi-ePnakOExe26LZS50Fn5RAqkg.PNG.jsrwnmejs/2018-05-07_21%3B23%3B32.PNG?type=w2",
"https://c-cl.cdn.smule.com/rs-s79/arr/dd/5b/0ae4b120-c80a-4163-ba2f-ce8fcef6eaec.jpg",
"https://i.ytimg.com/vi/1rc2OJCPZ-c/sddefault.jpg",
"https://mblogthumb-phinf.pstatic.net/MjAxODA1MDdfMTY1/MDAxNTI1Njk2NDIwMjQ1.pTtCRxeZKJ0wTXpyobCtHs1PyU51aZC78LqVfPMFDOIg.NZU8W4VGTvT95VI0XRq2ng7LyGC_9h07AANnVDObDzIg.PNG.jsrwnmejs/2018-05-07_21%3B31%3B33.PNG?type=w2"
],
"posting_date": "2021-10-09"
}
],
"posting_count": 3,
"comment_info": [
{
"posting_id": 2,
"comment_id": 5,
"comment_writer": "김현진",
"comment_content": "첫번째 댓글입니다",
"comment_date": "2021-10-10"
},
{
"posting_id": 2,
"comment_id": 6,
"comment_writer": "이기용",
"comment_content": "2번째 댓글입니다",
"comment_date": "2021-10-10"
},
{
"posting_id": 1,
"comment_id": 1,
"comment_writer": "강성구",
"comment_content": "첫번째 댓글입니다",
"comment_date": "2021-10-10"
},
{
"posting_id": 1,
"comment_id": 2,
"comment_writer": "정경훈",
"comment_content": "번째 댓글입니다",
"comment_date": "2021-10-10"
},
{
"posting_id": 1,
"comment_id": 3,
"comment_writer": "김주현",
"comment_content": "3번째 댓글입니다",
"comment_date": "2021-10-10"
},
{
"posting_id": 1,
"comment_id": 4,
"comment_writer": "송영록",
"comment_content": "4번째 댓글입니다",
"comment_date": "2021-10-10"
}
]
}
]
}이를 posting_info 안에 comment_info를 넣어주니까
posting_info component(Review 컴포넌트였음.)에서 comment_info (Reply 컴포넌트로) props를 전달할때 commnet_info에 posting_info정보를 같이 줄 수 있어서, 내가 단 댓글이 어떤 게시물에 단 댓글인지에 대한 정보를 같이 백에 전달 할 수 있었다.
바꾼모델링
{
"goods_detail": [
{
"product_id": 2,
"name": "[포우먼] 배색 가디건",
"price": 69900,
"colors": ["blue", "yellow", "green", "brown"],
"size": ["L", "XL", "FREE"],
"image_list": [
"http://spao.com/web/product/small/202108/504512a2f6a19164be6fcb40b04b1bec.jpg",
"http://spao.com/web/product/extra/small/202108/85bcadb79d42d3d51deaa27a3cb59eb0.jpg",
"http://spao.com/web/product/extra/small/202108/e0f67f571208ae84ec6b8a0d3ca40ff8.jpg",
"http://spao.com/web/product/extra/small/202108/b5b47c7f246c0a1564e52e2d17a41235.jpg",
"http://spao.com/web/product/extra/small/202108/3df208f9655c478e2804edf933a8cec1.jpg",
"http://spao.com/web/product/extra/small/202108/cc7a3d4e587f0d94905cbeaef2a540ae.jpg"
],
"posting_info": [
{
"posting_id": 5,
"posting_writer": "이기용2222",
"posting_title": "제목2-1",
"posting_content": null,
"posting_image": [
"https://cafe24img.poxo.com/scenerity/web/product/big/20200327/94edcae99664d3d71b83c55fe2140115.jpg"
],
"posting_date": "2021-10-11",
"comment_info": []
},
{
"posting_id": 4,
"posting_writer": "이기용2222",
"posting_title": "제목2-1",
"posting_content": "내용2-1",
"posting_image": [],
"posting_date": "2021-10-11",
"comment_info": [
{
"posting_id": 4,
"comment_id": 7,
"comment_writer": "이기용",
"comment_content": "댓글66666",
"comment_date": "2021-10-11"
}
]
},
{
"posting_id": 3,
"posting_writer": "이기용",
"posting_title": "제목1-1",
"posting_content": null,
"posting_image": [
"https://storynine.co.kr/web/product/big/20200224/4908b2264ad9ac46f4d2d7f1e6f77ea0.jpg"
],
"posting_date": "2021-10-11",
"comment_info": [
{
"posting_id": 3,
"comment_id": 6,
"comment_writer": "이기용2222",
"comment_content": "댓글55555",
"comment_date": "2021-10-11"
}
]
},
{
"posting_id": 2,
"posting_writer": "이기용",
"posting_title": "제목1-2",
"posting_content": "내용1-2",
"posting_image": [
"https://creamcheese.co.kr/web/product/big/20200111/a684d2cdaa1341b2cb7f0118776ca2c9.jpeg",
"http://new-more.co.kr/web/product/big/201709/76_shop1_868144.jpg",
"https://m.freund.co.kr/web/product/big/201902/ac597bf1d48f02e43705dda82b262214.jpg"
],
"posting_date": "2021-10-11",
"comment_info": [
{
"posting_id": 2,
"comment_id": 4,
"comment_writer": "이기용",
"comment_content": "댓글333333",
"comment_date": "2021-10-11"
},
{
"posting_id": 2,
"comment_id": 9,
"comment_writer": "이기용",
"comment_content": "댓글88888",
"comment_date": "2021-10-11"
}
]
},
{
"posting_id": 1,
"posting_writer": "이기용",
"posting_title": "제목1-1",
"posting_content": "내용1-1",
"posting_image": [],
"posting_date": "2021-10-11",
"comment_info": [
{
"posting_id": 1,
"comment_id": 1,
"comment_writer": "이기용",
"comment_content": "댓글111111",
"comment_date": "2021-10-11"
},
{
"posting_id": 1,
"comment_id": 2,
"comment_writer": "이기용2222",
"comment_content": "댓글222222",
"comment_date": "2021-10-11"
},
{
"posting_id": 1,
"comment_id": 3,
"comment_writer": "이기용2222",
"comment_content": "댓글222222",
"comment_date": "2021-10-11"
},
{
"posting_id": 1,
"comment_id": 5,
"comment_writer": "이기용",
"comment_content": "댓글444444",
"comment_date": "2021-10-11"
},
{
"posting_id": 1,
"comment_id": 8,
"comment_writer": "이기용",
"comment_content": "댓글177777",
"comment_date": "2021-10-11"
}
]
}
],
"posting_count": 5
}
]
}
reviewInput = () => {
fetch('http://10.58.3.134:8000/postings/comments', {
headers: { Authorization: localStorage.getItem('token') },
method: 'POST',
body: JSON.stringify({
comment_content: this.inputRef.current.value,
posting_id: this.props.posting_id,
}),
})
.then(response => response.json())
.then(result => {
if (result.message === 'USER_NOTEXIST') {
alert('댓글이 정상적으로 등록 되지 않았습니다.');
} else {
this.props.history.push(`${this.props.location.pathname}`);
}
});
};
아쉬운 부분이 많고, 리팩토링할 부분도 너무 많이 보인다.
코드를 짜면서 기간에 쫒기다 보니까 조바심도 많이 생기고, 머리가 잘 안굴러갔던거 같다. 다음 프로젝트부터는 침착하게..내 갈길을 가야지ㅎㅎㅎ
여기서 꼭 리팩토링하고 싶은 부분은,
- 상품디테일의 오른쪽 장바구니 옵션창 부분 sticky로 고정하기.
- 댓글달면 댓글의 맨 마지막 부분으로 스크롤 포커스 하기.
- 후기 작성폼 모달창으로 바꾸기.
당장 내일부터 또 2차프로젝트가 시작되는 빡빡한 일정이기에 언제 할 수 있을 지 모르겠지만, 꼭 해내야지.
조만간 리팩토링 게시물로 찾아뵙겠습니다^_^...
Author And Source
이 문제에 관하여(1차 프로젝트 [SPAOGAME] -상품상세페이지편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@71summernight/1차-프로젝트-SPAOGAME-상품상세페이지편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
