CEOS-Developers · gustn99 · Mar 18, 2025 · Mar 18, 2025 · Mar 18, 2025 · Mar 18, 2025
diff --git a/.gitignore b/.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/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "useTabs": true
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,27 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+	{ ignores: ['dist'] },
+	{
+		extends: [js.configs.recommended, ...tseslint.configs.recommended, 'prettier'],
+		files: ['**/*.{ts,tsx}'],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+		plugins: {
+			'react-hooks': reactHooks,
+			'react-refresh': reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+			'@typescript-eslint/no-unused-vars': ['warn'],
+			'@typescript-eslint/no-explicit-any': 'warn',
+		},
+	},
+);
diff --git a/index.html b/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>To Do List</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "react-todo-21th",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@types/react-router-dom": "^5.3.3",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-router-dom": "^7.3.0",
+		"styled-components": "^6.1.16",
+		"styled-reset": "^4.5.2"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.21.0",
+		"@types/node": "^22.13.10",
+		"@types/react": "^19.0.10",
+		"@types/react-dom": "^19.0.4",
+		"@vitejs/plugin-react": "^4.3.4",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
+		"globals": "^15.15.0",
+		"prettier": "^3.5.3",
+		"typescript": "~5.7.2",
+		"typescript-eslint": "^8.24.1",
+		"vite": "^6.2.0"
+	},
+	"main": "index.js",
+	"repository": "https://github.com/gustn99/react-todo-21th.git",
+	"author": "young <[email protected]>",
+	"license": "MIT"
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,14 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './pages/Home';
+
+function App() {
+	return (
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<Home />} />
+			</Routes>
+		</BrowserRouter>
+	);
+}
+
+export default App;
diff --git a/src/components/Grass/index.tsx b/src/components/Grass/index.tsx
@@ -0,0 +1,17 @@
+import { createGrassCalendar } from '@/utils/createGrassCalendar';
+import { GrassItem, GrassLayout, GrassWrapper } from './style';
+import { memo, useMemo } from 'react';
+
+export default memo(function Grass() {
+	const calendar = useMemo(() => createGrassCalendar(), []);
+
+	return (
+		<GrassWrapper>
+			<GrassLayout>
+				{calendar.map((date) => (
+					<GrassItem $hasDoneTodo={date.hasDoneTodo} title={date.date} key={date.date} />
+				))}
+			</GrassLayout>
+		</GrassWrapper>
+	);
+});
diff --git a/src/components/Grass/style.tsx b/src/components/Grass/style.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const GrassWrapper = styled.div`
+	border-left: 2px solid darkslategrey;
+	padding: 8px;
+
+	@media (max-width: 639px) {
+		display: none;
+	}
+`;
+
+export const GrassLayout = styled.div`
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	grid-auto-rows: minmax(auto);
+	gap: 4px;
+	height: fit-content;
+`;
+
+export const GrassItem = styled.div<{ $hasDoneTodo: boolean }>`
+	width: 100%;
+	aspect-ratio: 1;
+	margin: auto;
+	background-color: ${({ $hasDoneTodo }) => ($hasDoneTodo ? 'lightpink' : 'rgb(233, 233, 233)')};
+	border-radius: 2px;
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 0.5;
+	}
+`;
diff --git a/src/components/TodoItem/dto.ts b/src/components/TodoItem/dto.ts
@@ -0,0 +1,7 @@
+import { ChangeEvent } from 'react';
+import type { TodoDto } from '@/pages/Home/dto';
+
+export interface TodoItemProps extends Omit<TodoDto, 'date'> {
+	onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+	onClickDeleteButton: (id: string) => void;
+}
diff --git a/src/components/TodoItem/index.tsx b/src/components/TodoItem/index.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import type { TodoItemProps } from './dto';
+import { Button, Checkbox, TodoContent, TodoItemLayout } from './style';
+
+export default function TodoItem({ id, isDone, content, onChange, onClickDeleteButton }: TodoItemProps) {
+	const [isExpended, setIsExpended] = useState(false);
+	const todoId = String(id);
+
+	return (
+		<TodoItemLayout>
+			<Checkbox onChange={onChange} checked={isDone} type="checkbox" id={todoId} />
+			<TodoContent
+				htmlFor={todoId}
+				$isDone={isDone}
+				$isHovered={isExpended}
+				onMouseEnter={() => {
+					setIsExpended(true);
+				}}
+				onMouseLeave={() => {
+					setTimeout(() => setIsExpended(false), 700);
+				}}
+			>
+				{content}
+			</TodoContent>
+			<Button onClick={() => onClickDeleteButton(todoId)}>삭제</Button>
+		</TodoItemLayout>
+	);
+}
diff --git a/src/components/TodoItem/style.tsx b/src/components/TodoItem/style.tsx
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import { CommonButton } from '@/styles/CommonStyles';
+import { memo } from 'react';
+
+export const TodoItemLayout = styled.li`
+	position: relative;
+
+	width: 100%;
+	padding: 5px 8px;
+	border-bottom: 1.5px solid darkslategrey;
+
+	display: grid;
+	grid-template-columns: auto 1fr 50px;
+	gap: 4px;
+	align-items: center;
+
+	transition: background-color 0.2s;
+
+	&:hover {
+		background-color: rgb(245, 245, 245);
+	}
+`;
+
+export const Checkbox = styled.input`
+	appearance: none;
+	width: 16px;
+	height: 16px;
+	border: 1.5px solid darkslategrey;
+	border-radius: 2px;
+	cursor: pointer;
+
+	&:checked {
+		background-color: darkslategrey;
+	}
+`;
+
+export const TodoContent = memo(styled.label<{ $isDone: boolean; $isHovered: boolean }>`
+	padding: 3px 0;
+	margin: auto 0;
+	cursor: pointer;
+
+	line-height: 24px;
+
+	max-height: 30px;
+	white-space: ${({ $isHovered }) => ($isHovered ? 'pre-line' : 'nowrap')};
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition: max-height 1.5s;
+
+	${({ $isDone }) => ($isDone ? 'color: rgb(150, 150, 150);	text-decoration: line-through;' : '')}
+
+	&:hover {
+		max-height: 300px;
+	}
+`);
+
+export const Button = memo(styled(CommonButton)``);
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import GlobalStyles from './styles/GlobalStyles.ts';
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<GlobalStyles />
+		<App />
+	</StrictMode>,
+);
diff --git a/src/pages/Home/dto.ts b/src/pages/Home/dto.ts
@@ -0,0 +1,6 @@
+export interface TodoDto {
+	id: number;
+	date: string; // 로컬스토리지 저장을 위해 사용
+	isDone: boolean;
+	content: string;
+}