From a8a55f5d54e9e7d4f5b9a770804adf24d06cdd3c Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:01:37 +0900 Subject: [PATCH 01/11] =?UTF-8?q?refactor=20::=20Typescript=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 31 +++++++++++++++++++++++-------- package.json | 5 +++-- vite.config.js => vite.config.ts | 1 - 3 files changed, 26 insertions(+), 11 deletions(-) rename vite.config.js => vite.config.ts (82%) diff --git a/package-lock.json b/package-lock.json index 8cc038c..20635ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,13 +13,14 @@ }, "devDependencies": { "@eslint/js": "^9.30.1", - "@types/react": "^19.1.8", - "@types/react-dom": "^19.1.6", + "@types/react": "^19.1.9", + "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^4.6.0", "eslint": "^9.30.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "typescript": "^5.8.3", "vite": "^7.0.4" } }, @@ -1367,9 +1368,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "19.1.8", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz", - "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==", + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", + "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==", "dev": true, "license": "MIT", "dependencies": { @@ -1377,9 +1378,9 @@ } }, "node_modules/@types/react-dom": { - "version": "19.1.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz", - "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz", + "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==", "dev": true, "license": "MIT", "peerDependencies": { @@ -2630,6 +2631,20 @@ "node": ">= 0.8.0" } }, + "node_modules/typescript": { + "version": "5.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz", + "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", diff --git a/package.json b/package.json index 44a8fc0..ae19500 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,14 @@ }, "devDependencies": { "@eslint/js": "^9.30.1", - "@types/react": "^19.1.8", - "@types/react-dom": "^19.1.6", + "@types/react": "^19.1.9", + "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^4.6.0", "eslint": "^9.30.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "typescript": "^5.8.3", "vite": "^7.0.4" } } diff --git a/vite.config.js b/vite.config.ts similarity index 82% rename from vite.config.js rename to vite.config.ts index 8b0f57b..9ffcc67 100644 --- a/vite.config.js +++ b/vite.config.ts @@ -1,7 +1,6 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -// https://vite.dev/config/ export default defineConfig({ plugins: [react()], }) From 64b5fe05a2c19bceaaac871fb562565d9a09bf95 Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:03:39 +0900 Subject: [PATCH 02/11] =?UTF-8?q?refactor=20::=20=ED=99=95=EC=9E=A5?= =?UTF-8?q?=EC=9E=90=20jsx=EC=97=90=EC=84=9C=20tsx=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- index.html | 2 +- src/{App.jsx => App.tsx} | 0 src/main.jsx | 10 ---------- src/main.tsx | 6 ++++++ 5 files changed, 9 insertions(+), 13 deletions(-) rename src/{App.jsx => App.tsx} (100%) delete mode 100644 src/main.jsx create mode 100644 src/main.tsx diff --git a/README.md b/README.md index 2ca95fa..603864d 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ ┣ 📦components
┃ ┣ 📜[Component1].jsx
┃ ┗ 📜[Component2].jsx
-┣ 📜App.jsx
+┣ 📜App.tsx
┣ 📜App.css
-┣ 📜main.jsx
+┣ 📜main.tsx
## 커밋 컨벤션 diff --git a/index.html b/index.html index 0c589ec..891a938 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/App.jsx b/src/App.tsx similarity index 100% rename from src/App.jsx rename to src/App.tsx diff --git a/src/main.jsx b/src/main.jsx deleted file mode 100644 index b9a1a6d..0000000 --- a/src/main.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.jsx' - -createRoot(document.getElementById('root')).render( - - - , -) diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..5d4f53a --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,6 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')).render() From d7e3ecaaf1016cef755b590bb66dd34f16d81a58 Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:10:44 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat=20::=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 22 +++++++++++++--------- src/components/ModalContainer.tsx | 0 src/components/SignInModal.tsx | 0 src/components/SignUpModal.tsx | 0 src/main.tsx | 1 - 5 files changed, 13 insertions(+), 10 deletions(-) create mode 100644 src/components/ModalContainer.tsx create mode 100644 src/components/SignInModal.tsx create mode 100644 src/components/SignUpModal.tsx diff --git a/src/App.tsx b/src/App.tsx index 5d62758..ec7a14f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,20 @@ -import { useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; +import React, { useState } from "react"; import "./App.css"; function App() { - const [count, setCount] = useState(0); - const name = "류승찬"; - + const [signIn, setSignIn] = useState(false); + const [signUp, setSignUp] = useState(false); + const mainStyle = { + display: "flex", + gap: "2rem", + } return ( - <> - 화이팅 - +
+ + + {signIn && } + {signUp && } +
); } diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/SignInModal.tsx b/src/components/SignInModal.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/SignUpModal.tsx b/src/components/SignUpModal.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/main.tsx b/src/main.tsx index 5d4f53a..6924277 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,3 @@ -import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' From 14ca1841e978798ff5ca1939b965cfd1c999dd1c Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:17:27 +0900 Subject: [PATCH 04/11] =?UTF-8?q?feat=20::=20ModalContainer=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ModalContainer.tsx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index e69de29..7be97e3 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +interface ModalContainerProps { + width: string | number, + height: string | number +} +const ModalContainer: React.FC = ({width, height}: ModalContainerProps) => { + const modalStyle: React.CSSProperties = { + width: width, + height: height, + position: 'fixed', + left: '50%', + top: '50%', + transform: 'translate(-50%, -50%)', + zIndex: 2, + backgroundColor: 'white', + border: '1px solid #777', + borderRadius: '2rem', + } + return ( +
+ +
+ ) +} + +export default ModalContainer \ No newline at end of file From 7f66398a3cf6e539391383b609bcb77ba42ef95f Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:27:29 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat=20::=20=EA=B0=81=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=97=90=EC=84=9C=20=EA=B3=B5=ED=86=B5=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=93=B0=EC=9D=B4=EB=8A=94=20Style=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ModalContainer.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index 7be97e3..40e1168 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -1,10 +1,15 @@ import React from 'react'; +const inputStyle: React.CSSProperties = { + width: "100%", + height: "2rem", +} interface ModalContainerProps { width: string | number, - height: string | number + height: string | number, + children?: React.ReactNode, } -const ModalContainer: React.FC = ({width, height}: ModalContainerProps) => { +const ModalContainer: React.FC = ({width, height, children}: ModalContainerProps) => { const modalStyle: React.CSSProperties = { width: width, height: height, @@ -16,12 +21,17 @@ const ModalContainer: React.FC = ({width, height}: ModalCon backgroundColor: 'white', border: '1px solid #777', borderRadius: '2rem', + padding: '2rem', + display: 'flex', + flexDirection: 'column', + gap: '1rem', } return (
- + {children}
) } -export default ModalContainer \ No newline at end of file +export default ModalContainer +export { inputStyle } \ No newline at end of file From 005ce59a0e9da1c2d4b35bbcbd18f4eb7052342b Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:28:20 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat=20::=20SignInModal=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 15 ++++++++++++--- src/components/SignInModal.tsx | 18 ++++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ec7a14f..65634d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,26 @@ import React, { useState } from "react"; import "./App.css"; +import SignIn from './components/SignInModal'; function App() { const [signIn, setSignIn] = useState(false); const [signUp, setSignUp] = useState(false); - const mainStyle = { + const mainStyle: React.CSSProperties = { display: "flex", gap: "2rem", } + const openSignInModal = () => { + setSignIn(true); + setSignUp(false); + } + const openSignUpModal = () => { + setSignUp(true); + setSignIn(false); + } return (
- - + + {signIn && } {signUp && }
diff --git a/src/components/SignInModal.tsx b/src/components/SignInModal.tsx index e69de29..1727b67 100644 --- a/src/components/SignInModal.tsx +++ b/src/components/SignInModal.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import ModalContainer, { inputStyle } from "./ModalContainer"; + +const SignInModal: React.FC = () => { + + return ( + + + +
+ + +
+ + ) +} + +export default SignInModal; \ No newline at end of file From 4fcea3cad1f25fe86506624e7a4f5faf980c8ae2 Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:46:37 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat=20::=20SignInModal=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/components/SignInModal.tsx | 37 ++++++++++++++++++++++++++-------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 65634d1..2cbeb15 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,7 +21,7 @@ function App() {
- {signIn && } + {signIn && } {signUp && }
); diff --git a/src/components/SignInModal.tsx b/src/components/SignInModal.tsx index 1727b67..e606eb9 100644 --- a/src/components/SignInModal.tsx +++ b/src/components/SignInModal.tsx @@ -1,15 +1,36 @@ -import React from 'react'; +import React, {useRef, useState} from 'react'; import ModalContainer, { inputStyle } from "./ModalContainer"; -const SignInModal: React.FC = () => { - +interface SignInModalProps { + setSignIn: React.Dispatch>; +} +const SignInModal: React.FC = ({setSignIn}: SignInModalProps) => { + const idRef = useRef(null); + const passwordRef = useRef(null); + const [errorMsg, setErrorMsg] = useState(null); + const check = () => { + if(idRef.current?.value.length as number <= 0) { + console.log(idRef.current?.value.length); + idRef.current?.focus(); + setErrorMsg("id를 입력해주세요."); + return; + } + else if(passwordRef.current?.value.length as number <= 0) { + passwordRef.current?.focus(); + setErrorMsg("password를 입력해주세요."); + return; + } + alert("성공"); + setSignIn(false); + } return ( - - - + + + +

{errorMsg}

- - + +
) From d57196f5f45c33521f3e3cdf3509877dc3e86368 Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:49:38 +0900 Subject: [PATCH 08/11] =?UTF-8?q?feat=20::=20SignUpModal=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- src/components/SignUpModal.tsx | 45 ++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 2cbeb15..551dc32 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import "./App.css"; import SignIn from './components/SignInModal'; +import SignUp from './components/SignUpModal'; function App() { const [signIn, setSignIn] = useState(false); @@ -22,7 +23,7 @@ function App() { {signIn && } - {signUp && } + {signUp && } ); } diff --git a/src/components/SignUpModal.tsx b/src/components/SignUpModal.tsx index e69de29..14a9f01 100644 --- a/src/components/SignUpModal.tsx +++ b/src/components/SignUpModal.tsx @@ -0,0 +1,45 @@ +import React, {useRef, useState} from 'react'; +import ModalContainer, { inputStyle } from "./ModalContainer"; + +interface SignUpModalProps { + setSignUp: React.Dispatch>; +} +const SignUpModal: React.FC = ({setSignUp}: SignUpModalProps) => { + const nameRef = useRef(null); + const idRef = useRef(null); + const passwordRef = useRef(null); + const [errorMsg, setErrorMsg] = useState(null); + const check = () => { + if(nameRef.current?.value.length as number <= 0) { + idRef.current?.focus(); + setErrorMsg("name를 입력해주세요."); + return; + } + if(idRef.current?.value.length as number <= 0) { + idRef.current?.focus(); + setErrorMsg("id를 입력해주세요."); + return; + } + else if(passwordRef.current?.value.length as number <= 0) { + passwordRef.current?.focus(); + setErrorMsg("password를 입력해주세요."); + return; + } + alert("SignUp 성공"); + setSignUp(false); + } + return ( + + + + +

{errorMsg}

+
+ + +
+ + ) +} + +export default SignUpModal; \ No newline at end of file From 4256e0e6680d80a7044cee99a527f5782df9797d Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:50:46 +0900 Subject: [PATCH 09/11] =?UTF-8?q?chore=20::=20=EB=94=94=EB=B2=84=EA=B7=B8?= =?UTF-8?q?=EC=9A=A9=20=EC=BD=98=EC=86=94=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SignInModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SignInModal.tsx b/src/components/SignInModal.tsx index e606eb9..8634346 100644 --- a/src/components/SignInModal.tsx +++ b/src/components/SignInModal.tsx @@ -10,7 +10,6 @@ const SignInModal: React.FC = ({setSignIn}: SignInModalProps) const [errorMsg, setErrorMsg] = useState(null); const check = () => { if(idRef.current?.value.length as number <= 0) { - console.log(idRef.current?.value.length); idRef.current?.focus(); setErrorMsg("id를 입력해주세요."); return; @@ -20,7 +19,7 @@ const SignInModal: React.FC = ({setSignIn}: SignInModalProps) setErrorMsg("password를 입력해주세요."); return; } - alert("성공"); + alert("SignIn 성공"); setSignIn(false); } return ( From 1299d4fb2f4fcf820c6d2bd7bb7a16686da3c3db Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 14:51:23 +0900 Subject: [PATCH 10/11] =?UTF-8?q?fix=20::=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?Ref=20=EC=82=AC=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SignUpModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SignUpModal.tsx b/src/components/SignUpModal.tsx index 14a9f01..2395c74 100644 --- a/src/components/SignUpModal.tsx +++ b/src/components/SignUpModal.tsx @@ -11,7 +11,7 @@ const SignUpModal: React.FC = ({setSignUp}: SignUpModalProps) const [errorMsg, setErrorMsg] = useState(null); const check = () => { if(nameRef.current?.value.length as number <= 0) { - idRef.current?.focus(); + nameRef.current?.focus(); setErrorMsg("name를 입력해주세요."); return; } From 2f97348942976d6b1a8619e02805bd3fb755a085 Mon Sep 17 00:00:00 2001 From: bitbyte08 Date: Thu, 31 Jul 2025 15:02:43 +0900 Subject: [PATCH 11/11] =?UTF-8?q?feat=20::=20=EB=AA=A8=EB=8B=AC=20Open?= =?UTF-8?q?=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 551dc32..ea1e7b9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, {useEffect, useState} from "react"; import "./App.css"; import SignIn from './components/SignInModal'; import SignUp from './components/SignUpModal'; @@ -10,6 +10,15 @@ function App() { display: "flex", gap: "2rem", } + useEffect(() => { + const isModalOpen: boolean = signIn || signUp; + if (isModalOpen) document.body.style.overflow = "hidden"; + else document.body.style.overflow = ""; + return () => { + document.body.style.overflow = ""; + } + }, [signIn, signUp]) + const openSignInModal = () => { setSignIn(true); setSignUp(false);