[김소영] sprint 6#321
Hidden character warning
Conversation
src/components/ItemCard.jsx
Outdated
| import styles from "./ItemCard.module.css"; | ||
|
|
||
| function ItemCard({ className, item }) { | ||
| const thumbnailUrl = "https://example.com/..."; |
There was a problem hiding this comment.
상수라서 컴포넌트 밖에 선언해주시는 걸 추천드려요!
| const thumbnailUrl = "https://example.com/..."; | |
| const THUMBNAIL_URL = "https://example.com/..." as const; |
src/components/ItemCard.jsx
Outdated
| item.images.some((image) => image === thumbnailUrl) | ||
| ? noImage | ||
| : item.images[0] |
There was a problem hiding this comment.
요 부분은 위쪽에서 계산해주고 return 에는 결과만 내려줘도 될 거 같아요! item.images 가 변할 때에만 src 가 바뀌도록 useMemo 를 선언해주면 최적화도 될 거 같네요!
const imageSource = useMemo(() =>
item.images.some((image) => image === thumbnailUrl) ? noImage : item.images[0],
[item.images])
...
return (
...
<img src={imageSource}>
)
src/components/ItemCard.jsx
Outdated
| import styles from "./ItemCard.module.css"; | ||
|
|
||
| function ItemCard({ className, item }) { | ||
| const thumbnailUrl = "https://example.com/..."; |
There was a problem hiding this comment.
item 자체를 쓰는 경우는 없고 다 item 내의 프로퍼티들을 쓰니까 앞에서 구조 분해해서 가면 아래 코드도 간결해질 거 같아요
const {images, name, price, favoriteCount} = item
src/components/Nav.jsx
Outdated
| <div className="nav_center">{center}</div> | ||
| <div className="nav_user">{rightChild}</div> | ||
| </nav> | ||
| <div className={styles.Nav}> |
There was a problem hiding this comment.
클래스네임에는 절대 대문자는 지양해주세요!
| <div className={styles.Nav}> | |
| <div className={styles.�nav}> |
src/components/Nav.jsx
Outdated
| @@ -1,12 +1,28 @@ | |||
| import './Nav.css'; | |||
| import styles from "./Nav.module.css"; | |||
| import Nav_logo from "../assets/nav_panda_logo_img.png"; | |||
There was a problem hiding this comment.
요소 이름은 파스칼 케이스가 일반적인 거 같아용
| import Nav_logo from "../assets/nav_panda_logo_img.png"; | |
| import NavLogo from "../assets/nav_panda_logo_img.png"; |
src/pages/Login.jsx
Outdated
| if (!emailRegex.test(email)) { | ||
| return "잘못된 이메일 형식입니다"; | ||
| } |
src/pages/Login.jsx
Outdated
| const Navigate = useNavigate(); | ||
|
|
||
| // 이메일 값 체크 | ||
| const EmailCheck = (email) => { |
There was a problem hiding this comment.
컴포넌트 내부 함수는 소문자로 시작해야해요! (대문자 시작은 컴포넌트 이름만!)
| const EmailCheck = (email) => { | |
| const emailCheck = (email) => { |
src/pages/Login.jsx
Outdated
|
|
||
| // 비밀번호 값 체크 | ||
| const PasswordCheck = (password) => { | ||
| const PASSWORD_MIN_LEN = 8; |
src/pages/Login.jsx
Outdated
|
|
||
| if (!password.trim()) { | ||
| return `패스워드를 입력해주세요`; | ||
| } else { |
There was a problem hiding this comment.
여기도 early return 쓰면 좋을 거 같아용
src/pages/Signup.jsx
Outdated
| if ( | ||
| !emailError && | ||
| !nickNameError && | ||
| !passwordError && | ||
| !passwordMatchError && | ||
| email && | ||
| nickName && | ||
| password && | ||
| passwordMatch | ||
| ) { | ||
| return setIsButtonDisabled(false); | ||
| } | ||
| return setIsButtonDisabled(true); |
There was a problem hiding this comment.
요렇게 조건이 많을 때에는 읽기 좋게 어떤 조건인지 나눠줘도 좋을 거 같아요
| if ( | |
| !emailError && | |
| !nickNameError && | |
| !passwordError && | |
| !passwordMatchError && | |
| email && | |
| nickName && | |
| password && | |
| passwordMatch | |
| ) { | |
| return setIsButtonDisabled(false); | |
| } | |
| return setIsButtonDisabled(true); | |
| const isNoError = !emailError && !nickNameError && !passwordError && !passwordMatchError | |
| const hasAllInput = email && nickName && password && passwordMatch | |
| setIsButtonDisabled(!(isNoError && hasAllInput)) |
|
충돌사항들이 좀 있는데 해소하고 꼭 머지해주셔요 😃 |
36841dd to
4cf1edf
Compare
요구사항
기본
상품 등록
심화
주요 변경사항
스크린샷
멘토에게