[mission4] 4단계 미션 구현 - 안지선 / 1팀

[anneedesign-ui]

[과제4] 컴포넌트별 CSS 분리 및 UI 코드 구조 개선

• 모든 컴포넌트 CSS 파일을 각각 분리/정리하여 유지보수성 강화
• styles 폴더 내 중복 CSS 삭제 및 import 경로 통일
• husky pre-commit hook 관련 피드백 반영:
  • deprecated 코드(#!/usr/bin/env sh, $(dirname -- "$0")/_/husky.sh") 삭제
  • 최신 husky hook 구조(npx lint-staged)로 수정
  • 커밋 전 자동 포맷 및 코드 스타일 검증 적용
• PR 리뷰에서 받은 코드 구조/작명 피드백까지 적극 반영
• MovieCard, NavBar 등 UI 일관성 및 스타일링도 실무 경험 기반으로 개선

[han-nun0107]

리뷰 확인해 주세요 !

[han-nun0107]

커스텀 훅으로 분리하여 관심사 분리 해주는 것이 좋을 것 같아요 !

ex)

export function useMovies() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchMovies = async () => {
      try {
        setLoading(true);
        const data = await getPopularMovies();
        setMovies(data);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    };

    fetchMovies();
  }, []);

  return { movies, loading, error };
}

[han-nun0107]

seo 고려해서 section, article 사용 고려해보시면 좋을 것 같아요

[han-nun0107]

유틸로 분리 되면 좋을 것 같아요
ex)

export function validateLoginForm({ email, password }) {
  const errors = {};

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!email) {
    errors.email = "이메일을 입력해주세요";
  } else if (!emailRegex.test(email)) {
    errors.email = "올바른 이메일 형식을 입력해주세요";
  }

  if (!password) {
    errors.password = "비밀번호를 입력해주세요";
  } else if (password.length < 6) {
    errors.password = "비밀번호는 6자 이상이어야 합니다";
  }

  return errors;
}

[han-nun0107]

관심사 분리 해주면 좋을 것 같아요 ! 커스텀 훅으로

import { useState } from "react";
import { validateLoginForm } from "@/utils/validationUtils";

export function useLoginForm() {
  const [formData, setFormData] = useState({ email: "", password: "" });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    setErrors((prev) => ({ ...prev, [name]: "" }));
  };

  const handleSubmit = async (onValid) => {
    const validationErrors = validateLoginForm(formData);
    setErrors(validationErrors);

    if (Object.keys(validationErrors).length === 0) {
      await onValid(formData);
    }
  };

  return { formData, errors, handleChange, handleSubmit };
}

[han-nun0107]

요 부분도 커스텀 훅으로 관심사 분리 해주시면 좋을 것 같습니다 !!

[han-nun0107]

src/utils/validation.js에 있는 것으로 대체 될 것 같은데 확인 한 번 부탁드려요 !!!

[han-nun0107]

절대 경로 설정해서 import 절대 경로로 수정되면 좋을 것 같아요 !
vite 절대경로 설정이라고 검색하면 자료 많이 나옵니다 !!!