Feat/34 Tree Detail Page 제작

Jung-eunwoo commented 8 months ago

Issues 번호 :

Closes #34

변경, 추가된 코드(설명 등)

container 추가
- src / containers / tree/ detail/TreeDetailContainer.vue
components 추가
- TreeDetailContent, TreeDetailHeader, TreeDetailFooter, TreeFigure
- TreeFigure에서 images/TreeType.vue를 받아 실질적인 tree 모양을 조작할 수 있도록 함

코드 주의점

TreeDetailFooter : 하단 버튼은 아직 미제작
아래와 같은 어려움?이.. 있었음ㅎㅎ..
- https://www.notion.so/Tree-Study-_cp_vue-img-ebbacfbba65242ff947b7a173fcf3218?pvs=4

스크린샷

Summary by CodeRabbit

- New Feature: `TreeType` 컴포넌트 추가. SVG 이미지를 렌더링하며, `fillColor` prop을 통해 색상 설정 가능. Hover 시 다른 색으로 채워짐.
- New Feature: `TreeFigure` 컴포넌트 추가. 스타일 및 레이아웃 정의.
- New Feature: `TreeDetailContent` 컴포넌트 추가. `TreeType` 및 `TreeFigure` 컴포넌트 import하여 사용.
- New Feature: `TreeDetailFooter` 컴포넌트 추가. `TreeFigure`와 `TreeType` import, props 정의, SCSS 스타일 추가.
- New Feature: `TreeDetailHeader` 컴포넌트 추가. 템플릿, 스크립트, 스타일 정의, `CpIconButton`과 `IconEditPen` 컴포넌트 import, props 정의.
- New Feature: `TreeDetailContainer` 컴포넌트 추가. 트리 상세 페이지 레이아웃 담당, 하위 컴포넌트 렌더링.
- Chore: `TreeDetail` 컴포넌트 삭제.
- New Feature: `TreeDetailContainer`로 `TreeDetail` 컴포넌트 대체, `layoutType` prop 추가.

github-actions[bot] commented 8 months ago

CodeRabbit

개요:

새로운 컴포넌트 및 스타일이 추가되고 수정되었습니다. 주요 변경 사항은 TreeType, TreeFigure, TreeDetailContent, TreeDetailFooter, TreeDetailHeader, TreeDetailContainer 컴포넌트의 추가와 수정, 그리고 TreeDetail 컴포넌트의 삭제입니다.

상세 정보:

TreeType.vue: 새로운 SVG 이미지 렌더링 컴포넌트 추가
TreeFigure.vue: TreeFigure 컴포넌트 정의 및 스타일 추가
TreeDetailContent.vue: TreeDetailContent 컴포넌트 추가 및 다른 컴포넌트 import
TreeDetailFooter.vue: TreeDetailContent 컴포넌트 추가, TreeFigure 및 TreeType import, props 정의, SCSS 스타일 추가
TreeDetailHeader.vue: 새로운 TreeDetailHeader 컴포넌트 추가, CpIconButton 및 IconEditPen 컴포넌트 import, props 정의
TreeDetailContainer.vue: 새로운 TreeDetailContainer 컴포넌트 추가, 전체적인 레이아웃 담당, 하위 컴포넌트 렌더링
index.vue: TreeDetail 컴포넌트 삭제, TreeDetailContainer로 대체, layoutType prop 추가

Uplevel your code reviews with CodeRabbit Pro
### CodeRabbit Pro If you like this project, please support us by purchasing the [Pro version](https://coderabbit.ai). The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

doyou1 commented 8 months ago

1.

코드는 잘 봤습니다만, 전반적으로 컴포넌트 구조 및 반응형(단말 크기에 따라 컴포넌트 width, height 조정) 처리를 수정해야할 것 같습니다. 라이브러리로 좀 알아서 정렬되도록 하고싶긴한데,,, 무슨 라이브러리를 쓰면 좋을까 모르겠어서 좀 찾아보도록 하겠습니다. 음... 일단 당장 드는 느낌으로는 아래 이미지같이 나누면 좋을 거 같긴한데,, 그 내부코드를 어떻게 정의해야 좀 더 사용하기 편하고, 개발자적인지 고민해보겠습니다. (개인적으로 샘플링해볼 생각)

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>

이 느낌이 디자인대로이지 않나요?

Jung-eunwoo commented 8 months ago

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. 저희 기존 디자인으로도 해보았는데, 양 옆이 너무 허전해보여서 한번 배경 이미지를 좌우로 반복되게 배치해보았습니다. 미리 말씀드렸어야 하는데.. 제삼다 기존 디자인으로 바꾸어 두겠습니다!

doyou1 commented 8 months ago

https://github.com/Chukapoka/client/pull/42

코드 참고 부탁

Chukapoka / client