layout/#31

[yougyung]

📌 작업 내용

구현 내용 및 작업 했던 내역

• 공통 layout 구현
• 공통 template 구현

🤔 고민 했던 부분

• 페이지에서 공통으로 분류할 수 있는 범주가

  1. 배경과 전역에서 사용되는 navigationBar -> layout
  2. content를 담당하는 2가지 크기의 Box -> template

  라고 생각해서 layout과 template을 구분하였으며, 최상단에 layout을 배치했고 template의 경우에는 page에 의존성을 갖는다고 생각해서 page에서 호출하도록 구현했습니다.

• template에 style이 아닌 className로 속성의 네이밍을 붙인 이유는

  1. template컴포넌트가 page에 의존하되
  2. layout으로서 작용하길 희망했습니다.

  template을 사용하는 각 사용처에서 html처럼 사용되길 희망해서 className속성명을 지정하였으며, 다른 html 태그와의 사이에서 통일성을 갖출 수 있다고 생각했습니다. 이 부분은 팀원들의 의견이 궁금합니다.

• template의 children type으로 React.ReactNode type을 받는 것이 맞을까 고민했는데, <template>을 <div>처럼 사용하길 희망해서 여러 element를 children으로 허용할 수 있는React.ReactNode를 사용했습니다.

🔊 도움이 필요한 부분

초기

• 최상단에 배치한 layout의 경우 main페이지 여부를 식별한 이후, 레이아웃이 적용되도록 구현했습니다.
• main page 식별 단계에서 import { usePathname } from 'next/navigation'; 을 사용해야 했는데, 최상단에 'use client';를 선언해야한다는 문제를 겪습니다. 다른 방법을 통해 식별할 수 있을지, 고견을 남겨주시면 감사하겠습니다.

수정

• 가현이가 준 의견으로 계층을 하나 더 생성하는 방식으로 수정해봤습니다.

1. app하위에 포함된 layout에는 서비스 전체에 공통으로 들어가는 GNB
2. 메인페이지를 제외한 모든 페이지에 대해서는 생성한 (template)폴더에 배치시키며, (template)폴더 하위의 layout에 background를 포함하였습니다.

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-ohglesuaas.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-mcukuebpwn.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-dihxtqubdc.chromatic.com/

[seonghunYang]

• 수고하셨습니다. 질문 남겨요
• 고민했던 부분에 "template에 style이 아닌 className로 속성"에 대해서 좀 더 설명해주시겠어요?
• template children으로 React.ReactNode는 적절해보입니다

[seonghunYang]

[comment]

• template 파일이 이 위치에 있어도 적용이 되나요?
• 아니면 next가 정의한 template와 별개의 template 컴포넌트를 만들고 싶었던 건가요?

https://nextjs.org/docs/getting-started/project-structure#routing-files

[yougyung]

content를 담는 box를 별개의 컴포넌트로 생성하려고 했습니다.
다만, 네이밍이 적절하지 않은 것 같아서 이부분은 ContentContainer로 변경하겠습니다.

[seonghunYang]

[request change]

• local 이미지니까 next의 컨벤션을 따르는게 어떨까요?
• src에 string보다 이미지를 import하고 넣어주면 원격 이미지와 구분이 명확해질 것 같아요!

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

// 참고
https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

[gahyuun]

Template보다 content layout이라는 이름이 더 적합하지 않을까요!? 또한 atom 폴더에 있는 게 적합할 지 모르겠습니다!

[yougyung]

layout보다는 container에 가깝다는 생각이 들어서 ContentContainer 해당 네이밍으로 진행을 계획하고 있습니다 !
'더 이상 쪼갤 수 없는 디자인의 최소 단위'가 우리가 정의한 atom의 기준이었기 때문에 해당 폴더에 분류하는 것도 문제가 되지 않는다고 생각합니다. 혹시 생각하시는 더 적합한 분류가 있다면, 의견을 듣고 싶습니다.

[gahyuun]

공통 컴포넌트보다 layout 개념에 더 가깝지 않을까 생각을 했었는데 저희가 정의한 atom 단위가 더 이상 쪼갤 수 없는 디자인의 최소 단위라면 크게 상관 없을 것 같습니다~!

[gahyuun]

z-index가 무분별하게 사용될 수 있는 걸 방지하기 위해 저는 좀 정리하는 편인데 tailwind config에 이렇게 정리해도 좋을 것 같아요~!

zIndex: {
      0: '1',
      1: '100', // Input
      2: '200', // Fixed bottom Bar, Sidebar, Tooltip
      3: '300', // Bottom bar, Top bar Backdrop
       ....
    },

[yougyung]

좋은 방식인 것 같아요 적용해보겠습니다 👍

[yougyung]

• 수고하셨습니다. 질문 남겨요
• 고민했던 부분에 "template에 style이 아닌 className로 속성"에 대해서 좀 더 설명해주시겠어요?
• template children으로 React.ReactNode는 적절해보입니다

