Conversation
| function MainContent() { | ||
| return ( | ||
| <> | ||
| <BestProducts /> | ||
| <AllProducts /> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
보통 이렇게 되면 아에 파일을 새로 만들어서 나누긴 해요ㅎㅎ
근데 이렇게 써도 문제는 전혀 없어요~
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); |
| let pageSize = 10; | ||
| if (mode === "tablet") { | ||
| pageSize = 6; | ||
| setSize(221); | ||
| } else if (mode === "mobile") { | ||
| pageSize = 4; | ||
| setSize(168); | ||
| } else { | ||
| setSize(221); | ||
| } |
There was a problem hiding this comment.
혹시 useMemo 도 배우셨을까요?
보면 mode에 따라서 pageSize 는 항상 결정되어있어요.
그래서 mode에 따라서 pageSize를 정의하게되면 다음과 같이 쓸 수 있어요
const pageSize = useMemo(() => {
if (mode === "tablet") {
return 6;
} else if (mode === "mobile") {
return 4
} else {
return 10;
}
}, []);그치만 아직 안배운거라면 지금 상태로도 문제는 전혀 없어요ㅎㅎ!
|
|
||
| return ( | ||
| <section className="best-section"> | ||
| <h2>베스트 상품</h2> | ||
| <ul className="product-list"> | ||
| <ul className={`product-list ${mode}`}> |
There was a problem hiding this comment.
이런것도 잘 이용하시네요ㅋㅋ
media query로 처리하는것보다 훨씬 좋을꺼에요!
| @@ -1,5 +1,6 @@ | |||
| import "./product.css"; | |||
| import heartImage from "../../assets/images/heart.png"; | |||
| import useDevice from "../../hooks/useDevice"; | |||
There was a problem hiding this comment.
여기에서 useDevice 는 필요없을것같긴 해요...!ㅠ
| <Link to="./">자유게시판</Link> | ||
| <Link | ||
| to="./items" | ||
| style={{ | ||
| color: | ||
| location.pathname === "/items" || | ||
| location.pathname === "/pages/additem" | ||
| ? "#3692ff" | ||
| : "none", | ||
| }} | ||
| > | ||
| 중고마켓 | ||
| </Link> |
There was a problem hiding this comment.
와... 진짜 디테일하게 잘 하셨네요!ㅎㅎ
진짜 잘 하셨어요ㅋㅋ
좀 더 나아가서... 만약에 메뉴가 여러개 더 추가된다고 생각해보면
style에 color를 처리하기위해서 5줄씩 추가가 되야할꺼에요ㅠ
메뉴 3개가 늘어나면 15줄이 추가되구요...
그럼 이부분을 따로 컴포넌트화 시켜놓는것도 방법일것같아요...!
to 값으로 받은것과 pathname 이 일치하는경우 색상을 변경하는 컴포넌트로요ㅎㅎ!
| useEffect(() => { | ||
| window.addEventListener("resize", (event) => { | ||
| setWindowWidth(event.target.innerWidth); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
이부분 조금 더 개선을 해보면...
useEffect의 첫번쨰 함수가 실행되는 시점은 조금 어렵게 말하면 mount 될떄 에요.
즉, 화면이 브라우저에 보여지는 순간을 의미해요
근데 상태가 바뀌는 등으로 인해 해당 컴포넌트가 다시 mount 되면 window에 resize 이벤트가 또 추가되게 되어요ㅠ
그래서 unmount 될때 기존에 달아주었던 이벤트를 잠깐 떼어주는게 필요해요ㅠ
그런 역할을 하는 코드가 useEffect에서 return 하는 함수에요
useEffect(() => {
const handleResize = (event) => {
setWindowWidth(event.target.innerWidth);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
}
}, []);| <div className="images-container"> | ||
| <img | ||
| src={registerImage} | ||
| alt="상품등록 이미지" | ||
| onClick={handleImageClick} | ||
| className={`register-img ${mode}`} | ||
| /> | ||
| {preview && ( | ||
| <img | ||
| src={preview} | ||
| alt="이미지 미리보기" | ||
| className={`preview-img ${mode}`} | ||
| /> | ||
| )} | ||
| {/* preview 값 있을때만 보이게하기. 없으면 alt값 뜸.*/} | ||
| <input | ||
| type="file" | ||
| onChange={handleProductImage} | ||
| style={{ display: "none" }} | ||
| ref={fileInput} | ||
| /> | ||
| {/* input태그 만들어놓고, file기능만 쓰고 숨겨주고, 상품등록 이미지에 기능 넣기 */} | ||
| {preview && ( | ||
| <button | ||
| onClick={handleClearClick} | ||
| className={`delete-btn ${mode}`} | ||
| > | ||
| X | ||
| </button> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
이만큼은 자주 사용될것같은데 따로 컴포넌트로 뽑아보는것도 좋을것같네요ㅎㅎ!
일단 css 만으로도 가능하긴 해요! 구현하신거 봤는데 엄청 고생 많이 하셨을것같더라구요;; 그리고 select도 마찬가지로 mode를 통해서 바꾸는게 맞을것같아요. |
내용의 너비가 너무 넓어서 overflow 가 생긴것같아요.
보면 이미 너비를 넘어가고있어요ㅠ 보통 이런경우엔 디자이너가 의도한걸 확인해야하는데, 아마 너비 사이즈에 맞춰서 카드의 사이즈를 바꾸고싶어할것같아요 그렇다면 이걸 처리하려면 card의 size를 고정하는게 아니라 grid의 너비에 맞춰서 동적으로 움직이게 작성을 해야할것같네요ㅠ |
네네ㅎㅎ 이미 PR을 올려두면 source -> target 을 기준으로 되어있기 떄문에 새로운 commit 을 올려도 이렇게 내역에 반영이 되어요ㅎㅎ!
|
이거는 제가 이해를 못해서...ㅠ 이렇게 해두고 저장버튼을 눌렀을떄 서버에 배열로 전달하기 위함이긴 한데... 이해를 못해서ㅠ |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
mobile 화면을 구현하는데, figma 디자인을 전체상품 header 부분을 보면, 원래 전체상품 / input태그 / button 태그 / select 태그가 한줄에 있었는데, 전체상품 / button 태그 같은줄에 넣고, input태그 / select태그를 그 아랫줄에 넣어야하는데, 이걸 css만으로 할 수 있나요 ? position 속성 건들면서 right속성 주면서 해보다가, 이렇게 하니까 화면이 줄어들면 input태그가 왼쪽 화면 밖으로 넘어가버리는데, 해결방법이 있을까요 ?
그리고, mobile 화면에서 select 태그를 icon 이미지로 바꾸는 건가요 ? 바꾼다면, select 태그와 동일한 기능을 사용하도록 어떻게 바꾸죠 . . ?
desktop -> tablet으로 넘어가기 바로 직전에, 모든상품 부분의 이미지가 넘어가서 가로 스크롤이 생깁니다. 제가 잘못 설계한건가요 ? 아니면 figma가 잘못된건가요..?
2일전에 push하고, 오늘 또 push 했는데, 따로 PR을 안해줘도 그대로 PR이 된건가요 . . . ?
sprint6 도 완료하였습니다. 그런데 , tag를 const [tags, setTags] = useState(["티셔츠", "상의"]); 이런식으로 배열에 넣고 관리하는데, 존재의 의미를 모르겠습니다. 왜있는거지..? 싶은 ? 그냥 일단 보여주기식으로 '티셔츠' , '상의' 고정해놓고, 삭제되는 것 까지 완료하였습니다.