결과 페이지/사이드 메뉴 #12
결과 페이지/사이드 메뉴 #12
Conversation
There was a problem hiding this comment.
fork한 리파지토리에서도 branch를 새로 파서 작업을 해주세요!! merge하는 브랜치와 이름이 같아서 로컬에서 확인하기가 어려워요ㅠㅠㅠ 다음에는 새로운 branch에서 작업부탁드려요!
새로운 컴포넌트는 dodam-components패키지에 추가하시고 타입스크립트로 작성해주셨는데, dodam-components에는 제일 작은 단위의 공통 ui 컴포넌트 위주로만 구성하려했어요. 새로운 컴포넌트는dodam 패키지에도 추가하셔도 됩니다. 이건 제가 미리 말씀을 못드렸네요ㅠㅠ 그리고 타입스크립트 파일은 prettier 포맷팅이 이루어지지 않아 코드가 읽기 힘드네요.. 😢 타입스크립트로 계속 작성하신다면 포맷팅도 부탁드릴게요!
마지막으로 style jsx가 적용이 되지않아 디자인이랑 차이가 있네요. 이 부분 수정 부탁드립니다 🚀 🚀
|
|
||
| export interface CardProps extends React.HTMLAttributes<HTMLDivElement> { | ||
| imageSrc?:string; | ||
| label?:string; |
| @@ -0,0 +1,47 @@ | |||
| import React from 'react'; | |||
| import classNames from 'classnames'; | |||
There was a problem hiding this comment.
classNames는 사용되지 않고 있어요!
| } | ||
| `} | ||
| </style> | ||
| <img src={imageSrc} className="card-img-top" alt="..." /> |
There was a problem hiding this comment.
alt는 ... 대신 다른걸로 정하는게 좋아보입니다!
| <style jsx> | ||
| {` | ||
|
|
||
| .card { | ||
| width: 146px; | ||
| } | ||
|
|
||
| .card-body { | ||
| padding: 8px; | ||
| } | ||
| .card-text { | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .card-img-top { | ||
| width: 146px; | ||
| height: 146px; | ||
| background-color: #aaa; | ||
| cursor: pointer; | ||
| border-radius: 6px; | ||
| } | ||
| `} | ||
| </style> |
There was a problem hiding this comment.
style jsx가 html코드 앞에 있어서 스타일이 적용되지 않고있습니다😭 style jsx는 html 코드 아래 위치하게 변경해주세요!
| </style> | ||
| <img src={imageSrc} className="card-img-top" alt="..." /> | ||
| <div className="card-body"> | ||
| <p className="card-text">{description}</p> |
There was a problem hiding this comment.
모든 웹 페이지에서 공통적인 텍스트를 유지할 수 있도록 텍스트는 Typography컴포넌트를 사용해주세요
| import { Typography, Button, Card } from '@dodam/components'; | ||
|
|
||
| export default function Result() { | ||
| const mode = 1; |
There was a problem hiding this comment.
mode를 숫자로 구분하면 1이 어떤 모드를 나타내는지 알기 어려워요 아래 예시처럼 상수를 사용해주세요!
const READ_MODE = 1;
const WRITE_MODE = 2;
const mode = READ_MODE;There was a problem hiding this comment.
그리고 함수 컴포넌트 내부에서 데이터는 useState을 사용해주셔야 해요. 지금 코드로는 mode의 값이 변경이 되도 render가 일어나지 않기 때문에 변화가 발생하지 않아요.
만약 mode의 값이 변해도 render가 발생하지 않기 원하면 useRef를 사용하는게 바람직해보입니다!
| <style jsx> | ||
| {` | ||
| .result-top { | ||
| background-color: #fff6d9; | ||
| padding: 50px; | ||
| text-align: center; | ||
|
|
||
| height: 289px; | ||
| } | ||
|
|
||
| .result-image { | ||
| background: #ffffff 0% 0% no-repeat padding-box; | ||
| box-shadow: 0px 10px 15px #0000001c; | ||
| opacity: 1; | ||
| width: 152px; | ||
| height: 152px; | ||
| border-radius: 50%; | ||
| margin: 20px; | ||
| } | ||
| .result-bottom { | ||
| padding: 50px 10px 20px 10px; | ||
| } | ||
|
|
||
| .row { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .recommendation { | ||
| padding: 30px 10px; | ||
| } | ||
| `} | ||
| </style> |
There was a problem hiding this comment.
styled jsx가 여기에서도 적용되지 않고 있어요!
그리고 padding이랑 margin값은 8px 배수에 맞게 수정부탁드립니다. xd에 있는 값과 달라도 괜찮습니다. 이유는 링크를 참고하면 도움이 될거에요
| <div className="result-top"> | ||
| <Typography className="header" align="center" variant="h5"> | ||
| 김도담님은 | ||
| </Typography> | ||
| <Typography className="header" align="center" variant="h3" weight="bolder"> | ||
| 이상적인 세상을 | ||
| </Typography> | ||
| <Typography className="header" align="center" variant="h3" weight="bolder"> | ||
| 만들어가시는군요! | ||
| </Typography> | ||
| <img className="result-image" /> | ||
| </div> | ||
| <div className="result-bottom"> | ||
| <Typography weight="bolder">분석 결과</Typography> | ||
| <Typography> | ||
| 상세 분석 결과입니다 상세분석 결과입니다. 상세 분석 결과입니다 상세분석 결과입니다. 상세분석 결과입니다 | ||
| 상세분석 결과입니다. 분석 결과입니다. 상세 분석 결과입니다 상세분석 결과입니다. 상세 분석 결과입니다 | ||
| 상세분석 결과입니다. 상세분석 결과입니다 상세분석 결과입니다. 분석 결과입니다. 상세 분석 결과입니다 상세분석 | ||
| 결과입니다. 상세분석 결과입니다 상세분석 결과입니다. 분석 결과입니다. | ||
| </Typography> | ||
| <div className="row"> | ||
| <Button id="btn-1" outline fullWidth variant="secondary"> | ||
| 결과 공유 | ||
| </Button> | ||
| </div> | ||
| {mode === 2 && ( | ||
| <div className="row"> | ||
| <Button id="btn-2" variant="secondary" fullWidth> | ||
| 동아리 등록 완료 | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| {mode === 1 && ( | ||
| <> | ||
| <div className="result-line"></div> | ||
| <div className="recommendation"> | ||
| <Typography className="header" align="center" variant="h5" weight="bolder"> | ||
| 이 동아리를 추천드려요! | ||
| </Typography> | ||
|
|
||
| <div className="row"> | ||
| <Card /> | ||
| <Card /> | ||
| <Card /> | ||
| <Card /> | ||
| </div> | ||
|
|
||
| <Button fullWidth>더보기</Button> | ||
| </div> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
이부분을 컴포넌트 단위로 쪼개면 코드 가독성이 높아질것같아요!
| </div> | ||
| {mode === 1 && ( | ||
| <> | ||
| <div className="result-line"></div> |
| <Typography className="header" align="center" variant="h3" weight="bolder"> | ||
| 만들어가시는군요! | ||
| </Typography> | ||
| <img className="result-image" /> |
요약
설명