//Home.jsx
return (
    <>
        {loading && <Loading />}
        <Header />
        <Carousel />
        <S.Main>
            {!loading && products && (
                <S.ProductUl className={loading ? '' : 'show'}>
                    {products.map((item) => (
                        <Link
                            key={item.product_id}
                            to={`/product/${item.product_id}`}
                        >
                            <ProductCard {...item} key={item.product_id} />
                        </Link>
                    ))}
                </S.ProductUl>
            )}
        </S.Main>
    </>
);

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const [token, setToken] = useState(localStorage.getItem('token') || null);
    const [userType, setUserType] = useState(
        localStorage.getItem('user_type') || null,
    );

    const setAuthToken = (newToken, newUserType) => {
        localStorage.setItem('token', newToken);
        localStorage.setItem('user_type', newUserType);
        setToken(newToken);
        setUserType(newUserType);
    };

    const logout = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('user_type');
        setToken(null);
        setUserType(null);
    };

    return (
        <AuthContext.Provider value={{ token, userType, setAuthToken, logout }}>
            {children}
        </AuthContext.Provider>
    );
};

// 주석 처리된 코드는 디바운싱 적용전 코드이며 디바운싱 적용 후 handleKeyUp 대신 useEffect 코드가 추가되었습니다.
import { useState, useEffect, useRef } from 'react';

const useInput = (initialValue, validator = null, inputName) => {
    const [value, setValue] = useState(initialValue);
    const [error, setError] = useState('');
    const [isValid, setIsValid] = useState(true);

    const debounceTimeout = useRef(null);

    const handleChange = (e) => {
        setValue(e.target.value);
        console.log('입력중...');
    };

    //  const handleKeyUp = validator
    //         ? (e) => {
    //               try {
    //                   console.log('입력 완료, 유효성 검사 실시');
    //                   setError(validator(e.target.value));
    //               } catch (error) {
    //                   setError(error.message);
    //               }
    //           }
    //         : null;

    useEffect(() => {
        if (debounceTimeout.current) {
            clearTimeout(debounceTimeout.current);
        }

        if (validator && value !== '') {
            debounceTimeout.current = setTimeout(() => {
                console.log('입력 완료, 유효성 검사 실시');
                try {
                    setError(validator(value));
                } catch (error) {
                    setError(error.message);
                }
            }, 300);
        }

        return () => {
            clearTimeout(debounceTimeout.current);
        };
    }, [value, validator]);

    return {
        value,
        setValue,
        error,
        isValid,
        setIsValid,
        onChange: handleChange,
        // onKeyUp: handleKeyUp, - 삭제
        name: inputName,
        id: inputName,
    };
};

export default useInput;

// Header 컴포넌트에서 검색어를 받아 url 쿼리 파라미터로 전달하면
const searchData = async () => {
    try {
        const encodedSearchValue =
            searchWord.value.trim() === ''
                ? ''
                : encodeURIComponent(searchWord.value);

        navigate(`/search?search=${encodedSearchValue}`);
        searchWord.setValue('');
    } catch (error) {
        console.error(error);
    }
};

// SearchResult 페이지 컴포넌트에서 값을 보여줌
// 가져온 값을 getSearchData api 호출을 통해 검색을 실시하고 결과값을 렌더링함.
useEffect(() => {
    setLoading(true);
    if (searchValue) {
        try {
            const encodedSearchValue = encodeURIComponent(searchValue);
            getSearchData(activePage, encodedSearchValue).then((res) => {
                setSearchData(res.data);
                setSearchResults(res.data.results);
                setLoading(false);
            });
        } catch (error) {
            console.error(error);
        }
    } else {
        setSearchData({});
        setSearchResults([]);
        setLoading(false);
    }
}, [searchValue, activePage]);

const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
        if (e.nativeEvent.isComposing === false) {
            searchData();
        }
    }
};

<svg>
    <g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="current" stroke="none">
</svg>

import { ReactComponent as LogoImg } from '../../../assets/icon-logo.svg';

export const LogoIcon = () => {
    return <LogoImg fill={'var(--main)'} alt="로고 이미지" />;
};

// useTheme을 통해 현재 ThemeContext 값을 가져옴
export const useTheme = () => {
    const theme = useContext(ThemeContext);
    if (!theme) {
        throw new Error('error');
    }
    return theme;
};

export const ThemeProvider = ({ children }) => {
    const storedValue = localStorage.getItem('isDarkMode');

    // 초기 다크모드 상태 설정, storedValue가 없다면 false값 설정.
    const [isDarkMode, setIsDarkMode] = useState(() => {
        return storedValue ? JSON.parse(storedValue) : false;
    });

    // toggle 함수, 다크 모드 상태를 토글하고 변경된 상태를 로컬 스토리지에 저장
    const toggleTheme = () => {
        setIsDarkMode((prevMode) => {
            const newMode = !prevMode;
            localStorage.setItem('isDarkMode', JSON.stringify(newMode));
            return newMode;
        });
    };

    // 컴포넌트가 마운트 될때, storedValue 바뀔 때 실행.
    useEffect(() => {
        if (storedValue !== null) {
            setIsDarkMode(JSON.parse(storedValue));
        }
    }, [storedValue]);

    // 테마 정보를 담은 객체 생성
    const theme = {
        isDarkMode,
        toggleTheme,
    };

    // useContext를 사용하여 ThemeContext 값을 제공.
    // isDarkMode, toggleTheme함수가 제공되고 이를 StyledProvider의 theme props로 전달
    return (
        <ThemeContext.Provider value={theme}>
            <StyledProvider theme={theme}>{children}</StyledProvider>
        </ThemeContext.Provider>
    );
};