Project_WePet_회고_Tech🐾

프로젝트 키노트 🌼

https://www.canva.com/design/DAFliNTrCd4/RHXx6U4dx9AxCbEiw04JCA/edit?utm_content=DAFliNTrCd4&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

1. Nav animation

.line {
    z-index: 1000;
    width: 30px;
    height: 3px;
    margin: 7px 0px;
    transition-duration: 0.5s;
    background-color: #000;
  }
  
  .hamTopLine {
    transform: translateY(10px) rotate(45deg);
    transform-origin: center;
  }
  
  .hamMidLine {
    opacity: 0;
  }
  
  .hamBtmLine {
    transform: translateY(-10px) rotate(-45deg);
    transform-origin: center;
  }
}

ham 버튼이 단순히 위치해 있는 게 아니라 유저의 액션에 반응하여 움직이도록 하고 싶었다 !
3개의 라인 중 가운데 라인은 opacity를 주어 안보이게 처리하고 최상단, 최하단의 라인은 transform-origin: center 를 주어 가운데를 기점으로 움직이게 해서 X버튼을 만들도록 했다.

2. Nav @keyframes

animation: modalShowRight 0.3s;
@keyframes modalShowRight {
  from {
    opacity: 0;
    margin-right: -50px;
  }
  
  to {
    opacity: 1;
    margin-right: 0;
  }
}

animation 속성을 사용하여 modalShowRight 애니메이션의 지속시간을 0.3초로 지정해 부드러운 애니메이션을 연출하고
keyframe ( from과 to )를 사용하여 오른쪽에서 왼쪽으로 나오는 형태의 애니메이션을 연출했다.

✅ 애니메이션 없이 모달창이 그냥 떴을 때와 애니메이션을 부여해서 부드럽게 모달창이 떴을 때 완성도 차이가 많이 나 보였다 ! 관련 css를 좀 더 공부해봐야 할 것 같다.

3. let token = localStorage.getItem('TOKEN')

localStorage에 TOKEN의 유무를 확인하여 useNavigate hook으로 결과에 맞는 페이지로 이동한다.

4. config.js

export const BASE_URL = 'http://10.58.52.229:3000'

export const APIS = {
  product: `${BASE_URL}/products`,
}

useEffect(() => {
    fetch(`${APIS.product}/details/${productId}`)
      .then(response => response.json())
      .then(result => {
        console.log(result)
        setProductData(result.data)
      })
  }, [])

API 주소가 자주 변경되다 보니 그 때마다 각 페이지의 fetch를 찾아 삭제하려니 너무 번거로웠다.
config.js파일을 src 폴더 내에 만들어서 URL 을 설정하고 각 엔드포인트마다 미리 작성해두었고,
이후 변동이 생길 시 config.js 파일 내의 URL만 수정하면 되도록 했다.

5. if (!productData?. productPrice ) return null

useEffect 내부의 데이터를 불러오기 전에
UI 내부의 map 이나 reduce 같은 메서드를 만나면 렌더링이 중지되고 에러메세지가 떴다.

useEffect로 데이터 불러오기가 렌더링 뒤로 밀려나서
아직 map이나 redudce를 실행할 배열이 불러와지지 않아서였는데,

처음에는

if (!productData) return null

만 작성했었다. 그랬더니 어떤 부분은 해결이 되고 해결이 되지 않고 에러메세지를 띄우는 일부가 남았다.
그래서 ?. (옵셔널 체이닝 연산자) 를 활용해 productData 객체와 productPrice 프로퍼티의
존재 여부를 한번 더 체크하도록 코드를 작성해서 해결했다.

• ?. 옵셔널 체이닝 연산자
  ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

6. toLocaleString( )

product detail 페이지와 purchase 페이지에서 상품 가격이나 총계 등을 명시할 때
number type으로 계산을 하고 계산을 마친 뒤 toLocaleString() 로 사용 언어에 맞는 표현을 포함해주었다.

• number에 사용 시 1,000 처럼 필요한 곳에 쉼표를 찍어준다.
  date에 사용 시 문화권에 맞는 시간표기법으로 년, 월, 일, 시간을 리턴해준다.
  array에 사용시 array의 내용을 모두 문자로 반환해서 보내준다.

7. window.scrollTo(x좌표, y좌표)

 onClick={() => {
            const element = document.querySelector('.detailInformationBox')
            if (element) {
              const y = element.getBoundingClientRect().top - 100
              window.scrollTo({ top: y, behavior: 'smooth' })
            }
          }}

상품 정보나 리뷰를 클릭했을 때 원하는 위치로 스크롤이 이동하도록 구현하고 싶었다 !
window. scrollTo() 로만 작성하면 고정된 y값을 지정하기 때문에
컨텐츠 양에 변동이 있을 때 마다 새로 지정해줘야 하는 번거로움이 있었다.
그래서 특정 요소의 값을 지정하기 위해 querySelector로 특정 클래스에 해당하는 요소를 찾아 element에 담아 선언하고
element.getBoundingClientRect().top 을 이용해 querySelector로 찾은 요소의 상단 경계가
뷰포트의 상단과 얼마나 떨어질 것인지를 지정했다.

마지막으로 window.scrollTo()에 위에서 정한 값을 top에 지정하고
behavior: 'smooth'를 통해 스크롤이 부드럽게 이동하도록 했다.

8. img Carousel Box

      <div className={`imgBox ${isCarousel ? '' : 'carousel'}`}>
        <img
          className="mainImg"
          src={productData.mainThumbnailImage}
          alt="productImage"
        />
        <img
          className="mainImg"
          src={productData.mainThumbnailImage}
          alt="productImage"
        />
      </div>

