Conversation
Theme, GlobalStyle, CommonStyle 변환
There was a problem hiding this comment.
안녕하세요 영준님, 우선 눈에 띄는 부분들 먼저 코멘트 드렸습니다!
이 외의 부분은 따로 또 코멘트 남기고 디스코드로 말씀드릴께요 :D
--- 추가 수정 ----
컴포넌트 작성 방식을 일관되게 하는게 약간 더 예뻐 보입니다.
개인적으로. 디렉토리는 하이픈으로 연결하는게 마음이 편하더라구요.
테스트 해본건 아니지만, 특정 OS에서는 디렉토리의 대소문자를 잘 구분 못할것 같기도 해서요.
이를테면 MacOS와 Window, Linux에서 모두 동일하게 대소문자를 잘 구분해 줄지 의문이 드네요.
-- 마지막으로
영준님 고마워요 ~~~~ 하핳..
| import "./Header.css"; | ||
|
|
||
| // react-router-dom의 NavLink를 이용하면 활성화된 네비게이션 항목을 하이라이트해줄 수 있어요! | ||
| function getLinkStyle({ isActive }) { | ||
| interface LinkStyleProps { |
There was a problem hiding this comment.
[참고해주세요]
일반적으로 Props는 리액트 컴포넌트에 사용되는 용어입니다.
현재는 getLinkStyle 유틸함수이기 때문에 props보다는 함수 타입을 만드시는게 더 적절할것 같아요.
There was a problem hiding this comment.
interface LinkStyleParams {
isActive: boolean;
}
type GetLinkStyle = (params: LinkStyleParams) => React.CSSProperties;
const getLinkStyle: GetLinkStyle = ({ isActive }) => ({
color: isActive ? "var(--blue)" : "inherit", // 기본값을 "inherit"로 명시
});이렇게 수정하셔도 좋을것 같아요.
| return { color: isActive ? "var(--blue)" : undefined }; | ||
| } | ||
|
|
||
| function Header() { | ||
| const location = useLocation(); // 현재 경로 정보 | ||
| const location: Location = useLocation(); |
| onSortSelection: (sortType: string) => void; | ||
| } | ||
|
|
||
| const DropdownMenu: React.FC<DropdownMenuProps> = ({ onSortSelection }) => { |
| const handleImageChange = (event) => { | ||
| const file = event.target.files[0]; | ||
| const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const file = event.target.files ? event.target.files[0] : null; |
There was a problem hiding this comment.
[참고해주세요]
아래처럼 개선해볼 수 있습니다.
const file = event.target.files?.[0] ?? null;
| placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." | ||
| isTextArea | ||
| onKeyDown={undefined} |
There was a problem hiding this comment.
[참고해주세요]
onKeyDown을 넣지 않으면 자동으로 undefined가 되기 때문에, 빼셔도 괜찮습니다.
|
|
||
| const fetchSortedData = async ({ orderBy, page, pageSize }) => { | ||
| const fetchSortedData = async ({ |
There was a problem hiding this comment.
[참고해주세요]
type때문에 코드가 길어지고 있어요, 타입을 따로 분리하는걸 추천드립니다.
| @@ -1,7 +1,14 @@ | |||
| import React from "react"; | |||
| import { ReactComponent as HeartIcon } from "../../../assets/images/icons/ic_heart.svg"; | |||
|
|
|||
| function ItemCard({ item }) { | |||
| interface Item { | |||
There was a problem hiding this comment.
[수정해주세요]
통일성 있게 ItemCardProps로 명명해주세요!
혹은
Item 타입은 그대로 두고, 아래에 ItemCardProps를 추가해 주세요.
| itemTag: string[]; | ||
| } | ||
|
|
||
| export interface ItemType { |
There was a problem hiding this comment.
ItemType에서 Item을 추출해주세요.
export interface ItemType {
id: number;
name: string;
description: string;
price: number;
tags: string[];
images: string[];
ownerId: number;
favoriteCount: number;
createdAt: Date;
updatedAt: Date;
isFavorite: boolean;
}
type Item = Pick<ItemType, 'images' | 'name' | 'favoriteCount' | 'price'>;이런식으로 사용하실 수 있습니다.
요구사항
기본
주요 변경사항
스크린샷
멘토에게
그동안 정말 감사했습니다!!!