1차 프로젝트 [SPAOGAME] -상품상세페이지편

개발.log·2021년 10월 17일
2
post-thumbnail

- 마지막 타겟에만 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>
        ))}

  1. 먼저 constructor 로 state에 activeBtnByColor: 0, activeBtnBySize: 0의 상태를 갖고있는다.

  2. 사용자가 onClick을 하면 인자로 idx를 받고 activeBtnByColor: 0, activeBtnBySize: 0의 값을 idx로 바꿔준다.

  3. colors 또는 size에서 map을 돌릴때 idx를 인자로 받고,onClick시 changeByTargetNameColor 혹은 changeByTargetNameSize를 콜백함수로 즉시 실행한다.

  4. 이때, 삼항연산자로 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}`);
        }
      });
  };

달팽이,,나름 전력 질주중 ,, 이었지만 프로젝트 기간이 10일로 너무 짧고, 촉박했다.
아쉬운 부분이 많고, 리팩토링할 부분도 너무 많이 보인다.
코드를 짜면서 기간에 쫒기다 보니까 조바심도 많이 생기고, 머리가 잘 안굴러갔던거 같다. 다음 프로젝트부터는 침착하게..내 갈길을 가야지ㅎㅎㅎ

여기서 꼭 리팩토링하고 싶은 부분은,

  • 상품디테일의 오른쪽 장바구니 옵션창 부분 sticky로 고정하기.
  • 댓글달면 댓글의 맨 마지막 부분으로 스크롤 포커스 하기.
  • 후기 작성폼 모달창으로 바꾸기.

당장 내일부터 또 2차프로젝트가 시작되는 빡빡한 일정이기에 언제 할 수 있을 지 모르겠지만, 꼭 해내야지.
조만간 리팩토링 게시물로 찾아뵙겠습니다^_^...

profile
개발.log
Think Big Aim High Act Now
이전 포스트

1차 프로젝트 [SPAOGAME] -상품리스트편

다음 포스트

getBoundingClientRect() 좌표표시함수

0개의 댓글