Sunnyside agency page 4. 이미지 & 텍스트 카드

사실 조금씩 작성은 해나가고 있지만, 도대체 어떻게 정리해야할 지 감을 못잡고 있다.

하지만 중요한 것은, 완벽하지 않아도 계속해서 결과물을 내놓는 것이라고 생각한다. 그것이 지난 세월 개발자로 지낸 동안 MVP를 내놓고 계속 개발하던 동안 내가 했던 것인데, 너무 완벽해야 한다는 강박에 시달렸던 것 같다.
하지만 하고 싶은 것이 너무나도 많다. TDD도 작성해 보아야 하고, 면접준비도 해야하고, nextJS와 redux-saga도 해보아야 하고...

너무 고민하지 말고, 일단 만들어 놓고 생각해야 겠다.

완성본부터 확인해 보자.

데스크탑 해상도에서는 텍스트 먼저, 모바일에서는 column 순서에 그림 먼저 나오면 된다.

그렇다면, position: grid로 자식에 order를 설정해 주거나, position: flex 후 flex-direction을 row-reverse로 설정해 주면 될 것 같다.

이 과정에서 핵심은 다음과 같았다.

// ./styles/layout.styled.tsx

export const NextImg = styled(Image)<props.NextImgProps>`
  padding: ${({ padding }) => (padding ? padding : "0")};
  margin: ${({ margin }) => (margin ? margin : "0")};
  width: ${({ imgwidth }) => (imgwidth ? imgwidth : "auto")};
  height: ${({ imgheight }) => (imgheight ? imgheight : "auto")};
  border-radius: ${({ borderradius }) => (borderradius ? borderradius : 0)};
  display: ${({ display }) => (display ? display : "block")};
  @media screen and (min-width: 768px) {
    display: ${({ lgdisplay }) => (lgdisplay ? lgdisplay : "block")};
  }
`;

// ./pages/TwoCols.tsx
...
 <section>
      <Container>
        <Flex direction="column" lgdirection={reverse ? "row-reverse" : "row"}> // 이미지가 먼저이므로 lg해상도에서는 반대 순서여야 한다.
          <Relative style={{ flexBasis: "50%" }}> //50% 설정으로 딱 절반씩 영역을 가지도록 한다.
            <NextImg
              display="block" // 사실 이부분이 헷갈린다. absolute로 하고 relative로 감싸는 것이 맞지 않을까?하는데 styled-components 내부가 좀 꼬인  것 같다.
              lgdisplay="none"
              src={image}
              width={750} // next.image의 경우, 이미지에 맞춰서 render하기 위해 이미지 자체의 w,h 값 그 자체를 넣어 주었다.
              height={624}
              layout="fill"
              imgwidth={"100%"} // width 100% height auto
              style={{ zIndex: 5 }}
            />
            <NextImg
              display="none"
              lgdisplay="block"
              layout="fill"
              src={lgImage}
              width={720}
              height={600}
              imgwidth={"100%"}
              style={{ zIndex: 5 }}
            />
          </Relative>
          <Container flexBasis="50%">
            <Flex justify="center" align="center" height="100%" width="100%"> //  w h 를 100%로 맞춰서, row 방향일때는 길이를 이미지와 같이 맞춰주고, 모바일 해상도에서는 column 방향에 맞게 길이를 줄여줄 수 있었다.
              <TextCardComp type={reverse} />
            </Flex>
          </Container>
        </Flex>
      </Container>
    </section>
...

아직 Next/Image가 얼마나 강력한지는 잘 체감되지 않는다. 다만 캐싱부분에서 큰 이점이 있다고 하는데, 이 부분도 언젠가 확인해보아야 한다.