frontendschool6 / escape12 Goto Github PK

<Headerback
	onClick={() => {
		navigate(-1);
	}}
>

			s: { min: '375px', max: '640px' },
			m: { min: '641px', max: '1279px' },
			l: { min: '1280px' },

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*" : ["src/*"]
    }
  }
}

import react from '@vitejs/plugin-react';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import { env } from 'node:process';
import viteImagemin from '@vheemstra/vite-plugin-imagemin';
import imageminGifSicle from 'imagemin-gifsicle';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminPngQuant from 'imagemin-pngquant';
import imageminSvgo from 'imagemin-svgo';
import imageminWebp from 'imagemin-webp';
import { splitVendorChunkPlugin } from 'vite';

const isDev = env.NODE_ENV === 'development';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		splitVendorChunkPlugin(),
		viteImagemin({
			plugins: {
				jpg: imageminMozjpeg(),
				png: imageminPngQuant(),
				gif: imageminGifSicle(),
				svg: imageminSvgo(),
			},
			makeWebp: {
				plugins: {
					jpg: imageminWebp(),
					png: imageminWebp(),
				},
			},
		}),
	],
	css: {
		devSourcemap: true,
		modules: {
			generateScopedName: isDev
				? '[name]_[local]__[hash:base64:5]'
				: '[hash:base64:4]',
		},
	},
	resolve: {
		alias: {
			'@': resolve(__dirname, './src'),
		},
	},
	// 빌드 시, 청크 파일 생성 매뉴얼 구성
	build: {
		rollupOptions: {
			output: {
				manualChunks: {
					react: ['react', 'react-dom'],
					reactRouter: ['react-router-dom'],
					animations: ['gsap'],
				},
			},
		},
	},
});

import { string, func } from 'prop-types';

Headerback.propTypes = {
    children: string,
    onClick: func,
};

function Headerback({ onClick = '', children }) {
    return (
        <header className="flex max-w-[600px] min-w-[320px] m-auto fixed top-0 left-0 right-0 py-3 text-center bg-ec4 text-ec1 text-2xl font-bold z-10">
            <button className="absolute left-4" onClick={onClick}>
                &lt;
            </button>
            <p className="mx-auto flex-grow">{children}</p>
        </header>
    );
}

export default Headerback;