[TIL/React] 2023/10/09

Detail page layout 🟢

ProductDetailPageBackgroundStyle에 의해 전체적인 배경색이 적용되고 있다. AllContentWrapper는 첫 번째 사진에서 노란색 border로 표시되는 영역이다. 해당 wrapper는 width가 900px 이하가 되면 flex 방향을 column으로 변경하는 특별한 역할을 수행한다.

AllContentWrapper는 사실상 ImgWrapper와 InfoWrapper를 감싸고 있다고 봐도 무방하다. 'flex:1'이 공통적으로 작성되어 있는 점을 확인할 수 있다. 쉽게 말하자면 AllContentWrapper 영역을 반반으로 나누겠다는 의미이다. align-items를 flex-start로 지정하여 화면 상단에 위치하도록 설정했다.

각종 info, 옵션 그리고 수량을 합친 영역이 ProductDetailPageInfoDataWrapper이다. 한마디로 InfoWrapper를 InfoDataWrapper와 ButtonWrapper로 구성된다고 할 수 있다. 'flex:1.5'와 'flex:2'를 통해 1.5 대 2의 비율로 InfoWrapper 내부의 영역을 차지하고 있다는 것을 확인할 수 있다.

마지막으로 ProductDetailPageInfoDataWrapper는 div와 OptionWrapper 그리고 AmountWrapper로 구성된다. InfoDataWrapper를 기준으로 적절히 flex를 나눠 갖고 있다.

detail page에서 사용하는 카운터와 드롭다운은, component -> Detail 폴더로 분리했다. 데이터가 연결된 상태는 아니다. 이 부분이 상세 페이지에서 장바구니 페이지로 넘어가는 변곡점이다.

Counter.js

import React, { useState } from "react";
import styled from "styled-components";

const CounterContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Button = styled.button`
  padding: 10px 20px;
  font-size: 1.5em;
`;

const Display = styled.div`
  padding: 10px;
  font-size: 1.5em;
  margin: 0 20px;
`;

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    if (count > 0) {
      setCount((prevCount) => prevCount - 1);
    }
  };

  return (
    <CounterContainer>
      <Button onClick={handleDecrement}>-</Button>
      <Display>{count}</Display>
      <Button onClick={handleIncrement}>+</Button>
    </CounterContainer>
  );
};

export default Counter;

Dropdown.js

import React, { useState } from "react";
import styled from "styled-components";

const DropdownButton = styled.div`
  padding: 10px;
  width: 100%;
  border: 2px solid black;
  cursor: pointer;
  background-color: #f0f0f0;
  color: black;
`;

const DropdownList = styled.div`
  display: ${({ isOpen }) => (isOpen ? "block" : "none")};
`;

const DropdownItem = styled.div`
  padding: 10px;
  width: 200px;
  border: 2px solid black;
  cursor: pointer;
  &:hover {
    background-color: #f0f0f0;
  }
`;

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);

  const options = ["Option 1", "Option 2", "Option 3"];

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <>
      <DropdownButton onClick={() => setIsOpen(!isOpen)}>
        {selectedOption || "Select an option"}
      </DropdownButton>
      <DropdownList isOpen={isOpen}>
        {options.map((option) => (
          <DropdownItem key={option} onClick={() => handleOptionClick(option)}>
            {option}
          </DropdownItem>
        ))}
      </DropdownList>
    </>
  );
};

export default Dropdown;

현재 🟢

구리다. 하지만 처음보단 괜찮아졌다. 내일 더 수정하기로