From 21c9601282a70fffd869ed3be6ffa140125fb026 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gamil.com>
Date: Thu, 20 Mar 2025 11:43:06 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8:=20Metamask=20=EB=A1=9C=EA=B7=B8?=
=?UTF-8?q?=EC=9D=B8=20=EC=97=B0=EA=B2=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 24 +
README.md | 71 +-
eslint.config.js | 28 +
index.html | 13 +
public/vite.svg | 1 +
src/App.css | 42 +
src/App.tsx | 12 +
src/assets/react.svg | 1 +
src/components/index.ts | 1 +
src/components/walletLogin/index.tsx | 69 +
src/index.css | 68 +
src/main.tsx | 13 +
src/vite-env.d.ts | 1 +
tsconfig.app.json | 26 +
tsconfig.json | 7 +
tsconfig.node.json | 24 +
vite.config.ts | 7 +
yarn.lock | 2629 ++++++++++++++++++++++++++
18 files changed, 3020 insertions(+), 17 deletions(-)
create mode 100644 .gitignore
create mode 100644 eslint.config.js
create mode 100644 index.html
create mode 100644 public/vite.svg
create mode 100644 src/App.css
create mode 100644 src/App.tsx
create mode 100644 src/assets/react.svg
create mode 100644 src/components/index.ts
create mode 100644 src/components/walletLogin/index.tsx
create mode 100644 src/index.css
create mode 100644 src/main.tsx
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.app.json
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.ts
create mode 100644 yarn.lock
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ 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/README.md b/README.md
index 70b80e0..40ede56 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,54 @@
-# TrendGarage
-트렌드를 따라가지위해 공부한 기록 입니다.
-
-## 나의 고민
-- 어떤 무엇을 개발 하더라도 왜 이러한 언어를 사용해야하는지 왜 이러한 라이브러리를 사용해야하는지 고민하고 성찰을 오래 깊게하는 스타일이다. 그러다보니 프로젝트에 선뜻 최신 트렌드를 따라가지 못하는 경향이 있어 남들보다 트렌드에 둔감해지는 것 같단 고민을 하게 되었다.
-
-## 고민 해결을 위한 나만의 레포지토리
-- 프로젝트가 아닌 로컬에서 나만의 연습장과도 같은 환경을 만들어 트렌드를 학습하고 공부하기 위한 리파지토리 이다.
-----
-## yarn workspace
-
-## 브렌치 생성/작성 규칙
-- 브렌치를 생성하는 규칙은 다음과 같다.
- - Trend/Type/issueN(ex. tanstackQuery/memo/1)
- - Type의 종류
- - memo
- - config(개발환경 설정)
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+ extends: [
+ // Remove ...tseslint.configs.recommended and replace with this
+ ...tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ ...tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ ...tseslint.configs.stylisticTypeChecked,
+ ],
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+ plugins: {
+ // Add the react-x and react-dom plugins
+ 'react-x': reactX,
+ 'react-dom': reactDom,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended typescript rules
+ ...reactX.configs['recommended-typescript'].rules,
+ ...reactDom.configs.recommended.rules,
+ },
+})
+```
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..092408a
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+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],
+ 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 },
+ ],
+ },
+ },
+)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e4b78ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..b9d355d
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..4ec9803
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,12 @@
+import { Route, Routes } from "react-router-dom";
+import { WalletLogin } from "./components";
+const App = () => {
+ return (
+
+ Main} />
+ } />
+
+ );
+};
+
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..3deac39
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export { default as WalletLogin } from "./walletLogin";
diff --git a/src/components/walletLogin/index.tsx b/src/components/walletLogin/index.tsx
new file mode 100644
index 0000000..7a2b092
--- /dev/null
+++ b/src/components/walletLogin/index.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from "react";
+import Web3 from "web3";
+import detectEthereumProvider from "@metamask/detect-provider";
+
+declare global {
+ interface Window {
+ ethereum?: {
+ request: (args: {
+ method: string;
+ params?: unknown[];
+ }) => Promise;
+ on?: (event: string, callback: (...args: unknown[]) => void) => void;
+ };
+ }
+}
+
+const WalletLogin: React.FC = () => {
+ const [web3, setWeb3] = useState(null);
+ const [account, setAccount] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const loadProvider = async () => {
+ const provider = (await detectEthereumProvider()) as Window["ethereum"];
+
+ if (provider) {
+ const web3Instance = new Web3(
+ provider as unknown as Web3["currentProvider"]
+ );
+ setWeb3(web3Instance);
+ } else {
+ setError("MetaMask 또는 Web3 지갑이 설치되어 있지 않습니다.");
+ }
+ };
+
+ loadProvider();
+ }, []);
+
+ const connectWallet = async () => {
+ if (!web3 || !window.ethereum) {
+ setError("Web3가 초기화되지 않았습니다.");
+ return;
+ }
+
+ try {
+ const accounts = (await window.ethereum.request({
+ method: "eth_requestAccounts",
+ })) as string[];
+
+ setAccount(accounts[0]);
+ } catch (err) {
+ setError(`${(err as Error).message} : 지갑 연결이 거부되었습니다.`);
+ }
+ };
+
+ return (
+
+
Web3.js 스마트 월렛 로그인
+ {account ? (
+
지갑 주소: {account}
+ ) : (
+
+ )}
+ {error &&
{error}
}
+