template을 component로 사용하기 위해서 개발을 진행했고 component의 style을 담당하는 prop의 속성명을 style로 지정하는 것이 일반적이라고 생각했습니다. 다른 html태그의 경우에는 className으로 스타일 속성을 지정하듯이, 해당 component도 style을 담당하지만 html태그처럼 사용되었으면 좋겠다는 의도를 갖고

1. 컴포넌트 네이밍으로 일반적인 의미를 갖는 template
2. style지정 속성 명을 className으로 지정하였습니다

다만 남겨주신 의견을 토대로 컴포넌트의 네이밍을 template 그대로 가져가는 것은 Next의 template과의 사이에서 혼란이 있을 것 같아 ContentContainer으로의 변경을 예정하고 있으며, 컴포넌트 네이밍이 변경됨에 따라서 style 지정 속성 명도 기존 className에서 style로 변경할 예정입니다.

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-rloxjignnr.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-eladxuyjts.chromatic.com/

[seonghunYang]

• 수고하셨습니다. 질문 남겨요
• 고민했던 부분에 "template에 style이 아닌 className로 속성"에 대해서 좀 더 설명해주시겠어요?
• template children으로 React.ReactNode는 적절해보입니다

template을 component로 사용하기 위해서 개발을 진행했고 component의 style을 담당하는 prop의 속성명을 style로 지정하는 것이 일반적이라고 생각했습니다. 다른 html태그의 경우에는 className으로 스타일 속성을 지정하듯이, 해당 component도 style을 담당하지만 html태그처럼 사용되었으면 좋겠다는 의도를 갖고

1. 컴포넌트 네이밍으로 일반적인 의미를 갖는 template
2. style지정 속성 명을 className으로 지정하였습니다

다만 남겨주신 의견을 토대로 컴포넌트의 네이밍을 template 그대로 가져가는 것은 Next의 template과의 사이에서 혼란이 있을 것 같아 ContentContainer으로의 변경을 예정하고 있으며, 컴포넌트 네이밍이 변경됨에 따라서 style 지정 속성 명도 기존 className에서 style로 변경할 예정입니다.

• 이해했습니다. 설명 감사합니다.
• 그런데 className 속성이 다시 style로 변경된 것 같습니다. 이에 대한 이유가 있나요? 저는 다음과 같은 2가지 이유로 className이 더 적절하다고 생각합니다.
  • tailwind를 사용하면, 개발자가 해당 컴포넌트를 확장할 때 className을 사용하는 것이 자연스럽습니다. 이로 인해 혼동될 수 있습니다.
  • style 속성은 HTML에 기본적으로 내장되어 있어, 혼동될 수 있습니다.
• 만약 합리적인 이유가 있다면, 컴포넌트가 tw-merge를 통해 확장될 때 속성 이름을 style로 통일하는 것을 컨벤션으로 정해야 통일성을 확보할 수 있을 것 같습니다.

[yougyung]

• 이해했습니다. 설명 감사합니다.

• 그런데 className 속성이 다시 style로 변경된 것 같습니다. 이에 대한 이유가 있나요? 저는 다음과 같은 2가지 이유로 className이 더 적절하다고 생각합니다.

  • tailwind를 사용하면, 개발자가 해당 컴포넌트를 확장할 때 className을 사용하는 것이 자연스럽습니다. 이로 인해 혼동될 수 있습니다.
  • style 속성은 HTML에 기본적으로 내장되어 있어, 혼동될 수 있습니다.

• 만약 합리적인 이유가 있다면, 컴포넌트가 tw-merge를 통해 확장될 때 속성 이름을 style로 통일하는 것을 컨벤션으로 정해야 통일성을 확보할 수 있을 것 같습니다.

속성 명과 관련해서는 고민이 있었는데,

1. component에 대한 style 속성을 props로 전달한다는 차원에서 className과 구별되는 다른 네이밍을 사용해야하지 않을까?
2. 속성명을 className으로 가져간다면 html 태그 사이에서 일관성을 확보할 수 있지 않을까?

두 가지 의견 중에서 고민을 하다, 컴포넌트의 style을 지정하는 속성이니 style네이밍으로 가져가자
로 결정하게 되었습니다. (말씀해주신 의견을 통해 style 속성은 HTML에 기본적으로 내장되어 있으니 적절하지 않아, 해당 의견으로 진행하더라도 속성명의 변경을 진행해야할 것 같습니다.)

저도 className으로 속성명을 가져가는 것이 자연스럽다는 의견에 공감해서, 가현님께서 다른 의견이 없으시다면 className으로 속성명 변경을 진행하도록 하겠습니다 !

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-krjqkawmyi.chromatic.com/

[seonghunYang]

• 확인했습니다. 수고하셨습니다.
• 그런데, 다음 PR부터는 유경 씨도 스토리북을 사용하면 좋겠다는 생각이 드네요~~

[gahyuun]

확인했습니다~!