Jsxcard #26
Jsxcard #26
Conversation
| <div className="card-footer"> | ||
| <div className="reaction-icons"> | ||
| <button id="likeButton" className="icon" onClick={handleLikeClick}> | ||
| <i className="like"></i> {likeCount} |
There was a problem hiding this comment.
버튼 누를 때 숫자 올라가는 것이 이 부분들에 대해 말씀하신 거였군요
| <div className="profile-info"> | ||
| <div className="card-body"> | ||
| <p className="author-count" style={{ color: 'black' }}> | ||
| <b>30</b>명이 작성했어요! |
There was a problem hiding this comment.
이 부분에 들어갈 30 값을 프로퍼티로 받아오면 되는 거였습니다
| <div className="card-container"> | ||
| <div className="card purple"> | ||
| <div className="card-header"> | ||
| <h3>To. Sowon</h3> |
There was a problem hiding this comment.
To.Sowon에서 Sowon도 프로퍼티로 받아와 주셔야 하는 부분이라고 볼 수 있어요.
| import "../styles/global.scss"; | ||
|
|
||
| const Card = () => { | ||
| const [likeCount, setLikeCount] = useState(0); |
There was a problem hiding this comment.
사실 이 부분이 제가 볼 때는 각 이모티콘 옆에 숫자에 대한 부분인 것 같은데, 이 부분은 오히려 카드를 눌러서 무언가를 하는 부분이라기 보다는 post/{id} 부분의 시안에 나와있듯이 Navigation 바로 아래에 이모지 올리는 부분이 있고, 이모지 중 가장 많은 count값이 있는 3개를 보여주는 부분이 있는데, 그 부분과 마찬가지로 3개만 보여주는 그러한 용도라고 볼 수 있어요. 오히려 api를 써서 데이터를 받아오는 부분이라 이 부분은 그냥 통째로 프로퍼티로 해당 부분들을 받아오는 방식으로 구현을 하시거나 임의의 들어간 이모지 데이터에 대해 보여주거나 하는 방식이에요.
| } | ||
|
|
||
| .author-count { | ||
| @include font-bold(1.6rem, $color-gray700, "Pretendard"); |
There was a problem hiding this comment.
폰트 사이즈에는 rem을 사용하셨군요. 저희 프로젝트 컨벤션에 맞게 잘 사용하셨습니다
| .author-count { | ||
| @include font-bold(1.6rem, $color-gray700, "Pretendard"); | ||
| font-weight: 400; | ||
| font-size: 16px; |
There was a problem hiding this comment.
나머지 부분들에 대해서는 px 값을 쓰셨는데 저희 프로젝트 에서는 rem단위를 사용하고 있어요. 저희 웹페이지 설정상으로는 1rem = 10px입니다.
| justify-content: center; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| font-family: 'Noto Sans KR', sans-serif; |
There was a problem hiding this comment.
이 부분은 위와 같이 보민님이 만드신 폰트 탬플릿을 사용해도 되었을 텐데 혹시 디테일한 설정을 일일이 작성하신 이유가 있을까요?
| flex-direction: column; | ||
|
|
||
| &.purple { | ||
| background-color: #ecd9ff; |
There was a problem hiding this comment.
색깔에 대해서도 보민님이 만드신 글로벌 스타일을 쓰실 수 있었을 텐데 이렇게 하신 이유가 있을까요?
| .icon { | ||
| background: rgba(0, 0, 0, 0.54); | ||
| border: 1px solid rgba(0, 0, 0, 0.12); | ||
| cursor: pointer; |
There was a problem hiding this comment.
이 부분은 처음 부터 글로벌 스타일로 특정 태그에 대해 이 설정을 적용했을 거라고 봅니다. 확인해 보셔도 좋을 거에요
| @@ -0,0 +1,53 @@ | |||
| import React, { useState } from 'react'; | |||
| import './Card.scss'; | |||
| import "../styles/global.scss"; | |||
There was a problem hiding this comment.
scss의 경우에 이렇게 쓸 수 있어요
import classNames from "classnames/bind";
import styles from "./MessagePage.module.scss";
const cx = classNames.bind(styles);
이렇게 하면 cx라는 이름을 통해 styles의 css속성으로만 접근 가능합니다. 즉, 모듈화를 할 수 있어요. 현재 코드처럼 하시는 경우에 잘못하면 여러 개 scss파일 임포트 할 때 두 파일에 겹치는 클래스 네임이 있다면...? 특히, 저렇게 쓰면 특정 scss가 아니라 전체 관련된 scss의 클래스 이름에 해당하는 모든 스타일이 적용될 거에요.
리액트의 경우에는 App.js의 App 컴포넌트에서 모든 다른 페이지 들 등을 끌어써서 다른 분들이 쓰신 그 어떤 파일이라도, 진석님이 쓴 클래스 이름이 있다면 적용될 수도 있어요
| <h3>To. Sowon</h3> | ||
| <div className="profile-info"> | ||
| <div className="card-body"> | ||
| <p className="author-count" style={{ color: 'black' }}> |
There was a problem hiding this comment.
className={cx("author-count")}이렇게 모듈화 할 수 있답니다
임시 pr 템플릿 입니다. 추후에 계속해서 업데이트 할 예정입니다.
작업 내용