Closed Jung-eunwoo closed 7 months ago
CodeRabbit
새로운 컴포넌트 및 스타일이 추가되고 수정되었습니다. 주요 변경 사항은 TreeType
, TreeFigure
, TreeDetailContent
, TreeDetailFooter
, TreeDetailHeader
, TreeDetailContainer
컴포넌트의 추가와 수정, 그리고 TreeDetail
컴포넌트의 삭제입니다.
TreeType.vue
: 새로운 SVG 이미지 렌더링 컴포넌트 추가TreeFigure.vue
: TreeFigure 컴포넌트 정의 및 스타일 추가TreeDetailContent.vue
: TreeDetailContent 컴포넌트 추가 및 다른 컴포넌트 importTreeDetailFooter.vue
: TreeDetailContent 컴포넌트 추가, TreeFigure 및 TreeType import, props 정의, SCSS 스타일 추가TreeDetailHeader.vue
: 새로운 TreeDetailHeader 컴포넌트 추가, CpIconButton 및 IconEditPen 컴포넌트 import, props 정의TreeDetailContainer.vue
: 새로운 TreeDetailContainer 컴포넌트 추가, 전체적인 레이아웃 담당, 하위 컴포넌트 렌더링index.vue
: TreeDetail 컴포넌트 삭제, TreeDetailContainer로 대체, layoutType prop 추가
코드는 잘 봤습니다만, 전반적으로 컴포넌트 구조 및 반응형(단말 크기에 따라 컴포넌트 width, height 조정) 처리를 수정해야할 것 같습니다. 라이브러리로 좀 알아서 정렬되도록 하고싶긴한데,,, 무슨 라이브러리를 쓰면 좋을까 모르겠어서 좀 찾아보도록 하겠습니다. 음... 일단 당장 드는 느낌으로는 아래 이미지같이 나누면 좋을 거 같긴한데,, 그 내부코드를 어떻게 정의해야 좀 더 사용하기 편하고, 개발자적인지 고민해보겠습니다. (개인적으로 샘플링해볼 생각)
단말에 따라 보여지는 이미지에 대한 이야기인데요. 지금 웹브라우저로 보면
요렇게 나오는데, 저희 가운데로 정렬하는 형식으로 하지 않았나요? 소스 코드로 보면 LayoutType.Mobile로 돼있는데,
CpLayout
만 밖으로 빼면... 요렇게 바꾸면
<template>
<cp-layout :layout-type="LayoutType.Mobile">
<div class="tree-detail-container-background">
<div class="tree-detail-container-wrap">
<tree-detail-header :id="id" />
<tree-detail-content :id="id" />
</div>
</div>
</cp-layout>
</template>
이 느낌이 디자인대로이지 않나요?
1.
코드는 잘 봤습니다만, 전반적으로 컴포넌트 구조 및 반응형(단말 크기에 따라 컴포넌트 width, height 조정) 처리를 수정해야할 것 같습니다. 라이브러리로 좀 알아서 정렬되도록 하고싶긴한데,,, 무슨 라이브러리를 쓰면 좋을까 모르겠어서 좀 찾아보도록 하겠습니다. 음... 일단 당장 드는 느낌으로는 아래 이미지같이 나누면 좋을 거 같긴한데,, 그 내부코드를 어떻게 정의해야 좀 더 사용하기 편하고, 개발자적인지 고민해보겠습니다. (개인적으로 샘플링해볼 생각)
1. 음,,, 나무 svg하단부터 땅이 시작되게끔 바뀌면 좋을 것 같긴하네용,, 보여주신 것과 같은 형태의 레이아웃을 코드를 짤 때 생각해봤는데 아직 적용을 안해봤습니당. 혹여 좋은 방법 찾으시면 공유,,, 감사합니다 ;ㅁ;(저도 한번 생각해보겠읍니다..!)
2.
단말에 따라 보여지는 이미지에 대한 이야기인데요. 지금 웹브라우저로 보면 요렇게 나오는데, 저희 가운데로 정렬하는 형식으로 하지 않았나요? 소스 코드로 보면 LayoutType.Mobile로 돼있는데,
CpLayout
만 밖으로 빼면... 요렇게 바꾸면<template> <cp-layout :layout-type="LayoutType.Mobile"> <div class="tree-detail-container-background"> <div class="tree-detail-container-wrap"> <tree-detail-header :id="id" /> <tree-detail-content :id="id" /> </div> </div> </cp-layout> </template>
2. 저희 기존 디자인으로도 해보았는데, 양 옆이 너무 허전해보여서 한번 배경 이미지를 좌우로 반복되게 배치해보았습니다. 미리 말씀드렸어야 하는데.. 제삼다 기존 디자인으로 바꾸어 두겠습니다!
Issues 번호 :
Closes #34
변경, 추가된 코드(설명 등)
코드 주의점
스크린샷
Summary by CodeRabbit