[이태식] sprint5 #207
[이태식] sprint5 #207
Conversation
axios, react-router, tailwindcss, @tailwindcss/vite, prettier-plugin-tailwindcss
/layout에 Header.jsx와 그 안에 들어갈 컴포넌트들인 Logo, Navbar, UserMenu파일을 추가했습니다.
baseURL을 갖는 instance생성
기본 단위를 수정해서 px값을 그대로 사용하면 rem으로 변환되게 했습니다.
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
태식님 5번째 미션 작업 고생하셨습니다~
화면 사이즈에 따라 불러오는 아이템 개수를 조절하시는 로직을 잘 구현하셨어요 👍
다음 미션도 화이팅입니다~
There was a problem hiding this comment.
💊 제안
그전 미션에서 추가하셨던 메타 태그도 추가하시면 더 좋을 것 같아요!
| <Route element={<Layout />}> | ||
| <Route index element={<HomePage />} /> | ||
| <Route path="items" element={<ItemsPage />} /> | ||
| </Route> |
There was a problem hiding this comment.
👍 칭찬
Layout 컴포넌트를 만드신 것 좋아요! 다만 저희 index 페이지의 경우 item 페이지와 디자인이 다른 것으로 압니다!
한번 확인해보세요!
| @@ -0,0 +1,14 @@ | |||
| import ItemCard from "./ItemCard"; | |||
|
|
|||
| const AllItemList = ({ allItemList }) => { | |||
There was a problem hiding this comment.
💊 제안
AllItemList 와 allItemList는 완전하게 같은 정보를 가지고 있네요! 중복되는 정보의 경우 불필요하니 다른 이름을 추천드려요~
const AllItemSection = ({ items }) => {
const AllItemList= ({ data }) => {| const Button = ({ children, className, onClick }) => { | ||
| return ( | ||
| <button | ||
| className={`bg-primary-100 hover:bg-primary-200 active:bg-primary-300 text-secondary-100 cursor-pointer rounded-[8px] px-23 py-8 text-lg font-semibold ${className}`} |
There was a problem hiding this comment.
💊 제안
button 을 공통으로 빼신 것 좋아요. 다만 className을 빈 문자열로 초기화하셔야 빈 값일 때 classname에 undefined가 들어가지 않습니다~
추가로 type도 button의 중요속성이니 받게 해주시는 것이 사용성 측면에서 좋습니다!
| const Button = ({ children, className, onClick }) => { | |
| return ( | |
| <button | |
| className={`bg-primary-100 hover:bg-primary-200 active:bg-primary-300 text-secondary-100 cursor-pointer rounded-[8px] px-23 py-8 text-lg font-semibold ${className}`} | |
| const Button = ({ children, type='button', className = '', onClick }) => { | |
| return ( | |
| <button | |
| type={type} | |
| className={`bg-primary-100 hover:bg-primary-200 active:bg-primary-300 text-secondary-100 cursor-pointer rounded-[8px] px-23 py-8 text-lg font-semibold ${className}`} |
| <NavLink to="/">자유게시판</NavLink> | ||
| </li> | ||
| <li> | ||
| <NavLink |
There was a problem hiding this comment.
💊 제안
드롭다운 외의 영역을 눌렀을때도 닫히게 해주시면 더 사용성이 좋아질 것 같아요.
| import { useState } from "react"; | ||
|
|
||
| const Sort = ({ className, setOrderBy }) => { | ||
| const [isOpen, setIsOpen] = useState(false); |
There was a problem hiding this comment.
💬 여담
reducer 를 사용해 아래처럼 간단하게도 작성 가능합니다~
| const [isOpen, setIsOpen] = useState(false); | |
| const [isOpen, toggleIsOpen] = useReducer((prev) => !prev, false); |
| <Button | ||
| className="tablet:order-3" | ||
| onClick={() => navigate("/additem")} | ||
| > | ||
| 상품 등록하기 | ||
| </Button> |
There was a problem hiding this comment.
💊 제안
지금 코드만으로 보면 버튼 태그보다 Link 태그를 쓰는게 더 적절해보여요.
단순 페이지 이동이 아니라 특정 로직을 실행해야 할때 지금처럼 버튼 태그를 사용하시면 좋을 것 같습니다.
링크 태그를 사용하시면 마우스 오른쪽 클릭이나 새탭 기능도 제공이 가능해서 UX 측면에서도 좋습니다.
| className={ | ||
| "tablet:order-2 tablet:max-w-325 tablet:min-w-250 tablet:basis-1/3 basis-[calc(100%-56px)]" | ||
| } |
There was a problem hiding this comment.
❗️ 수정요청
| className={ | |
| "tablet:order-2 tablet:max-w-325 tablet:min-w-250 tablet:basis-1/3 basis-[calc(100%-56px)]" | |
| } | |
| className="tablet:order-2 tablet:max-w-325 tablet:min-w-250 tablet:basis-1/3 basis-[calc(100%-56px)]" |
| className="tablet:block font-regular text-secondary-800 border-secondary-200 order-4 hidden w-130 cursor-pointer rounded-[12px] border-1 bg-white bg-[url(./assets/icons/icon-arrow-down.png)] bg-size-[24px_24px] bg-position-[right_20px_center] bg-no-repeat px-20 py-8 text-left text-lg" | ||
| onClick={() => setIsOpen(true)} | ||
| > | ||
| 최신순 |
There was a problem hiding this comment.
❗️ 수정요청
조건을 바꿨을 때 적절한 문자열이 나오게 해주세요!
2 participants
요구사항
기본
중고마켓
중고마켓 반응형
심화
주요 변경사항
스크린샷
https://leetaesik-sprint.netlify.app/items
멘토에게