mobi-community · TransparentDeveloper · Mar 18, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 20, 2024
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# mobi-2th-begginer-2
+# mobi-2th-begginer-3
 ### 3주차
 <a href="https://lyrical-brain-e0f.notion.site/mobi-beginner-week-3-0d1a1889390849729e292c60410a605e?pvs=4">@see</a>
 

diff --git a/boiler-template/.eslintrc.cjs b/boiler-template/.eslintrc.cjs
@@ -0,0 +1,33 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:jsx-ally/recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:react/recommended',
+		'plugin:prettier/recommended',
+		'plugin:react-hooks/recommended',
+		'plugin:storybook/recommended',
+	],
+	overrides: [
+		{
+			env: {
+				node: true,
+			},
+			files: ['.eslintrc.{js,cjs}'],
+			parserOptions: {
+				sourceType: 'script',
+			},
+		},
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+	},
+	plugins: ['@typescript-eslint', 'react'],
+	rules: {},
+}
diff --git a/boiler-template/.gitignore b/boiler-template/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/boiler-template/.prettierrc b/boiler-template/.prettierrc
@@ -0,0 +1,17 @@
+{
+	"arrowParens": "always",
+	"bracketSameLine": false,
+	"bracketSpacing": false,
+	"semi": false,
+	"experimentalTernaries": false,
+	"singleQuote": true,
+	"jsxSingleQuote": true,
+	"quoteProps": "as-needed",
+	"proseWrap": "preserve",
+	"insertPragma": false,
+	"printWidth": 80,
+	"requirePragma": false,
+	"tabWidth": 2,
+	"useTabs": true,
+	"embeddedLanguageFormatting": "auto"
+}
diff --git a/boiler-template/README.md b/boiler-template/README.md
@@ -0,0 +1,11 @@
+# 나만의 Boiler Template 만들기
+
+## 환경 세팅
+
+## 사용 라이브러리 목록
+
+## 구현
+
+### Component
+
+### Config
diff --git a/boiler-template/index.html b/boiler-template/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/boiler-template/package.json b/boiler-template/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "boiler-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.2.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/boiler-template/public/vite.svg b/boiler-template/public/vite.svg
diff --git a/boiler-template/src/App.tsx b/boiler-template/src/App.tsx
@@ -0,0 +1,5 @@
+function App() {
+	return <div>⛳️</div>
+}
+
+export default App
diff --git a/boiler-template/src/components/structure/center.tsx b/boiler-template/src/components/structure/center.tsx
@@ -0,0 +1,71 @@
+import {
+	ALIGN_CENTER,
+	FLEX_CENTER,
+	JUSTIFY_CENTER,
+} from '@/libs/styled-components/util-css'
+import type {
+	AxisType,
+	OptionalChromaType,
+	OptionalDirectionType,
+	OptionalPaddingSizeType,
+	OptionalSizeType,
+} from '@/types'
+import type {PropsWithChildren} from 'react'
+import styled, {RuleSet, css} from 'styled-components'
+
+interface CenterProps
+	extends OptionalSizeType,
+		OptionalChromaType,
+		OptionalDirectionType,
+		OptionalPaddingSizeType,
+		PropsWithChildren {}
+
+/** 자식 컴포넌트 중앙 정렬 */
+const Center = ({
+	width,
+	height,
+	direction = 'both',
+	bgColor = 'transparent',
+	px = '0rem',
+	py = '0rem',
+	children,
+}: CenterProps) => {
+	return (
+		<S.Container
+			$width={width}
+			$height={height}
+			$bgColor={bgColor}
+			$px={px}
+			$py={py}
+			direction={direction}
+		>
+			{children}
+		</S.Container>
+	)
+}
+
+export default Center
+
+const DirectionCSS: {[key in AxisType]: RuleSet} = {
+	both: css`
+		${FLEX_CENTER}
+	`,
+	horizontal: css`
+		${JUSTIFY_CENTER}
+	`,
+	vertical: css`
+		${ALIGN_CENTER}
+	`,
+}
+
+const Container = styled.div<CenterProps>`
+	width: ${({$width}) => $width};
+	height: ${({$height}) => $height};
+	background-color: ${({$bgColor}) => $bgColor};
+	padding: ${({$py, $px}) => `${$py} ${$px}`};
+	${({direction}) => DirectionCSS[direction!]}
+`
+
+const S = {
+	Container,
+}
diff --git a/boiler-template/src/components/structure/index.ts b/boiler-template/src/components/structure/index.ts
@@ -0,0 +1,2 @@
+export * from './center'
+export * from './symmetrical-padding'
diff --git a/boiler-template/src/components/structure/symmetrical-padding.tsx b/boiler-template/src/components/structure/symmetrical-padding.tsx
@@ -0,0 +1,65 @@
+import type {
+	OptionalChromaType,
+	OptionalPaddingSizeType,
+	OptionalSizeType,
+} from '@/types'
+import type {PropsWithChildren} from 'react'
+import styled from 'styled-components'
+
+interface PaddingProps
+	extends OptionalSizeType,
+		OptionalChromaType,
+		OptionalPaddingSizeType,
+		PropsWithChildren {}
+
+export const Padding = ({
+	width = '0rem',
+	height = '0rem',
+	bgColor = 'transparent',
+	p = '0rem',
+	px,
+	py,
+	pt,
+	pb,
+	pr,
+	pl,
+	children,
+}: PaddingProps) => {
+	return (
+		<S.Container
+			$width={width}
+			$height={height}
+			$bgColor={bgColor}
+			$p={p}
+			$px={px}
+			$py={py}
+			$pt={pt}
+			$pb={pb}
+			$pr={pr}
+			$pl={pl}
+		>
+			{children}
+		</S.Container>
+	)
+}
+
+const Container = styled.div<PaddingProps>`
+	width: ${({$width}) => $width};
+	height: ${({$height}) => $height};
+	background-color: ${({$bgColor}) => $bgColor};
+
+	padding: ${({$p}) => $p};
+
+	padding-left: ${({$px}) => !!$px && $px};
+	padding-right: ${({$px}) => !!$px && $px};
+	padding-top: ${({$py}) => !!$py && $py};
+	padding-bottom: ${({$py}) => !!$py && $py};
+
+	padding-left: ${({$pl}) => !!$pl && $pl};
+	padding-right: ${({$pr}) => !!$pr && $pr};
+	padding-top: ${({$pt}) => !!$pt && $pt};
+	padding-bottom: ${({$pb}) => !!$pb && $pb};
+`
+const S = {
+	Container,
+}
diff --git a/boiler-template/src/libs/styled-components/tokens/border-radius.ts b/boiler-template/src/libs/styled-components/tokens/border-radius.ts
@@ -0,0 +1 @@
+export const BORDER_RADIUS = {} as const
diff --git a/boiler-template/src/libs/styled-components/tokens/color.ts b/boiler-template/src/libs/styled-components/tokens/color.ts
@@ -0,0 +1 @@
+export const COLOR = {} as const
diff --git a/boiler-template/src/libs/styled-components/tokens/font-size.ts b/boiler-template/src/libs/styled-components/tokens/font-size.ts
@@ -0,0 +1 @@
+export const FONT_SIZE = {} as const
diff --git a/boiler-template/src/libs/styled-components/tokens/font-weight.ts b/boiler-template/src/libs/styled-components/tokens/font-weight.ts
@@ -0,0 +1 @@
+export const FONT_WEIGHT = {} as const
diff --git a/boiler-template/src/libs/styled-components/tokens/index.ts b/boiler-template/src/libs/styled-components/tokens/index.ts
@@ -0,0 +1,4 @@
+export * from './border-radius'
+export * from './color'
+export * from './font-size'
+export * from './font-weight'
diff --git a/boiler-template/src/libs/styled-components/util-css/flex-layout.ts b/boiler-template/src/libs/styled-components/util-css/flex-layout.ts
@@ -0,0 +1,30 @@
+import {css} from 'styled-components'
+
+export const DIRECTION_COLUMN = css`
+	display: flex;
+	flex-direction: column;
+`
+export const ALIGN_CENTER = css`
+	display: flex;
+	align-items: center;
+`
+export const ALIGN_END = css`
+	display: flex;
+	align-items: end;
+`
+export const JUSTIFY_CENTER = css`
+	display: flex;
+	justify-content: center;
+`
+export const JUSTIFY_END = css`
+	display: flex;
+	justify-content: end;
+`
+export const FLEX_CENTER = css`
+	${ALIGN_CENTER}
+	${JUSTIFY_CENTER}
+`
+export const FLEX_END = css`
+	${ALIGN_END}
+	${JUSTIFY_END}
+`
diff --git a/boiler-template/src/libs/styled-components/util-css/index.ts b/boiler-template/src/libs/styled-components/util-css/index.ts
@@ -0,0 +1,3 @@
+export * from './flex-layout'
+export * from './shadow'
+export * from './solid-border-line'
diff --git a/boiler-template/src/libs/styled-components/util-css/shadow.ts b/boiler-template/src/libs/styled-components/util-css/shadow.ts
@@ -0,0 +1,33 @@
+import {css} from 'styled-components'
+
+export const BOX_SHADOW_SMALL = css`
+	box-shadow: 0rem 0rem 0rem 'color';
+`
+export const BOX_SHADOW_MEDIUM = css`
+	box-shadow: 0rem 0rem 0rem 'color';
+`
+export const BOX_SHADOW_REGULAR = css`
+	box-shadow: 0rem 0rem 0rem 'color';
+`
+export const BOX_SHADOW_BIG = css`
+	box-shadow: 0rem 0rem 0rem 'color';
+`
+export const BOX_SHADOW_LARGE = css`
+	box-shadow: 0rem 0rem 0rem 'color';
+`
+
+export const TEXT_SHADOW_SMALL = css`
+	text-shadow: 0rem 0rem 0rem 'color';
+`
+export const TEXT_SHADOW_MEDIUM = css`
+	text-shadow: 0rem 0rem 0rem 'color';
+`
+export const TEXT_SHADOW_REGULAR = css`
+	text-shadow: 0rem 0rem 0rem 'color';
+`
+export const TEXT_SHADOW_BIG = css`
+	text-shadow: 0rem 0rem 0rem 'color';
+`
+export const TEXT_SHADOW_LARGE = css`
+	text-shadow: 0rem 0rem 0rem 'color';
+`
diff --git a/boiler-template/src/libs/styled-components/util-css/solid-border-line.ts b/boiler-template/src/libs/styled-components/util-css/solid-border-line.ts
@@ -0,0 +1,17 @@
+import {css} from 'styled-components'
+
+export const SOLID_BORDER_LINE_SMALL = css`
+	border: 0rem solid 'color';
+`
+export const SOLID_BORDER_LINE_MEDIUM = css`
+	border: 0rem solid 'color';
+`
+export const SOLID_BORDER_LINE_REGULAR = css`
+	border: 0rem solid 'color';
+`
+export const SOLID_BORDER_LINE_BIG = css`
+	border: 0rem solid 'color';
+`
+export const SOLID_BORDER_LINE_LARGE = css`
+	border: 0rem solid 'color';
+`