//scss
  .imgBox {
    display: flex;

    transform: translate(0px);
    transition: 1s;
    img {
      width: 100%;
    }
  }

  .carousel {
    transform: translate(-500px);
  }

.mainImg {
  width: 500px;
  flex: none;
  object-fit: contain;
}

먼저 imgBox div 안에 carousel 기능으로 돌아가게 할 이미지를 2개 나열했다.
mockdata로 작업할 때는 배열로 관리해서 index로 2개의 이미지를 작업했었는데,
백엔드와 통신을 하게 되면서 수정되었다.

기본 imgBox 에 transform : translate(0px);을 주어 기본값을 주고 버튼을 눌렀을 때
state 변경에 따른 carousel이라는 className을 추가하여 translate를 새로 부여해 x축으로 밀어주었다.
기본 class style에 transition을 주어 부드럽게 이미지가 넘어갈 수 있도록 했다.

사실 처음에는 이미지 나열을 배열로 관리해보고 싶었는데, 다음에는 좀 더 배열로 관리하는 방법을 찾아보고 싶다.

9. TOKEN을 부여받은 회원의 배송지 정보 등록(POST), input value 관리

// purchase page
const [inputValue, setInputValue] = useState({
    name: '',
    phone: '',
    address1: '',
    address2: '',
    memo: '',
  
// purchase 내 address component
const Address = ({
  inputValue,
  setInputValue,
}) => {
  const { name, phone, address1, address2 } = inputValue
  
  const handleUserInput = e => {
    const { name, value } = e.target
    setInputValue({ ...inputValue, [name]: value })
  }
  

먼저 purchase 페이지에 address 모달에서 받은 input value를 출력할 것이기 때문에
purchase 페이지에 inputValue와 setInputValue state를 address에서 받아서 사용했다.

address 내부에서는 inputValue를 비구조화 할당을 통해 name, phone, address1, address2 로 분해하고 이를 통해 각각의 값을 저장하고 추적하도록 했다.

마지막으로 handleUserInput 함수는 input의 이벤트를 처리하는 함수인데,
e를 매개변수로 받아 e.target의 name과 value를 구조분해할당을 이용해 추출한다.

그 후 추출한 값을 다시 setInputValue 함수를 호출하여 inputValue의 상태를 업데이트하는데
이 때 스프레드 문법(전개연산자) 를 사용하여 복사후 [name]: value를 통해 해당 입력 요소의 값을 업데이트 하도록 했다.

10. 구조분해 할당 및 전체 동의 state 관리

const [agreeList, setAgreeList] = useState({
    isInfoAgree: false,
    isUseAgree: false,
  })

  const { isInfoAgree, isUseAgree } = agreeList

  const isAllChecked = Object.values(agreeList).every(list => list === true)
  
  const handleAgree = name => {
    setAgreeList(prev => ({ ...prev, [name]: !prev[name] }))
  }

  const handleAllCheck = () => {
    if (isAllChecked) {
      setAgreeList(prev => ({ ...prev, isInfoAgree: false, isUseAgree: false }))
    } else {
      setAgreeList(prev => ({ ...prev, isInfoAgree: true, isUseAgree: true }))
    }
  }

동일한 약관에 대한 동의가 좌측 하단과 우측 상단 두번에 걸쳐 출력되어있다.
따라서 좌측의 동의와 우측의 동의가 연동되어 관리되도록 하면서, 결과적으로 4개의 동의가 모두 체크되었을 때
전체 동의 체크박스에 체크가 자동으로 들어오게 하고,
전체 동의 체크박스를 누르면 모두에 체크가 들어오거나 모두 사라지게 하고 싶었다.

먼저 agreeList state를 isInfoAgree 와 isUseAgree 로 객체 형태로 구성했다.
그런 뒤 agreeList를 isInfoAgree와 isUseAgree로 구조분해 할당을 해 사용하기 편하게 만들었다.

isAllChecked는 Object.values(agreeList) 를 사용하여 객체값을 배열로 변환하고
every 메서드를 사용하여 list 내의 모든 값을 주어진 조건인 true에 부합하는 지 체크하여 저장하도록 했다.

handleAgree는 name을 매개변수로 agreeList 객체 내의 각각의 속성을 추적하여 체크박스의 상태를 개별적으로 관리한다.

마지막으로 handleAllcheck는 isAllchecked의 반환값을 확인하여
만약 true인 상태라면 모두 false로 변환하여 모든 체크박스를 끄도록 하고
만약 false인 상태라면 모두 true로 변환하여 모든 체크박스를 키도록 한다.

• Object.values() : 전달된 파라미터 객체가 가지는 속성의 값만으로 이루어진 배열을 리턴한다.
• .every : 배열 내 모든 요소가 주어진 판별식을 충족하는지 확인하여 boolean 값을 반환한다.

11. reduce 메서드로 총 금액 계산 및 관리

  const totalPrice = orderList.reduce(
    (acc, cur) => acc + cur.itemQuantity * cur.itemPrice,
    0
  )

orderList는 구매할 상품들의 각각의 가격과 구매 수량을 포함한 배열이다.
reduce내의 acc는 기존 값, cur은 현재 값을 의미한다. reduce는 배열의 모든 요소를 순회하며
정해진 함수를 실행하고 이전에 실행해서 도출해두었던 값, acc에 합산한다. 모든 배열 요소에 수행이 끝나면 하나의 값을 도출해 반환한다.

• reduce : 배열의 각 요소에 대해 정해진 함수를 실행하고 하나의 결과를 반환한다.