Conversation
|
안녕하세요 제윤님! 몇가지 궁금한 사항이 있는데요 😅
|
|
�css 속성들을 나열할때도 일종의 컨벤션이 필요합니다! 저는 개인적으로 display > position > box-model > typography 와 관련된 속성 위주로 정렬하는 편이에요!! 만약 module.css를 계속 사용하실 예정이라면 styleLint와 같은 linter를 사용해보는것도 좋을것 같습니다 ㅎ |
|
캐밥 컴포넌트의 버튼 등에서 event.stopPropagation()을 사용해서 말씀하신 FolderCardListItem 까지의 이벤트 버블링을 막을 수 있어요! |
|
|
||
| .CardList { | ||
| display: grid; | ||
| grid-template-columns: repeat(32.5rem); |
There was a problem hiding this comment.
이거 이렇게 작성하면 동작하나요?
grid-template-columns: repeat(auto, 32.5rem) 이렇게 수정되어야할 것 같은데..한번 확인해주시겠어요?
There was a problem hiding this comment.
둘 다 정상적으로 작동하는것 같습니다! 일단 멘토님이 작성해준대로 수정 진행하겠습니다!
혹시 두 코드 차이가 어떻게 되는지 알 수 있을까요?
| margin-top: 20px; | ||
| justify-content: center; | ||
| width: 100%; | ||
| max-width: 106rem; |
There was a problem hiding this comment.
수치 단위도 하나로 통일하는게 좋아요!
px을 사용했으면 계속 px을, rem을 사용했으면 계속 rem을 사용하는 방식으로 수정하면 더 좋겠네요 ㅎ
There was a problem hiding this comment.
px를 사용했는데 현업에서는 rem 위주로 사용한다 들어서 후에 변경하다보니 뒤죽박죽 되어있네요..! 최대한 rem으로 통일하겠습니다!
| .CardList_item { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 325px; |
There was a problem hiding this comment.
디자이너분들도 우리 개발자처럼 보통의 컨벤션을 가지고있는데요,
대표적으로 수치들이 모두 2의 배수 혹은 4의 배수로 떨어지게끔 디자인 하는것입니다 ㅎ
만약 다른부분에서는 4의배수, 2의배수 같은 컨벤션이 있지만 특정 부분에서만 해당 컨벤션이 깨진다면
저라면 디자이너분께 넌지시 한번 여쭤볼것 같아요 ㅎ
| position: relative; | ||
| } | ||
|
|
||
| .CardList-item-createdAt { |
There was a problem hiding this comment.
이렇게 사용하지 않는 클래스는 삭제해주세요!
만약 삭제하면 안될 이유가 있다면 주석을 남겨주시는게 좋습니다!
There was a problem hiding this comment.
useAsync라는 이름은 너무 추상적인 것 같습니다. 만약 해당 이름을 가지려면 정말
모든 비동기를 처리하는 훅이어야 해요
하지만 내용을 보니 이 훅은 유저 정보와 폴더를 받아와서 활용하는 훅 같은데요
이름을 useUserContext 등으로 바꿔보시는건 어떠세요? ㅎ
| @@ -0,0 +1,75 @@ | |||
| import "@/components/CardList/CardList.module.css"; | |||
| import { useState, useEffect } from "react"; | |||
There was a problem hiding this comment.
import { useState, useEffect } from "react";와
import React from "react"; 는 한줄로 처리되어야할텐데...
혹시 기본적인 eslint세팅을 안하고 작업을 진행하신다면
eslint와 prettier는 꼭 항상 세팅하고 작업해주세요!!!
| const BASE_URL = "https://bootcamp-api.codeit.kr/api"; | ||
|
|
||
| useEffect(() => { | ||
| const getFolderListById = async () => { |
There was a problem hiding this comment.
이거 아래쪽에 api함수로 별도의 파일에서 관리하는것 같은데..그걸 사용하는쪽으로 수정하는게 더 좋아보이네요!
| const [curFolder, setCurFolder] = useState(null); | ||
| const [folderId, setFolderId] = useState<number>(0); | ||
|
|
||
| const handleFolderClick = (folder: any) => { |
There was a problem hiding this comment.
any타입을 쓸수밖에없는 상황이라면 차라리 unkonwn 타입을 사용하는게 더 좋습니다.
|
|
||
| return ( | ||
| <> | ||
| {folderList && folderList.data && folderList.data.length > 0 ? ( |
There was a problem hiding this comment.
folderList.data.length > 0 이런건 lodash를 사용해서
isEmpty(folderList.data.length) 와 같이 사용하는게 가독성 측면에서 더 좋을것 같아요 !
lodash를 적극 활용해주세요!
| @@ -0,0 +1,78 @@ | |||
| import { useState } from "react"; | |||
| import * as S from "./FolderCardListItemStyled"; | |||
There was a problem hiding this comment.
S......는 다른거로 바꿔주시는게 좋을것 같아요
다른사람이 본다면 S가 무엇을 의미하는지 한눈에 알 수 없을것 같아요 ㅎ
There was a problem hiding this comment.
혹시 추천하는 표기법이나 현업에서 자주 사용하는 표기법이 있을까요?
|
요구사항
기본
주요 변경사항
스크린샷
멘토에게
이런식으로 모달창을 띄워도 모달 창 바깥 부분에서 a태그의 hover이벤트 라던지 클릭 이벤트가 발생합니다!
미완성 요구사항
11주차)
12주차)
13주차)