Chukapoka / client

0 stars 1 forks source link

Feat/34 Tree Detail Page 제작 #41

Closed Jung-eunwoo closed 7 months ago

Jung-eunwoo commented 8 months ago

Issues 번호 :

Closes #34

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

코드 주의점

image

스크린샷

image

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

Image description CodeRabbit

개요:

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

상세 정보:

doyou1 commented 8 months ago

1.

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

image

2.

단말에 따라 보여지는 이미지에 대한 이야기인데요. 지금 웹브라우저로 보면 image

요렇게 나오는데, 저희 가운데로 정렬하는 형식으로 하지 않았나요? 소스 코드로 보면 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>

image

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

Jung-eunwoo commented 7 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 7 months ago

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

코드 참고 부탁