/goorm-modal

구름 팀 챌린지에서 수행한 모달창을 다시 만들어 보았습니다.

Primary LanguageJavaScript

goorm Team-Challenge

📚 참고자료

⚙️ 프로젝트 초기 설정법

  1. npm i
  2. eslint & prettier 사용하실 분은 Eslint & Prettier 사용법을 확인해주세요.

Eslint & Prettier 사용법

사용하실분만 사용하시면 됩니다. (선택 사항)

  1. vscode extension 중 ESLint와 Prettier 설치

  2. 명령 팔레트 오픈 (command(또는 ctrl) + shift + P)

  3. 사용자 설정(JSON)오픈 (Preferences: Open User Settings (JSON))

  4. 아래 내용 Copy & Paste

    {
	"workbench.colorTheme": "Default Dark+",
	"editor.formatOnSave": false,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	}
}

🚀 프로젝트 실행법

  1. npm start
  2. 상단 메뉴바의 프로젝트 > 실행URL과포트 클릭하기
  3. 3000포트에 등록된 URL 확인
  4. URL에서 실행 화면 확인

🎨 GDS 및 alias 사용법

// GDS 컴포넌트
import { Button } from '@goorm-dev/gds-challenge';

// GDS 아이콘
import { ChevronDoubleLeftIcon } from '@goorm-dev/gds-icons';

// alias (src/* === @/*)
import { Card } from '@/components';

const Example = () => {
	return (
		<>
			<Button icon={<ChevronDoubleLeftIcon />}>GDS Example</Button>
			<Card>Alias Example</Card>
		</>
	);
};