[Noelsky-code] 메인 페이지 헤더 , 바디 UI, 호버 구현

[Noelsky-code]

작업 내용

• 메인 페이지 : MainPage.tsx (Page) / MainPageTemplate.tsx (TemPlate)
• 메인 페이지 헤더 레이아웃 구현: MainPageHeader ( Organism) - MainHeaderRightSide.tsx (Molecules) - UserIcon.tsx (Atom)
  - MainHeaderCenter.tsx (Molecules) - MainHeaderLogo.tsx(Atom)
• 메인 페이지 바디 이미지 레이아웃 구현 : MainPageBody.tsx (Template), MainBodyLeft.tsx (Organism) , MainBodyRight.tsx(Organism) , MainBodyLeftButtonContainer.tsx(Molecules), MainBodyRightButtonContainer.tsx(Molecules), ImageDiv(Atom)
• 메인 페이지 바디 이미지 호버 이벤트 구현 : ImageDiv(Atom) 추가 , 각종 css 추가

고민 사항

1. 네이밍 관련

파일네임을 작성할 때 최대한 우리가 정한 컨포넌트 구조에 맞게 작성 하되 내용면에서 추가할 부분이 있다면 내가 네이밍을 수정했음 (예를 들면 모든 컴포넌트 앞에 Main을 붙여줌)
그러다 보니 MainBodyLeftButtonContainer.tsx 처럼 괴랄한 네이밍이 나왔음.
이 컴포넌트 의미는 메인 페이지 바디의 왼쪽 버튼들의 컨테이너임
괴랄하게 길지만 가독성은 괜찮아 보이는데 이렇게 네이밍을 계속 해도 될지 궁금

2. Children 사용에 대해

MainBodyRight.tsx 에서 Button을 Children으로 넘겨주고

 <MainBodyRightButtonContainer>
       <Button type="Medium">이벤트</Button>
  </MainBodyRightButtonContainer>

MainBodyRightButtonContainer.tsx 에서 Children을 받아 다음과 같이 활용함.

function MainBodyRightButtonContainer({ children }: ChildrenType) {
  return <div css={mainBodyRightButtonContainerStyle}>{children}</div>;
}

저번 프로젝트 때 Children 활용에 대해 지적받아 이렇게 작성하긴 했는데
이렇게 작성을 하다 보니 MainBodyRightButtonContainer.tsx 는 코드가 짧아져서 좋앗지만 오히려
MainBodyRight.tsx 에서는 Children을 넣어주다 보니 아래 처럼 길어졌음.
혹시 다른 좋은 방법이 있다면 알려주삼

      <ImageDiv type="short" image={meetingImage}>
        <MainBodyRightButtonContainer>
          <Button type="Medium">이벤트</Button>
        </MainBodyRightButtonContainer>
      </ImageDiv>
      <ImageDiv type="long" image={meetingImage}>
        <MainBodyRightButtonContainer>
          <Button type="Medium">프로젝트 소개</Button>
        </MainBodyRightButtonContainer>
      </ImageDiv>
      <ImageDiv type="left-long" image={meetingImage}>
        <MainBodyRightButtonContainer>
          <Button type="Medium">공지 사항</Button>
        </MainBodyRightButtonContainer>
      </ImageDiv>
      <ImageDiv type="short" image={meetingImage}>
        <MainBodyRightButtonContainer>
          <Button type="Medium">문의 사항</Button>
        </MainBodyRightButtonContainer>
      </ImageDiv>

[jin-Pro]

1. 정말 어렵다... 파일 구조를 깔끔하게 하기위해서 재사용성이 없는 부분도 Atomic 구조로 만들다 보니 생기게된 폐해같다.
   아토믹 구조 내부에서 폴더로 구분해보는 방법이 떠오른다.. 하지만 이게 맞는걸까 의문...

2. 나는 Container자체를 style.div형식으로 선언과 동시에 export 해주어서 return값이 존재하지않다보니 children을 사용하질 않아서 잘 모르겠음. 근데 저렇게 하지 않는다면 코드가 더 간단해질 수 있는건가?? 궁금하다.

오늘 수고하셨음

[taehong0-0]

1. 일단 확실히 어떤 역할인지 파일명만 보고도 알 수 있어서 좋은데 너무 길어져서 이게 쌓이면 조금 복잡하게 보일 수도 있을 것 같다고 생각하긴 함. 그래서 위에서 말한것처럼 난 이전에 계속 폴더로 구분을 해줘서 해당 네이밍이 길어지는 것을 방지해주긴 했는데 Atomic에서도 이런 방식을 사용할 수 있지 않을까? 라는 생각이 들었음
2. children을 사용하는 이유가 메인에서 어떤 자식요소들이 있는지 한번에 보기 위한 것인가요?? 위와 같이 chil.dren을 사용하는 이유가 궁금합니다. 제가 생각한 이유가 맞다면 위와같이 길어져도 좋은 것 같습니다

[ddaynew365]

1. 저런 변수명도 나쁘지 않다고 생각할 수 있는데 굳이 MainBody라는 점을 언급하지 않아도 직관적으로 쓸 수 있으면 그렇게 해도 좋을 것 같다고 생각합니다. 하지만 이런 점이 발생할 때는 아직 개발 초기인만큼 고민되자마자 바로 팀원들과 토론하는 것이 좋을 것 같습니다.
2. Button에 대해서 저렇게 쓰는 것에 대해 코드가 깔끔해보여 좋았다고 생각했는데 지적을 받으셨다면 어떤 부분을 지적 받으셨나요?? 저는 이전에 Button을 props로 주어서 사용한 경험이 있습니다.

[jin-Pro]

css 2줄때문에 mainHeaderStyle을 생성하는거에 대해서 얘기해보고 싶음.
솔직히 그냥 css={csswidth:100vw; height:30vh;} 하는게 더 간결할것같음 어떻게 생각해?

[jin-Pro]

나는 이부분에 대해서 top과 left말고 flex 정렬을 사용할것 같아

[jin-Pro]

children쓰게되면 이런 기괴한 타입을 넣어주게되는점... 흠,,, 근데 JSX.Element말고 ReactElement도 있는데 그건 안될까??