From 7b09b64988ff5834c7245c7ecd50be54671d474e Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Fri, 8 Nov 2024 18:06:53 +0900 Subject: [PATCH 01/73] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EC=84=A4=EC=A0=95=20(#1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 39 +++++++++++++ package.json | 1 + src/App.tsx | 7 +-- .../createProject/ProjectLayout.tsx | 11 ++++ src/layout/Layout.tsx | 13 +++++ src/pages/Concat.tsx | 5 ++ src/pages/Home.tsx | 5 ++ src/pages/MyProject.tsx | 5 ++ src/pages/Profile.tsx | 5 ++ src/pages/ResetPassword.tsx | 5 ++ src/pages/SignIn.tsx | 5 ++ src/pages/SignUp.tsx | 5 ++ src/pages/TTS.tsx | 5 ++ src/pages/VC.tsx | 5 ++ src/routes/ProtectedRoute.tsx | 8 +++ src/routes/PublicRoute.tsx | 8 +++ src/routes/router.tsx | 57 +++++++++++++++++++ src/stores/authStore.ts | 13 +++++ 18 files changed, 198 insertions(+), 4 deletions(-) create mode 100644 src/components/createProject/ProjectLayout.tsx create mode 100644 src/layout/Layout.tsx create mode 100644 src/pages/Concat.tsx create mode 100644 src/pages/Home.tsx create mode 100644 src/pages/MyProject.tsx create mode 100644 src/pages/Profile.tsx create mode 100644 src/pages/ResetPassword.tsx create mode 100644 src/pages/SignIn.tsx create mode 100644 src/pages/SignUp.tsx create mode 100644 src/pages/TTS.tsx create mode 100644 src/pages/VC.tsx create mode 100644 src/routes/ProtectedRoute.tsx create mode 100644 src/routes/PublicRoute.tsx create mode 100644 src/routes/router.tsx create mode 100644 src/stores/authStore.ts diff --git a/package-lock.json b/package-lock.json index 49b2fa9..52f3c8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "zustand": "^5.0.1" @@ -1022,6 +1023,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.24.4", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz", @@ -3367,6 +3376,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "dependencies": { + "@remix-run/router": "1.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "dependencies": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 837b1cf..508ad9c 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "zustand": "^5.0.1" diff --git a/src/App.tsx b/src/App.tsx index 074dcd6..eb0a601 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,10 @@ -import { Button } from '@/components/ui/button'; +import { RouterProvider } from 'react-router-dom'; +import { router } from './routes/router'; function App() { return (
- +
); } diff --git a/src/components/createProject/ProjectLayout.tsx b/src/components/createProject/ProjectLayout.tsx new file mode 100644 index 0000000..292127e --- /dev/null +++ b/src/components/createProject/ProjectLayout.tsx @@ -0,0 +1,11 @@ +import { Outlet } from 'react-router-dom'; + +const ProjectLayout = () => { + return ( +
+ +
+ ); +}; + +export default ProjectLayout; diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx new file mode 100644 index 0000000..626e10e --- /dev/null +++ b/src/layout/Layout.tsx @@ -0,0 +1,13 @@ +import { Outlet } from 'react-router-dom'; + +const Layout = () => { + return ( +
+
+ +
+
+ ); +}; + +export default Layout; diff --git a/src/pages/Concat.tsx b/src/pages/Concat.tsx new file mode 100644 index 0000000..3bc4dc8 --- /dev/null +++ b/src/pages/Concat.tsx @@ -0,0 +1,5 @@ +const Concat = () => { + return
concat 생성페이지
; +}; + +export default Concat; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..02c9c96 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,5 @@ +const Home = () => { + return
홈입니다
; +}; + +export default Home; diff --git a/src/pages/MyProject.tsx b/src/pages/MyProject.tsx new file mode 100644 index 0000000..e98b824 --- /dev/null +++ b/src/pages/MyProject.tsx @@ -0,0 +1,5 @@ +const MyProject = () => { + return
마이프로젝트입니다
; +}; + +export default MyProject; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx new file mode 100644 index 0000000..ec63916 --- /dev/null +++ b/src/pages/Profile.tsx @@ -0,0 +1,5 @@ +const Profile = () => { + return
; +}; + +export default Profile; diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx new file mode 100644 index 0000000..b99899d --- /dev/null +++ b/src/pages/ResetPassword.tsx @@ -0,0 +1,5 @@ +const ResetPassword = () => { + return
비밀번호 재설정 페이지
; +}; + +export default ResetPassword; diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx new file mode 100644 index 0000000..9dcc54e --- /dev/null +++ b/src/pages/SignIn.tsx @@ -0,0 +1,5 @@ +const SignIn = () => { + return
로그인페이지입니다
; +}; + +export default SignIn; diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx new file mode 100644 index 0000000..8fffc6d --- /dev/null +++ b/src/pages/SignUp.tsx @@ -0,0 +1,5 @@ +const SignUp = () => { + return
회원가입페이지입니다
; +}; + +export default SignUp; diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx new file mode 100644 index 0000000..504b6da --- /dev/null +++ b/src/pages/TTS.tsx @@ -0,0 +1,5 @@ +const TTS = () => { + return
tts 생성 페이지
; +}; + +export default TTS; diff --git a/src/pages/VC.tsx b/src/pages/VC.tsx new file mode 100644 index 0000000..4a06fbc --- /dev/null +++ b/src/pages/VC.tsx @@ -0,0 +1,5 @@ +const VC = () => { + return
vc 생성페이지
; +}; + +export default VC; diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx new file mode 100644 index 0000000..36f8fab --- /dev/null +++ b/src/routes/ProtectedRoute.tsx @@ -0,0 +1,8 @@ +import { Navigate, Outlet } from 'react-router-dom'; + +const ProtectedRoute = ({ isAuthenticated }: { isAuthenticated: boolean }) => { + // return isAuthenticated ? : ; + return ; +}; + +export default ProtectedRoute; diff --git a/src/routes/PublicRoute.tsx b/src/routes/PublicRoute.tsx new file mode 100644 index 0000000..bb3bf08 --- /dev/null +++ b/src/routes/PublicRoute.tsx @@ -0,0 +1,8 @@ +import { Navigate, Outlet } from 'react-router-dom'; + +const PublicRoute = ({ isAuthenticated }: { isAuthenticated: boolean }) => { + // return isAuthenticated ? : ; + return ; +}; + +export default PublicRoute; diff --git a/src/routes/router.tsx b/src/routes/router.tsx new file mode 100644 index 0000000..2155b3e --- /dev/null +++ b/src/routes/router.tsx @@ -0,0 +1,57 @@ +import ProjectLayout from '@/components/createProject/ProjectLayout'; +import Layout from '@/layout/Layout'; +import Concat from '@/pages/Concat'; +import Home from '@/pages/Home'; +import MyProject from '@/pages/MyProject'; +import Profile from '@/pages/Profile'; +import ResetPassword from '@/pages/ResetPassword'; +import SignIn from '@/pages/SignIn'; +import SignUp from '@/pages/SignUp'; +import TTS from '@/pages/TTS'; +import VC from '@/pages/VC'; +import ProtectedRoute from '@/routes/ProtectedRoute'; +import PublicRoute from '@/routes/PublicRoute'; +import { createBrowserRouter } from 'react-router-dom'; + +const isAuthenticated = true; // 실제 로그인 상태를 가져오는 로직으로 대체 + +// import { useAuthStore } from '@/stores/authStore'; + +// const isAuthenticated = useAuthStore((state) => state.isAuthenticated); + +export const router = createBrowserRouter([ + { + path: '/', + element: , + children: [ + { + path: '/', + element: , + }, + { + element: , // 로그인하지 않은 상태만 접근 가능 + children: [ + { path: 'signin', element: }, + { path: 'signup', element: }, + { path: 'reset-password', element: }, + ], + }, + { + element: , // 로그인 상태만 접근 가능 + children: [ + { path: 'my-project', element: }, + { path: 'profile', element: }, + { + path: 'project', + element: , + children: [ + { index: true, path: 'tts', element: }, + { path: 'vc', element: }, + { path: 'concat', element: }, + ], + }, + ], + }, + ], + }, +]); diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts new file mode 100644 index 0000000..4fd89f9 --- /dev/null +++ b/src/stores/authStore.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +interface AuthState { + isAuthenticated: boolean; + login: () => void; + logout: () => void; +} + +export const useAuthStore = create((set) => ({ + isAuthenticated: false, + login: () => set({ isAuthenticated: true }), + logout: () => set({ isAuthenticated: false }), +})); From 894810ba9f63f38444b5157e786e6301426b3314 Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Fri, 8 Nov 2024 19:13:23 +0900 Subject: [PATCH 02/73] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80=20(#1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/errorPageComponent/errorBoundary.tsx | 12 ++++++++++++ src/components/errorPageComponent/notFound.tsx | 10 ++++++++++ src/routes/router.tsx | 7 +++++++ 3 files changed, 29 insertions(+) create mode 100644 src/components/errorPageComponent/errorBoundary.tsx create mode 100644 src/components/errorPageComponent/notFound.tsx diff --git a/src/components/errorPageComponent/errorBoundary.tsx b/src/components/errorPageComponent/errorBoundary.tsx new file mode 100644 index 0000000..5acbd6e --- /dev/null +++ b/src/components/errorPageComponent/errorBoundary.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const ErrorBoundary: React.FC = () => { + return ( +
+

에러가 발생했습니다!

+

잠시 후 다시 시도해주세요.

+
+ ); +}; + +export default ErrorBoundary; diff --git a/src/components/errorPageComponent/notFound.tsx b/src/components/errorPageComponent/notFound.tsx new file mode 100644 index 0000000..c93f160 --- /dev/null +++ b/src/components/errorPageComponent/notFound.tsx @@ -0,0 +1,10 @@ +const NotFound: React.FC = () => { + return ( +
+

404 - 페이지를 찾을 수 없습니다

+

요청하신 페이지가 존재하지 않습니다. URL을 확인해주세요.

+
+ ); +}; + +export default NotFound; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 2155b3e..fcd4181 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,4 +1,6 @@ import ProjectLayout from '@/components/createProject/ProjectLayout'; +import ErrorBoundary from '@/components/errorPageComponent/errorBoundary'; +import NotFound from '@/components/errorPageComponent/notFound'; import Layout from '@/layout/Layout'; import Concat from '@/pages/Concat'; import Home from '@/pages/Home'; @@ -23,6 +25,7 @@ export const router = createBrowserRouter([ { path: '/', element: , + errorElement: , children: [ { path: '/', @@ -52,6 +55,10 @@ export const router = createBrowserRouter([ }, ], }, + { + path: '*', // 모든 정의되지 않은 경로를 잡아냄 + element: , + }, ], }, ]); From 6e08a9911029f892f98aedb3826c556311abaa8a Mon Sep 17 00:00:00 2001 From: Haeun Date: Fri, 8 Nov 2024 19:36:51 +0900 Subject: [PATCH 03/73] =?UTF-8?q?Settings:=20=EC=BD=94=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EB=B9=97=20=EC=84=A4=EC=A0=95=ED=8C=8C=EC=9D=BC=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 --- .coderabbit.yaml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 .coderabbit.yaml diff --git a/.coderabbit.yaml b/.coderabbit.yaml new file mode 100644 index 0000000..a5480c7 --- /dev/null +++ b/.coderabbit.yaml @@ -0,0 +1,17 @@ +language: 'ko-KR' +early_access: false +reviews: + profile: 'chill' + request_changes_workflow: false + high_level_summary: false + poem: false + review_status: false + collapse_walkthrough: false + sequence_diagrams: false + changed_files_summary: false + path_filters: ['!.github/**', '!dist/**', '!.src/**', '!./**'] + auto_review: + enabled: false + drafts: false +chat: + auto_reply: false From 3bb8f2684aa4ef08b71258a93b64b798f6bd7f9f Mon Sep 17 00:00:00 2001 From: Haeun Date: Mon, 11 Nov 2024 21:39:52 +0900 Subject: [PATCH 04/73] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=83=9D=EC=84=B1,=20React-hook-form=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 16 ++++++++++ package.json | 1 + src/components/ui/input.tsx | 22 +++++++++++++ src/pages/SignIn.tsx | 63 ++++++++++++++++++++++++++++++++++++- tailwind.config.js | 1 + 5 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 src/components/ui/input.tsx diff --git a/package-lock.json b/package-lock.json index 52f3c8c..71b113a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hook-form": "^7.53.2", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", @@ -3367,6 +3368,21 @@ "react": "^18.3.1" } }, + "node_modules/react-hook-form": { + "version": "7.53.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz", + "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==", + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18 || ^19" + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", diff --git a/package.json b/package.json index 508ad9c..3024c50 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hook-form": "^7.53.2", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..69b64fb --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Input = React.forwardRef>( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index 9dcc54e..23c1efe 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -1,5 +1,66 @@ +import { Link } from 'react-router-dom'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; + +interface ILoginFormInput { + id: string; + password: string; +} + const SignIn = () => { - return
로그인페이지입니다
; + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + const onSubmit: SubmitHandler = (data) => console.log(data); + + return ( +
+
+

+ AIPARK +

+ +
+
+
+ + {errors.id && ( +

{errors.id.message}

+ )} +
+ +
+ + {errors.password && ( +

+ {errors.password.message} +

+ )} +
+ + +
+
+
+
+ ); }; export default SignIn; diff --git a/tailwind.config.js b/tailwind.config.js index 3763c36..4a29213 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,7 @@ module.exports = { sm: 'calc(var(--radius) - 4px)', }, colors: { + error: 'rgb(239 68 68)', background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', card: { From 979b7a93f7a087e5ba468fd031fe6267ac73af08 Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Tue, 12 Nov 2024 17:13:11 +0900 Subject: [PATCH 05/73] =?UTF-8?q?feat:=20=ED=99=88=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=201=EC=B0=A8=20(#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 797 +++++++++++++++++- package.json | 4 + src/components/HomeSidebar.tsx | 114 +++ .../createProject/ProjectLayout.tsx | 11 - src/components/ui/dropdown-menu.tsx | 198 +++++ src/components/ui/input.tsx | 22 + src/components/ui/separator.tsx | 31 + src/components/ui/sheet.tsx | 137 +++ src/components/ui/sidebar.tsx | 760 +++++++++++++++++ src/components/ui/skeleton.tsx | 15 + src/components/ui/tooltip.tsx | 32 + src/hooks/use-mobile.tsx | 19 + src/index.css | 16 + src/layout/HomeLayout.tsx | 23 + src/layout/ProjectLayout.tsx | 99 +++ src/routes/router.tsx | 58 +- tailwind.config.js | 108 +-- 17 files changed, 2363 insertions(+), 81 deletions(-) create mode 100644 src/components/HomeSidebar.tsx delete mode 100644 src/components/createProject/ProjectLayout.tsx create mode 100644 src/components/ui/dropdown-menu.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/sheet.tsx create mode 100644 src/components/ui/sidebar.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/hooks/use-mobile.tsx create mode 100644 src/layout/HomeLayout.tsx create mode 100644 src/layout/ProjectLayout.tsx diff --git a/package-lock.json b/package-lock.json index 52f3c8c..57fbd83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,12 @@ "name": "finalproject-5re5-fe", "version": "0.0.0", "dependencies": { + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", @@ -823,6 +827,40 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -984,6 +1022,72 @@ "node": ">=14" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz", + "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -998,6 +1102,161 @@ } } }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz", + "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz", + "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-escape-keydown": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz", + "integrity": "sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.2", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz", + "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz", + "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-icons": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.1.tgz", @@ -1006,6 +1265,241 @@ "react": "^16.x || ^17.x || ^18.x || ^19.x" } }, + "node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menu": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz", + "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", + "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-rect": "1.1.0", + "@radix-ui/react-use-size": "1.1.0", + "@radix-ui/rect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz", + "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", + "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz", + "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -1023,6 +1517,162 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz", + "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", + "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz", + "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==", + "dependencies": { + "@radix-ui/rect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", + "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz", + "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/rect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz", + "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==" + }, "node_modules/@remix-run/router": { "version": "1.21.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", @@ -1371,7 +2021,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "*" } @@ -1715,6 +2365,17 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/aria-hidden": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz", + "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -2058,6 +2719,11 @@ "node": ">=0.4.0" } }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -2511,6 +3177,14 @@ "node": ">=6.9.0" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/glob": { "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", @@ -2635,6 +3309,14 @@ "node": ">=0.8.19" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -3376,6 +4058,51 @@ "node": ">=0.10.0" } }, + "node_modules/react-remove-scroll": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz", + "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.6", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz", + "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-router": { "version": "6.28.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", @@ -3406,6 +4133,28 @@ "react-dom": ">=16.8" } }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3823,6 +4572,11 @@ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -3916,6 +4670,47 @@ "punycode": "^2.1.0" } }, + "node_modules/use-callback-ref": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz", + "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 508ad9c..14e9294 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,12 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", diff --git a/src/components/HomeSidebar.tsx b/src/components/HomeSidebar.tsx new file mode 100644 index 0000000..ecc5d50 --- /dev/null +++ b/src/components/HomeSidebar.tsx @@ -0,0 +1,114 @@ +import { ChevronDown, Home, Search, Settings } from 'lucide-react'; + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from '@/components/ui/sidebar'; +import { Link } from 'react-router-dom'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from './ui/dropdown-menu'; + +// Menu items. +const items = [ + { + title: 'Home', + url: '/', + icon: Home, + }, + { + title: 'New Project', + url: 'project', + icon: Search, + }, + + { + title: 'My Project', + url: 'my-project', + icon: Settings, + }, +]; + +const quickStartItem = [ + { + title: 'project1', + url: 'project1', + }, +]; + +export function HomeSidebar() { + return ( + + + + + + + + OOO님 + + + + + + 계정 정보(이름,이메일) + + + 계정 설정 + + + 로그아웃 + + + + + + + + + sidebarGroupLabel + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + Quick starts + + + {quickStartItem.map((item) => ( + + + + {item.title} + + + + ))} + + + + + + ); +} diff --git a/src/components/createProject/ProjectLayout.tsx b/src/components/createProject/ProjectLayout.tsx deleted file mode 100644 index 292127e..0000000 --- a/src/components/createProject/ProjectLayout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Outlet } from 'react-router-dom'; - -const ProjectLayout = () => { - return ( -
- -
- ); -}; - -export default ProjectLayout; diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..5bb4c94 --- /dev/null +++ b/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,198 @@ +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { cn } from "@/lib/utils" +import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons" + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + svg]:size-4 [&>svg]:shrink-0", + inset && "pl-8", + className + )} + {...props} + /> +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..69b64fb --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Input = React.forwardRef>( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..12d81c4 --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx new file mode 100644 index 0000000..ec70467 --- /dev/null +++ b/src/components/ui/sheet.tsx @@ -0,0 +1,137 @@ +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { cva, type VariantProps } from "class-variance-authority" +import { cn } from "@/lib/utils" +import { Cross2Icon } from "@radix-ui/react-icons" + +const Sheet = SheetPrimitive.Root + +const SheetTrigger = SheetPrimitive.Trigger + +const SheetClose = SheetPrimitive.Close + +const SheetPortal = SheetPrimitive.Portal + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName + +const sheetVariants = cva( + "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +) + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + + + Close + + {children} + + +)) +SheetContent.displayName = SheetPrimitive.Content.displayName + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetHeader.displayName = "SheetHeader" + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetFooter.displayName = "SheetFooter" + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetTitle.displayName = SheetPrimitive.Title.displayName + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetDescription.displayName = SheetPrimitive.Description.displayName + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +} diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx new file mode 100644 index 0000000..48168d7 --- /dev/null +++ b/src/components/ui/sidebar.tsx @@ -0,0 +1,760 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import { useIsMobile } from "@/hooks/use-mobile" +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Separator } from "@/components/ui/separator" +import { Sheet, SheetContent } from "@/components/ui/sheet" +import { Skeleton } from "@/components/ui/skeleton" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" +import { ViewVerticalIcon } from "@radix-ui/react-icons" + +const SIDEBAR_COOKIE_NAME = "sidebar:state" +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 +const SIDEBAR_WIDTH = "16rem" +const SIDEBAR_WIDTH_MOBILE = "18rem" +const SIDEBAR_WIDTH_ICON = "3rem" +const SIDEBAR_KEYBOARD_SHORTCUT = "b" + +type SidebarContext = { + state: "expanded" | "collapsed" + open: boolean + setOpen: (open: boolean) => void + openMobile: boolean + setOpenMobile: (open: boolean) => void + isMobile: boolean + toggleSidebar: () => void +} + +const SidebarContext = React.createContext(null) + +function useSidebar() { + const context = React.useContext(SidebarContext) + if (!context) { + throw new Error("useSidebar must be used within a SidebarProvider.") + } + + return context +} + +const SidebarProvider = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + defaultOpen?: boolean + open?: boolean + onOpenChange?: (open: boolean) => void + } +>( + ( + { + defaultOpen = true, + open: openProp, + onOpenChange: setOpenProp, + className, + style, + children, + ...props + }, + ref + ) => { + const isMobile = useIsMobile() + const [openMobile, setOpenMobile] = React.useState(false) + + // This is the internal state of the sidebar. + // We use openProp and setOpenProp for control from outside the component. + const [_open, _setOpen] = React.useState(defaultOpen) + const open = openProp ?? _open + const setOpen = React.useCallback( + (value: boolean | ((value: boolean) => boolean)) => { + const openState = typeof value === "function" ? value(open) : value + if (setOpenProp) { + setOpenProp(openState) + } else { + _setOpen(openState) + } + + // This sets the cookie to keep the sidebar state. + document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` + }, + [setOpenProp, open] + ) + + // Helper to toggle the sidebar. + const toggleSidebar = React.useCallback(() => { + return isMobile + ? setOpenMobile((open) => !open) + : setOpen((open) => !open) + }, [isMobile, setOpen, setOpenMobile]) + + // Adds a keyboard shortcut to toggle the sidebar. + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + event.key === SIDEBAR_KEYBOARD_SHORTCUT && + (event.metaKey || event.ctrlKey) + ) { + event.preventDefault() + toggleSidebar() + } + } + + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [toggleSidebar]) + + // We add a state so that we can do data-state="expanded" or "collapsed". + // This makes it easier to style the sidebar with Tailwind classes. + const state = open ? "expanded" : "collapsed" + + const contextValue = React.useMemo( + () => ({ + state, + open, + setOpen, + isMobile, + openMobile, + setOpenMobile, + toggleSidebar, + }), + [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] + ) + + return ( + + +
+ {children} +
+ + + ) + } +) +SidebarProvider.displayName = "SidebarProvider" + +const Sidebar = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + side?: "left" | "right" + variant?: "sidebar" | "floating" | "inset" + collapsible?: "offcanvas" | "icon" | "none" + } +>( + ( + { + side = "left", + variant = "sidebar", + collapsible = "offcanvas", + className, + children, + ...props + }, + ref + ) => { + const { isMobile, state, openMobile, setOpenMobile } = useSidebar() + + if (collapsible === "none") { + return ( +
+ {children} +
+ ) + } + + if (isMobile) { + return ( + + +
{children}
+ + + ) + } + + return ( +
+ {/* This is what handles the sidebar gap on desktop */} +
+ +
+ ) + } +) +Sidebar.displayName = "Sidebar" + +const SidebarTrigger = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, onClick, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + + ) +}) +SidebarTrigger.displayName = "SidebarTrigger" + +const SidebarRail = React.forwardRef< + HTMLButtonElement, + React.ComponentProps<"button"> +>(({ className, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + - ) -}) -SidebarTrigger.displayName = "SidebarTrigger" + ); +}); +SidebarTrigger.displayName = 'SidebarTrigger'; const SidebarRail = React.forwardRef< HTMLButtonElement, - React.ComponentProps<"button"> + React.ComponentProps<'button'> >(({ className, ...props }, ref) => { - const { toggleSidebar } = useSidebar() + const { toggleSidebar } = useSidebar(); return ( +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+ {/* 추가 약관 항목들... */} +
+
+ + + +
+ ); }; export default SignUp; From 34ee3ad55b27b3e568d1941862aa73af14eb2acb Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Wed, 13 Nov 2024 23:49:14 +0900 Subject: [PATCH 08/73] =?UTF-8?q?feat:=20=ED=99=88=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=A1=9C=EA=B3=A0=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=91=20+=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/HomeHeader.tsx | 45 ++++++++++++++++ src/components/{ => sidebar}/HomeSidebar.tsx | 56 +++++++++++--------- src/layout/HomeLayout.tsx | 39 ++++++++------ 3 files changed, 100 insertions(+), 40 deletions(-) create mode 100644 src/components/header/HomeHeader.tsx rename src/components/{ => sidebar}/HomeSidebar.tsx (60%) diff --git a/src/components/header/HomeHeader.tsx b/src/components/header/HomeHeader.tsx new file mode 100644 index 0000000..fe6efd2 --- /dev/null +++ b/src/components/header/HomeHeader.tsx @@ -0,0 +1,45 @@ +import { Link } from 'react-router-dom'; +import { useState } from 'react'; + +const HomeHeader = () => { + // 프로젝트 목록 상태 관리 + const [projects, setProjects] = useState([ + { id: 1, name: 'Project 01' }, + { id: 2, name: 'Project 02' }, + ]); + + // 프로젝트 추가 함수 + const handleAddProject = () => { + const newId = projects.length + 1; + setProjects([ + ...projects, + { id: newId, name: `Project ${newId.toString().padStart(2, '0')}` }, + ]); + }; + + return ( +
+
+ + +
+
+ ); +}; + +export default HomeHeader; diff --git a/src/components/HomeSidebar.tsx b/src/components/sidebar/HomeSidebar.tsx similarity index 60% rename from src/components/HomeSidebar.tsx rename to src/components/sidebar/HomeSidebar.tsx index 27fc0f4..af1b8da 100644 --- a/src/components/HomeSidebar.tsx +++ b/src/components/sidebar/HomeSidebar.tsx @@ -17,7 +17,7 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from './ui/dropdown-menu'; +} from '../ui/dropdown-menu'; // Menu items. const items = [ @@ -41,7 +41,7 @@ const items = [ const quickStartItem = [ { - title: 'project1', + title: 'Project1', url: 'project1', }, ]; @@ -51,33 +51,41 @@ export function HomeSidebar() { - - - - - OOO님 - - - - - - 계정 정보 - - - 계정 설정 - - - 로그아웃 - - - - + + 로고 자리 - sidebarGroupLabel + + + + + + + OOO님 + + + + + + 계정 정보 + + + 계정 설정 + + + 로그아웃 + + + + + + + + + {items.map((item) => ( diff --git a/src/layout/HomeLayout.tsx b/src/layout/HomeLayout.tsx index 9b725a0..10e389f 100644 --- a/src/layout/HomeLayout.tsx +++ b/src/layout/HomeLayout.tsx @@ -1,23 +1,30 @@ import { Outlet } from 'react-router-dom'; -import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'; -import { HomeSidebar } from '@/components/HomeSidebar'; +import { SidebarProvider } from '@/components/ui/sidebar'; import { CSSProperties } from 'react'; +import { HomeSidebar } from '@/components/sidebar/HomeSidebar'; +import HomeHeader from '@/components/header/HomeHeader'; export default function HomeLayout() { return ( - - -
- - -
- +
+
+ +
+
+ + + +
+ +
+
+
); } From 2147a25ad2ebab73805763bd56449dc219a7702d Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Thu, 14 Nov 2024 01:49:30 +0900 Subject: [PATCH 09/73] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20(#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/ProjectLayout.tsx | 95 ++++++++++++++++++++++-------------- 1 file changed, 58 insertions(+), 37 deletions(-) diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index ab37a26..89ceb79 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -1,37 +1,47 @@ -import { Outlet } from 'react-router-dom'; +import { Outlet, Link } from 'react-router-dom'; +import { useState } from 'react'; +import { ChevronDown, ChevronUp } from 'lucide-react'; const ProjectLayout = () => { + // Footer 상태 관리 (열림/닫힘 여부) + const [isFooterExpanded, setIsFooterExpanded] = useState(false); + + // Footer 토글 함수 + const toggleFooter = () => { + setIsFooterExpanded((prev) => !prev); + }; + return (
{/* 헤더 */} -
-

프로젝트 헤더

+
+

로고

@@ -39,58 +49,69 @@ const ProjectLayout = () => {
{/* 좌측 사이드바 */} -
{/* 푸터 */} -
-

© 2024 My Project. All rights reserved.

+
+ {/* 재생 버튼 텍스트 */} +

재생 버튼 들어갈곳

+ + {/* 아이콘 버튼 */} +
); From 4e7eb250247d4ca32b4a8a2e2d7913a9cb6bde7b Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Thu, 14 Nov 2024 10:23:01 +0900 Subject: [PATCH 10/73] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8F=BC=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=B0=BD,=20=EC=A3=BC=EC=86=8C=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 217 ++++++++++++++++++++++++++++++++- package.json | 3 + src/components/ui/checkbox.tsx | 27 ++++ src/components/ui/input.tsx | 22 ++++ src/components/ui/label.tsx | 24 ++++ src/pages/SignUp.tsx | 117 +++++++++++++++--- src/types/shadcn-ui.d.ts | 11 ++ 7 files changed, 406 insertions(+), 15 deletions(-) create mode 100644 src/components/ui/checkbox.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/types/shadcn-ui.d.ts diff --git a/package-lock.json b/package-lock.json index 52f3c8c..0630e61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "finalproject-5re5-fe", "version": "0.0.0", "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.59.19", "axios": "^1.7.7", @@ -16,6 +18,7 @@ "clsx": "^2.1.1", "lucide-react": "^0.454.0", "react": "^18.3.1", + "react-daum-postcode": "^3.1.3", "react-dom": "^18.3.1", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", @@ -984,6 +987,42 @@ "node": ">=14" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==", + "license": "MIT" + }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz", + "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -998,6 +1037,21 @@ } } }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-icons": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.1.tgz", @@ -1006,10 +1060,81 @@ "react": "^16.x || ^17.x || ^18.x || ^19.x" } }, + "node_modules/@radix-ui/react-label": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", + "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", + "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "license": "MIT", "dependencies": { "@radix-ui/react-compose-refs": "1.1.0" }, @@ -1023,6 +1148,87 @@ } } }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", + "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", + "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.21.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", @@ -1371,7 +1577,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "*" } @@ -3355,6 +3561,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-daum-postcode": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/react-daum-postcode/-/react-daum-postcode-3.1.3.tgz", + "integrity": "sha512-qTyzUb1BeszPFO4FXSj6p83Wrn5Zpo6YqI2EZ46XSVRZT+du9CrKg9p3KshBRFKYxXmFE1Mv7wEynzXdRFNlmQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/package.json b/package.json index 508ad9c..b8c3c30 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.59.19", "axios": "^1.7.7", @@ -18,6 +20,7 @@ "clsx": "^2.1.1", "lucide-react": "^0.454.0", "react": "^18.3.1", + "react-daum-postcode": "^3.1.3", "react-dom": "^18.3.1", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..8d02b28 --- /dev/null +++ b/src/components/ui/checkbox.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { cn } from "@/lib/utils" +import { CheckIcon } from "@radix-ui/react-icons" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..69b64fb --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Input = React.forwardRef>( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..683faa7 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index dff274f..de6d709 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -1,12 +1,78 @@ +import DaumPostcode from 'react-daum-postcode'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; + +interface Term { + termCode: string; + termName: string; + shortCont: string; + longCont: string; + chkTerm: boolean; +} const SignUp: React.FC = () => { + const [address, setAddress] = useState(''); + const [detailAddress, setDetailAddress] = useState(''); + const [isOpen, setIsOpen] = useState(false); + const [terms, setTerms] = useState([]); + const [phoneNumber, setPhoneNumber] = useState(''); + const [birthDate, setBirthDate] = useState(''); + + useEffect(()=> { + fetchTerms(); + }, []); + + const fetchTerms = async () => { + try { + const response = await fetch('/api/user/register'); + if (!response.ok) { + throw new Error('Failed to fetch terms'); + } + const data = await response.json(); + setTerms(data.response.userTerms); + } catch (error) { + console.error('Error fetching terms:', error); + } + }; + + const handleComplete = (data: any) => { + let fullAddress = data.address; + let extraAddress = ''; + + if (data.addressType === 'R') { + if (data.bname != '') { + extraAddress += data.bname; + } + if (data.buildingName != '') { + extraAddress += extraAddress != '' ? `, ${data.buildingName}` : data.buildingName; + } + fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''; + } + + setAddress(fullAddress); + setIsOpen(false); + } + + const handlePhoneNumberChange = (e: React.ChangeEvent) => { + const value = e.target.value.replace(/[^\d]/g, ''); + const formattedValue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); + setPhoneNumber(formattedValue); + }; + + const handleBirthDateChange = (e: React.ChangeEvent) => { + const value = e.target.value.replace(/[^\d]/g, ''); + const formattedValue = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); + setBirthDate(formattedValue); + }; + return (
-

회원가입

+

회원가입

+

이미 계정이 있으신가요? 로그인 화면으로 이동

@@ -38,30 +104,53 @@ const SignUp: React.FC = () => {
- +
- - + +
- - + +
+ + +
+
+ + {isOpen && ( +
+
+ + +
+
+ )} + +
+ {/* */} + setDetailAddress(e.target.value)} placeholder="상세 주소를 입력하세요" />
-
-
- - -
- {/* 추가 약관 항목들... */} + {terms.map((term) => ( +
+ +
+ ))}
diff --git a/src/types/shadcn-ui.d.ts b/src/types/shadcn-ui.d.ts new file mode 100644 index 0000000..877ccb9 --- /dev/null +++ b/src/types/shadcn-ui.d.ts @@ -0,0 +1,11 @@ +declare module '@/components/ui/input' { + export const Input: React.ComponentType>; +} + +declare module '@/components/ui/label' { + export const Label: React.ComponentType>; +} + +declare module '@/components/ui/checkbox' { + export const Checkbox: React.ComponentType>; +} \ No newline at end of file From 12b684620ba42553f2bb4b1bc0f1a09f7efc55cd Mon Sep 17 00:00:00 2001 From: Haeun Date: Thu, 14 Nov 2024 17:32:02 +0900 Subject: [PATCH 11/73] =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=9E=98=EB=B9=97=20?= =?UTF-8?q?=EC=85=8B=ED=8C=85=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .coderabbit.yaml | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/.coderabbit.yaml b/.coderabbit.yaml index a5480c7..ff6b7d4 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -3,15 +3,12 @@ early_access: false reviews: profile: 'chill' request_changes_workflow: false - high_level_summary: false - poem: false - review_status: false + high_level_summary: true + poem: true + review_status: true collapse_walkthrough: false - sequence_diagrams: false - changed_files_summary: false - path_filters: ['!.github/**', '!dist/**', '!.src/**', '!./**'] auto_review: - enabled: false + enabled: true drafts: false chat: - auto_reply: false + auto_reply: true From 816be4dd81094230d2e0ad457e18f986edb67612 Mon Sep 17 00:00:00 2001 From: Haeun Date: Thu, 14 Nov 2024 17:40:54 +0900 Subject: [PATCH 12/73] =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=9E=98=EB=B9=97=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .coderabbit.yaml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.coderabbit.yaml b/.coderabbit.yaml index ff6b7d4..4b03a3a 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -1,12 +1,13 @@ language: 'ko-KR' + high_level_summary: true early_access: false reviews: profile: 'chill' request_changes_workflow: false - high_level_summary: true poem: true review_status: true collapse_walkthrough: false + path_filters: ['!.github/**', '!dist/**', '!./**'] auto_review: enabled: true drafts: false From 85fc81dfa78c6cfbde8a5b13bba0eee229fd446c Mon Sep 17 00:00:00 2001 From: Haeun Date: Thu, 14 Nov 2024 17:42:44 +0900 Subject: [PATCH 13/73] =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=9E=98=EB=B9=97=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .coderabbit.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.coderabbit.yaml b/.coderabbit.yaml index 4b03a3a..448007f 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -1,9 +1,9 @@ language: 'ko-KR' - high_level_summary: true early_access: false reviews: profile: 'chill' request_changes_workflow: false + high_level_summary: true poem: true review_status: true collapse_walkthrough: false From 9334e504f2cbac634f89f5e765780f517665edc0 Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Thu, 14 Nov 2024 18:01:41 +0900 Subject: [PATCH 14/73] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUp.tsx | 103 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 95 insertions(+), 8 deletions(-) diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index de6d709..7b98a60 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -15,12 +15,19 @@ interface Term { } const SignUp: React.FC = () => { + const [userId, setUserId] = useState(''); + const [email, setEmail] = useState(''); + const [emailVerification, setEmailVerification] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [name, setName] = useState(''); const [address, setAddress] = useState(''); const [detailAddress, setDetailAddress] = useState(''); const [isOpen, setIsOpen] = useState(false); const [terms, setTerms] = useState([]); const [phoneNumber, setPhoneNumber] = useState(''); const [birthDate, setBirthDate] = useState(''); + const [errors, setErrors] = useState<{[key:string]: string}>({}); useEffect(()=> { fetchTerms(); @@ -59,8 +66,8 @@ const SignUp: React.FC = () => { const handlePhoneNumberChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/[^\d]/g, ''); - const formattedValue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); - setPhoneNumber(formattedValue); + // const formattedValue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); + setPhoneNumber(value); }; const handleBirthDateChange = (e: React.ChangeEvent) => { @@ -69,42 +76,119 @@ const SignUp: React.FC = () => { setBirthDate(formattedValue); }; + const validateForm = () => { + const newErrors: {[key:string]: string} = {}; + + if (!/^[a-zA-Z0-9]{6,20}$/.test(userId)) { + newErrors.userId = '아이디는 6~20자의 영문 및 숫자만 허용됩니다.'; + } + + if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/.test(password)) { + newErrors.password = '비밀번호는 8~20자, 영문 대소문자, 숫자, 특수문자를 포함해야 합니다.'; + } + if (/(.)\1\1/.test(password)) { + newErrors.password = '비밀번호에 동일 문자를 3회 이상 연속 사용할 수 없습니다.'; + } + + if (password != confirmPassword) { + newErrors.confirmPassword = '비밀번호가 일치하지 않습니다.'; + } + + if (!/^[가-힣a-zA-Z]+$/.test(name)) { + newErrors.name = '이름은 실명을 입력해야 하며 특수문자를 포함할 수 없습니다.'; + } + + const birthYear = parseInt(birthDate.split('-')[0], 10); + const currentYear = new Date().getFullYear(); + if (currentYear - birthYear < 14) { + newErrors.birthDate = '만 14세 이상만 가입할 수 있습니다.'; + } + + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + newErrors.email = '유효한 이메일 주소를 입력해주세요.'; + } + + if (!/^\d{10,11}$/.test(phoneNumber)) { + newErrors.phoneNumber = '휴대폰 번호는 10~11자의 숫자만 입력 가능합니다.'; + } + + if (!detailAddress) { + newErrors.detailAddress = '상세주소를 입력해주세요.'; + } + + const requiredTerms = terms.filter(term => term.chkTerm); + const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; + if (!allRequiredTermsChecked) { + newErrors.terms = '필수 약관에 모두 동의해주세요.'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (validateForm()) { + console.log('유효함.제출중'); + } else { + console.log('에러남'); + } + } + return (

회원가입

이미 계정이 있으신가요? 로그인 화면으로 이동

- +
- + setUserId(e.target.value)} placeholder="아이디를 입력하세요" /> + {errors.userId &&

{errors.userId}

}
- + setEmail(e.target.value)} placeholder="이메일을 입력하세요" />
+ {errors.email &&

{errors.email}

}
- + setEmailVerification(e.target.value)} placeholder="인증번호를 입력하세요" />
- + setPassword(e.target.value)} placeholder="비밀번호를 입력하세요" /> + {errors.password &&

{errors.password}

} +
+ +
+ + setConfirmPassword(e.target.value)} + placeholder="비밀번호를 다시 입력하세요" + /> + {errors.confirmPassword &&

{errors.confirmPassword}

}
- + setName(e.target.value)} placeholder="이름을 입력하세요" /> + {errors.name &&

{errors.name}

}
+ {errors.phoneNumber &&

{errors.phoneNumber}

}
@@ -117,6 +201,7 @@ const SignUp: React.FC = () => { placeholder="YYYY-MM-DD" maxLength={10} /> + {errors.birthDate &&

{errors.birthDate}

}
@@ -139,6 +224,7 @@ const SignUp: React.FC = () => {
{/* */} setDetailAddress(e.target.value)} placeholder="상세 주소를 입력하세요" /> + {errors.detailAddress &&

{errors.detailAddress}

}
@@ -151,6 +237,7 @@ const SignUp: React.FC = () => {
))} + {errors.terms &&

{errors.terms}

}
From 83e417e60d276b4a60e53de2f17b8b4e02bf13f3 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Fri, 15 Nov 2024 12:28:00 +0900 Subject: [PATCH 15/73] =?UTF-8?q?[Feat]=20=EB=A7=88=EC=9D=B4=ED=94=84?= =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 마이프로젝트 개발 * feat: 레이아웃 적용 * feat: 코드리뷰 항목 적용 --- package-lock.json | 130 ++++++++++++++++++++++++ package.json | 3 + src/components/common/ListView.tsx | 149 +++++++++++++++++++++++++++ src/components/ui/button.tsx | 1 + src/components/ui/checkbox.tsx | 27 +++++ src/components/ui/select.tsx | 156 +++++++++++++++++++++++++++++ src/components/ui/table.tsx | 120 ++++++++++++++++++++++ src/constants/route.ts | 12 +++ src/hooks/useChecked.ts | 36 +++++++ src/layout/HomeLayout.tsx | 1 + src/mock/project.ts | 39 ++++++++ src/pages/MyProject.tsx | 55 +++++++++- src/types/project.ts | 7 ++ 13 files changed, 735 insertions(+), 1 deletion(-) create mode 100644 src/components/common/ListView.tsx create mode 100644 src/components/ui/checkbox.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/constants/route.ts create mode 100644 src/hooks/useChecked.ts create mode 100644 src/mock/project.ts create mode 100644 src/types/project.ts diff --git a/package-lock.json b/package-lock.json index 57fbd83..f5b8614 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,16 @@ "name": "finalproject-5re5-fe", "version": "0.0.0", "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", + "@tanstack/react-table": "^8.20.5", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -1022,6 +1025,12 @@ "node": ">=14" } }, + "node_modules/@radix-ui/number": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz", + "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==", + "license": "MIT" + }, "node_modules/@radix-ui/primitive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", @@ -1049,6 +1058,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz", + "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", @@ -1478,6 +1517,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz", + "integrity": "sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==", + "license": "MIT", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz", @@ -1612,6 +1694,21 @@ } } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", + "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-rect": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz", @@ -1939,6 +2036,39 @@ "react": "^18 || ^19" } }, + "node_modules/@tanstack/react-table": { + "version": "8.20.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz", + "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==", + "license": "MIT", + "dependencies": { + "@tanstack/table-core": "8.20.5" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.20.5", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz", + "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", diff --git a/package.json b/package.json index 14e9294..ce5e7be 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", @@ -17,6 +19,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", + "@tanstack/react-table": "^8.20.5", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx new file mode 100644 index 0000000..bea69a8 --- /dev/null +++ b/src/components/common/ListView.tsx @@ -0,0 +1,149 @@ +import { Button } from '@/components/ui/button'; +import { Checkbox } from '@/components/ui/checkbox'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { ROUTES } from '@/constants/route'; +import useChecked from '@/hooks/useChecked'; +import { IProjectProps } from '@/types/project'; +import { SquareArrowOutUpRightIcon } from 'lucide-react'; +import { MouseEvent, useState } from 'react'; +import { NavigateFunction, useNavigate } from 'react-router-dom'; + +export type ViewOptionType = 'tile' | 'list'; + +export interface IListViewProps { + option?: ViewOptionType; + data: IProjectProps[]; + navi: NavigateFunction; +} + +const ListView = ({ option = 'list', data }: Omit) => { + const navigate = useNavigate(); + return ( +
+ {option === 'list' ? ( + + ) : ( + + )} +
+ ); +}; + +const List = ({ data, navi }: IListViewProps) => { + const [items, setItems] = useState(data); + const { checkedList, handleCheckedList } = useChecked(); + + const handleCheckboxChange = (id: number): void => { + setItems( + items.map((item) => { + if (item.projectId === id) { + handleCheckedList.set(id); + } + return item.projectId === id + ? { ...item, checked: !item.checked } + : item; + }) + ); + }; + + const handleSelectAll = (): void => { + const allChecked = items.every((item) => item.checked); + setItems( + items.map((item) => ({ + ...item, + checked: !allChecked, + })) + ); + !allChecked + ? handleCheckedList.addAll(items.map((item) => item.projectId)) + : handleCheckedList.removeAll(); + }; + + const onTest = () => { + alert(`삭제요청 리스트: ${checkedList}`); + // 삭제요청 API 호출 + }; + + return ( +
+ + + + + + + Name + Last modified + Created + 바로가기 + + + + {items.map((item, idx) => { + return ( + + + { + handleCheckboxChange(item.projectId); + }} + checked={item.checked} + /> + + {item.name} + {item.modDate} + {item.regDate} + { + navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); + }} + > + + + + ); + })} + +
+ {checkedList.length > 0 ? ( + + ) : ( + <> + )} +
+ ); +}; + +const Tile = ({ data, navi }: IListViewProps) => { + return ( +
+
    + {data.map((item, idx) => ( +
  • { + navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); + }} + > + +
    썸네일
    +
    {item.name}
    +
    • + ))} +
+
+ ); +}; + +export default ListView; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 9220ce2..4718639 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -19,6 +19,7 @@ const buttonVariants = cva( 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', + active: 'text-sky-500 hover:bg-accent', }, size: { default: 'h-9 px-4 py-2', diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..8d02b28 --- /dev/null +++ b/src/components/ui/checkbox.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { cn } from "@/lib/utils" +import { CheckIcon } from "@radix-ui/react-icons" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 0000000..12836ea --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,156 @@ +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { cn } from "@/lib/utils" +import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons" + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className + )} + {...props} + > + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +} diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx new file mode 100644 index 0000000..c0df655 --- /dev/null +++ b/src/components/ui/table.tsx @@ -0,0 +1,120 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
[role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> +)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + [role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} diff --git a/src/constants/route.ts b/src/constants/route.ts new file mode 100644 index 0000000..f5e9c8d --- /dev/null +++ b/src/constants/route.ts @@ -0,0 +1,12 @@ +export const ROUTES = { + HOME: '/', + SIGNIN: '/signin', + RESET_PASSWORD: '/reset-password', + SIGNUP: '/signup', + PROJECT: '/project', + TTS: '/tts', + VC: '/vc', + CONCAT: '/concat', + MYPROJECT: '/my-project', + PROFILE: '/profile', +}; diff --git a/src/hooks/useChecked.ts b/src/hooks/useChecked.ts new file mode 100644 index 0000000..b071992 --- /dev/null +++ b/src/hooks/useChecked.ts @@ -0,0 +1,36 @@ +import { useState } from 'react'; + +const useChecked = () => { + const [checkedList, setCheckedList] = useState([]); + + const handleCheckedList = { + get: () => { + return checkedList; + }, + add: (projectId: number) => { + if (!checkedList.includes(projectId)) + setCheckedList([...checkedList, projectId]); + }, + remove: (projectId: number) => { + setCheckedList(checkedList.filter((num) => num !== projectId)); + }, + set: (projectId: number) => { + checkedList.includes(projectId) + ? setCheckedList(checkedList.filter((num) => num !== projectId)) + : setCheckedList([...checkedList, projectId]); + }, + addAll: (idList: number[]) => { + setCheckedList(idList); + }, + removeAll: () => { + setCheckedList([]); + }, + }; + + return { + checkedList, + handleCheckedList, + }; +}; + +export default useChecked; diff --git a/src/layout/HomeLayout.tsx b/src/layout/HomeLayout.tsx index 10e389f..9a79db1 100644 --- a/src/layout/HomeLayout.tsx +++ b/src/layout/HomeLayout.tsx @@ -15,6 +15,7 @@ export default function HomeLayout() { style={ { '--sidebar-width': '210px', + maxWidth: '210px', // '--sidebar-width-mobile': '10rem', } as CSSProperties } diff --git a/src/mock/project.ts b/src/mock/project.ts new file mode 100644 index 0000000..fa97eef --- /dev/null +++ b/src/mock/project.ts @@ -0,0 +1,39 @@ +import { IProjectProps } from '@/types/project'; + +export const PROJECT_DATA: IProjectProps[] = [ + { + checked: false, + name: '프로젝트 명1', + modDate: '2024-11-01', + regDate: '2024-10-11', + projectId: 1, + }, + { + checked: false, + name: '프로젝트 명2', + modDate: '2024-11-02', + regDate: '2024-10-12', + projectId: 2, + }, + { + checked: false, + name: '프로젝트 명3', + modDate: '2024-11-03', + regDate: '2024-10-13', + projectId: 3, + }, + { + checked: false, + name: '프로젝트 명4', + modDate: '2024-11-04', + regDate: '2024-10-14', + projectId: 4, + }, + { + checked: false, + name: '프로젝트 명5', + modDate: '2024-11-05', + regDate: '2024-10-15', + projectId: 5, + }, +]; diff --git a/src/pages/MyProject.tsx b/src/pages/MyProject.tsx index e98b824..c0a366a 100644 --- a/src/pages/MyProject.tsx +++ b/src/pages/MyProject.tsx @@ -1,5 +1,58 @@ +import ListView, { ViewOptionType } from '@/components/common/ListView'; +import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { PROJECT_DATA } from '@/mock/project'; +import { AlignJustifyIcon, LayoutGridIcon } from 'lucide-react'; +import { useState } from 'react'; + const MyProject = () => { - return
마이프로젝트입니다
; + const [viewOption, setViewOption] = useState('list'); + return ( +
+
+
+ +
+
+ + +
+
+
+ +
+
+ ); }; export default MyProject; diff --git a/src/types/project.ts b/src/types/project.ts new file mode 100644 index 0000000..340ebcf --- /dev/null +++ b/src/types/project.ts @@ -0,0 +1,7 @@ +export interface IProjectProps { + checked: boolean; + projectId: number; + name: string; + modDate: string; + regDate: string; +} From bbe200fd030638f9077c10e368676205e6a8a75f Mon Sep 17 00:00:00 2001 From: Haeun Date: Fri, 15 Nov 2024 12:48:29 +0900 Subject: [PATCH 16/73] =?UTF-8?q?feat=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=83=9D=EC=84=B1=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 172 ++++++++++++++++++++++++++++++++- package.json | 1 + src/components/ui/checkbox.tsx | 27 ++++++ src/pages/SignIn.tsx | 27 +++++- 4 files changed, 224 insertions(+), 3 deletions(-) create mode 100644 src/components/ui/checkbox.tsx diff --git a/package-lock.json b/package-lock.json index 71b113a..192f41d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "finalproject-5re5-fe", "version": "0.0.0", "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-icons": "^1.3.1", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.59.19", @@ -985,6 +986,40 @@ "node": ">=14" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz", + "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -999,6 +1034,20 @@ } } }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-icons": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.1.tgz", @@ -1007,6 +1056,51 @@ "react": "^16.x || ^17.x || ^18.x || ^19.x" } }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", + "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -1024,6 +1118,82 @@ } } }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", + "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", + "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.21.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", @@ -1372,7 +1542,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "*" } diff --git a/package.json b/package.json index 3024c50..f5e5755 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-icons": "^1.3.1", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.59.19", diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..8d02b28 --- /dev/null +++ b/src/components/ui/checkbox.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { cn } from "@/lib/utils" +import { CheckIcon } from "@radix-ui/react-icons" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index 23c1efe..7a7301c 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'; import { useForm, SubmitHandler } from 'react-hook-form'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; +import { Checkbox } from '@/components/ui/checkbox'; interface ILoginFormInput { id: string; @@ -38,7 +39,7 @@ const SignIn = () => { )} -
+
{ )}
- + +
    +
  • + 비밀번호 찾기 +
    • +
  • + 아이디 찾기 +
    • +
  • + 회원가입 +
    • +
From 758e1ca992e62c6ea0f0902ea3ccd8746dc3166c Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Fri, 15 Nov 2024 12:58:22 +0900 Subject: [PATCH 17/73] =?UTF-8?q?feat:=20=EB=8B=A8=EC=B6=95=ED=82=A4=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(#16)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 11 +++++++++++ package.json | 1 + src/layout/ProjectLayout.tsx | 7 +++++++ 3 files changed, 19 insertions(+) diff --git a/package-lock.json b/package-lock.json index f5b8614..8e82098 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hotkeys-hook": "^4.6.1", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", @@ -4179,6 +4180,16 @@ "react": "^18.3.1" } }, + "node_modules/react-hotkeys-hook": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.6.1.tgz", + "integrity": "sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.1", + "react-dom": ">=16.8.1" + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", diff --git a/package.json b/package.json index ce5e7be..da18604 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "lucide-react": "^0.454.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hotkeys-hook": "^4.6.1", "react-router-dom": "^6.28.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index 89ceb79..97e69aa 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -1,6 +1,7 @@ import { Outlet, Link } from 'react-router-dom'; import { useState } from 'react'; import { ChevronDown, ChevronUp } from 'lucide-react'; +import { useHotkeys } from 'react-hotkeys-hook'; const ProjectLayout = () => { // Footer 상태 관리 (열림/닫힘 여부) @@ -11,6 +12,12 @@ const ProjectLayout = () => { setIsFooterExpanded((prev) => !prev); }; + // 단축키 기능 프로젝트 레이아웃에서만 가능하도록 + useHotkeys('ctrl+s', (event) => { + event.preventDefault(); + alert('저장?'); + }); + return (
{/* 헤더 */} From 5d3de2aa54e1bef572d75947ffc34ce4aa455217 Mon Sep 17 00:00:00 2001 From: Haeun Date: Fri, 15 Nov 2024 13:02:12 +0900 Subject: [PATCH 18/73] temp --- package-lock.json | 573 ---------------------------------------------- 1 file changed, 573 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8e82098..60ad994 100644 --- a/package-lock.json +++ b/package-lock.json @@ -336,70 +336,6 @@ "node": ">=6.9.0" } }, - "node_modules/@esbuild/aix-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", - "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", - "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", - "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", - "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@esbuild/darwin-arm64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", @@ -416,294 +352,6 @@ "node": ">=12" } }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", - "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", - "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", - "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", - "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", - "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", - "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", - "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", - "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", - "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", - "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", - "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", - "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", - "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", - "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", - "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", - "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", - "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", - "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -1779,32 +1427,6 @@ "node": ">=14.0.0" } }, - "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz", - "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-android-arm64": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz", - "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.24.4", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz", @@ -1818,201 +1440,6 @@ "darwin" ] }, - "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz", - "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz", - "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz", - "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz", - "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz", - "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz", - "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz", - "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz", - "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz", - "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz", - "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz", - "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz", - "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz", - "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz", - "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz", - "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, "node_modules/@tanstack/query-core": { "version": "5.59.17", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.17.tgz", From 899ea44d47bc387dd49ddfe4f87752438f4b9c39 Mon Sep 17 00:00:00 2001 From: Haeun Date: Fri, 15 Nov 2024 13:15:03 +0900 Subject: [PATCH 19/73] =?UTF-8?q?feat:=20tailwind.config=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=EC=A4=91=EB=B3=B5=EC=A0=9C=EA=B1=B0,=20=EB=B9=84?= =?UTF-8?q?=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9E=90=EB=8F=99=EC=99=84?= =?UTF-8?q?=EC=84=B1=20=EB=B0=A9=EC=A7=80=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignIn.tsx | 14 +++++++++++-- tailwind.config.js | 49 -------------------------------------------- 2 files changed, 12 insertions(+), 51 deletions(-) diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index 7a7301c..fd966cd 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -31,7 +31,9 @@ const SignIn = () => { >
{errors.id && ( @@ -46,6 +48,7 @@ const SignIn = () => { })} placeholder='Password' type='password' + autoComplete='new-password' /> {errors.password && (

@@ -55,13 +58,20 @@ const SignIn = () => {

- + + + 체크하면 다음 접속 시 자동으로 로그인됩니다 +
+
+
+

Quick Starts

+ +
+
+

My Project

+ +
+
+
+

캐릭터 추천

+
+ 썸네일 +
+
+
+

블로그

+
+ 썸네일 +
+
+
+ + ); }; export default Home; diff --git a/src/pages/MyProject.tsx b/src/pages/MyProject.tsx index c0a366a..86a26fe 100644 --- a/src/pages/MyProject.tsx +++ b/src/pages/MyProject.tsx @@ -1,4 +1,7 @@ -import ListView, { ViewOptionType } from '@/components/common/ListView'; +import ListView, { + IListViewProps, + ViewOptionType, +} from '@/components/common/ListView'; import { Button } from '@/components/ui/button'; import { Select, @@ -11,11 +14,15 @@ import { PROJECT_DATA } from '@/mock/project'; import { AlignJustifyIcon, LayoutGridIcon } from 'lucide-react'; import { useState } from 'react'; -const MyProject = () => { - const [viewOption, setViewOption] = useState('list'); +const MyProject = ({ + option = 'list', + data = PROJECT_DATA, +}: Omit) => { + const [viewOption, setViewOption] = useState(option); + return (
-
+
+ +
+ + {isOpen && ( +
+
+ + +
+
+ )} + + ); +}; \ No newline at end of file diff --git a/src/components/signup/FormField.tsx b/src/components/signup/FormField.tsx new file mode 100644 index 0000000..ddb3e43 --- /dev/null +++ b/src/components/signup/FormField.tsx @@ -0,0 +1,40 @@ +import { Label } from "@radix-ui/react-label"; +import { Input } from "../ui/input"; + +interface FormFieldProps { + label: string; + id: string; + type: string; + value: string; + onChange: (value: string) => void; + error?: string; + placeholder?: string; + maxLength?: number; + readOnly?: boolean; +} + +export const FormField: React.FC = ({ + label, + id, + type, + value, + onChange, + error, + placeholder, + maxLength, + readOnly, +}) => ( +
+ + onChange(e.target.value)} + placeholder={placeholder} + maxLength={maxLength} + readOnly={readOnly} + /> + {error &&

{error}

} +
+); \ No newline at end of file diff --git a/src/components/signup/TermSection.tsx b/src/components/signup/TermSection.tsx new file mode 100644 index 0000000..7bd6a85 --- /dev/null +++ b/src/components/signup/TermSection.tsx @@ -0,0 +1,27 @@ +import { Term } from "@/types/signup"; +import { Checkbox } from "@radix-ui/react-checkbox"; +import { Label } from "@radix-ui/react-label"; + +interface TermsSectionProps { + terms: Term[]; + error?: string; +} + +export const TermsSection: React.FC = ({ terms, error }) => ( +
+ + {terms.map((term) => ( +
+ + +
+ ))} + {error &&

{error}

} +
+); + diff --git a/src/constants/errorMsg.ts b/src/constants/errorMsg.ts new file mode 100644 index 0000000..5f3252e --- /dev/null +++ b/src/constants/errorMsg.ts @@ -0,0 +1,12 @@ +export const ERROR_MESSAGES = { + userId: '아이디는 6~20자의 영문 및 숫자만 허용됩니다.', + password: '비밀번호는 8~20자, 영문 대소문자, 숫자, 특수문자를 포함해야 합니다.', + consecutivePassword: '비밀번호에 동일 문자를 3회 이상 연속 사용할 수 없습니다.', + confirmPassword: '비밀번호가 일치하지 않습니다.', + name: '이름은 실명을 입력해야 하며 특수문자를 포함할 수 없습니다.', + underage: '만 14세 이상만 가입할 수 있습니다.', + email: '유효한 이메일 주소를 입력해주세요.', + phoneNumber: '휴대폰 번호는 10~11자의 숫자만 입력 가능합니다.', + detailAddress: '상세주소를 입력해주세요.', + terms: '필수 약관에 모두 동의해주세요.' +}; \ No newline at end of file diff --git a/src/constants/validation.ts b/src/constants/validation.ts new file mode 100644 index 0000000..fd10533 --- /dev/null +++ b/src/constants/validation.ts @@ -0,0 +1,8 @@ +export const VALIDATION_PATTERNS = { + userId: /^[a-zA-Z0-9]{6,20}$/, + password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/, + consecutiveChars: /(.)\1\1/, + name: /^[가-힣a-zA-Z]+$/, + email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, + phoneNumber: /^\d{10,11}$/ +}; \ No newline at end of file diff --git a/src/hooks/useSignUpForm.ts b/src/hooks/useSignUpForm.ts new file mode 100644 index 0000000..423179c --- /dev/null +++ b/src/hooks/useSignUpForm.ts @@ -0,0 +1,118 @@ +import { useState, useEffect } from 'react'; +import { FormData, FormErrors, Term } from '@/types/signup.ts'; +import { VALIDATION_PATTERNS } from '@/constants/validation.ts'; +import { ERROR_MESSAGES } from '@/constants/errorMsg.ts'; + +const initialFormData: FormData = { + userId: '', + email: '', + emailVerification: '', + password: '', + confirmPassword: '', + name: '', + address: '', + detailAddress: '', + phoneNumber: '', + birthDate: '' +}; + +export const useSignUpForm = () => { + const [formData, setFormData] = useState(initialFormData); + const [errors, setErrors] = useState({}); + const [terms, setTerms] = useState([]); + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + fetchTerms(); + }, []); + + const fetchTerms = async () => { + try { + const response = await fetch('/api/user/register'); + if (!response.ok) throw new Error('Failed to fetch terms'); + const data = await response.json(); + setTerms(data.response.userTerms); + } catch (error) { + console.error('Error fetching terms:', error); + } + }; + + const handleInputChange = (name: keyof FormData, value: string) => { + let processedValue = value; + + if (name === 'phoneNumber') { + processedValue = value.replace(/[^\d]/g, ''); + } else if (name === 'birthDate') { + processedValue = value.replace(/[^\d]/g, '').replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); + } + + setFormData(prev => ({ ...prev, [name]: processedValue })); + }; + + const validateForm = () => { + const newErrors: FormErrors = {}; + + // userId validation + if (!VALIDATION_PATTERNS.userId.test(formData.userId)) { + newErrors.userId = ERROR_MESSAGES.userId; + } + + // Password validation + if (!VALIDATION_PATTERNS.password.test(formData.password)) { + newErrors.password = ERROR_MESSAGES.password; + } + if (VALIDATION_PATTERNS.consecutiveChars.test(formData.password)) { + newErrors.password = ERROR_MESSAGES.consecutivePassword; + } + if (formData.password !== formData.confirmPassword) { + newErrors.confirmPassword = ERROR_MESSAGES.confirmPassword; + } + + // Name validation + if (!VALIDATION_PATTERNS.name.test(formData.name)) { + newErrors.name = ERROR_MESSAGES.name; + } + + // Birth date validation + const birthYear = parseInt(formData.birthDate.split('-')[0], 10); + const currentYear = new Date().getFullYear(); + if (currentYear - birthYear < 14) { + newErrors.birthDate = ERROR_MESSAGES.underage; + } + + // Email validation + if (!VALIDATION_PATTERNS.email.test(formData.email)) { + newErrors.email = ERROR_MESSAGES.email; + } + + // Phone number validation + if (!VALIDATION_PATTERNS.phoneNumber.test(formData.phoneNumber)) { + newErrors.phoneNumber = ERROR_MESSAGES.phoneNumber; + } + + // Address validation + if (!formData.detailAddress) { + newErrors.detailAddress = ERROR_MESSAGES.detailAddress; + } + + // Terms validation + const requiredTerms = terms.filter(term => term.chkTerm); + const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; + if (!allRequiredTermsChecked) { + newErrors.terms = ERROR_MESSAGES.terms; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + return { + formData, + errors, + terms, + isOpen, + setIsOpen, + handleInputChange, + validateForm, + }; +}; \ No newline at end of file diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 7b98a60..2d64602 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -1,244 +1,145 @@ -import DaumPostcode from 'react-daum-postcode'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { Checkbox } from "@/components/ui/checkbox"; -import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; - -interface Term { - termCode: string; - termName: string; - shortCont: string; - longCont: string; - chkTerm: boolean; -} +import { useSignUpForm } from '@/hooks/useSignUpForm'; +import { FormField } from '@/components/signup/FormField'; +import { AddressSearch } from '@/components/signup/AddressSearch'; +import { TermsSection } from '@/components/signup/termSection'; const SignUp: React.FC = () => { - const [userId, setUserId] = useState(''); - const [email, setEmail] = useState(''); - const [emailVerification, setEmailVerification] = useState(''); - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [name, setName] = useState(''); - const [address, setAddress] = useState(''); - const [detailAddress, setDetailAddress] = useState(''); - const [isOpen, setIsOpen] = useState(false); - const [terms, setTerms] = useState([]); - const [phoneNumber, setPhoneNumber] = useState(''); - const [birthDate, setBirthDate] = useState(''); - const [errors, setErrors] = useState<{[key:string]: string}>({}); - - useEffect(()=> { - fetchTerms(); - }, []); - - const fetchTerms = async () => { - try { - const response = await fetch('/api/user/register'); - if (!response.ok) { - throw new Error('Failed to fetch terms'); - } - const data = await response.json(); - setTerms(data.response.userTerms); - } catch (error) { - console.error('Error fetching terms:', error); - } - }; - - const handleComplete = (data: any) => { - let fullAddress = data.address; - let extraAddress = ''; - - if (data.addressType === 'R') { - if (data.bname != '') { - extraAddress += data.bname; - } - if (data.buildingName != '') { - extraAddress += extraAddress != '' ? `, ${data.buildingName}` : data.buildingName; - } - fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''; - } - - setAddress(fullAddress); - setIsOpen(false); - } - - const handlePhoneNumberChange = (e: React.ChangeEvent) => { - const value = e.target.value.replace(/[^\d]/g, ''); - // const formattedValue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); - setPhoneNumber(value); - }; - - const handleBirthDateChange = (e: React.ChangeEvent) => { - const value = e.target.value.replace(/[^\d]/g, ''); - const formattedValue = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); - setBirthDate(formattedValue); - }; - - const validateForm = () => { - const newErrors: {[key:string]: string} = {}; - - if (!/^[a-zA-Z0-9]{6,20}$/.test(userId)) { - newErrors.userId = '아이디는 6~20자의 영문 및 숫자만 허용됩니다.'; - } - - if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/.test(password)) { - newErrors.password = '비밀번호는 8~20자, 영문 대소문자, 숫자, 특수문자를 포함해야 합니다.'; - } - if (/(.)\1\1/.test(password)) { - newErrors.password = '비밀번호에 동일 문자를 3회 이상 연속 사용할 수 없습니다.'; - } - - if (password != confirmPassword) { - newErrors.confirmPassword = '비밀번호가 일치하지 않습니다.'; - } - - if (!/^[가-힣a-zA-Z]+$/.test(name)) { - newErrors.name = '이름은 실명을 입력해야 하며 특수문자를 포함할 수 없습니다.'; - } - - const birthYear = parseInt(birthDate.split('-')[0], 10); - const currentYear = new Date().getFullYear(); - if (currentYear - birthYear < 14) { - newErrors.birthDate = '만 14세 이상만 가입할 수 있습니다.'; - } - - if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { - newErrors.email = '유효한 이메일 주소를 입력해주세요.'; - } - - if (!/^\d{10,11}$/.test(phoneNumber)) { - newErrors.phoneNumber = '휴대폰 번호는 10~11자의 숫자만 입력 가능합니다.'; - } - - if (!detailAddress) { - newErrors.detailAddress = '상세주소를 입력해주세요.'; - } - - const requiredTerms = terms.filter(term => term.chkTerm); - const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; - if (!allRequiredTermsChecked) { - newErrors.terms = '필수 약관에 모두 동의해주세요.'; - } - - setErrors(newErrors); - return Object.keys(newErrors).length === 0; - - }; + const { + formData, + errors, + terms, + isOpen, + setIsOpen, + handleInputChange, + validateForm, + } = useSignUpForm(); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (validateForm()) { console.log('유효함.제출중'); } else { - console.log('에러남'); + console.log('에러남 ㅅㄱ'); } } return (

회원가입

-

이미 계정이 있으신가요? 로그인 화면으로 이동

+

이미 계정이 있으신가요? + 로그인 화면으로 이동 +

-
- - setUserId(e.target.value)} placeholder="아이디를 입력하세요" /> - {errors.userId &&

{errors.userId}

} -
+ handleInputChange('userId', value)} + error={errors.userId} + placeholder="아이디를 입력하세요" + />
- setEmail(e.target.value)} placeholder="이메일을 입력하세요" /> + handleInputChange('email', e.target.value)} + placeholder="이메일을 입력하세요" + />
- {errors.email &&

{errors.email}

} -
- -
- - setEmailVerification(e.target.value)} placeholder="인증번호를 입력하세요" /> -
- -
- - setPassword(e.target.value)} placeholder="비밀번호를 입력하세요" /> - {errors.password &&

{errors.password}

} -
- -
- - setConfirmPassword(e.target.value)} - placeholder="비밀번호를 다시 입력하세요" - /> - {errors.confirmPassword &&

{errors.confirmPassword}

} -
- -
- - setName(e.target.value)} placeholder="이름을 입력하세요" /> - {errors.name &&

{errors.name}

} -
- -
- - - {errors.phoneNumber &&

{errors.phoneNumber}

} + {errors.email &&

{errors.email}

}
-
- - - {errors.birthDate &&

{errors.birthDate}

} -
- -
- -
- - -
-
- - {isOpen && ( -
-
- - -
-
- )} - -
- {/* */} - setDetailAddress(e.target.value)} placeholder="상세 주소를 입력하세요" /> - {errors.detailAddress &&

{errors.detailAddress}

} -
- -
- - {terms.map((term) => ( -
- - -
- ))} - {errors.terms &&

{errors.terms}

} -
+ handleInputChange('emailVerification', value)} + placeholder="인증번호를 입력하세요" + /> + + handleInputChange('password', value)} + error={errors.password} + placeholder="비밀번호를 입력하세요" + /> + + handleInputChange('confirmPassword', value)} + error={errors.confirmPassword} + placeholder="비밀번호를 다시 입력하세요" + /> + + handleInputChange('name', value)} + error={errors.name} + placeholder="이름을 입력하세요" + /> + + handleInputChange('phoneNumber', value)} + error={errors.phoneNumber} + placeholder="전화번호를 입력하세요" + /> + + handleInputChange('birthDate', value)} + error={errors.birthDate} + placeholder="YYYY-MM-DD" + maxLength={10} + /> + + handleInputChange('address', data.address)} + onClose={() => setIsOpen(false)} + /> + + handleInputChange('detailAddress', value)} + error={errors.detailAddress} + placeholder="상세 주소를 입력하세요" + /> + + diff --git a/src/types/signup.ts b/src/types/signup.ts new file mode 100644 index 0000000..8631595 --- /dev/null +++ b/src/types/signup.ts @@ -0,0 +1,24 @@ +export interface Term { + termCode: string; + termName: string; + shortCont: string; + longCont: string; + chkTerm: boolean; +} + +export interface FormData { + userId: string; + email: string; + emailVerification: string; + password: string; + confirmPassword: string; + name: string; + address: string; + detailAddress: string; + phoneNumber: string; + birthDate: string; +} + +export interface FormErrors { + [key: string]: string; +} \ No newline at end of file From 0228c3ff748a46ae3bf9d1c1279e397512f210a2 Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Fri, 15 Nov 2024 15:04:33 +0900 Subject: [PATCH 22/73] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSignUpForm.ts | 9 --------- src/pages/SignUp.tsx | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/hooks/useSignUpForm.ts b/src/hooks/useSignUpForm.ts index 423179c..08eae3a 100644 --- a/src/hooks/useSignUpForm.ts +++ b/src/hooks/useSignUpForm.ts @@ -52,12 +52,10 @@ export const useSignUpForm = () => { const validateForm = () => { const newErrors: FormErrors = {}; - // userId validation if (!VALIDATION_PATTERNS.userId.test(formData.userId)) { newErrors.userId = ERROR_MESSAGES.userId; } - // Password validation if (!VALIDATION_PATTERNS.password.test(formData.password)) { newErrors.password = ERROR_MESSAGES.password; } @@ -68,34 +66,27 @@ export const useSignUpForm = () => { newErrors.confirmPassword = ERROR_MESSAGES.confirmPassword; } - // Name validation if (!VALIDATION_PATTERNS.name.test(formData.name)) { newErrors.name = ERROR_MESSAGES.name; } - // Birth date validation const birthYear = parseInt(formData.birthDate.split('-')[0], 10); const currentYear = new Date().getFullYear(); if (currentYear - birthYear < 14) { newErrors.birthDate = ERROR_MESSAGES.underage; } - // Email validation if (!VALIDATION_PATTERNS.email.test(formData.email)) { newErrors.email = ERROR_MESSAGES.email; } - // Phone number validation if (!VALIDATION_PATTERNS.phoneNumber.test(formData.phoneNumber)) { newErrors.phoneNumber = ERROR_MESSAGES.phoneNumber; } - // Address validation if (!formData.detailAddress) { newErrors.detailAddress = ERROR_MESSAGES.detailAddress; } - - // Terms validation const requiredTerms = terms.filter(term => term.chkTerm); const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; if (!allRequiredTermsChecked) { diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 2d64602..aaedd79 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -127,7 +127,7 @@ const SignUp: React.FC = () => { /> Date: Fri, 15 Nov 2024 16:14:20 +0900 Subject: [PATCH 23/73] =?UTF-8?q?fix:=20=EC=A0=84=ED=99=94=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=ED=98=95=EC=8B=9D=20=EC=88=98=EC=A0=95(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/validation.ts | 2 +- src/pages/SignUp.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/constants/validation.ts b/src/constants/validation.ts index fd10533..c17be65 100644 --- a/src/constants/validation.ts +++ b/src/constants/validation.ts @@ -4,5 +4,5 @@ export const VALIDATION_PATTERNS = { consecutiveChars: /(.)\1\1/, name: /^[가-힣a-zA-Z]+$/, email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, - phoneNumber: /^\d{10,11}$/ + phoneNumber: /^010\d{8}$/ }; \ No newline at end of file diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index aaedd79..7635bb3 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import { useSignUpForm } from '@/hooks/useSignUpForm'; import { FormField } from '@/components/signup/FormField'; import { AddressSearch } from '@/components/signup/AddressSearch'; -import { TermsSection } from '@/components/signup/termSection'; +import { TermsSection } from '@/components/signup/TermSection'; const SignUp: React.FC = () => { const { From 27bc73c25356bd4f42dde8908af987e9d7aff94b Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Fri, 15 Nov 2024 16:15:14 +0900 Subject: [PATCH 24/73] =?UTF-8?q?fix:=20=EC=9D=B4=EB=A6=84=20=ED=98=95?= =?UTF-8?q?=EC=8B=9D=20=EC=88=98=EC=A0=95(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/validation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants/validation.ts b/src/constants/validation.ts index c17be65..4ed7146 100644 --- a/src/constants/validation.ts +++ b/src/constants/validation.ts @@ -2,7 +2,7 @@ export const VALIDATION_PATTERNS = { userId: /^[a-zA-Z0-9]{6,20}$/, password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/, consecutiveChars: /(.)\1\1/, - name: /^[가-힣a-zA-Z]+$/, + name: /^[가-힣a-zA-Z\s]+$/, email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, phoneNumber: /^010\d{8}$/ }; \ No newline at end of file From ffa3204054381d01052b0b7b49741bd4095c3305 Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Fri, 15 Nov 2024 16:37:43 +0900 Subject: [PATCH 25/73] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 229 ++---------------- src/components/signup/AddressSearch.tsx | 6 +- src/components/signup/TermSection.tsx | 4 +- src/constants/validation.ts | 2 +- .../{useSignUpForm.ts => useSignUpForm.tsx} | 0 src/pages/SignUp.tsx | 13 +- 6 files changed, 36 insertions(+), 218 deletions(-) rename src/hooks/{useSignUpForm.ts => useSignUpForm.tsx} (100%) diff --git a/package-lock.json b/package-lock.json index 537ba67..43f249e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,8 +17,6 @@ "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", - "@rollup/rollup-darwin-x64": "*", - "@rollup/rollup-win32-x64-msvc": "*", "@tanstack/react-query": "^5.59.19", "@tanstack/react-table": "^8.20.5", "axios": "^1.7.7", @@ -1109,42 +1107,6 @@ "node": ">=14" } }, - "node_modules/@radix-ui/primitive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", - "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==", - "license": "MIT" - }, - "node_modules/@radix-ui/react-checkbox": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz", - "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==", - "license": "MIT", - "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.1", - "@radix-ui/react-presence": "1.1.1", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-controllable-state": "1.1.0", - "@radix-ui/react-use-previous": "1.1.0", - "@radix-ui/react-use-size": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/number": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz", @@ -1281,21 +1243,6 @@ } } }, - "node_modules/@radix-ui/react-context": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", - "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-dialog": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz", @@ -1470,6 +1417,29 @@ } } }, + "node_modules/@radix-ui/react-label": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", + "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-menu": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz", @@ -1740,82 +1710,11 @@ } } }, - "node_modules/@radix-ui/react-label": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", - "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-primitive": "2.0.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-presence": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", - "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-primitive": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", - "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-slot": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", "license": "MIT", - "license": "MIT", "dependencies": { "@radix-ui/react-compose-refs": "1.1.0" }, @@ -1829,87 +1728,6 @@ } } }, - "node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", - "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-controllable-state": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", - "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-use-callback-ref": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", - "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-previous": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", - "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-size": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", - "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-tooltip": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz", @@ -2499,7 +2317,6 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", "devOptional": true, - "devOptional": true, "license": "MIT", "dependencies": { "@types/react": "*" diff --git a/src/components/signup/AddressSearch.tsx b/src/components/signup/AddressSearch.tsx index 75f95dc..59d5fc5 100644 --- a/src/components/signup/AddressSearch.tsx +++ b/src/components/signup/AddressSearch.tsx @@ -1,11 +1,11 @@ -import { Button } from "../ui/button"; -import { Input } from "../ui/input"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; import DaumPostcode from 'react-daum-postcode'; interface AddressSearchProps { address: string; isOpen: boolean; - onComplete: (data: any) => void; + onComplete: (data: { address: string }) => void; onClose: () => void; } diff --git a/src/components/signup/TermSection.tsx b/src/components/signup/TermSection.tsx index 7bd6a85..cedc205 100644 --- a/src/components/signup/TermSection.tsx +++ b/src/components/signup/TermSection.tsx @@ -7,7 +7,7 @@ interface TermsSectionProps { error?: string; } -export const TermsSection: React.FC = ({ terms, error }) => ( +export const TermsSection: React.FC = ({ terms, error, onChange }) => (
{terms.map((term) => ( @@ -21,7 +21,7 @@ export const TermsSection: React.FC = ({ terms, error }) => (
))} - {error &&

{error}

} + {error &&

{error}

}
); diff --git a/src/constants/validation.ts b/src/constants/validation.ts index 4ed7146..c17be65 100644 --- a/src/constants/validation.ts +++ b/src/constants/validation.ts @@ -2,7 +2,7 @@ export const VALIDATION_PATTERNS = { userId: /^[a-zA-Z0-9]{6,20}$/, password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/, consecutiveChars: /(.)\1\1/, - name: /^[가-힣a-zA-Z\s]+$/, + name: /^[가-힣a-zA-Z]+$/, email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, phoneNumber: /^010\d{8}$/ }; \ No newline at end of file diff --git a/src/hooks/useSignUpForm.ts b/src/hooks/useSignUpForm.tsx similarity index 100% rename from src/hooks/useSignUpForm.ts rename to src/hooks/useSignUpForm.tsx diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 7635bb3..90ecbcc 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -36,8 +36,8 @@ const SignUp: React.FC = () => {
handleInputChange('userId', value)} error={errors.userId} @@ -65,6 +65,7 @@ const SignUp: React.FC = () => { type="text" value={formData.emailVerification} onChange={(value) => handleInputChange('emailVerification', value)} + error={errors.emailVerification} placeholder="인증번호를 입력하세요" /> @@ -103,7 +104,7 @@ const SignUp: React.FC = () => { id="phone" type="tel" value={formData.phoneNumber} - onChange={(value) => handleInputChange('phoneNumber', value)} + onChange={(value: string) => handleInputChange('phoneNumber', value)} error={errors.phoneNumber} placeholder="전화번호를 입력하세요" /> @@ -113,7 +114,7 @@ const SignUp: React.FC = () => { id="birthDate" type="text" value={formData.birthDate} - onChange={(value) => handleInputChange('birthDate', value)} + onChange={(value: string) => handleInputChange('birthDate', value)} error={errors.birthDate} placeholder="YYYY-MM-DD" maxLength={10} @@ -122,7 +123,7 @@ const SignUp: React.FC = () => { handleInputChange('address', data.address)} + onComplete={(data: { address: string; }) => handleInputChange('address', data.address)} onClose={() => setIsOpen(false)} /> @@ -131,7 +132,7 @@ const SignUp: React.FC = () => { id="addressDetail" type="text" value={formData.detailAddress} - onChange={(value) => handleInputChange('detailAddress', value)} + onChange={(value: string) => handleInputChange('detailAddress', value)} error={errors.detailAddress} placeholder="상세 주소를 입력하세요" /> From bb33806e84f1183579a6ecb74a0798802ffa4b81 Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Fri, 15 Nov 2024 16:47:34 +0900 Subject: [PATCH 26/73] =?UTF-8?q?fix:=20=EC=A3=BC=EC=86=8C=20=EB=9D=BC?= =?UTF-8?q?=EB=B2=A8=20=EC=88=98=EC=A0=95(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 ++++++++ package.json | 1 + src/components/signup/AddressSearch.tsx | 10 +++++++--- src/pages/SignUp.tsx | 4 ++-- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 43f249e..3e3cebf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@types/node": "^22.9.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", + "@types/tailwindcss": "^3.0.11", "@vitejs/plugin-react": "^4.3.3", "autoprefixer": "^10.4.20", "eslint": "^9.13.0", @@ -2322,6 +2323,13 @@ "@types/react": "*" } }, + "node_modules/@types/tailwindcss": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz", + "integrity": "sha512-PR+BOIrI+rxteHwFvkfIOty+PDJwTG4ute3alxSSXpF/xKpryO1room265m46Auyae0VwqUYs3PuVEOF9Oil3w==", + "dev": true, + "license": "MIT" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz", diff --git a/package.json b/package.json index c7937ba..0f08977 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@types/node": "^22.9.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", + "@types/tailwindcss": "^3.0.11", "@vitejs/plugin-react": "^4.3.3", "autoprefixer": "^10.4.20", "eslint": "^9.13.0", diff --git a/src/components/signup/AddressSearch.tsx b/src/components/signup/AddressSearch.tsx index 59d5fc5..6ef9a33 100644 --- a/src/components/signup/AddressSearch.tsx +++ b/src/components/signup/AddressSearch.tsx @@ -1,5 +1,6 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; +import { Label } from "@radix-ui/react-dropdown-menu"; import DaumPostcode from 'react-daum-postcode'; interface AddressSearchProps { @@ -35,9 +36,12 @@ export const AddressSearch: React.FC = ({ return ( <> -
- - +
+ +
+ + +
{isOpen && ( diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 90ecbcc..536289b 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -28,7 +28,7 @@ const SignUp: React.FC = () => { } return ( -
+

회원가입

이미 계정이 있으신가요? 로그인 화면으로 이동 @@ -128,7 +128,7 @@ const SignUp: React.FC = () => { /> Date: Fri, 15 Nov 2024 17:51:37 +0900 Subject: [PATCH 27/73] =?UTF-8?q?fix:=20=EC=83=9D=EB=85=84=EC=9B=94?= =?UTF-8?q?=EC=9D=BC=20=ED=95=84=EB=93=9C=20=EC=82=AD=EC=A0=9C,=20?= =?UTF-8?q?=EC=A3=BC=EC=86=8C=EA=B2=80=EC=83=89=EC=B0=BD=20=EC=95=88?= =?UTF-8?q?=EC=97=B4=EB=A6=AC=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/signup/AddressSearch.tsx | 4 +++- src/constants/errorMsg.ts | 1 - src/hooks/useSignUpForm.tsx | 10 +--------- src/pages/SignUp.tsx | 12 +----------- src/types/signup.ts | 1 - 5 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/components/signup/AddressSearch.tsx b/src/components/signup/AddressSearch.tsx index 6ef9a33..9b61800 100644 --- a/src/components/signup/AddressSearch.tsx +++ b/src/components/signup/AddressSearch.tsx @@ -8,6 +8,7 @@ interface AddressSearchProps { isOpen: boolean; onComplete: (data: { address: string }) => void; onClose: () => void; + setIsOpen: React.Dispatch>; } export const AddressSearch: React.FC = ({ @@ -15,6 +16,7 @@ export const AddressSearch: React.FC = ({ isOpen, onComplete, onClose, + setIsOpen }) => { const handleComplete = (data: any) => { let fullAddress = data.address; @@ -40,7 +42,7 @@ export const AddressSearch: React.FC = ({
- +

diff --git a/src/constants/errorMsg.ts b/src/constants/errorMsg.ts index 5f3252e..35f7e75 100644 --- a/src/constants/errorMsg.ts +++ b/src/constants/errorMsg.ts @@ -4,7 +4,6 @@ export const ERROR_MESSAGES = { consecutivePassword: '비밀번호에 동일 문자를 3회 이상 연속 사용할 수 없습니다.', confirmPassword: '비밀번호가 일치하지 않습니다.', name: '이름은 실명을 입력해야 하며 특수문자를 포함할 수 없습니다.', - underage: '만 14세 이상만 가입할 수 있습니다.', email: '유효한 이메일 주소를 입력해주세요.', phoneNumber: '휴대폰 번호는 10~11자의 숫자만 입력 가능합니다.', detailAddress: '상세주소를 입력해주세요.', diff --git a/src/hooks/useSignUpForm.tsx b/src/hooks/useSignUpForm.tsx index 08eae3a..6b71cb6 100644 --- a/src/hooks/useSignUpForm.tsx +++ b/src/hooks/useSignUpForm.tsx @@ -13,7 +13,6 @@ const initialFormData: FormData = { address: '', detailAddress: '', phoneNumber: '', - birthDate: '' }; export const useSignUpForm = () => { @@ -42,8 +41,6 @@ export const useSignUpForm = () => { if (name === 'phoneNumber') { processedValue = value.replace(/[^\d]/g, ''); - } else if (name === 'birthDate') { - processedValue = value.replace(/[^\d]/g, '').replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); } setFormData(prev => ({ ...prev, [name]: processedValue })); @@ -70,12 +67,6 @@ export const useSignUpForm = () => { newErrors.name = ERROR_MESSAGES.name; } - const birthYear = parseInt(formData.birthDate.split('-')[0], 10); - const currentYear = new Date().getFullYear(); - if (currentYear - birthYear < 14) { - newErrors.birthDate = ERROR_MESSAGES.underage; - } - if (!VALIDATION_PATTERNS.email.test(formData.email)) { newErrors.email = ERROR_MESSAGES.email; } @@ -89,6 +80,7 @@ export const useSignUpForm = () => { } const requiredTerms = terms.filter(term => term.chkTerm); const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; + if (!allRequiredTermsChecked) { newErrors.terms = ERROR_MESSAGES.terms; } diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 536289b..79ceffb 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -109,22 +109,12 @@ const SignUp: React.FC = () => { placeholder="전화번호를 입력하세요" /> - handleInputChange('birthDate', value)} - error={errors.birthDate} - placeholder="YYYY-MM-DD" - maxLength={10} - /> - handleInputChange('address', data.address)} onClose={() => setIsOpen(false)} + setIsOpen={setIsOpen} /> Date: Fri, 15 Nov 2024 18:18:17 +0900 Subject: [PATCH 28/73] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85any=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/signup/AddressSearch.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/signup/AddressSearch.tsx b/src/components/signup/AddressSearch.tsx index 9b61800..3579997 100644 --- a/src/components/signup/AddressSearch.tsx +++ b/src/components/signup/AddressSearch.tsx @@ -1,6 +1,6 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { Label } from "@radix-ui/react-dropdown-menu"; +import { Label } from "@radix-ui/react-label"; import DaumPostcode from 'react-daum-postcode'; interface AddressSearchProps { @@ -10,6 +10,12 @@ interface AddressSearchProps { onClose: () => void; setIsOpen: React.Dispatch>; } +interface DaumAddress { + address: string; + addressType: string; + bname: string; + buildingName: string; +} export const AddressSearch: React.FC = ({ address, @@ -18,7 +24,8 @@ export const AddressSearch: React.FC = ({ onClose, setIsOpen }) => { - const handleComplete = (data: any) => { + + const handleComplete = (data: DaumAddress) => { let fullAddress = data.address; let extraAddress = ''; From c422523351ade6f562dcbda30bda4babd15029ea Mon Sep 17 00:00:00 2001 From: wonjichoe Date: Fri, 15 Nov 2024 19:09:06 +0900 Subject: [PATCH 29/73] =?UTF-8?q?feat:=20=EC=95=BD=EA=B4=80=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=EB=8F=99=EC=9D=98=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/signup/TermSection.tsx | 20 +++++++++++++++++++- src/hooks/useSignUpForm.tsx | 15 +++++++++++++++ src/pages/SignUp.tsx | 2 ++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/src/components/signup/TermSection.tsx b/src/components/signup/TermSection.tsx index cedc205..1bc9940 100644 --- a/src/components/signup/TermSection.tsx +++ b/src/components/signup/TermSection.tsx @@ -5,20 +5,38 @@ import { Label } from "@radix-ui/react-label"; interface TermsSectionProps { terms: Term[]; error?: string; + onChange:(termCode: string, checked: boolean) => void; } export const TermsSection: React.FC = ({ terms, error, onChange }) => (
+
+ onChange?.('all', !!checked)} + /> + +
{terms.map((term) => (
- + onChange?.(term.termCode, !!checked)} + aria-required={term.chkTerm} + aria-describedby={`${term.termCode}-description`} + /> + + {term.chkTerm ? '필수 약관입니다' : '선택 약관입니다'} +
))} {error &&

{error}

} diff --git a/src/hooks/useSignUpForm.tsx b/src/hooks/useSignUpForm.tsx index 6b71cb6..048eaa8 100644 --- a/src/hooks/useSignUpForm.tsx +++ b/src/hooks/useSignUpForm.tsx @@ -89,6 +89,20 @@ export const useSignUpForm = () => { return Object.keys(newErrors).length === 0; }; + const handleTermChange = (termCode: string, checked: boolean) => { + if (termCode === 'all') { + // 전체 동의 로직 + const updatedTerms = terms.map(term => ({ ...term, agreed: checked })); + setTerms(updatedTerms); + } else { + // 개별 약관 동의 로직 + const updatedTerms = terms.map(term => + term.termCode === termCode ? { ...term, agreed: checked } : term + ); + setTerms(updatedTerms); + } + }; + return { formData, errors, @@ -97,5 +111,6 @@ export const useSignUpForm = () => { setIsOpen, handleInputChange, validateForm, + handleTermChange }; }; \ No newline at end of file diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 79ceffb..32bdee4 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -16,6 +16,7 @@ const SignUp: React.FC = () => { setIsOpen, handleInputChange, validateForm, + handleTermChange } = useSignUpForm(); const handleSubmit = (e: React.FormEvent) => { @@ -130,6 +131,7 @@ const SignUp: React.FC = () => { From ef324d1c7be10250022c3084b7c2eaeac3170bab Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Sat, 16 Nov 2024 03:53:33 +0900 Subject: [PATCH 30/73] =?UTF-8?q?feat:=EB=8F=99=EC=A0=81=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EC=B6=94=EA=B0=80=20(#21)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 2 -- src/layout/ProjectLayout.tsx | 42 +++++++++++++++++++----------------- src/pages/Concat.tsx | 5 ++++- src/pages/TTS.tsx | 5 ++++- src/pages/VC.tsx | 5 ++++- src/routes/router.tsx | 6 +++--- 6 files changed, 37 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb3c56a..4e55671 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,6 @@ "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", - "@rollup/rollup-darwin-x64": "*", - "@rollup/rollup-win32-x64-msvc": "*", "@tanstack/react-query": "^5.59.19", "@tanstack/react-table": "^8.20.5", "axios": "^1.7.7", diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index 97e69aa..7f3cad0 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -1,4 +1,4 @@ -import { Outlet, Link } from 'react-router-dom'; +import { Outlet, Link, useParams } from 'react-router-dom'; import { useState } from 'react'; import { ChevronDown, ChevronUp } from 'lucide-react'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -7,6 +7,9 @@ const ProjectLayout = () => { // Footer 상태 관리 (열림/닫힘 여부) const [isFooterExpanded, setIsFooterExpanded] = useState(false); + // 현재 URL에서 projectId 가져오기 + const { projectId } = useParams(); + // Footer 토글 함수 const toggleFooter = () => { setIsFooterExpanded((prev) => !prev); @@ -26,30 +29,20 @@ const ProjectLayout = () => { @@ -59,17 +52,17 @@ const ProjectLayout = () => {
From 5eeba06a237a7427f723aa22d27310bc93be0cc2 Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Wed, 20 Nov 2024 01:56:30 +0900 Subject: [PATCH 32/73] =?UTF-8?q?feat:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=8D=94=20=EC=B6=94=EA=B0=80=20(#32)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 ++++++ package.json | 1 + .../sidebar/sidebarContent/EditContent.tsx | 107 ++++++++---------- src/components/ui/dropDownSelector.tsx | 49 ++++++++ src/components/ui/slider.tsx | 26 +++++ src/components/ui/sliderControl.tsx | 30 +++++ src/layout/ProjectLayout.tsx | 27 +++-- 7 files changed, 200 insertions(+), 73 deletions(-) create mode 100644 src/components/ui/dropDownSelector.tsx create mode 100644 src/components/ui/slider.tsx create mode 100644 src/components/ui/sliderControl.tsx diff --git a/package-lock.json b/package-lock.json index 3e3cebf..990c61c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", @@ -1711,6 +1712,38 @@ } } }, + "node_modules/@radix-ui/react-slider": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz", + "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", diff --git a/package.json b/package.json index 0f08977..9a8a0c8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index 35b626d..e41845c 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -1,73 +1,56 @@ import { useState } from 'react'; -import { Button } from '@/components/ui/button'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuLabel, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu'; + +import { DropdownSelector } from '@/components/ui/dropDownSelector'; +import { SliderControl } from '@/components/ui/sliderControl'; const EditContent = () => { - // 선택된 성우 이름 관리 - const [selectedFavorite, setselectedFavorite] = useState('성우 이름'); + const [selectedFavorite, setSelectedFavorite] = useState('성우 이름'); const [selectedVoice, setSelectedVoice] = useState('성우 이름'); + // 슬라이더 데이터 배열 + const sliders = [ + { id: 'speed', label: '속도', value: 0, setValue: useState(0) }, + { id: 'height', label: '높이', value: 0, setValue: useState(0) }, + { + id: 'endProcessing', + label: '끝음 처리', + value: 0, + setValue: useState(0), + }, + { id: 'endLength', label: '끝음 길이', value: 0, setValue: useState(0) }, + { id: 'volume', label: '볼륨 조절', value: 0, setValue: useState(0) }, + ]; + return (
- {/* 즐겨찾기 */} -
- - - - - - - 목소리 선택 - - - Wimon - 원준 - James - - - -
+ {/* 즐겨찾기 Dropdown */} + + + {/* 보이스 옵션 Dropdown */} + -
- - - - - - - 목소리 선택 - - {/* 단일 선택을 위한 RadioGroup */} - - Wimon - 원준 - James - - - -
+ {/*slider */} + {sliders.map((slider) => { + const [value, setValue] = slider.setValue; + return ( + setValue(v[0])} + /> + ); + })}
); }; diff --git a/src/components/ui/dropDownSelector.tsx b/src/components/ui/dropDownSelector.tsx new file mode 100644 index 0000000..aad2d4a --- /dev/null +++ b/src/components/ui/dropDownSelector.tsx @@ -0,0 +1,49 @@ +import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuLabel, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; + +// 재사용 가능한 Dropdown 컴포넌트 +export const DropdownSelector = ({ + label, + value, + onChange, + options, +}: { + label: string; + value: string; + onChange: (value: string) => void; + options: string[]; +}) => { + return ( +
+ + + + + + + {label} + + + {options.map((option) => ( + + {option} + + ))} + + + +
+ ); +}; diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx new file mode 100644 index 0000000..9398b33 --- /dev/null +++ b/src/components/ui/slider.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import * as SliderPrimitive from "@radix-ui/react-slider" + +import { cn } from "@/lib/utils" + +const Slider = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + +)) +Slider.displayName = SliderPrimitive.Root.displayName + +export { Slider } diff --git a/src/components/ui/sliderControl.tsx b/src/components/ui/sliderControl.tsx new file mode 100644 index 0000000..2965094 --- /dev/null +++ b/src/components/ui/sliderControl.tsx @@ -0,0 +1,30 @@ +import { Slider } from '@/components/ui/slider'; + +export const SliderControl = ({ + label, + value, + onChange, +}: { + label: string; + value: number; + onChange: (value: number[]) => void; +}) => { + return ( +
+ {/* 제목 */} + + {/* 슬라이더 및 값 */} +
+ onChange(v)} + max={100} + className='flex-1' + /> + + {value > 0 ? value : '없음'} + +
+
+ ); +}; diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index 52e77a2..6a8e362 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -6,7 +6,22 @@ import { Button } from '@/components/ui/button'; import EditContent from '@/components/sidebar/sidebarContent/EditContent'; const FileContent = () => { - return ; + return ( +
+
+ +
+ +
+ + +
+
+ ); }; const ProjectLayout = () => { @@ -103,16 +118,6 @@ const ProjectLayout = () => { {/* 탭별 콘텐츠 */} {activeTab === 'file' ? : } - - {/* 생성하기 버튼 및 물음표 아이콘 */} -
- - -
From e02722bbad5e01f931a55613de687e248ba31cef Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Wed, 20 Nov 2024 02:08:42 +0900 Subject: [PATCH 33/73] =?UTF-8?q?feat:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=8D=94=20=EB=B2=94=EC=9C=84=20-100~100=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#32)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/sliderControl.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ui/sliderControl.tsx b/src/components/ui/sliderControl.tsx index 2965094..5ca391d 100644 --- a/src/components/ui/sliderControl.tsx +++ b/src/components/ui/sliderControl.tsx @@ -19,10 +19,11 @@ export const SliderControl = ({ value={[value]} onValueChange={(v) => onChange(v)} max={100} + min={-100} className='flex-1' /> - {value > 0 ? value : '없음'} + {value ? value : '없음'}
From d02dbf58403e5c8a2329a5cb3fe27332a396899c Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Wed, 20 Nov 2024 02:18:54 +0900 Subject: [PATCH 34/73] =?UTF-8?q?feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=EC=97=90=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=ED=95=A8=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=EC=8D=A8=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EA=B0=80=EB=8F=85=EC=84=B1=20=ED=96=A5=EC=83=81=20?= =?UTF-8?q?(#32)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar/sidebarContent/EditContent.tsx | 68 +++++++++++-------- src/components/ui/dropDownSelector.tsx | 7 +- 2 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index e41845c..4f47e37 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { DropdownSelector } from '@/components/ui/dropDownSelector'; import { SliderControl } from '@/components/ui/sliderControl'; +import { Button } from '@/components/ui/button'; const EditContent = () => { const [selectedFavorite, setSelectedFavorite] = useState('성우 이름'); @@ -22,35 +23,44 @@ const EditContent = () => { ]; return ( -
- {/* 즐겨찾기 Dropdown */} - - - {/* 보이스 옵션 Dropdown */} - - - {/*slider */} - {sliders.map((slider) => { - const [value, setValue] = slider.setValue; - return ( - setValue(v[0])} - /> - ); - })} +
+ {/* 컨텐츠 영역 */} +
+ {/* 즐겨찾기 Dropdown */} + + + {/* 보이스 옵션 Dropdown */} + + + {/* 슬라이더 */} + {sliders.map((slider) => { + const [value, setValue] = slider.setValue; + return ( + setValue(v[0])} + /> + ); + })} +
+ + {/* 하단 버튼 */} +
+ + +
); }; diff --git a/src/components/ui/dropDownSelector.tsx b/src/components/ui/dropDownSelector.tsx index aad2d4a..3752424 100644 --- a/src/components/ui/dropDownSelector.tsx +++ b/src/components/ui/dropDownSelector.tsx @@ -8,6 +8,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; +import { ChevronDown } from 'lucide-react'; // 재사용 가능한 Dropdown 컴포넌트 export const DropdownSelector = ({ @@ -28,8 +29,12 @@ export const DropdownSelector = ({ - From f701f7588e814dd08c4f94068aa7113bfd1afdf2 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Wed, 20 Nov 2024 17:24:26 +0900 Subject: [PATCH 35/73] =?UTF-8?q?[fix]=20=EC=B2=B4=ED=81=AC=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EA=B4=80=EB=A0=A8=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 체크박스 관련 오류 수정 * fix: 코드리뷰 적용 --- src/components/common/ListView.tsx | 65 +++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 20 deletions(-) diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx index bea69a8..3f4b24d 100644 --- a/src/components/common/ListView.tsx +++ b/src/components/common/ListView.tsx @@ -12,14 +12,14 @@ import { ROUTES } from '@/constants/route'; import useChecked from '@/hooks/useChecked'; import { IProjectProps } from '@/types/project'; import { SquareArrowOutUpRightIcon } from 'lucide-react'; -import { MouseEvent, useState } from 'react'; +import { useEffect, useState } from 'react'; import { NavigateFunction, useNavigate } from 'react-router-dom'; export type ViewOptionType = 'tile' | 'list'; export interface IListViewProps { option?: ViewOptionType; - data: IProjectProps[]; + data?: IProjectProps[]; navi: NavigateFunction; } @@ -37,7 +37,11 @@ const ListView = ({ option = 'list', data }: Omit) => { }; const List = ({ data, navi }: IListViewProps) => { - const [items, setItems] = useState(data); + const [items, setItems] = useState(() => { + const initialData = data || []; + return initialData.map((item) => ({ ...item, checked: false })); + }); + const [masterChecked, setMasterChecked] = useState(false); const { checkedList, handleCheckedList } = useChecked(); const handleCheckboxChange = (id: number): void => { @@ -54,18 +58,22 @@ const List = ({ data, navi }: IListViewProps) => { }; const handleSelectAll = (): void => { - const allChecked = items.every((item) => item.checked); setItems( items.map((item) => ({ ...item, - checked: !allChecked, + checked: !masterChecked, })) ); - !allChecked + !masterChecked ? handleCheckedList.addAll(items.map((item) => item.projectId)) : handleCheckedList.removeAll(); }; + useEffect(() => { + const allChecked = items.every((item) => item.checked); + setMasterChecked(allChecked); + }, [items]); + const onTest = () => { alert(`삭제요청 리스트: ${checkedList}`); // 삭제요청 API 호출 @@ -77,7 +85,7 @@ const List = ({ data, navi }: IListViewProps) => { - + Name Last modified @@ -125,22 +133,39 @@ const List = ({ data, navi }: IListViewProps) => { }; const Tile = ({ data, navi }: IListViewProps) => { + const onTest = (e: React.MouseEvent) => { + // 체크박스 클릭 동작 + }; return (
    - {data.map((item, idx) => ( -
  • { - navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); - }} - > - -
    썸네일
    -
    {item.name}
    -
    • - ))} + {data ? ( + data.map((item, idx) => ( +
  • { + navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); + }} + > + + ) => { + e.stopPropagation(); + onTest(e); + }} + /> +
    썸네일
    +
    {item.name}
    +
    • + )) + ) : ( +
    +

    데이터를 불러오는 중입니다...

    +
    + )}
); From ec4488a579197b846d6803d336680553b118a91d Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Thu, 21 Nov 2024 11:38:08 +0900 Subject: [PATCH 36/73] =?UTF-8?q?feat:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20(#32)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar/sidebarContent/EditContent.tsx | 86 +++++++++++++------ 1 file changed, 60 insertions(+), 26 deletions(-) diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index 4f47e37..38b28c9 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -7,20 +7,45 @@ import { Button } from '@/components/ui/button'; const EditContent = () => { const [selectedFavorite, setSelectedFavorite] = useState('성우 이름'); const [selectedVoice, setSelectedVoice] = useState('성우 이름'); + const [isPreviewLoading, setIsPreviewLoading] = useState(false); + const [isApplyLoading, setIsApplyLoading] = useState(false); - // 슬라이더 데이터 배열 - const sliders = [ - { id: 'speed', label: '속도', value: 0, setValue: useState(0) }, - { id: 'height', label: '높이', value: 0, setValue: useState(0) }, - { - id: 'endProcessing', - label: '끝음 처리', - value: 0, - setValue: useState(0), - }, - { id: 'endLength', label: '끝음 길이', value: 0, setValue: useState(0) }, - { id: 'volume', label: '볼륨 조절', value: 0, setValue: useState(0) }, - ]; + const [sliders, setSliders] = useState({ + speed: 0, + height: 0, + endProcessing: 0, + endLength: 0, + volume: 0, + }); + + const handleSliderChange = (id: string, value: number) => { + setSliders((prev) => ({ + ...prev, + [id]: value, + })); + }; + + const handlePreview = async () => { + try { + setIsPreviewLoading(true); + // 미리 듣기 로직 구현 + } catch (error) { + console.error('미리 듣기 실패:', error); + } finally { + setIsPreviewLoading(false); + } + }; + + const handleApply = async () => { + try { + setIsApplyLoading(true); + // 전체 적용 로직 구현 + } catch (error) { + console.error('전체 적용 실패:', error); + } finally { + setIsApplyLoading(false); + } + }; return (
@@ -43,23 +68,32 @@ const EditContent = () => { /> {/* 슬라이더 */} - {sliders.map((slider) => { - const [value, setValue] = slider.setValue; - return ( - setValue(v[0])} - /> - ); - })} + {Object.entries(sliders).map(([id, value]) => ( + handleSliderChange(id, v[0])} + /> + ))}
{/* 하단 버튼 */}
- - + +
); From ae464d6c0d210cce37812ad5d4f72f8aa79cac65 Mon Sep 17 00:00:00 2001 From: Haeun Date: Thu, 21 Nov 2024 17:58:01 +0900 Subject: [PATCH 37/73] =?UTF-8?q?feature:=20github=20actions=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 --- .github/workflows/main.yml | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 .github/workflows/main.yml diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..25dc353 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,40 @@ +name: Deploy to AWS + +on: + push: + branches: + - develop + +jobs: + deploy: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Install dependencies + run: npm install + + - name: Build project + run: npm run build + + - name: Deploy to S3 + uses: jakejarvis/s3-sync-action@v0.5.1 + with: + args: --delete + env: + AWS_S3_BUCKET: <5re5park-s3-frontend> # S3 버킷 이름 + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + AWS_REGION: # 예: us-east-1 + SOURCE_DIR: ./dist # 빌드된 정적 파일 경로 + + - name: Invalidate CloudFront cache + uses: awact/actions-cloudfront-invalidate@v1.3 + with: + distribution-id: + paths: '/*' + env: + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} From 61f8b143ace58de14ba648536022a3a1ecf86bbb Mon Sep 17 00:00:00 2001 From: Haeun Date: Thu, 21 Nov 2024 17:59:13 +0900 Subject: [PATCH 38/73] =?UTF-8?q?feature:=20=EB=B0=B0=ED=8F=AC=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/errorPageComponent/notFound.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/errorPageComponent/notFound.tsx b/src/components/errorPageComponent/notFound.tsx index c93f160..a329877 100644 --- a/src/components/errorPageComponent/notFound.tsx +++ b/src/components/errorPageComponent/notFound.tsx @@ -3,6 +3,7 @@ const NotFound: React.FC = () => {

404 - 페이지를 찾을 수 없습니다

요청하신 페이지가 존재하지 않습니다. URL을 확인해주세요.

+

aws배포 테스트

); }; From b36e10c804363f3807cee9d05b939d29767d987a Mon Sep 17 00:00:00 2001 From: haeun <110523397+haruyam15@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:11:09 +0900 Subject: [PATCH 39/73] =?UTF-8?q?[Feature]=20github=20actions=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20(#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 --- .github/workflows/main.yml | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 25dc353..42be55f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -24,17 +24,29 @@ jobs: with: args: --delete env: - AWS_S3_BUCKET: <5re5park-s3-frontend> # S3 버킷 이름 + AWS_S3_BUCKET: 5re5park-s3-frontend # S3 버킷 이름 AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_REGION: # 예: us-east-1 + AWS_REGION: ap-northeast-2 # 예: us-east-1 SOURCE_DIR: ./dist # 빌드된 정적 파일 경로 - name: Invalidate CloudFront cache uses: awact/actions-cloudfront-invalidate@v1.3 with: - distribution-id: + distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} paths: '/*' env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + + + +- name: Invalidate CloudFront Cache + run: | + aws cloudfront create-invalidation \ + --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \ + --paths "/*" + env: + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + AWS_REGION: us-east-1 \ No newline at end of file From 1fd4dfc431f75679b500ce0a740c8245506d6e55 Mon Sep 17 00:00:00 2001 From: haeun <110523397+haruyam15@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:12:39 +0900 Subject: [PATCH 40/73] =?UTF-8?q?[Feature]=20github=20actions=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EC=88=98=EC=A0=95=20(#40)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 * feature: actions파일수정 From f94790b45a1a53498896dc42b784a9687aab8321 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:19:34 +0900 Subject: [PATCH 41/73] =?UTF-8?q?[Feature]=20github=20actions=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 * feature: actions파일수정 * feat: main.yml 코드 수정 --------- Co-authored-by: Haeun --- .github/workflows/main.yml | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 42be55f..2062ed2 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -38,15 +38,4 @@ jobs: env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - - - -- name: Invalidate CloudFront Cache - run: | - aws cloudfront create-invalidation \ - --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \ - --paths "/*" - env: - AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_REGION: us-east-1 \ No newline at end of file +# 이거 진짜로 되는걸까 From 70cb12a3cbcb9c46addb8fc74291f6e7c97d3f74 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:26:48 +0900 Subject: [PATCH 42/73] =?UTF-8?q?[Feature]=20github=20actions=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20(#42)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 * feature: actions파일수정 * feat: main.yml 코드 수정 * feat: github actions 코드 수정4 --------- Co-authored-by: Haeun --- .github/workflows/main.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 2062ed2..e10f460 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -32,9 +32,7 @@ jobs: - name: Invalidate CloudFront cache uses: awact/actions-cloudfront-invalidate@v1.3 - with: - distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} - paths: '/*' + run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*" env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} From 0c1998309875dc4e3c1b902bc6173804ea520ebb Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:29:11 +0900 Subject: [PATCH 43/73] =?UTF-8?q?[Feature]=20aws=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20(#43)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 * feature: actions파일수정 * feat: main.yml 코드 수정 * feat: github actions 코드 수정4 * feat: 코드수정 --------- Co-authored-by: Haeun --- .github/workflows/main.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e10f460..f815045 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -31,7 +31,6 @@ jobs: SOURCE_DIR: ./dist # 빌드된 정적 파일 경로 - name: Invalidate CloudFront cache - uses: awact/actions-cloudfront-invalidate@v1.3 run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*" env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} From 7d22114fba6dd3bf18294a222673f96d4cecaef2 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:33:47 +0900 Subject: [PATCH 44/73] =?UTF-8?q?[feature]=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=EC=A4=91=20=EB=B9=8C=EB=93=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#44)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: actions파일수정 * feature: actions파일수정 * feature: actions파일수정 * feat: main.yml 코드 수정 * feat: github actions 코드 수정4 * feat: 코드수정 * feat: 빌드되도록 코드 야매수정 --------- Co-authored-by: Haeun --- src/components/ui/sidebar.tsx | 8 ++++---- src/hooks/useSignUpForm.tsx | 24 ++++++++++++------------ tsconfig.app.json | 4 ++-- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx index 07050f9..e62f376 100644 --- a/src/components/ui/sidebar.tsx +++ b/src/components/ui/sidebar.tsx @@ -203,7 +203,7 @@ const Sidebar = React.forwardRef< } side={side} > -
{children}
+
{children}
); @@ -212,7 +212,7 @@ const Sidebar = React.forwardRef< return (
>(({ className, ...props }, ref) => { return ( - {showIcon && ( )} diff --git a/src/hooks/useSignUpForm.tsx b/src/hooks/useSignUpForm.tsx index 048eaa8..af8248b 100644 --- a/src/hooks/useSignUpForm.tsx +++ b/src/hooks/useSignUpForm.tsx @@ -38,12 +38,12 @@ export const useSignUpForm = () => { const handleInputChange = (name: keyof FormData, value: string) => { let processedValue = value; - + if (name === 'phoneNumber') { processedValue = value.replace(/[^\d]/g, ''); } - setFormData(prev => ({ ...prev, [name]: processedValue })); + setFormData((prev) => ({ ...prev, [name]: processedValue })); }; const validateForm = () => { @@ -78,12 +78,12 @@ export const useSignUpForm = () => { if (!formData.detailAddress) { newErrors.detailAddress = ERROR_MESSAGES.detailAddress; } - const requiredTerms = terms.filter(term => term.chkTerm); - const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; - - if (!allRequiredTermsChecked) { - newErrors.terms = ERROR_MESSAGES.terms; - } + // const requiredTerms = terms.filter(term => term.chkTerm); + // const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; + + // if (!allRequiredTermsChecked) { + // newErrors.terms = ERROR_MESSAGES.terms; + // } setErrors(newErrors); return Object.keys(newErrors).length === 0; @@ -92,11 +92,11 @@ export const useSignUpForm = () => { const handleTermChange = (termCode: string, checked: boolean) => { if (termCode === 'all') { // 전체 동의 로직 - const updatedTerms = terms.map(term => ({ ...term, agreed: checked })); + const updatedTerms = terms.map((term) => ({ ...term, agreed: checked })); setTerms(updatedTerms); } else { // 개별 약관 동의 로직 - const updatedTerms = terms.map(term => + const updatedTerms = terms.map((term) => term.termCode === termCode ? { ...term, agreed: checked } : term ); setTerms(updatedTerms); @@ -111,6 +111,6 @@ export const useSignUpForm = () => { setIsOpen, handleInputChange, validateForm, - handleTermChange + handleTermChange, }; -}; \ No newline at end of file +}; diff --git a/tsconfig.app.json b/tsconfig.app.json index e7c25ad..6458182 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -17,8 +17,8 @@ /* Linting */ "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, + "noUnusedLocals": false, + "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true, From 78c5169fde77dc6fec9bd3596f89dc746d19f5f8 Mon Sep 17 00:00:00 2001 From: wonjichoi Date: Fri, 22 Nov 2024 10:54:03 +0900 Subject: [PATCH 45/73] =?UTF-8?q?[Feat]=20tts=20=EC=A4=91=EC=95=99=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=B0=BD=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1=20(#45)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: TTS 작업창 페이지 퍼블리싱(#29) * feat: TTS 텍스트 선택 삭제 기능(#29) * feat: 텍스트 입력시에 텍스트 추가 -> 저장/취소 버튼 변경 기능추가(#29) * feat: 상단 옵션 표시 버튼 추가(#29) * feat: 상단 옵션 표시 버튼 여백 추가(#29) * feat: 프로젝트 타이틀 수정할 수 있게 input 으로 변경(#29) * feat: useOutsideClick, useTextInputs 와 tts 컴포넌트 분리 (#29) * feat: CustomCheckbox 컴포넌트 추가 (#29) * fix: CustomCheckbox ui 안나오는 문제 해결 (#29) * feat: 텍스트 입력 최대 길이와 특수문자 제한 (#29) * feat: 프로젝트 이름 최대 길이제한 추가(#29) * feat: 필요없는 props 삭제 (#29) * fix: TTSControlsProps 추가/TTS.tsx 오류 해결 (#29) --- src/components/common/CustomCheckbox.tsx | 41 ++++++++++ src/components/tts/TTSControls.tsx | 72 +++++++++++++++++ src/components/tts/TTSHeader.tsx | 30 ++++++++ src/components/tts/TextInputList.tsx | 44 +++++++++++ src/hooks/useOutsideClick.ts | 19 +++++ src/hooks/useSignUpForm.tsx | 19 +++-- src/hooks/useTextInputs.ts | 98 ++++++++++++++++++++++++ src/pages/TTS.tsx | 72 ++++++++++++++++- src/types/tts.ts | 12 +++ 9 files changed, 396 insertions(+), 11 deletions(-) create mode 100644 src/components/common/CustomCheckbox.tsx create mode 100644 src/components/tts/TTSControls.tsx create mode 100644 src/components/tts/TTSHeader.tsx create mode 100644 src/components/tts/TextInputList.tsx create mode 100644 src/hooks/useOutsideClick.ts create mode 100644 src/hooks/useTextInputs.ts create mode 100644 src/types/tts.ts diff --git a/src/components/common/CustomCheckbox.tsx b/src/components/common/CustomCheckbox.tsx new file mode 100644 index 0000000..1006e75 --- /dev/null +++ b/src/components/common/CustomCheckbox.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; +import { cn } from "@/lib/utils"; +import { CheckIcon } from "@radix-ui/react-icons"; + +interface CustomCheckboxProps { + id: string; + checked: boolean; + onCheckedChange: (checked: boolean) => void; + label?: string; + className?: string; +} + +export const CustomCheckbox: React.FC = ({ + id, + checked, + onCheckedChange, + label, + className +}) => { + return ( +
+ + + + + + {label && } +
+ ); +}; \ No newline at end of file diff --git a/src/components/tts/TTSControls.tsx b/src/components/tts/TTSControls.tsx new file mode 100644 index 0000000..1557954 --- /dev/null +++ b/src/components/tts/TTSControls.tsx @@ -0,0 +1,72 @@ +import { TTSState } from "@/types/tts"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Repeat2 } from "lucide-react"; +import { CustomCheckbox } from "@/components/common/CustomCheckbox"; + +interface TTSControlsProps { + state: TTSState; + toggleAllSelection: () => void; + deleteSelectedInputs: () => void; + addTextInput: () => void; + saveInput: () => void; + cancelEdit: () => void; +} + +export const TTSControls: React.FC = ({ + state, + toggleAllSelection, + deleteSelectedInputs, +}) => { + const anySelected = state.textInputs.some(input => input.isSelected); + + return ( + <> +
+
+
+ + +
+ +
+ +
+
+ + +
+
+ + + + + +
+
+
+ + ); +}; + diff --git a/src/components/tts/TTSHeader.tsx b/src/components/tts/TTSHeader.tsx new file mode 100644 index 0000000..43e7391 --- /dev/null +++ b/src/components/tts/TTSHeader.tsx @@ -0,0 +1,30 @@ +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; + +interface TTSHeaderProps { + projectName: string; + onProjectNameChange: (e: React.ChangeEvent) => void; +} + +export const TTSHeader: React.FC = ({ + projectName, + onProjectNameChange +}) => { + return ( +
+ +
+ {new Date().toLocaleDateString()} +
+ + +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/tts/TextInputList.tsx b/src/components/tts/TextInputList.tsx new file mode 100644 index 0000000..cd089c6 --- /dev/null +++ b/src/components/tts/TextInputList.tsx @@ -0,0 +1,44 @@ +import { TTSState } from "@/types/tts"; +import { CustomCheckbox } from "@/components/common/CustomCheckbox"; +import { Input } from "@/components/ui/input"; + +interface TextInputListProps { + state: TTSState; + toggleSelection: (id: number) => void; + handleTextChange: (id: number, text: string) => void; + cancelEdit: () => void; +} + +export const TextInputList: React.FC = ({ + state, + toggleSelection, + handleTextChange, + cancelEdit +}) => { + return ( + <> + {state.textInputs.map((input) => ( +
+ toggleSelection(input.id)} + /> + handleTextChange(input.id, e.target.value)} + placeholder="내용을 입력해주세요.(최대 2,000자)" + onFocus={() => { + if (input.text === '') { + cancelEdit(); + } + }} + /> +
+ ))} + + ); +}; diff --git a/src/hooks/useOutsideClick.ts b/src/hooks/useOutsideClick.ts new file mode 100644 index 0000000..6deff0c --- /dev/null +++ b/src/hooks/useOutsideClick.ts @@ -0,0 +1,19 @@ +import { useEffect, RefObject } from 'react'; + +export const useOutsideClick = ( + ref: RefObject, + callback: () => void +) => { + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + callback(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref, callback]); +}; \ No newline at end of file diff --git a/src/hooks/useSignUpForm.tsx b/src/hooks/useSignUpForm.tsx index af8248b..62c7bfc 100644 --- a/src/hooks/useSignUpForm.tsx +++ b/src/hooks/useSignUpForm.tsx @@ -78,12 +78,15 @@ export const useSignUpForm = () => { if (!formData.detailAddress) { newErrors.detailAddress = ERROR_MESSAGES.detailAddress; } - // const requiredTerms = terms.filter(term => term.chkTerm); - // const allRequiredTermsChecked = requiredTerms.every(term => document.getElementById(term.termCode) as HTMLInputElement)?.checked; - - // if (!allRequiredTermsChecked) { - // newErrors.terms = ERROR_MESSAGES.terms; - // } + const requiredTerms = terms.filter(term => term.chkTerm); + const allRequiredTermsChecked = requiredTerms.every(term => { + const element = document.getElementById(term.termCode); + return element instanceof HTMLInputElement ? element.checked : false; + }); + + if (!allRequiredTermsChecked) { + newErrors.terms = ERROR_MESSAGES.terms; + } setErrors(newErrors); return Object.keys(newErrors).length === 0; @@ -91,8 +94,8 @@ export const useSignUpForm = () => { const handleTermChange = (termCode: string, checked: boolean) => { if (termCode === 'all') { - // 전체 동의 로직 - const updatedTerms = terms.map((term) => ({ ...term, agreed: checked })); + // 전체 동의 + const updatedTerms = terms.map(term => ({ ...term, agreed: checked })); setTerms(updatedTerms); } else { // 개별 약관 동의 로직 diff --git a/src/hooks/useTextInputs.ts b/src/hooks/useTextInputs.ts new file mode 100644 index 0000000..3b448b2 --- /dev/null +++ b/src/hooks/useTextInputs.ts @@ -0,0 +1,98 @@ +import { useState } from 'react'; +import { TextInput, TTSState } from '@/types/tts'; + +export const useTextInputs = () => { + const [state, setState] = useState({ + textInputs: [{ id: 0, text: '', isSelected: false, isEditing: false }], + isAllSelected: false, + editingId: null + }); + + const addTextInput = () => { + const newId = state.textInputs.length > 0 + ? Math.max(...state.textInputs.map(input => input.id)) + 1 + : 1; + + setState(prev => ({ + ...prev, + textInputs: [ + ...prev.textInputs, + { id: newId, text: '', isSelected: false, isEditing: false } + ] + })); + }; + + const handleTextChange = (id: number, newText: string) => { + if (newText.length > 1000) return; + if (!/^[가-힣a-zA-Z0-9\s.,!?]*$/.test(newText)) return; + + setState(prev => ({ + ...prev, + textInputs: prev.textInputs.map(input => + input.id === id ? {...input, text: newText} : input + ), + editingId: prev.editingId === null ? id : prev.editingId + })); + }; + + const toggleSelection = (id: number) => { + setState(prev => ({ + ...prev, + textInputs: prev.textInputs.map(input => + input.id === id + ? {...input, isSelected: !input.isSelected} + : input + ) + })); + }; + + const toggleAllSelection = () => { + setState(prev => { + const newIsAllSelected = !prev.isAllSelected; + return { + ...prev, + isAllSelected: newIsAllSelected, + textInputs: prev.textInputs.map(input => ({ + ...input, + isSelected: newIsAllSelected + })) + }; + }); + }; + + const deleteSelectedInputs = () => { + setState(prev => ({ + ...prev, + textInputs: prev.textInputs.filter(input => !input.isSelected), + isAllSelected: false + })); + }; + + const saveInput = () => { + setState(prev => ({ + ...prev, + editingId: null + })); + }; + + const cancelEdit = () => { + setState(prev => ({ + ...prev, + textInputs: prev.textInputs.map(input => + input.id === prev.editingId ? { ...input, text: '' } : input + ), + editingId: null + })); + }; + + return { + state, + addTextInput, + handleTextChange, + toggleSelection, + toggleAllSelection, + deleteSelectedInputs, + saveInput, + cancelEdit + }; +}; \ No newline at end of file diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx index bc80e80..9befbe0 100644 --- a/src/pages/TTS.tsx +++ b/src/pages/TTS.tsx @@ -1,8 +1,74 @@ +import React, { useRef } from 'react'; import { useParams } from 'react-router-dom'; -const TTS = () => { +import { useTextInputs } from '@/hooks/useTextInputs'; +import { useOutsideClick } from '@/hooks/useOutsideClick'; +import { TTSHeader } from '@/components/tts/TTSHeader'; +import { TTSControls } from '@/components/tts/TTSControls'; +import { TextInputList } from '@/components/tts/TextInputList'; +import { Button } from '@/components/ui/button'; + +const TTS: React.FC = () => { const { projectId } = useParams<{ projectId: string }>(); - return
tts 생성 페이지 프로젝트 ID: {projectId}
; + const [projectName, setProjectName] = React.useState(projectId || ''); + const containerRef = useRef(null); + + const { + state, + addTextInput, + handleTextChange, + toggleSelection, + toggleAllSelection, + deleteSelectedInputs, + saveInput, + cancelEdit + } = useTextInputs(); + + useOutsideClick(containerRef, () => { + if (state.editingId !== null) { + cancelEdit(); + } + }); + + const handleProjectNameChange = (e: React.ChangeEvent) => { + setProjectName(e.target.value); + }; + + return ( +
+ + + + + + +
+ {state.editingId !== null ? ( + <> + + + + ) : ( + + )} +
+
+ ); }; -export default TTS; +export default TTS; \ No newline at end of file diff --git a/src/types/tts.ts b/src/types/tts.ts new file mode 100644 index 0000000..ffec1d5 --- /dev/null +++ b/src/types/tts.ts @@ -0,0 +1,12 @@ +export interface TextInput { + id: number; + text: string; + isSelected: boolean; + isEditing: boolean; +} + +export interface TTSState { + textInputs: TextInput[]; + isAllSelected: boolean; + editingId: number | null; +} \ No newline at end of file From 02a75b8d2bc973512f08d14b4d8e4dd6601cb72a Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Fri, 22 Nov 2024 10:57:41 +0900 Subject: [PATCH 46/73] =?UTF-8?q?[Feature]=EC=9A=B0=EC=B8=A1=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EA=B4=80=EB=A0=A8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: speed 슬라이더에서 버튼으로 변경 (#46) * feat: 프로젝트 우측 사이드바 컴포넌트화 (#46) * feat: 홈에서 newProject 누르면 연결안되는 오류 해결 (#46) --- src/components/sidebar/ConcatSidebar.tsx | 10 ++ src/components/sidebar/TTSSidebar.tsx | 48 +++++++++ src/components/sidebar/VCSidebar.tsx | 10 ++ .../sidebar/sidebarContent/EditContent.tsx | 76 +++++++++---- src/components/ui/sliderControl.tsx | 11 +- src/layout/ProjectLayout.tsx | 100 ++++++++---------- src/routes/router.tsx | 31 +++--- 7 files changed, 192 insertions(+), 94 deletions(-) create mode 100644 src/components/sidebar/ConcatSidebar.tsx create mode 100644 src/components/sidebar/TTSSidebar.tsx create mode 100644 src/components/sidebar/VCSidebar.tsx diff --git a/src/components/sidebar/ConcatSidebar.tsx b/src/components/sidebar/ConcatSidebar.tsx new file mode 100644 index 0000000..ad8eca3 --- /dev/null +++ b/src/components/sidebar/ConcatSidebar.tsx @@ -0,0 +1,10 @@ +const ConcatSidebar = () => { + return ( +
+

Concat 설정

+

여기에는 Concat 관련 설정 내용이 들어갑니다.

+
+ ); +}; + +export default ConcatSidebar; diff --git a/src/components/sidebar/TTSSidebar.tsx b/src/components/sidebar/TTSSidebar.tsx new file mode 100644 index 0000000..75aece4 --- /dev/null +++ b/src/components/sidebar/TTSSidebar.tsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import EditContent from '@/components/sidebar/sidebarContent/EditContent'; + +const FileContent = () => { + return ( +
+
+ +
+ +
+ +
+
+ ); +}; + +const TTSSidebar = () => { + const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); + + return ( + <> +
+ + +
+ {/* 탭별 콘텐츠 */} + {activeTab === 'file' ? : } + + ); +}; + +export default TTSSidebar; diff --git a/src/components/sidebar/VCSidebar.tsx b/src/components/sidebar/VCSidebar.tsx new file mode 100644 index 0000000..cc1f0da --- /dev/null +++ b/src/components/sidebar/VCSidebar.tsx @@ -0,0 +1,10 @@ +const VCSidebar = () => { + return ( +
+

VC 설정

+

여기에는 VC 관련 설정 내용이 들어갑니다.

+
+ ); +}; + +export default VCSidebar; diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index 38b28c9..2309813 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; - import { DropdownSelector } from '@/components/ui/dropDownSelector'; import { SliderControl } from '@/components/ui/sliderControl'; import { Button } from '@/components/ui/button'; @@ -10,25 +9,34 @@ const EditContent = () => { const [isPreviewLoading, setIsPreviewLoading] = useState(false); const [isApplyLoading, setIsApplyLoading] = useState(false); - const [sliders, setSliders] = useState({ - speed: 0, - height: 0, - endProcessing: 0, - endLength: 0, - volume: 0, - }); + // 속도 값을 블럭으로 표현 + const speedValues = [0.25, 0.5, 1, 2, 4]; + const [selectedSpeed, setSelectedSpeed] = useState(1); // 기본값 1 + + const handleSpeedClick = (value: number) => { + setSelectedSpeed(value); + }; + + const [sliders, setSliders] = useState([ + { id: 'pitch', value: 0.0, label: '음높이', min: -20.0, max: 20.0 }, + { id: 'volume', value: 0.0, label: '음량', min: -10.0, max: 10.0 }, + ]); const handleSliderChange = (id: string, value: number) => { - setSliders((prev) => ({ - ...prev, - [id]: value, - })); + setSliders((prev) => + prev.map((slider) => (slider.id === id ? { ...slider, value } : slider)) + ); }; const handlePreview = async () => { try { setIsPreviewLoading(true); - // 미리 듣기 로직 구현 + console.log( + '미리 듣기: 속도 값 -', + selectedSpeed, + ', 음높이 및 음량 값 -', + sliders + ); } catch (error) { console.error('미리 듣기 실패:', error); } finally { @@ -39,7 +47,12 @@ const EditContent = () => { const handleApply = async () => { try { setIsApplyLoading(true); - // 전체 적용 로직 구현 + console.log( + '전체 적용: 속도 값 -', + selectedSpeed, + ', 음높이 및 음량 값 -', + sliders + ); } catch (error) { console.error('전체 적용 실패:', error); } finally { @@ -58,7 +71,6 @@ const EditContent = () => { onChange={setSelectedFavorite} options={['Wimon', '원준', 'James']} /> - {/* 보이스 옵션 Dropdown */} { options={['Wimon', '원준', 'James']} /> - {/* 슬라이더 */} - {Object.entries(sliders).map(([id, value]) => ( + {/* 속도 블럭 선택 */} +
+ +
+ {speedValues.map((value) => ( + + ))} +
+
+ + {/* 음높이 및 음량 슬라이더 */} + {sliders.map((slider) => ( handleSliderChange(id, v[0])} + key={slider.id} + label={slider.label} + value={slider.value} + onChange={(v) => handleSliderChange(slider.id, v[0])} + min={slider.min} + max={slider.max} /> ))}
diff --git a/src/components/ui/sliderControl.tsx b/src/components/ui/sliderControl.tsx index 5ca391d..47f1db9 100644 --- a/src/components/ui/sliderControl.tsx +++ b/src/components/ui/sliderControl.tsx @@ -4,10 +4,14 @@ export const SliderControl = ({ label, value, onChange, + min, + max, }: { label: string; value: number; onChange: (value: number[]) => void; + min: number; + max: number; }) => { return (
@@ -18,12 +22,13 @@ export const SliderControl = ({ onChange(v)} - max={100} - min={-100} + max={max} + min={min} + step={0.1} // 소수점 조정을 위한 step 추가 className='flex-1' /> - {value ? value : '없음'} + {value ? value.toFixed(2) : '기본'}
diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index 6a8e362..fb9035c 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -1,37 +1,18 @@ -import { Outlet, Link, useParams } from 'react-router-dom'; +import ConcatSidebar from '@/components/sidebar/ConcatSidebar'; +import TTSSidebar from '@/components/sidebar/TTSSidebar'; +import VCSidebar from '@/components/sidebar/VCSidebar'; +import { ChevronDown, ChevronUp } from 'lucide-react'; import { useState } from 'react'; -import { ChevronDown, ChevronUp, CircleHelp } from 'lucide-react'; import { useHotkeys } from 'react-hotkeys-hook'; -import { Button } from '@/components/ui/button'; -import EditContent from '@/components/sidebar/sidebarContent/EditContent'; - -const FileContent = () => { - return ( -
-
- -
- -
- - -
-
- ); -}; +import { Link, useParams } from 'react-router-dom'; +import TTS from '@/pages/TTS'; +import VC from '@/pages/VC'; +import Concat from '@/pages/Concat'; const ProjectLayout = () => { // Footer 상태 관리 (열림/닫힘 여부) const [isFooterExpanded, setIsFooterExpanded] = useState(false); - - const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); - - // 현재 URL에서 projectId 가져오기 - const { projectId } = useParams(); + const { selectedMenu, projectId } = useParams(); // Footer 토글 함수 const toggleFooter = () => { @@ -44,25 +25,46 @@ const ProjectLayout = () => { alert('저장?'); }); + // 컴포넌트를 조건부로 렌더링 + let ContentComponent; + let SidebarComponent; + + switch (selectedMenu) { + case 'tts': + ContentComponent = ; + SidebarComponent = ; + break; + case 'vc': + ContentComponent = ; + SidebarComponent = ; + break; + case 'concat': + ContentComponent = ; + SidebarComponent = ; + break; + default: + ContentComponent =
잘못된 경로입니다.
; + } + return (
{/* 헤더 */}
-

로고

+

로고

diff --git a/src/routes/router.tsx b/src/routes/router.tsx index b2a9378..002ca1e 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,27 +1,23 @@ -import ErrorBoundary from '@/components/errorPageComponent/errorBoundary'; -import NotFound from '@/components/errorPageComponent/notFound'; -import HomeLayout from '@/layout/HomeLayout'; -import Layout from '@/layout/Layout'; +import { createBrowserRouter, Navigate } from 'react-router-dom'; import ProjectLayout from '@/layout/ProjectLayout'; import Concat from '@/pages/Concat'; +import TTS from '@/pages/TTS'; +import VC from '@/pages/VC'; +import ProtectedRoute from '@/routes/ProtectedRoute'; +import HomeLayout from '@/layout/HomeLayout'; +import Layout from '@/layout/Layout'; import Home from '@/pages/Home'; import MyProject from '@/pages/MyProject'; import Profile from '@/pages/Profile'; import ResetPassword from '@/pages/ResetPassword'; import SignIn from '@/pages/SignIn'; import SignUp from '@/pages/SignUp'; -import TTS from '@/pages/TTS'; -import VC from '@/pages/VC'; -import ProtectedRoute from '@/routes/ProtectedRoute'; +import ErrorBoundary from '@/components/errorPageComponent/errorBoundary'; +import NotFound from '@/components/errorPageComponent/notFound'; import PublicRoute from '@/routes/PublicRoute'; -import { createBrowserRouter } from 'react-router-dom'; const isAuthenticated = true; // 실제 로그인 상태를 가져오는 로직으로 대체 -// import { useAuthStore } from '@/stores/authStore'; - -// const isAuthenticated = useAuthStore((state) => state.isAuthenticated); - export const router = createBrowserRouter([ // 홈 레이아웃 { @@ -67,9 +63,14 @@ export const router = createBrowserRouter([ path: 'project', element: , // 프로젝트 전용 레이아웃 children: [ - { index: true, path: 'tts/:projectId', element: }, - { path: 'vc/:projectId', element: }, - { path: 'concat/:projectId', element: }, + // 프로젝트 기본 페이지: `/project`로 접근 시 기본적으로 리디렉션하거나 안내 페이지 제공 + { + index: true, + element: , + }, + { path: ':selectedMenu/:projectId', element: }, + { path: ':selectedMenu/:projectId', element: }, + { path: ':selectedMenu/:projectId', element: }, ], }, ], From 454474ea82b0a0972fa7c62dd0cb3bf103dbf685 Mon Sep 17 00:00:00 2001 From: haeun <110523397+haruyam15@users.noreply.github.com> Date: Fri, 22 Nov 2024 11:02:19 +0900 Subject: [PATCH 47/73] =?UTF-8?q?[Feature]=20MSW=20=EC=85=8B=ED=8C=85=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: mock server 구축 (#37) * feature: MSW 셋팅 (#37) --- package-lock.json | 600 ++++++++++++++++++++++++++++++++++++ package.json | 7 + public/mockServiceWorker.js | 295 ++++++++++++++++++ src/main.tsx | 21 +- src/mocks/browser.ts | 4 + src/mocks/handlers.ts | 32 ++ src/pages/SignIn.tsx | 24 +- 7 files changed, 977 insertions(+), 6 deletions(-) create mode 100644 public/mockServiceWorker.js create mode 100644 src/mocks/browser.ts create mode 100644 src/mocks/handlers.ts diff --git a/package-lock.json b/package-lock.json index 990c61c..7e26b6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", "@tanstack/react-table": "^8.20.5", + "@types/axios": "^0.14.4", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -46,6 +47,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.11.0", + "msw": "^2.6.5", "postcss": "^8.4.47", "prettier": "^3.3.3", "tailwindcss": "^3.4.14", @@ -367,6 +369,34 @@ "node": ">=6.9.0" } }, + "node_modules/@bundled-es-modules/cookie": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz", + "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==", + "dev": true, + "dependencies": { + "cookie": "^0.7.2" + } + }, + "node_modules/@bundled-es-modules/statuses": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz", + "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==", + "dev": true, + "dependencies": { + "statuses": "^2.0.1" + } + }, + "node_modules/@bundled-es-modules/tough-cookie": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz", + "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==", + "dev": true, + "dependencies": { + "@types/tough-cookie": "^4.0.5", + "tough-cookie": "^4.1.4" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -999,6 +1029,118 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@inquirer/confirm": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.2.tgz", + "integrity": "sha512-KJLUHOaKnNCYzwVbryj3TNBxyZIrr56fR5N45v6K9IPrbT6B7DcudBMfylkV1A8PUdJE15mybkEQyp2/ZUpxUA==", + "dev": true, + "dependencies": { + "@inquirer/core": "^10.1.0", + "@inquirer/type": "^3.0.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + } + }, + "node_modules/@inquirer/core": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.0.tgz", + "integrity": "sha512-I+ETk2AL+yAVbvuKx5AJpQmoaWhpiTFOg/UJb7ZkMAK4blmtG8ATh5ct+T/8xNld0CZG/2UhtkdMwpgvld92XQ==", + "dev": true, + "dependencies": { + "@inquirer/figures": "^1.0.8", + "@inquirer/type": "^3.0.1", + "ansi-escapes": "^4.3.2", + "cli-width": "^4.1.0", + "mute-stream": "^2.0.0", + "signal-exit": "^4.1.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^6.2.0", + "yoctocolors-cjs": "^2.1.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@inquirer/core/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/@inquirer/core/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/figures": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz", + "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==", + "dev": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/@inquirer/type": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.1.tgz", + "integrity": "sha512-+ksJMIy92sOAiAccGpcKZUc3bYO07cADnscIxHBknEm3uNts3movSmBofc1908BNy5edKscxYeAdaX1NXkHS6A==", + "dev": true, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1064,6 +1206,23 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mswjs/interceptors": { + "version": "0.37.1", + "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.1.tgz", + "integrity": "sha512-SvE+tSpcX884RJrPCskXxoS965Ky/pYABDEhWW6oeSRhpUDLrS5nTvT5n1LLSDVDYvty4imVmXsy+3/ROVuknA==", + "dev": true, + "dependencies": { + "@open-draft/deferred-promise": "^2.2.0", + "@open-draft/logger": "^0.3.0", + "@open-draft/until": "^2.0.0", + "is-node-process": "^1.2.0", + "outvariant": "^1.4.3", + "strict-event-emitter": "^0.5.1" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1099,6 +1258,28 @@ "node": ">= 8" } }, + "node_modules/@open-draft/deferred-promise": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz", + "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==", + "dev": true + }, + "node_modules/@open-draft/logger": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz", + "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==", + "dev": true, + "dependencies": { + "is-node-process": "^1.2.0", + "outvariant": "^1.4.0" + } + }, + "node_modules/@open-draft/until": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz", + "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==", + "dev": true + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -2259,6 +2440,15 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@types/axios": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.4.tgz", + "integrity": "sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==", + "deprecated": "This is a stub types definition. axios provides its own type definitions, so you do not need this installed.", + "dependencies": { + "axios": "*" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2304,6 +2494,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "dev": true + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -2356,6 +2552,12 @@ "@types/react": "*" } }, + "node_modules/@types/statuses": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz", + "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==", + "dev": true + }, "node_modules/@types/tailwindcss": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz", @@ -2363,6 +2565,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/tough-cookie": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", + "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", + "dev": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz", @@ -2665,6 +2873,33 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/ansi-escapes": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", + "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.21.3" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-regex": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", @@ -2979,6 +3214,87 @@ "node": ">=6" } }, + "node_modules/cli-width": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz", + "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==", + "dev": true, + "engines": { + "node": ">= 12" + } + }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/cliui/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/cliui/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -3041,6 +3357,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/cross-spawn": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz", @@ -3603,6 +3928,15 @@ "node": ">=6.9.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-nonce": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", @@ -3688,6 +4022,15 @@ "dev": true, "license": "MIT" }, + "node_modules/graphql": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz", + "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -3710,6 +4053,12 @@ "node": ">= 0.4" } }, + "node_modules/headers-polyfill": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz", + "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==", + "dev": true + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3813,6 +4162,12 @@ "node": ">=0.10.0" } }, + "node_modules/is-node-process": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz", + "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==", + "dev": true + }, "node_modules/is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -4083,6 +4438,59 @@ "dev": true, "license": "MIT" }, + "node_modules/msw": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.5.tgz", + "integrity": "sha512-PnlnTpUlOrj441kYQzzFhzMzMCGFT6a2jKUBG7zSpLkYS5oh8Arrbc0dL8/rNAtxaoBy0EVs2mFqj2qdmWK7lQ==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@bundled-es-modules/cookie": "^2.0.1", + "@bundled-es-modules/statuses": "^1.0.1", + "@bundled-es-modules/tough-cookie": "^0.1.6", + "@inquirer/confirm": "^5.0.0", + "@mswjs/interceptors": "^0.37.0", + "@open-draft/deferred-promise": "^2.2.0", + "@open-draft/until": "^2.1.0", + "@types/cookie": "^0.6.0", + "@types/statuses": "^2.0.4", + "chalk": "^4.1.2", + "graphql": "^16.8.1", + "headers-polyfill": "^4.0.2", + "is-node-process": "^1.2.0", + "outvariant": "^1.4.3", + "path-to-regexp": "^6.3.0", + "strict-event-emitter": "^0.5.1", + "type-fest": "^4.26.1", + "yargs": "^17.7.2" + }, + "bin": { + "msw": "cli/index.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/mswjs" + }, + "peerDependencies": { + "typescript": ">= 4.8.x" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/mute-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz", + "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==", + "dev": true, + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -4181,6 +4589,12 @@ "node": ">= 0.8.0" } }, + "node_modules/outvariant": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz", + "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==", + "dev": true + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -4279,6 +4693,12 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "license": "ISC" }, + "node_modules/path-to-regexp": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", + "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==", + "dev": true + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -4502,6 +4922,15 @@ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", "license": "MIT" }, + "node_modules/psl": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.10.0.tgz", + "integrity": "sha512-KSKHEbjAnpUuAUserOq0FxGXCUrzC3WniuSJhvdbs102rL55266ZcHBqLWOsG30spQMlPdpy7icATiAQehg/iA==", + "dev": true, + "dependencies": { + "punycode": "^2.3.1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4512,6 +4941,12 @@ "node": ">=6" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "dev": true + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -4725,6 +5160,21 @@ "node": ">=8.10.0" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -4884,6 +5334,21 @@ "node": ">=0.10.0" } }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/strict-event-emitter": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz", + "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==", + "dev": true + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", @@ -5136,6 +5601,21 @@ "node": ">=8.0" } }, + "node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "dev": true, + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/ts-api-utils": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz", @@ -5174,6 +5654,18 @@ "node": ">= 0.8.0" } }, + "node_modules/type-fest": { + "version": "4.27.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.27.0.tgz", + "integrity": "sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==", + "dev": true, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/typescript": { "version": "5.6.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz", @@ -5219,6 +5711,15 @@ "dev": true, "license": "MIT" }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", @@ -5260,6 +5761,16 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "dev": true, + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/use-callback-ref": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz", @@ -5482,6 +5993,15 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -5501,6 +6021,74 @@ "node": ">= 14" } }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/yargs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -5514,6 +6102,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/yoctocolors-cjs": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz", + "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/zustand": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz", diff --git a/package.json b/package.json index 9a8a0c8..8bf1f8f 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.19", "@tanstack/react-table": "^8.20.5", + "@types/axios": "^0.14.4", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -48,6 +49,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.11.0", + "msw": "^2.6.5", "postcss": "^8.4.47", "prettier": "^3.3.3", "tailwindcss": "^3.4.14", @@ -59,5 +61,10 @@ "@rollup/rollup-darwin-x64": "^4.26.0", "@rollup/rollup-linux-x64-gnu": "^4.26.0", "@rollup/rollup-win32-x64-msvc": "^4.26.0" + }, + "msw": { + "workerDirectory": [ + "public" + ] } } diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js new file mode 100644 index 0000000..89bce29 --- /dev/null +++ b/public/mockServiceWorker.js @@ -0,0 +1,295 @@ +/* eslint-disable */ +/* tslint:disable */ + +/** + * Mock Service Worker. + * @see https://github.com/mswjs/msw + * - Please do NOT modify this file. + * - Please do NOT serve this file on production. + */ + +const PACKAGE_VERSION = '2.6.5' +const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074' +const IS_MOCKED_RESPONSE = Symbol('isMockedResponse') +const activeClientIds = new Set() + +self.addEventListener('install', function () { + self.skipWaiting() +}) + +self.addEventListener('activate', function (event) { + event.waitUntil(self.clients.claim()) +}) + +self.addEventListener('message', async function (event) { + const clientId = event.source.id + + if (!clientId || !self.clients) { + return + } + + const client = await self.clients.get(clientId) + + if (!client) { + return + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + switch (event.data) { + case 'KEEPALIVE_REQUEST': { + sendToClient(client, { + type: 'KEEPALIVE_RESPONSE', + }) + break + } + + case 'INTEGRITY_CHECK_REQUEST': { + sendToClient(client, { + type: 'INTEGRITY_CHECK_RESPONSE', + payload: { + packageVersion: PACKAGE_VERSION, + checksum: INTEGRITY_CHECKSUM, + }, + }) + break + } + + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId) + + sendToClient(client, { + type: 'MOCKING_ENABLED', + payload: { + client: { + id: client.id, + frameType: client.frameType, + }, + }, + }) + break + } + + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId) + break + } + + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId) + + const remainingClients = allClients.filter((client) => { + return client.id !== clientId + }) + + // Unregister itself when there are no more clients + if (remainingClients.length === 0) { + self.registration.unregister() + } + + break + } + } +}) + +self.addEventListener('fetch', function (event) { + const { request } = event + + // Bypass navigation requests. + if (request.mode === 'navigate') { + return + } + + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return + } + + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). + if (activeClientIds.size === 0) { + return + } + + // Generate unique request ID. + const requestId = crypto.randomUUID() + event.respondWith(handleRequest(event, requestId)) +}) + +async function handleRequest(event, requestId) { + const client = await resolveMainClient(event) + const response = await getResponse(event, client, requestId) + + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. + if (client && activeClientIds.has(client.id)) { + ;(async function () { + const responseClone = response.clone() + + sendToClient( + client, + { + type: 'RESPONSE', + payload: { + requestId, + isMockedResponse: IS_MOCKED_RESPONSE in response, + type: responseClone.type, + status: responseClone.status, + statusText: responseClone.statusText, + body: responseClone.body, + headers: Object.fromEntries(responseClone.headers.entries()), + }, + }, + [responseClone.body], + ) + })() + } + + return response +} + +// Resolve the main client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. +async function resolveMainClient(event) { + const client = await self.clients.get(event.clientId) + + if (activeClientIds.has(event.clientId)) { + return client + } + + if (client?.frameType === 'top-level') { + return client + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + return allClients + .filter((client) => { + // Get only those clients that are currently visible. + return client.visibilityState === 'visible' + }) + .find((client) => { + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id) + }) +} + +async function getResponse(event, client, requestId) { + const { request } = event + + // Clone the request because it might've been already used + // (i.e. its body has been read and sent to the client). + const requestClone = request.clone() + + function passthrough() { + // Cast the request headers to a new Headers instance + // so the headers can be manipulated with. + const headers = new Headers(requestClone.headers) + + // Remove the "accept" header value that marked this request as passthrough. + // This prevents request alteration and also keeps it compliant with the + // user-defined CORS policies. + headers.delete('accept', 'msw/passthrough') + + return fetch(requestClone, { headers }) + } + + // Bypass mocking when the client is not active. + if (!client) { + return passthrough() + } + + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. + if (!activeClientIds.has(client.id)) { + return passthrough() + } + + // Notify the client that a request has been intercepted. + const requestBuffer = await request.arrayBuffer() + const clientMessage = await sendToClient( + client, + { + type: 'REQUEST', + payload: { + id: requestId, + url: request.url, + mode: request.mode, + method: request.method, + headers: Object.fromEntries(request.headers.entries()), + cache: request.cache, + credentials: request.credentials, + destination: request.destination, + integrity: request.integrity, + redirect: request.redirect, + referrer: request.referrer, + referrerPolicy: request.referrerPolicy, + body: requestBuffer, + keepalive: request.keepalive, + }, + }, + [requestBuffer], + ) + + switch (clientMessage.type) { + case 'MOCK_RESPONSE': { + return respondWithMock(clientMessage.data) + } + + case 'PASSTHROUGH': { + return passthrough() + } + } + + return passthrough() +} + +function sendToClient(client, message, transferrables = []) { + return new Promise((resolve, reject) => { + const channel = new MessageChannel() + + channel.port1.onmessage = (event) => { + if (event.data && event.data.error) { + return reject(event.data.error) + } + + resolve(event.data) + } + + client.postMessage( + message, + [channel.port2].concat(transferrables.filter(Boolean)), + ) + }) +} + +async function respondWithMock(response) { + // Setting response status code to 0 is a no-op. + // However, when responding with a "Response.error()", the produced Response + // instance will have status code set to 0. Since it's not possible to create + // a Response instance with status code 0, handle that use-case separately. + if (response.status === 0) { + return Response.error() + } + + const mockedResponse = new Response(response.body, response) + + Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, { + value: true, + enumerable: true, + }) + + return mockedResponse +} diff --git a/src/main.tsx b/src/main.tsx index df655ea..b791922 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,8 +3,19 @@ import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App.tsx'; -createRoot(document.getElementById('root')!).render( - - - -); +// Mocking 활성화 함수 +async function enableMocking() { + if (process.env.NODE_ENV !== 'development') { + return; + } + const { worker } = await import('./mocks/browser'); + return worker.start(); +} + +enableMocking().then(() => { + createRoot(document.getElementById('root')!).render( + + + + ); +}); diff --git a/src/mocks/browser.ts b/src/mocks/browser.ts new file mode 100644 index 0000000..0a56427 --- /dev/null +++ b/src/mocks/browser.ts @@ -0,0 +1,4 @@ +import { setupWorker } from 'msw/browser'; +import { handlers } from './handlers'; + +export const worker = setupWorker(...handlers); diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts new file mode 100644 index 0000000..a36adb9 --- /dev/null +++ b/src/mocks/handlers.ts @@ -0,0 +1,32 @@ +import { http, HttpResponse } from 'msw'; + +interface LoginPathParams {} +interface PostLoginReqBody { + userId: string; + password: string; +} + +export const handlers = [ + http.post( + '/api/member/login', + async ({ request }) => { + const { userId, password } = await request.json(); + // 로그인 성공 조건 예시 + if (userId === 'test' && password === 'test1234') { + return HttpResponse.json( + { message: '로그인 성공' }, + { + status: 200, + } + ); + } + // 로그인 실패 조건 + return HttpResponse.json( + { message: '유효하지 않는 아이디/비밀번호 입니다' }, + { + status: 200, + } + ); + } + ), +]; diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index fd966cd..50c49d2 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -3,6 +3,7 @@ import { useForm, SubmitHandler } from 'react-hook-form'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Checkbox } from '@/components/ui/checkbox'; +import axios from 'axios'; interface ILoginFormInput { id: string; @@ -15,7 +16,28 @@ const SignIn = () => { handleSubmit, formState: { errors }, } = useForm(); - const onSubmit: SubmitHandler = (data) => console.log(data); + + async function login(userId: string, password: string) { + try { + const response = await axios.post( + '/api/member/login', + { + userId, + password, + }, + { + headers: { 'Content-Type': 'application/json' }, + } + ); + console.log(response); + } catch (error) { + console.error(error); + } + } + + const onSubmit: SubmitHandler = async (data) => { + login(data.id, data.password); + }; return (
From 551c5b7b1259d3e8221b063005cbd103ec3f4514 Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Mon, 25 Nov 2024 13:09:27 +0900 Subject: [PATCH 48/73] =?UTF-8?q?[Feature]=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 텍스트 파일 가져와서 ".!?" 단위로 끊어서 읽기. tts 페이지와 연동 필요 (#50) * feat: 텍스트파일 추가 기능 (#50) * fix: FileContent 파일명 오류수정 (#50) * fix:불필요한 주석 제거, console문 제거, textInputStore에서 초기값 id:1로수정 (#50) * fix:.?! 등 기호 출력되게 변경 (#50( * feat:텍스트 파일 추가시 엔터로도 문단 구분되게 변경 (#50) * feat:불필요한 주석 제거 (#50) * feat: 문장 최대 갯수 설정 , 넘길시 경고창 이후 초과 문장 무시 (#50) * feat: 파일 가져올때 에러처리 추가 (#50) * fix: 파일 입력 초기화 코드 추가 , 같은 파일 중복 등록 가능 (#50) * fix: 파일 입력 초기화 코드 추가 , 같은 파일 중복 등록 가능 (#50) --- src/components/sidebar/TTSSidebar.tsx | 17 +--- .../sidebar/sidebarContent/FileContent.tsx | 66 +++++++++++++ src/hooks/useTextInputs.ts | 85 ++++++++++------- src/pages/TTS.tsx | 26 ++--- src/stores/textInputStore.ts | 94 +++++++++++++++++++ 5 files changed, 227 insertions(+), 61 deletions(-) create mode 100644 src/components/sidebar/sidebarContent/FileContent.tsx create mode 100644 src/stores/textInputStore.ts diff --git a/src/components/sidebar/TTSSidebar.tsx b/src/components/sidebar/TTSSidebar.tsx index 75aece4..8c4c55b 100644 --- a/src/components/sidebar/TTSSidebar.tsx +++ b/src/components/sidebar/TTSSidebar.tsx @@ -1,22 +1,7 @@ import { useState } from 'react'; import { Button } from '@/components/ui/button'; import EditContent from '@/components/sidebar/sidebarContent/EditContent'; - -const FileContent = () => { - return ( -
-
- -
- -
- -
-
- ); -}; +import { FileContent } from '@/components/sidebar/sidebarContent/FileContent'; const TTSSidebar = () => { const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); diff --git a/src/components/sidebar/sidebarContent/FileContent.tsx b/src/components/sidebar/sidebarContent/FileContent.tsx new file mode 100644 index 0000000..2d93675 --- /dev/null +++ b/src/components/sidebar/sidebarContent/FileContent.tsx @@ -0,0 +1,66 @@ +import { Button } from '@/components/ui/button'; +import { useTextInputs } from '@/stores/textInputStore'; + +export const FileContent = () => { + const { textInputs, addTextInputs } = useTextInputs(); + + const handleFileUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => { + // 줄바꿈 포함하여 문장 나누기 + try { + const text = reader.result as string; + const lines = text.split(/\n/); // 줄바꿈으로 나눔 + const sentences = lines + .flatMap((line) => line.match(/[^.!?]+[.!?]?/g) || []) //문장이 없을경우 빈배열 반환 + .filter((sentence) => sentence.trim()) //빈값제거 + .map((sentence) => sentence.trim()); //공백제거 + + if (sentences.length > 30) { + alert( + `문장이 너무 많습니다. 최대 30개의 문장만 처리됩니다. (${sentences.length - 30}개의 문장은 무시됩니다.)` + ); + } + + // 최대 30개의 문장만 추가 + addTextInputs(sentences.slice(0, 30)); + } catch (error) { + alert('텍스트 처리 중 오류가 발생했습니다.'); + } + }; + reader.onerror = () => { + alert('파일을 읽을 수 없습니다.'); + }; + + reader.readAsText(file); + e.target.value = ''; // 파일 입력 초기화 + } + }; + return ( +
+
+ + +
+ +
+ +
+
+ ); +}; diff --git a/src/hooks/useTextInputs.ts b/src/hooks/useTextInputs.ts index 3b448b2..ac74ea4 100644 --- a/src/hooks/useTextInputs.ts +++ b/src/hooks/useTextInputs.ts @@ -5,83 +5,99 @@ export const useTextInputs = () => { const [state, setState] = useState({ textInputs: [{ id: 0, text: '', isSelected: false, isEditing: false }], isAllSelected: false, - editingId: null + editingId: null, }); const addTextInput = () => { - const newId = state.textInputs.length > 0 - ? Math.max(...state.textInputs.map(input => input.id)) + 1 - : 1; - - setState(prev => ({ + const newId = + state.textInputs.length > 0 + ? Math.max(...state.textInputs.map((input) => input.id)) + 1 + : 1; + + setState((prev) => ({ ...prev, textInputs: [ - ...prev.textInputs, - { id: newId, text: '', isSelected: false, isEditing: false } - ] + ...prev.textInputs, + { id: newId, text: '', isSelected: false, isEditing: false }, + ], })); }; + const addTextInputs = (texts: string[]) => { + setState((prev) => { + const updatedState = { + ...prev, + textInputs: [ + ...prev.textInputs, + ...texts.map((text, index) => ({ + id: prev.textInputs.length + index + 1, + text: text.trim(), + isSelected: false, + isEditing: false, + })), + ], + }; + return updatedState; + }); + }; const handleTextChange = (id: number, newText: string) => { if (newText.length > 1000) return; if (!/^[가-힣a-zA-Z0-9\s.,!?]*$/.test(newText)) return; - setState(prev => ({ + setState((prev) => ({ ...prev, - textInputs: prev.textInputs.map(input => - input.id === id ? {...input, text: newText} : input + textInputs: prev.textInputs.map((input) => + input.id === id ? { ...input, text: newText } : input ), - editingId: prev.editingId === null ? id : prev.editingId + editingId: prev.editingId === null ? id : prev.editingId, })); }; const toggleSelection = (id: number) => { - setState(prev => ({ + setState((prev) => ({ ...prev, - textInputs: prev.textInputs.map(input => - input.id === id - ? {...input, isSelected: !input.isSelected} - : input - ) + textInputs: prev.textInputs.map((input) => + input.id === id ? { ...input, isSelected: !input.isSelected } : input + ), })); }; const toggleAllSelection = () => { - setState(prev => { + setState((prev) => { const newIsAllSelected = !prev.isAllSelected; return { ...prev, isAllSelected: newIsAllSelected, - textInputs: prev.textInputs.map(input => ({ - ...input, - isSelected: newIsAllSelected - })) + textInputs: prev.textInputs.map((input) => ({ + ...input, + isSelected: newIsAllSelected, + })), }; }); }; const deleteSelectedInputs = () => { - setState(prev => ({ + setState((prev) => ({ ...prev, - textInputs: prev.textInputs.filter(input => !input.isSelected), - isAllSelected: false + textInputs: prev.textInputs.filter((input) => !input.isSelected), + isAllSelected: false, })); }; const saveInput = () => { - setState(prev => ({ + setState((prev) => ({ ...prev, - editingId: null + editingId: null, })); }; const cancelEdit = () => { - setState(prev => ({ + setState((prev) => ({ ...prev, - textInputs: prev.textInputs.map(input => + textInputs: prev.textInputs.map((input) => input.id === prev.editingId ? { ...input, text: '' } : input ), - editingId: null + editingId: null, })); }; @@ -93,6 +109,7 @@ export const useTextInputs = () => { toggleAllSelection, deleteSelectedInputs, saveInput, - cancelEdit + cancelEdit, + addTextInputs, }; -}; \ No newline at end of file +}; diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx index 9befbe0..f1ee5ac 100644 --- a/src/pages/TTS.tsx +++ b/src/pages/TTS.tsx @@ -1,12 +1,12 @@ import React, { useRef } from 'react'; import { useParams } from 'react-router-dom'; -import { useTextInputs } from '@/hooks/useTextInputs'; import { useOutsideClick } from '@/hooks/useOutsideClick'; import { TTSHeader } from '@/components/tts/TTSHeader'; import { TTSControls } from '@/components/tts/TTSControls'; import { TextInputList } from '@/components/tts/TextInputList'; import { Button } from '@/components/ui/button'; +import { useTextInputs } from '@/stores/textInputStore'; const TTS: React.FC = () => { const { projectId } = useParams<{ projectId: string }>(); @@ -14,18 +14,20 @@ const TTS: React.FC = () => { const containerRef = useRef(null); const { - state, + textInputs, addTextInput, handleTextChange, toggleSelection, toggleAllSelection, deleteSelectedInputs, saveInput, - cancelEdit + cancelEdit, + isAllSelected, + editingId, } = useTextInputs(); useOutsideClick(containerRef, () => { - if (state.editingId !== null) { + if (textInputs.some((input) => input.isEditing)) { cancelEdit(); } }); @@ -35,14 +37,14 @@ const TTS: React.FC = () => { }; return ( -
+
{ /> -
- {state.editingId !== null ? ( +
+ {textInputs.some((input) => input.isEditing) ? ( <> - + ) : ( @@ -71,4 +75,4 @@ const TTS: React.FC = () => { ); }; -export default TTS; \ No newline at end of file +export default TTS; diff --git a/src/stores/textInputStore.ts b/src/stores/textInputStore.ts new file mode 100644 index 0000000..c4db32e --- /dev/null +++ b/src/stores/textInputStore.ts @@ -0,0 +1,94 @@ +import { create } from 'zustand'; +import { TTSState } from '@/types/tts'; + +interface TTSStore extends TTSState { + addTextInput: () => void; + addTextInputs: (texts: string[]) => void; + handleTextChange: (id: number, newText: string) => void; + toggleSelection: (id: number) => void; + toggleAllSelection: () => void; + deleteSelectedInputs: () => void; + saveInput: () => void; + cancelEdit: () => void; +} + +export const useTextInputs = create((set) => ({ + textInputs: [ + { id: 1, text: '', isSelected: false, isEditing: false }, // 초기값 설정 + ], + isAllSelected: false, // 초기값 설정 + editingId: null, // 초기값 설정 + addTextInput: () => + set((state) => { + const newId = + state.textInputs.length > 0 + ? Math.max(...state.textInputs.map((input) => input.id)) + 1 + : 1; + return { + ...state, + textInputs: [ + ...state.textInputs, + { id: newId, text: '', isSelected: false, isEditing: false }, + ], + }; + }), + addTextInputs: (texts) => + set((state) => ({ + ...state, + textInputs: [ + ...state.textInputs, + ...texts.map((text, index) => ({ + id: state.textInputs.length + index + 1, + text: text.trim(), + isSelected: false, + isEditing: false, + })), + ], + })), + handleTextChange: (id, newText) => + set((state) => ({ + ...state, + textInputs: state.textInputs.map((input) => + input.id === id ? { ...input, text: newText } : input + ), + editingId: state.editingId === null ? id : state.editingId, + })), + toggleSelection: (id) => + set((state) => ({ + ...state, + textInputs: state.textInputs.map((input) => + input.id === id ? { ...input, isSelected: !input.isSelected } : input + ), + })), + toggleAllSelection: () => + set((state) => { + const newIsAllSelected = !state.isAllSelected; + return { + ...state, + isAllSelected: newIsAllSelected, + textInputs: state.textInputs.map((input) => ({ + ...input, + isSelected: newIsAllSelected, + })), + }; + }), + deleteSelectedInputs: () => + set((state) => ({ + ...state, + textInputs: state.textInputs.filter((input) => !input.isSelected), + isAllSelected: false, + })), + saveInput: () => + set((state) => ({ + ...state, + editingId: null, + })), + cancelEdit: () => + set((state) => ({ + ...state, + textInputs: state.textInputs.map((input) => + input.id === state.editingId ? { ...input, text: '' } : input + ), + editingId: null, + })), +})); From 720c21a3ff1d02d020865bc993b5dae6f2efd877 Mon Sep 17 00:00:00 2001 From: haeun <110523397+haruyam15@users.noreply.github.com> Date: Mon, 25 Nov 2024 18:51:08 +0900 Subject: [PATCH 49/73] =?UTF-8?q?[Feature]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20?= =?UTF-8?q?(#54)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: 로그인박스 레이아웃 (#33) * feature: 로그인 화면 퍼블리싱 (#33) --- src/assets/logo.png | Bin 0 -> 2103 bytes src/components/ui/button.tsx | 1 + src/pages/SignIn.tsx | 151 +++++++++++++++++++++-------------- tailwind.config.js | 50 +++++++++++- 4 files changed, 141 insertions(+), 61 deletions(-) create mode 100644 src/assets/logo.png diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..b45c13d411a626c6977fbf9618b382cf7ab5b789 GIT binary patch literal 2103 zcmV-72*~$|P)@LBboo~LGB|iG+Hw`)i(1<_-LamUr0wihUmucgB=33g6 zYtM-L*uL7e!+@YtXzuYmS3hkdMA+K7Am{;};D!K4eDVIee0rXkr&~79aLGC`=h>dBB--ZANCI?_5ZOL=8E)}&JBcDiWi#K#~R2R z$-J|n%(c1ijpf_LXkyq*`q`di!$0;*!9QTu7!B&##R04U&RD69cgdUgm{;8z#=nf=v|D^&WAJA&43W96jbjXK4Hw3n z``!x`tOz+T$lqJV@0(M55fqc};WM~f@25*bxPGhY*=Hwawab)yD<1}R+%bkBiYU^1iWpRkAn}T%zwtW6I?l;hCGCD5 z+dk_DCb-;C0(?8*d0w`<=l_8|;P;dEJk#jVg9xNg33GyfW%;T6WjAhs!e<}Dz|mkZf~PfiO;%)p@kr~H6ylv2waT1# znGIl!y9oZ`;C)>_J!W@()p>ZrpOb?K+c8Q6LD}fS3p~j~=Y{Nc5ks<=?R)Y)FekQ( z;U=Q)Y(xe z=27vM7l;~$AcRxG>O-sR#y5b4=_&=YmOTRh{Mheq*DBkaqiZE}?$!X1X`6MY|R4vCd8=rJA9Mso!A7>PAEcVD?P)mcl_DEP3gi|TZP#nQQ zYtW74L_)1?S~NpeM2j`_!t;s9fP^Ak!)$-j81XP>5Gy1kHi0pMTX6O=<2_E0prb+5 z1E~8&G0vw2WYyv_FjUc^Ix$B4X`G4|2!RSyv^ZWM#!SMaVz`%3b+^-!XpgP!izR(NG-X;KV?E|$6E*%;DF{t(wH=ZOnKyx=S6BfJ=mcJ`Q? zR@a0G$8fp`5PId-MKw{Kb!?TLIs*a!da@KfW#DY8Ksj;(+JqWp0NQix@ zDYM2f)aI3>RgvWSlFz*)-g&Qb6_Y+HksrK~A90N==Q+L~n}z7o;To!-99^*PsKe`W zKNwX+0aqYK{6%^FowO+%!sj(JpOL6&mzMbX045NA{ESnOC%+5efY;-ES{Y42z4#P_ zMI`G@0_Ds^lk*g9i@UytNJhqcalw5npFCS-DE&p^ z8{@CA(jf)bwrav;xv8eZ`UiHC<%#*+;uvvGw)?q!dNS`g_ll8!)%xY60RzxA#rbP= z5?vNvg>qF?v8P%MQdP$;mmXm7%H<&y`&XaKCueb^&>_2W(djKU$DNBtlTIWTQna0e z7A3v7jRwo^Z+bu?!R-T|c(+d(SOq?3YJ8uf#(}F&7~_O;6S!Cw45LDE*c60o3N(~S z{0-nFzEhIehZ4;(3SxrBWY?*iI36{AXo?Q!#H2D;8@wVnacL@fjKd`=-T;?<>x{0xh;|G`o@Tx8X7*EOVw7W; z6GDdsOXcOB7U!ifBV-=zyerMoN{yV;1)=QYUXyUFWr`1d*C9LR@$x)*Jg1|^7x7Sq zItY$XTCx;5ppaWtwWu&PLwC$Vkq~Jgt?(Q@3^qRu9X1zBa4SXHX)j)-#!mIL2n&FV zsa+*VaMX7`-thm%pT&!kbxBK&Mcg(pMhVsWNa2y>Sc)2XmZLJiIr8I{@#LPCXD&ozEJ_Td0%JE~6Hwcv%h$LZ}gDs73{? zzW{{Fd;I^6DntJl0`E=e^RK8tj5fyIaMLl|0W2MM5BU20U&99YBrWE!0AxN%H(JeH zp_wenXJHyO+EWRWhxw$~3J+6?lFEIkV3?eWtcrB;&Xt~QozWWE3K2fmSkt@gUH#S4 z9Kb{!5a&6RMCf?pc!?yMtVgukOtqqb1!0eD=(OEl5t@Wr)kWRRi3nBy3C9$Jqmq-h zhO{EZsz`1hu~(h&@%ZkazutR(SH==>MC~NYedsWZPtYPO&K+0~aw3pAXyx6#u$Kue hHDY@mH@GDB=6`1%7lsCXIL810002ovPDHLkV1h-F{<{DG literal 0 HcmV?d00001 diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index e2abca7..441edc5 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -20,6 +20,7 @@ const buttonVariants = cva( ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', active: 'text-sky-500 hover:bg-accent', + green: 'bg-green-primary text-white shadow hover:bg-green-5', // sideActive:'text' }, size: { diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index 50c49d2..5ef32d2 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -40,76 +40,107 @@ const SignIn = () => { }; return ( -
-
-

- AIPARK -

+
+
+
+

+ + + +

+
+

+ 내가 적은 시나리오1 +

+

+ 내가 적은 시나리오2 +

+

+ 내가 적은 시나리오3 +

+

+ 내가 적은 시나리오4 +

+

+ 내가 적은 시나리오1 +

+
-
- -
- - {errors.id && ( -

{errors.id.message}

- )} -
+

AI 오디오 생성해줘

+
+
-
- - {errors.password && ( -

- {errors.password.message} -

- )} -
+
+
+

시작하기

+
+ +
+ + {errors.id && ( +

+ {errors.id.message} +

+ )} -
- - - - 체크하면 다음 접속 시 자동으로 로그인됩니다 - -
+ + {errors.password && ( +

+ {errors.password.message} +

+ )} +
- - +
+ + + + 체크하면 다음 접속 시 자동으로 로그인됩니다 + +
+ + + +
-
    -
  • +
      +
    • 비밀번호 찾기
      • -
    • +
    • 아이디 찾기
    • - 회원가입 + 회원가입
diff --git a/tailwind.config.js b/tailwind.config.js index 22e287b..cb42d80 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,13 +4,61 @@ module.exports = { content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'], theme: { extend: { + keyframes: { + textSlide: { + '10%': { transform: 'translateY(-102%)' }, + '25%': { transform: 'translateY(-100%)' }, + '35%': { transform: 'translateY(-202%)' }, + '50%': { transform: 'translateY(-200%)' }, + '60%': { transform: 'translateY(-302%)' }, + '75%': { transform: 'translateY(-300%)' }, + '85%': { transform: 'translateY(-402%)' }, + '100%': { transform: 'translateY(-400%)' }, + }, + }, + animation: { + 'text-slide': 'textSlide 4s infinite', + }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', }, colors: { - error: 'rgb(239 68 68)', + error: '#B3261E', + green: { + 1: '#E2F9EA', + 2: '#B9F0CB', + 3: '#86E6A9', + 4: '#3DDC85', + 5: '#05D369', + 6: '#00C84E', + 7: '#00B844', + 8: '#01A438', + primary: '#3DDC85', + }, + blue: { + 1: '#E4F2FF', + 2: '#D6EEFE', + 3: '#96C9FF', + 4: '#4392FF', + 5: '#4385F4', + 6: '#4171E0', + 7: '#3F60CD', + 8: '#3A3FAD', + primary: '#4385F4', + }, + red: { + 1: '#FFE5EB', + 2: '#FFBDCD', + 3: '#FF91AD', + 4: '#FF648C', + 5: '#FD1E5A', + 6: '#EC1858', + 7: '#D61054', + 8: '#CB0137', + primary: '#FD1E5A', + }, background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', card: { From 6b5e72302a466d991b6430499820e07df0a2675e Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Mon, 25 Nov 2024 18:53:18 +0900 Subject: [PATCH 50/73] =?UTF-8?q?[Feat]=20VC=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1=20-=20=EC=99=80=EC=9D=B4=EC=96=B4=ED=94=84?= =?UTF-8?q?=EB=A0=88=EC=9E=84=20=EA=B8=B0=EB=B0=98=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: vc 화면 기본배치 * feat: VC 사이드바 와이어프레임 적용 * feat: 코드리뷰 적용 --- src/components/common/EditableLabel.tsx | 76 +++++++++++++++++++++++++ src/components/common/OneVc.tsx | 34 +++++++++++ src/components/sidebar/VCSidebar.tsx | 42 +++++++++++++- src/components/ui/button.tsx | 2 + src/pages/VC.tsx | 45 ++++++++++++++- tailwind.config.js | 1 + 6 files changed, 197 insertions(+), 3 deletions(-) create mode 100644 src/components/common/EditableLabel.tsx create mode 100644 src/components/common/OneVc.tsx diff --git a/src/components/common/EditableLabel.tsx b/src/components/common/EditableLabel.tsx new file mode 100644 index 0000000..9909155 --- /dev/null +++ b/src/components/common/EditableLabel.tsx @@ -0,0 +1,76 @@ +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import React, { useState, useRef, useEffect, forwardRef } from 'react'; + +interface IEditableLabelProps { + initialValue: string; + onSave: (value: string) => void; +} + +const EditableLabel: React.FC = ({ + initialValue, + onSave, +}) => { + const [isEditing, setIsEditing] = useState(false); + const [value, setValue] = useState(initialValue.trim()); + const inputRef = useRef(null); + + useEffect(() => { + if (isEditing && inputRef.current) { + inputRef.current.focus(); + } + }, [isEditing]); + + const handleLabelClick = () => { + setIsEditing(true); + }; + + const handleInputBlur = () => { + setIsEditing(false); + try { + onSave(value); + } catch (error) { + console.error('Failed to save value:', error); + setValue(initialValue); + } + }; + + const handleInputChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleInputBlur(); + } + if (e.key === 'Escape') { + setValue(initialValue); // initialvalue가 아니라 기존값 상태를 반환하도록 + setIsEditing(false); + } + }; + + return ( +
+ {isEditing ? ( + <> + + + ) : ( + + )} +
+ ); +}; + +export default EditableLabel; diff --git a/src/components/common/OneVc.tsx b/src/components/common/OneVc.tsx new file mode 100644 index 0000000..037f328 --- /dev/null +++ b/src/components/common/OneVc.tsx @@ -0,0 +1,34 @@ +import EditableLabel from '@/components/common/EditableLabel'; +import { Button } from '@/components/ui/button'; +import { Checkbox } from '@/components/ui/checkbox'; +import { DownloadIcon, PlayIcon, RefreshCcwDotIcon } from 'lucide-react'; + +const OneVc = () => { + return ( +
+
+
+ {/* +
+
+ + +
+
+
+ + {}} /> +
+
+ ); +}; + +export default OneVc; diff --git a/src/components/sidebar/VCSidebar.tsx b/src/components/sidebar/VCSidebar.tsx index cc1f0da..46b3393 100644 --- a/src/components/sidebar/VCSidebar.tsx +++ b/src/components/sidebar/VCSidebar.tsx @@ -1,8 +1,46 @@ +import { Button } from '@/components/ui/button'; +import { UploadIcon } from 'lucide-react'; + const VCSidebar = () => { + const handleButton = { + addOrgAudio: () => {}, + addTrgAudio: () => {}, + addTxtFile: () => {}, + }; return (
-

VC 설정

-

여기에는 VC 관련 설정 내용이 들어갑니다.

+
+

삽입

+ +
+
+

수정

+ +
+
+ +
); }; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 441edc5..d8e4b4c 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -22,6 +22,8 @@ const buttonVariants = cva( active: 'text-sky-500 hover:bg-accent', green: 'bg-green-primary text-white shadow hover:bg-green-5', // sideActive:'text' + aipark: + 'bg-aipark_primary hover:bg-aipark_primary/80 text-primary-foreground', }, size: { default: 'h-9 px-4 py-2', diff --git a/src/pages/VC.tsx b/src/pages/VC.tsx index b28d6f5..7bee91b 100644 --- a/src/pages/VC.tsx +++ b/src/pages/VC.tsx @@ -1,8 +1,51 @@ +import OneVc from '@/components/common/OneVc'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { DownloadIcon, SaveIcon } from 'lucide-react'; +import { useState } from 'react'; import { useParams } from 'react-router-dom'; const VC = () => { const { projectId } = useParams<{ projectId: string }>(); - return
vc 생성페이지 프로젝트 ID: {projectId}
; + const [projectName, setProjectName] = useState(); + + const handleButton = { + save: () => { + alert('save: ' + projectName); + }, + download: () => { + alert('다운로드 요청: ' + projectId); + }, + }; + + const onType = (e: React.ChangeEvent) => { + setProjectName(e.target.value); + }; + + return ( +
+
+ + + +
+
+ + + +
+
+ ); }; export default VC; diff --git a/tailwind.config.js b/tailwind.config.js index cb42d80..5fda3b8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,6 +25,7 @@ module.exports = { sm: 'calc(var(--radius) - 4px)', }, colors: { + aipark_primary: '#3DDC85', error: '#B3261E', green: { 1: '#E2F9EA', From ecd320583e8370c65fe6b6a99a5feac740297917 Mon Sep 17 00:00:00 2001 From: haeun <110523397+haruyam15@users.noreply.github.com> Date: Thu, 28 Nov 2024 10:22:57 +0900 Subject: [PATCH 51/73] =?UTF-8?q?[Feature]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20API=20=EC=97=B0=EB=8F=99=20(#57)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: 로그인박스 레이아웃 (#33) * feature: 로그인 화면 퍼블리싱 (#33) * feature: - 로그인 API연동 - @tanstack/react-query 버전 업데이트 - tailwind.config.js animation 수정 - App.tsx 파일에 QueryClientProvider추가 - main,tsx 파일에 React Router Future Flag Warning 경고 무시 코드 추가 - apiClient.ts 생성하여 Axios 인스턴스화 - utils.ts 파일에 LoginError 클래스 추가 - handlers.ts 수정 (#55) * feature: aipark_primary 컬러값 추가(#55) --- .gitignore | 1 + package-lock.json | 18 +++++------ package.json | 2 +- src/App.tsx | 7 ++++- src/apis/apiClient.ts | 10 ++++++ src/apis/auth.ts | 26 ++++++++++++++++ src/hooks/apis/useLogin.ts | 23 ++++++++++++++ src/lib/utils.ts | 9 ++++++ src/main.tsx | 19 +++++++++--- src/mocks/handlers.ts | 59 ++++++++++++++++++++++++----------- src/pages/SignIn.tsx | 63 ++++++++++++++++++++++---------------- src/types/login.ts | 17 ++++++++++ src/vite-env.d.ts | 8 +++++ tailwind.config.js | 4 +-- 14 files changed, 203 insertions(+), 63 deletions(-) create mode 100644 src/apis/apiClient.ts create mode 100644 src/apis/auth.ts create mode 100644 src/hooks/apis/useLogin.ts create mode 100644 src/types/login.ts diff --git a/.gitignore b/.gitignore index a547bf3..1cac559 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? +.env \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7e26b6e..b6216ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", - "@tanstack/react-query": "^5.59.19", + "@tanstack/react-query": "^5.61.3", "@tanstack/react-table": "^8.20.5", "@types/axios": "^0.14.4", "axios": "^1.7.7", @@ -2382,22 +2382,20 @@ ] }, "node_modules/@tanstack/query-core": { - "version": "5.59.20", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.20.tgz", - "integrity": "sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==", - "license": "MIT", + "version": "5.60.6", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.60.6.tgz", + "integrity": "sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "5.60.2", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.60.2.tgz", - "integrity": "sha512-JhpJNxIAPuE0YCpP1Py4zAsgx+zY0V531McRMtQbwVlJF8+mlZwcOPrzGmPV248K8IP+mPbsfxXToVNMNwjUcw==", - "license": "MIT", + "version": "5.61.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.61.3.tgz", + "integrity": "sha512-c3Oz9KaCBapGkRewu7AJLhxE9BVqpMcHsd3KtFxSd7FSCu2qGwqfIN37zbSGoyk6Ix9LGZBNHQDPI6GpWABnmA==", "dependencies": { - "@tanstack/query-core": "5.59.20" + "@tanstack/query-core": "5.60.6" }, "funding": { "type": "github", diff --git a/package.json b/package.json index 8bf1f8f..198573a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", - "@tanstack/react-query": "^5.59.19", + "@tanstack/react-query": "^5.61.3", "@tanstack/react-table": "^8.20.5", "@types/axios": "^0.14.4", "axios": "^1.7.7", diff --git a/src/App.tsx b/src/App.tsx index eb0a601..665b67f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,15 @@ import { RouterProvider } from 'react-router-dom'; import { router } from './routes/router'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +const queryClient = new QueryClient(); function App() { return (
- + + +
); } diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts new file mode 100644 index 0000000..946e747 --- /dev/null +++ b/src/apis/apiClient.ts @@ -0,0 +1,10 @@ +import axios from 'axios'; + +const apiClient = axios.create({ + baseURL: import.meta.env.VITE_API_BASE_URL, + headers: { + 'Content-Type': 'application/json', + }, +}); + +export default apiClient; diff --git a/src/apis/auth.ts b/src/apis/auth.ts new file mode 100644 index 0000000..6c2cfff --- /dev/null +++ b/src/apis/auth.ts @@ -0,0 +1,26 @@ +import axios from 'axios'; +import { IUseLoginProps, IUserData } from '@/types/login'; +import apiClient from '@/apis/apiClient'; +import { LoginError } from '@/lib/utils'; + +export const login = async ({ + username, + password, +}: IUseLoginProps): Promise => { + try { + const response = await apiClient.post('/member/login', { + username, + password, + }); + return response.data; + } catch (error) { + if (axios.isAxiosError(error)) { + const status = error.response?.status; + if (status === 401) { + throw new LoginError('아이디 혹은 비밀번호를 확인해주세요.', 401); + } + } + + throw new LoginError(`로그인 실패: ${error}`, 500); + } +}; diff --git a/src/hooks/apis/useLogin.ts b/src/hooks/apis/useLogin.ts new file mode 100644 index 0000000..2c76cd2 --- /dev/null +++ b/src/hooks/apis/useLogin.ts @@ -0,0 +1,23 @@ +import { useMutation } from '@tanstack/react-query'; +import { login } from '@/apis/auth'; +import { + ExtendedAxiosErrorForLogin, + IUseLoginProps, + IUserData, +} from '@/types/login'; + +const useLogin = (resetForm: () => void) => { + return useMutation({ + mutationFn: login, + onSuccess: (data: IUserData) => { + console.log('로그인 성공:', data); + //setUser + }, + onError: (error: ExtendedAxiosErrorForLogin) => {}, + onSettled: (data) => { + resetForm(); + }, + }); +}; + +export default useLogin; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 2819a83..54f9b46 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -4,3 +4,12 @@ import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } + +export class LoginError extends Error { + statusCode: number; + constructor(message: string, statusCode: number) { + super(message); + this.name = 'LoginError'; + this.statusCode = statusCode; + } +} diff --git a/src/main.tsx b/src/main.tsx index b791922..f303183 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,13 +3,24 @@ import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App.tsx'; +//경고무시 +const originalWarn = console.warn; +console.warn = (...args) => { + if (args[0]?.includes('React Router Future Flag Warning')) { + return; + } + originalWarn(...args); +}; + // Mocking 활성화 함수 async function enableMocking() { - if (process.env.NODE_ENV !== 'development') { - return; + const isMockEnabled = import.meta.env.VITE_ENABLE_MOCK === 'true'; + if (process.env.NODE_ENV === 'development' && isMockEnabled) { + const { worker } = await import('./mocks/browser'); + return worker.start(); + } else { + return false; } - const { worker } = await import('./mocks/browser'); - return worker.start(); } enableMocking().then(() => { diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index a36adb9..034bdf3 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -2,31 +2,54 @@ import { http, HttpResponse } from 'msw'; interface LoginPathParams {} interface PostLoginReqBody { - userId: string; + username: string; password: string; } export const handlers = [ http.post( - '/api/member/login', + `${import.meta.env.VITE_API_BASE_URL}/member/login`, async ({ request }) => { - const { userId, password } = await request.json(); - // 로그인 성공 조건 예시 - if (userId === 'test' && password === 'test1234') { - return HttpResponse.json( - { message: '로그인 성공' }, - { - status: 200, + console.log('MSW 핸들러가 요청을 가로챘습니다:'); + + const { username, password } = await request.json(); + + // 응답을 5초 지연시키기 위해 Promise 사용 + return new Promise((resolve) => { + setTimeout(() => { + // 로그인 성공 조건 예시 + if (username === 'test' && password === 'test1234') { + resolve( + HttpResponse.json( + { + success: true, + data: { + name: '테스트', + id: 'test', + seq: 1, + email: 'test@example.com', + }, + }, + { + status: 200, + } + ) + ); + } else { + // 로그인 실패 조건 + resolve( + HttpResponse.json( + { + error: '인증 실패', + }, + { + status: 401, + } + ) + ); } - ); - } - // 로그인 실패 조건 - return HttpResponse.json( - { message: '유효하지 않는 아이디/비밀번호 입니다' }, - { - status: 200, - } - ); + }, 3000); + }); } ), ]; diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx index 5ef32d2..e9c5e90 100644 --- a/src/pages/SignIn.tsx +++ b/src/pages/SignIn.tsx @@ -3,10 +3,12 @@ import { useForm, SubmitHandler } from 'react-hook-form'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Checkbox } from '@/components/ui/checkbox'; -import axios from 'axios'; +import useLogin from '@/hooks/apis/useLogin'; +import { LoaderCircle } from 'lucide-react'; +import { useEffect, useState } from 'react'; interface ILoginFormInput { - id: string; + username: string; password: string; } @@ -15,29 +17,23 @@ const SignIn = () => { register, handleSubmit, formState: { errors }, + reset: resetForm, } = useForm(); + const { mutate, isPending, error, reset } = useLogin(resetForm); + const onSubmit: SubmitHandler = ({ username, password }) => { + mutate({ username, password }); + }; + const [loginError, setLoginError] = useState(false); - async function login(userId: string, password: string) { - try { - const response = await axios.post( - '/api/member/login', - { - userId, - password, - }, - { - headers: { 'Content-Type': 'application/json' }, - } - ); - console.log(response); - } catch (error) { - console.error(error); + useEffect(() => { + if (error?.statusCode === 401) { + setLoginError(true); } - } - - const onSubmit: SubmitHandler = async (data) => { - login(data.id, data.password); - }; + if (error?.statusCode === 500) { + alert('로그인에 실패했습니다.'); + } + reset(); + }, [error]); return (
@@ -77,14 +73,16 @@ const SignIn = () => {
setLoginError(false)} + autoComplete='off' /> - {errors.id && ( + {errors.username && (

- {errors.id.message} + {errors.username.message}

)} @@ -95,6 +93,7 @@ const SignIn = () => { placeholder='Password' type='password' autoComplete='new-password' + onFocus={() => setLoginError(false)} /> {errors.password && (

@@ -103,7 +102,7 @@ const SignIn = () => { )}

-
+
{
+ {loginError && ( +

+ 아이디 또는 비밀번호를 확인해주세요. +

+ )} +
diff --git a/src/types/login.ts b/src/types/login.ts new file mode 100644 index 0000000..dcee60c --- /dev/null +++ b/src/types/login.ts @@ -0,0 +1,17 @@ +import { AxiosError } from 'axios'; + +export interface IUserData { + name: string; + id: string; + seq: number; + email: string; +} + +export interface IUseLoginProps { + username: string; + password: string; +} + +export interface ExtendedAxiosErrorForLogin extends AxiosError { + statusCode: number; +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..0de3a7a 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,9 @@ /// +interface ImportMetaEnv { + readonly VITE_API_BASE_URL: string; + readonly VITE_ENABLE_MOCK: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/tailwind.config.js b/tailwind.config.js index 5fda3b8..1592e54 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,7 @@ module.exports = { }, }, animation: { - 'text-slide': 'textSlide 4s infinite', + 'text-slide': 'textSlide 6s infinite', }, borderRadius: { lg: 'var(--radius)', @@ -25,8 +25,8 @@ module.exports = { sm: 'calc(var(--radius) - 4px)', }, colors: { - aipark_primary: '#3DDC85', error: '#B3261E', + aipark_primary: '#3DDC85', green: { 1: '#E2F9EA', 2: '#B9F0CB', From 669ecedff7e4a7f0f18c5112f666bbdcbeb62f0d Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Thu, 28 Nov 2024 10:25:39 +0900 Subject: [PATCH 52/73] =?UTF-8?q?[Feature]=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=EA=B8=B0=EB=8A=A5=20(#58)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * design: 슬라이더 색상 변경 (#53) * feat: 파일업로드 진행상황 circularProgress로 나타내기 (#53) * feat: 성공 실패에 따라 색상있는 점과 함께 완료,오류 표시 (#53) * feat: 환경변수 ignore 추가 (#53) * Delete .env --- .gitignore | 5 + src/components/sidebar/TTSSidebar.tsx | 4 +- .../sidebar/sidebarContent/EditContent.tsx | 6 +- .../sidebar/sidebarContent/FileContent.tsx | 146 ++++++++++++++---- src/components/ui/CircularProgress.tsx | 58 +++++++ src/components/ui/button.tsx | 1 + src/components/ui/slider.tsx | 20 +-- src/layout/ProjectLayout.tsx | 4 +- 8 files changed, 200 insertions(+), 44 deletions(-) create mode 100644 src/components/ui/CircularProgress.tsx diff --git a/.gitignore b/.gitignore index 1cac559..9989e31 100644 --- a/.gitignore +++ b/.gitignore @@ -7,11 +7,16 @@ yarn-error.log* pnpm-debug.log* lerna-debug.log* +# Dependency directories node_modules dist dist-ssr *.local +# Environment variables +.env +.env.* + # Editor directories and files .vscode/* !.vscode/extensions.json diff --git a/src/components/sidebar/TTSSidebar.tsx b/src/components/sidebar/TTSSidebar.tsx index 8c4c55b..a02f86a 100644 --- a/src/components/sidebar/TTSSidebar.tsx +++ b/src/components/sidebar/TTSSidebar.tsx @@ -10,14 +10,14 @@ const TTSSidebar = () => { <>
diff --git a/src/components/ui/CircularProgress.tsx b/src/components/ui/CircularProgress.tsx new file mode 100644 index 0000000..1f4cd01 --- /dev/null +++ b/src/components/ui/CircularProgress.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +interface CircularProgressProps { + current: number; // 현재 진행 값 + total: number; // 총 진행 값 + size?: number; // 원 크기 (기본값: 40) + strokeWidth?: number; // 선 두께 (기본값: 4) + trackColor?: string; // 배경 트랙 색상 (기본값: 회색) + progressColor?: string; // 진행 상태 색상 (기본값: 초록색) +} + +export const CircularProgress: React.FC = ({ + current, + total, + size = 40, + strokeWidth = 4, + trackColor = '#e0e0e0', + progressColor = '#3ddc85', +}) => { + const radius = (size - strokeWidth) / 2; // 반지름 + const circumference = 2 * Math.PI * radius; // 원 둘레 + const percent = (current / total) * 100; // 진행률 + const strokeDashoffset = circumference - (circumference * percent) / 100; // 진행률에 따른 offset + + return ( +
+ + {/* 배경 트랙 */} + + {/* 진행 상태 */} + + + + {current === total + ? `${current}/${total} 완료` + : `${current}/${total} 올리는 중`} + +
+ ); +}; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index d8e4b4c..89b5800 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -21,6 +21,7 @@ const buttonVariants = cva( link: 'text-primary underline-offset-4 hover:underline', active: 'text-sky-500 hover:bg-accent', green: 'bg-green-primary text-white shadow hover:bg-green-5', + blue: 'bg-blue-2', // sideActive:'text' aipark: 'bg-aipark_primary hover:bg-aipark_primary/80 text-primary-foreground', diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx index 9398b33..46f4718 100644 --- a/src/components/ui/slider.tsx +++ b/src/components/ui/slider.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import * as SliderPrimitive from "@radix-ui/react-slider" +import * as React from 'react'; +import * as SliderPrimitive from '@radix-ui/react-slider'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const Slider = React.forwardRef< React.ElementRef, @@ -10,17 +10,17 @@ const Slider = React.forwardRef< - - + + - + -)) -Slider.displayName = SliderPrimitive.Root.displayName +)); +Slider.displayName = SliderPrimitive.Root.displayName; -export { Slider } +export { Slider }; diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index fb9035c..f86f6c1 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -43,7 +43,7 @@ const ProjectLayout = () => { SidebarComponent = ; break; default: - ContentComponent =
잘못된 경로입니다.
; + ContentComponent =
프로젝트 생성하세요!
; } return ( @@ -106,7 +106,7 @@ const ProjectLayout = () => { {/* 우측 사이드바 */} -
From be9164006bddcbd9abd9ecb69b036bc9e32b53fd Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Fri, 29 Nov 2024 10:18:45 +0900 Subject: [PATCH 53/73] =?UTF-8?q?[design]=20=ED=99=88=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20(#59)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 프로젝트 생성 모달 적용 * feat: 홈 화면 디자인, 기능 개선 * feat: 코드리뷰 적용 --- index.html | 6 +- package-lock.json | 7 ++ package.json | 1 + src/assets/icon.png | Bin 0 -> 3238 bytes src/components/common/DividingLine.tsx | 15 +++ src/components/common/ListView.tsx | 84 ++++++++----- src/components/common/NewProjectButton.tsx | 69 +++++++++++ src/components/common/OneVc.tsx | 1 - src/components/common/Tile.tsx | 37 ++++++ src/components/header/HomeHeader.tsx | 45 ++++--- src/components/sidebar/HomeSidebar.tsx | 120 +++++++++++------- src/components/ui/badge.tsx | 36 ++++++ src/components/ui/button.tsx | 3 - src/components/ui/dialog.tsx | 119 ++++++++++++++++++ src/mock/project.ts | 39 ------ src/mocks/projectData.ts | 117 ++++++++++++++++++ src/pages/Home.tsx | 58 ++++----- src/pages/MyProject.tsx | 137 ++++++++++++++------- src/stores/checkedStore.ts | 36 ++++++ src/types/project.ts | 12 +- src/utils/date.ts | 8 ++ tailwind.config.js | 1 + 22 files changed, 734 insertions(+), 217 deletions(-) create mode 100644 src/assets/icon.png create mode 100644 src/components/common/DividingLine.tsx create mode 100644 src/components/common/NewProjectButton.tsx create mode 100644 src/components/common/Tile.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/dialog.tsx delete mode 100644 src/mock/project.ts create mode 100644 src/mocks/projectData.ts create mode 100644 src/stores/checkedStore.ts create mode 100644 src/utils/date.ts diff --git a/index.html b/index.html index e4b78ea..4bdb46d 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - + - Vite + React + TS + 오레오파크 5RE5PARK
diff --git a/package-lock.json b/package-lock.json index b6216ee..d33e0bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "dayjs": "^1.11.13", "lucide-react": "^0.454.0", "react": "^18.3.1", "react-daum-postcode": "^3.1.3", @@ -3397,6 +3398,12 @@ "devOptional": true, "license": "MIT" }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", diff --git a/package.json b/package.json index 198573a..ccfeaaf 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "dayjs": "^1.11.13", "lucide-react": "^0.454.0", "react": "^18.3.1", "react-daum-postcode": "^3.1.3", diff --git a/src/assets/icon.png b/src/assets/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..671c65e627c9eecada5f8d56ba94d041bc323082 GIT binary patch literal 3238 zcmX|Ec|6qVA0N{fUsq;!9l2^qIZBRlCC7{-8jPbUQI5?m#^zkHm?lNjK}jh;R~m#F z$a?_EK;)FH|R?2@pbdA>(kh7o?U0M4`DvwBw-|98QV|e?(FP z{jza5X$vPi^8Q5MkHZUj&LJD0eB#I5j*2@NSGY5^T{GvJlXIZ!v6JR(f`bwNdV_Ih z{l|zfheq`?hr1XM|(;lrcH|&xsdH zy%l3^T+ha-YR(>emmAA5txc!9T{H8#v$W=Ha{VaZTF$hsDiTwtxqL;tWv>42Q^Kh$ za>W+uKT^L~3k|3KM} zmVE`>TPIwA?mof;p`)?=%rU(WUH@s!kEm3>Y3#v*hsRcZ$!h?5TD~`&P zm&#OZ*3n38s;!ZTE3fbrJ_y#BOFI%1o=T-}3oi_3R94E=bE?mbM7}xywvXJG{kGz5 zkJF>99sC*%Lf8pY;z0iqpkeNet_#rcrNrc$Lb^-#V)E7SR84c_@X z{p%I_^NTA3qHaGFcpEdl&5bJE1>S}ZUeBL+Q0df;ijM!bf)TY*6LtYXE*>uNJ_hz) z*IviIK9x%h%ivih`gzR;-z(djuUB<1hCbPQtgq^~O4(Q?!Rq}ehg&l=zoKVJmwi+6 zi?+LO{XVhtbYISM&K!@$PMuNBU2WM91}2Y=#p-v?pU~g^c*WbJV`Qb7z4Z5%53V{& z2}?mr3IA>C?dF#6^E7?l*))8|Xv)F-1Lw2R)S`9JaJ^)2UzX9-zAc=Wxv5XxT!WPO zhfndpFq9T+b>lwKmH2Kh87~gLY29jT-FvY(#<)Vb+WB(OyZ0OS`O9momEjgTfKlRZ zcd<5?64$>l?;%n&cQ?1z@2+P(CqCh#B(A>h5__ekjy=+2|AyXiCaQO? zF{mqKB&e%lV{iX1I!&prOz~?NL#ghbZ2hDf-A}2mcGFjS?S9PmpIg_`j+hW9W4Lx;%SNYadQy=fy*vXiil%jo{_g$Cz zg$o`cFM}Lcm#+18$(E&d;OPp+DaBuCKAOfN7qon>E_weYP?RU&$cB{hLjF~fSs`Gr zm+USgLXg`DTp*1f2SKyV(Ii%2<_G&7DHCZpFiQu&dU?yM(&_c`t;^Z)14Fzx(>r$Q zKxhw62+z&&tACZz(s6)IJ1#x-)g3Jx9G>LQY_|?uI7-5a5DX}8y8sdn9}F%}S8D?z zU|O0we)UnVI|15#Rbz(cRi+LvbFd)@3q97sqw&I-Y^HzV7Pt_*-TL?X47mD+^o;Qv z+t)$Q&bF^kDT_X^@|A!ei;#KUis(L-MiV>?ppTcC5EX%5Dy1`oPb8TudE0Do0Gl}9 zQMDO_MmOM5-o~ZwMu>yiW)he{m4qn10Fz5iwZQ~m4S10=ao!=NWQ|)?-cRU8hsa)- z`G(Ci=Z0^RhLf%#BJIajh=>Oeou-8>CQMi{oiYDj8!MHOTDey0I8_P-o6s|1-N8eA zcjCu*)slj9#}RvUpjo6co`4fM3IG#)q}GOX#=jwwg8I+ca)LNT6nP<+&X|dpfkhkQ znbGwnkZ0rUc2h5H&>ShY4L??-hKzRN#VH1y9Bjc%jOfJiAk-uC=ny%$MYq5%k!GY> z9Uv$u(?zlB+GHkvp<`f!sf}1O2B)P&Cj__AHHs+P;4w={!9qB~odyJtwGv_V$;42Q zD}hMvN|@6D{|N`tiIoZK7(!hKU)P<7DORSqpsWT@v@xR_6v%K2vf71lHnwOUgmG?U zvspf(BaM{&Edw)qaCVytB~lz_au5j4M`$XgXIvy9JvMl~UI*mJ!!kR-u8pVVS)Q4g z+jUFC9|qnzkNPA0UN2L;1H(?XKvHFhuN!g~onRr0p@^v;f^r+}F#a*#nQZ1;h~?m8 z(qWWn8c8(*#h!^@alptAJHWEA7gc~ zKr{A=Q+`H`kwUx8c*2lp*}AB~79S=iTHM$Qk8Tjn2*1dh{EQ3}Es{ATRW~fJ4GE-O zTJRcYV&YIi5Bih@F8S!9T}m8EVc3S+W9PEL^7dL_p`Jmz*hB)WwF2!ocd{cZnsT*GZCU&D<@h_Q(q z*0ac*P&1lA zP|z@iswl0H35bxzRP=nwLYqNG&cc0=-B|OM@Cte4cRfjlb88aV=2eeLI*mTMUddq83&Dt0-x*hho$V|Pndrq^{ zDCv(vD;TP1gSum)L0PBIO`0-%rICNNxfpHzdNw23l{?2!*>(gD+q|tt=W{x@ZIex) zDr|A8Ht^fvi}d^_ma0pZ?+PtU`>aD;2duS5BKw!ijRfDXWm`!vafX8Kxg6QgdrBQ1 z^-<`{;-xZ2bQ=>6Dt4+i_eXx=mz%Ku$j&zLc(^$-UZugl@tksr%3aG!wO(9vLDY&c zzPYtdt1=~^E+Ka5VKA-vWR#_bTFI!D2d`#tfi&k`RKZ8rrno(H-W*4&f6jS-$cXn) zK}N3*7M`!rvDWtI(V_x{1_;YBx=FZPTS=jezQ`Ns*T762FVf%{)67e3xbg{cnMDvUjzsq4+cZ52L#4Z~y=R literal 0 HcmV?d00001 diff --git a/src/components/common/DividingLine.tsx b/src/components/common/DividingLine.tsx new file mode 100644 index 0000000..0b3bb1e --- /dev/null +++ b/src/components/common/DividingLine.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface IDivideProps { + className?: string; +} + +const DividingLine = (props: IDivideProps) => { + return ( +
+ ); +}; + +export default DividingLine; diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx index 3f4b24d..25938c1 100644 --- a/src/components/common/ListView.tsx +++ b/src/components/common/ListView.tsx @@ -1,3 +1,4 @@ +import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { @@ -10,7 +11,9 @@ import { } from '@/components/ui/table'; import { ROUTES } from '@/constants/route'; import useChecked from '@/hooks/useChecked'; +import { useCheckedStore } from '@/stores/checkedStore'; import { IProjectProps } from '@/types/project'; +import { convertDateFormat } from '@/utils/date'; import { SquareArrowOutUpRightIcon } from 'lucide-react'; import { useEffect, useState } from 'react'; import { NavigateFunction, useNavigate } from 'react-router-dom'; @@ -37,6 +40,8 @@ const ListView = ({ option = 'list', data }: Omit) => { }; const List = ({ data, navi }: IListViewProps) => { + const { addChecked, removeChecked, removeAll } = useCheckedStore(); + const [items, setItems] = useState(() => { const initialData = data || []; return initialData.map((item) => ({ ...item, checked: false })); @@ -47,10 +52,10 @@ const List = ({ data, navi }: IListViewProps) => { const handleCheckboxChange = (id: number): void => { setItems( items.map((item) => { - if (item.projectId === id) { + if (item.projectSeq === id) { handleCheckedList.set(id); } - return item.projectId === id + return item.projectSeq === id ? { ...item, checked: !item.checked } : item; }) @@ -65,7 +70,7 @@ const List = ({ data, navi }: IListViewProps) => { })) ); !masterChecked - ? handleCheckedList.addAll(items.map((item) => item.projectId)) + ? handleCheckedList.addAll(items.map((item) => item.projectSeq)) : handleCheckedList.removeAll(); }; @@ -74,10 +79,14 @@ const List = ({ data, navi }: IListViewProps) => { setMasterChecked(allChecked); }, [items]); - const onTest = () => { - alert(`삭제요청 리스트: ${checkedList}`); - // 삭제요청 API 호출 - }; + useEffect(() => { + const currentChecked = new Set(checkedList); + // 한 번의 업데이트로 처리 + useCheckedStore.setState((state) => ({ + ...state, + checkedList: Array.from(currentChecked), + })); + }, [checkedList]); return (
@@ -87,31 +96,53 @@ const List = ({ data, navi }: IListViewProps) => { - Name - Last modified - Created + 프로젝트 명 + 작업목록 + 수정일 + 생성일 바로가기 {items.map((item, idx) => { return ( - + { - handleCheckboxChange(item.projectId); + handleCheckboxChange(item.projectSeq); }} checked={item.checked} /> - {item.name} - {item.modDate} - {item.regDate} + + {item.projectName} + + + {item.tts ? TTS : <>} + {item.vc ? VC : <>} + {item.concat ? ( + Concat + ) : ( + <> + )} + + + {convertDateFormat( + new Date(item.projectUpdateDate), + 'YYYY-MM-DD hh:mm:ss' + )} + + + {convertDateFormat( + new Date(item.projectDate), + 'YYYY-MM-DD hh:mm:ss' + )} + { - navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); + navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectSeq}`); }} > @@ -121,13 +152,6 @@ const List = ({ data, navi }: IListViewProps) => { })}
- {checkedList.length > 0 ? ( - - ) : ( - <> - )}
); }; @@ -138,17 +162,17 @@ const Tile = ({ data, navi }: IListViewProps) => { }; return (
-
    +
      {data ? ( data.map((item, idx) => (
    • { - navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectId}`); + navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectSeq}`); }} > - @@ -156,9 +180,9 @@ const Tile = ({ data, navi }: IListViewProps) => { e.stopPropagation(); onTest(e); }} - /> + /> */}
      썸네일
      -
      {item.name}
      +
      {item.projectName}
      • )) ) : ( diff --git a/src/components/common/NewProjectButton.tsx b/src/components/common/NewProjectButton.tsx new file mode 100644 index 0000000..b3ff781 --- /dev/null +++ b/src/components/common/NewProjectButton.tsx @@ -0,0 +1,69 @@ +import Tile from '@/components/common/Tile'; +import { Button } from '@/components/ui/button'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog'; +import { PROJECT_TYPE, ProjectType } from '@/pages/Home'; +import { BookAIcon, CombineIcon, FilePlusIcon, MicIcon } from 'lucide-react'; +import React from 'react'; + +const NewProjectButton = () => { + const handleClick = { + createNewProject: (type: ProjectType) => { + alert(`${type} 프로젝트 생성`); + }, + }; + return ( +
      + + + + + + + 새 프로젝트 생성 + +
      +
      + { + handleClick.createNewProject(PROJECT_TYPE.TTS); + }} + className='w-[100%]' + /> +
      +
      + { + handleClick.createNewProject(PROJECT_TYPE.VC); + }} + /> + { + handleClick.createNewProject(PROJECT_TYPE.CONCAT); + }} + /> +
      +
      +       +       +
      + ); +}; + +export default NewProjectButton; diff --git a/src/components/common/OneVc.tsx b/src/components/common/OneVc.tsx index 037f328..09bc5ff 100644 --- a/src/components/common/OneVc.tsx +++ b/src/components/common/OneVc.tsx @@ -8,7 +8,6 @@ const OneVc = () => {
      - {/* - + {(projects && projects.length > 0) ?? ( +
      + + +
      + )}
      ); }; diff --git a/src/components/sidebar/HomeSidebar.tsx b/src/components/sidebar/HomeSidebar.tsx index af1b8da..e9e98ea 100644 --- a/src/components/sidebar/HomeSidebar.tsx +++ b/src/components/sidebar/HomeSidebar.tsx @@ -1,4 +1,5 @@ -import { ChevronDown, Home, Search, Settings, Bell } from 'lucide-react'; +import { ChevronDown, Home, Bell, FolderOpen, Files } from 'lucide-react'; +import Logo from '@/assets/logo.png'; import { Sidebar, @@ -11,84 +12,108 @@ import { SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from '../ui/dropdown-menu'; +} from '@/components/ui/dropdown-menu'; +import DividingLine from '@/components/common/DividingLine'; +import { ROUTES } from '@/constants/route'; +import { PROJECT_DATA } from '@/mocks/projectData'; +import { useState } from 'react'; +import { IProjectProps } from '@/types/project'; +import { Button } from '@/components/ui/button'; +import { useAuthStore } from '@/stores/authStore'; +import NewProjectButton from '@/components/common/NewProjectButton'; // Menu items. -const items = [ +const Menus = [ { - title: 'Home', - url: '/', + title: '홈', + url: ROUTES.HOME, icon: Home, }, { - title: 'New Project', - url: 'project', - icon: Search, - }, - - { - title: 'My Project', - url: 'my-project', - icon: Settings, + title: '내 프로젝트', + url: ROUTES.MYPROJECT, + icon: FolderOpen, }, ]; const quickStartItem = [ { title: 'Project1', - url: 'project1', + url: ROUTES.PROJECT + ROUTES.TTS + '/1', + icon: Files, }, ]; export function HomeSidebar() { + const navigate = useNavigate(); + const { isAuthenticated, login, logout } = useAuthStore(); + + const items = PROJECT_DATA.slice(0, 3); + const [recents, setRecents] = useState(items); + return ( - - 로고 자리 + { + window.location.href = '/'; + }} + > + + - - - - OOO님 - - - - - - 계정 정보 - - - 계정 설정 - - - 로그아웃 - - - - + {isAuthenticated ? ( + <> + + + + OOO님 + + + + + + 계정 정보 + + + 계정 설정 + + + 로그아웃 + + + + + + ) : ( + + + + )} + - {items.map((item) => ( + {Menus.map((item) => ( @@ -98,18 +123,25 @@ export function HomeSidebar() { ))} + + + + - Quick starts + 최근 작업 프로젝트 - {quickStartItem.map((item) => ( - + {recents.map((item) => ( + - - {item.title} + + + {item.projectName} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..e87d62b --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
      + ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 89b5800..b9c60d3 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -22,9 +22,6 @@ const buttonVariants = cva( active: 'text-sky-500 hover:bg-accent', green: 'bg-green-primary text-white shadow hover:bg-green-5', blue: 'bg-blue-2', - // sideActive:'text' - aipark: - 'bg-aipark_primary hover:bg-aipark_primary/80 text-primary-foreground', }, size: { default: 'h-9 px-4 py-2', diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 0000000..d40c864 --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,119 @@ +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { cn } from "@/lib/utils" +import { Cross2Icon } from "@radix-ui/react-icons" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
      +) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
      +) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/src/mock/project.ts b/src/mock/project.ts deleted file mode 100644 index fa97eef..0000000 --- a/src/mock/project.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { IProjectProps } from '@/types/project'; - -export const PROJECT_DATA: IProjectProps[] = [ - { - checked: false, - name: '프로젝트 명1', - modDate: '2024-11-01', - regDate: '2024-10-11', - projectId: 1, - }, - { - checked: false, - name: '프로젝트 명2', - modDate: '2024-11-02', - regDate: '2024-10-12', - projectId: 2, - }, - { - checked: false, - name: '프로젝트 명3', - modDate: '2024-11-03', - regDate: '2024-10-13', - projectId: 3, - }, - { - checked: false, - name: '프로젝트 명4', - modDate: '2024-11-04', - regDate: '2024-10-14', - projectId: 4, - }, - { - checked: false, - name: '프로젝트 명5', - modDate: '2024-11-05', - regDate: '2024-10-15', - projectId: 5, - }, -]; diff --git a/src/mocks/projectData.ts b/src/mocks/projectData.ts new file mode 100644 index 0000000..2df2df1 --- /dev/null +++ b/src/mocks/projectData.ts @@ -0,0 +1,117 @@ +import { IProjectProps } from '@/types/project'; + +export const PROJECT_DATA: IProjectProps[] = [ + { + checked: false, + projectName: '프로젝트 명1', + projectUpdateDate: '2024-11-01T15:54:51.888Z', + projectDate: '2024-10-11T15:54:51.888Z', + projectSeq: 1, + tts: true, + vc: false, + concat: false, + projectActivate: 'N', + }, + { + checked: false, + projectName: '프로젝트 명3', + projectUpdateDate: '2024-11-03T15:54:51.888Z', + projectDate: '2024-10-13T15:54:51.888Z', + projectSeq: 3, + tts: true, + vc: true, + concat: false, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명4', + projectUpdateDate: '2024-11-04T15:54:51.888Z', + projectDate: '2024-10-14T15:54:51.888Z', + projectSeq: 4, + tts: true, + vc: false, + concat: true, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명2', + projectUpdateDate: '2024-11-02T15:54:51.888Z', + projectDate: '2024-10-12T15:54:51.888Z', + projectSeq: 2, + tts: false, + vc: false, + concat: false, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명5', + projectUpdateDate: '2024-11-05T15:54:51.888Z', + projectDate: '2024-10-15T15:54:51.888Z', + projectSeq: 5, + tts: true, + vc: true, + concat: true, + projectActivate: 'Y', + }, +]; + +export const PROJECT_DATA2: IProjectProps[] = [ + { + checked: false, + projectName: '프로젝트 명1', + projectUpdateDate: '2024-11-01', + projectDate: '2024-10-11', + projectSeq: 1, + tts: true, + vc: false, + concat: false, + projectActivate: 'N', + }, + { + checked: false, + projectName: '프로젝트 명3', + projectUpdateDate: '2024-11-03', + projectDate: '2024-10-13', + projectSeq: 3, + tts: true, + vc: true, + concat: false, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명4', + projectUpdateDate: '2024-11-04', + projectDate: '2024-10-14', + projectSeq: 4, + tts: true, + vc: false, + concat: true, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명2', + projectUpdateDate: '2024-11-02', + projectDate: '2024-10-12', + projectSeq: 2, + tts: false, + vc: false, + concat: false, + projectActivate: 'Y', + }, + { + checked: false, + projectName: '프로젝트 명5', + projectUpdateDate: '2024-11-05', + projectDate: '2024-10-15', + projectSeq: 5, + tts: true, + vc: true, + concat: true, + projectActivate: 'Y', + }, +]; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index b9905a9..0620ebd 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,40 +1,42 @@ +import DividingLine from '@/components/common/DividingLine'; import ListView from '@/components/common/ListView'; -import { Button } from '@/components/ui/button'; -import { PROJECT_DATA } from '@/mock/project'; +import { PROJECT_DATA } from '@/mocks/projectData'; import MyProject from '@/pages/MyProject'; +export type ProjectType = 'TTS' | 'VC' | 'Concat'; +export const PROJECT_TYPE: Record = { + TTS: 'TTS', + VC: 'VC', + CONCAT: 'Concat', +}; + const Home = () => { return (
      -
      - -
      -
      -

      Quick Starts

      - -
      -
      -

      My Project

      - -
      -
      -
      -

      캐릭터 추천

      -
      - 썸네일 +
      +
      + Home +
      +
      + +
      +
      +
      + 최근 프로젝트
      +
      +
      +
      -
      -

      블로그

      -
      - 썸네일 +
      +
      +
      +
      + 내 프로젝트
      +
      +
      +
      diff --git a/src/pages/MyProject.tsx b/src/pages/MyProject.tsx index 86a26fe..6af8410 100644 --- a/src/pages/MyProject.tsx +++ b/src/pages/MyProject.tsx @@ -10,59 +10,106 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select'; -import { PROJECT_DATA } from '@/mock/project'; -import { AlignJustifyIcon, LayoutGridIcon } from 'lucide-react'; -import { useState } from 'react'; +import { PROJECT_DATA, PROJECT_DATA2 } from '@/mocks/projectData'; +import { useCheckedStore } from '@/stores/checkedStore'; +import { useEffect, useState } from 'react'; +import dayjs from 'dayjs'; +import { IProjectProps } from '@/types/project'; +import DividingLine from '@/components/common/DividingLine'; const MyProject = ({ option = 'list', - data = PROJECT_DATA, + data = PROJECT_DATA2, }: Omit) => { - const [viewOption, setViewOption] = useState(option); + const [orderValue, setOrderValue] = useState(''); + const { checkedList } = useCheckedStore(); + const [viewData, setViewData] = useState(data || []); + + const handleSelect = { + change: (value: string) => { + setOrderValue(value); + }, + }; + + const handleButton = { + remove: () => { + // api 호출 + alert(`${checkedList} 삭제요청`); + }, + }; + + const doSortList = { + projectDate: () => { + const sortedData = [...viewData].sort( + (a, b) => + new Date(a.projectDate).getTime() - new Date(b.projectDate).getTime() + ); + setViewData(sortedData); + }, + projectUpdateDate: () => { + const sortedData = [...viewData].sort( + (a, b) => + new Date(a.projectUpdateDate).getTime() - + new Date(b.projectUpdateDate).getTime() + ); + setViewData(sortedData); + }, + }; + + const orderList = (orderValue: string) => { + if (orderValue === 'order-recent') { + doSortList.projectUpdateDate(); + } else if (orderValue === 'order-register') { + doSortList.projectDate(); + } + }; + + useEffect(() => { + orderList(orderValue); + }, [orderValue]); return ( -
      -
      -
      - -
      -
      - - -
      +
      +
      +
      +
      + Home +
      +
      -
      - {data ? ( - - ) : ( -
      -

      데이터를 불러오는 중입니다...

      + +
      +
      +
      +
      - )} + {checkedList && checkedList.length > 0 ? ( +
      + +
      + ) : ( + <> + )} +
      +
      + {viewData ? ( + + ) : ( +
      +

      데이터를 불러오는 중입니다...

      +
      + )} +
      ); diff --git a/src/stores/checkedStore.ts b/src/stores/checkedStore.ts new file mode 100644 index 0000000..3f1f9fc --- /dev/null +++ b/src/stores/checkedStore.ts @@ -0,0 +1,36 @@ +import { create } from 'zustand'; + +interface checkedState { + checkedList: number[]; + addChecked: (projectSeq: number) => void; + removeChecked: (index: number) => void; + updateChecked: (index: number, newProjectSeq: number) => void; + removeAll: () => void; +} + +export const useCheckedStore = create((set) => ({ + checkedList: [], + addChecked: (projectSeq) => + set((state) => ({ + checkedList: state.checkedList.includes(projectSeq) + ? state.checkedList + : [...state.checkedList, projectSeq], + })), + removeChecked: (index) => + set((state) => ({ + checkedList: + index >= 0 && index < state.checkedList.length + ? state.checkedList.filter((_, i) => i !== index) + : state.checkedList, + })), + updateChecked: (index, newProjectSeq) => + set((state) => ({ + checkedList: + index >= 0 && index < state.checkedList.length + ? state.checkedList.map((projectSeq, i) => + i === index ? newProjectSeq : projectSeq + ) + : state.checkedList, + })), + removeAll: () => set(() => ({ checkedList: [] })), +})); diff --git a/src/types/project.ts b/src/types/project.ts index 340ebcf..6bf7b94 100644 --- a/src/types/project.ts +++ b/src/types/project.ts @@ -1,7 +1,11 @@ export interface IProjectProps { checked: boolean; - projectId: number; - name: string; - modDate: string; - regDate: string; + projectSeq: number; + projectName: string; + projectUpdateDate: string; + projectDate: string; + tts: boolean; + vc: boolean; + concat: boolean; + projectActivate: 'Y' | 'N'; } diff --git a/src/utils/date.ts b/src/utils/date.ts new file mode 100644 index 0000000..7699ed6 --- /dev/null +++ b/src/utils/date.ts @@ -0,0 +1,8 @@ +import dayjs from 'dayjs'; +import 'dayjs/locale/ko'; +dayjs.locale('ko'); + +export const convertDateFormat = ( + date: Date, + format: string = 'YYYY-MM-DD' +): string => dayjs(date).format(format); diff --git a/tailwind.config.js b/tailwind.config.js index 1592e54..c996beb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -60,6 +60,7 @@ module.exports = { 8: '#CB0137', primary: '#FD1E5A', }, + background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', card: { From dbad49235fd448639c2a62cb39475f5d952f75a2 Mon Sep 17 00:00:00 2001 From: wonjichoi Date: Fri, 29 Nov 2024 10:21:25 +0900 Subject: [PATCH 54/73] =?UTF-8?q?[Feat]=20TTS=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=B0=BD=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(#60)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: TTS 작업창 페이지 퍼블리싱(#29) * feat: TTS 텍스트 선택 삭제 기능(#29) * feat: 텍스트 입력시에 텍스트 추가 -> 저장/취소 버튼 변경 기능추가(#29) * feat: 상단 옵션 표시 버튼 추가(#29) * feat: 상단 옵션 표시 버튼 여백 추가(#29) * feat: 프로젝트 타이틀 수정할 수 있게 input 으로 변경(#29) * feat: useOutsideClick, useTextInputs 와 tts 컴포넌트 분리 (#29) * feat: CustomCheckbox 컴포넌트 추가 (#29) * fix: CustomCheckbox ui 안나오는 문제 해결 (#29) * feat: 텍스트 입력 최대 길이와 특수문자 제한 (#29) * feat: 프로젝트 이름 최대 길이제한 추가(#29) * feat: 필요없는 props 삭제 (#29) * fix: TTSControlsProps 추가/TTS.tsx 오류 해결 (#29) * feat: 텍스트 추가 버튼 클릭 시 옵션값도 한세트로 추가되게 수정 (#30) * fix: 텍스트 입력시에 저장/취소 버튼으로 안바뀌는 에러 해결 (#30) * feat: TTS Header 타이틀 수정 아이콘 추가 (#30) * feat: 버튼 디자인 적용 (#30) * feat: 텍스트 추가 버튼 디자인 변경 (#30) * Design: 버튼 디자인 변경 (#30) * feat: 성우선택 select 수정(#30) * feat: 성우 선택 select 클릭 후 닫히는 액션 추가 (#30) * design: 저장/취소 버튼 디자인(#30) * feat: 목 데이터 추가 (#30) * feat: 성우선택 select 다시 선택시 초기화되게 수정 (#30) * feat: 텍스트 추가 버튼 클릭시 텍스트 추가 버튼도 같이 추가되게 수정(#30) * design: 작업창 overflow:auto 추가(#30) * fix: 불필요한 주석 제거 (#30) --------- Co-authored-by: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> --- package-lock.json | 38 +++++ package.json | 1 + src/components/tts/TTSControls.tsx | 34 +---- src/components/tts/TTSHeader.tsx | 21 +-- src/components/tts/TextInputList.tsx | 201 ++++++++++++++++++++++++--- src/components/ui/command.tsx | 150 ++++++++++++++++++++ src/components/ui/dialog.tsx | 2 + src/components/ui/popover.tsx | 31 +++++ src/mock/speaker.ts | 52 +++++++ src/pages/TTS.tsx | 16 +-- src/stores/textInputStore.ts | 15 +- src/types/tts.ts | 16 +++ tailwind.config.js | 1 + 13 files changed, 508 insertions(+), 70 deletions(-) create mode 100644 src/components/ui/command.tsx create mode 100644 src/components/ui/popover.tsx create mode 100644 src/mock/speaker.ts diff --git a/package-lock.json b/package-lock.json index d33e0bb..b3f6d87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.1", @@ -1664,6 +1665,43 @@ } } }, + "node_modules/@radix-ui/react-popover": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz", + "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", diff --git a/package.json b/package.json index ccfeaaf..23ba9d4 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.1", "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.1", diff --git a/src/components/tts/TTSControls.tsx b/src/components/tts/TTSControls.tsx index 1557954..70e7907 100644 --- a/src/components/tts/TTSControls.tsx +++ b/src/components/tts/TTSControls.tsx @@ -32,39 +32,15 @@ export const TTSControls: React.FC = ({ />
      -
      - -
      -
      - - -
      -
      - - - - - -
      -
      ); diff --git a/src/components/tts/TTSHeader.tsx b/src/components/tts/TTSHeader.tsx index 43e7391..04cc6a2 100644 --- a/src/components/tts/TTSHeader.tsx +++ b/src/components/tts/TTSHeader.tsx @@ -1,5 +1,6 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; +import { Pencil } from 'lucide-react'; interface TTSHeaderProps { projectName: string; @@ -10,19 +11,23 @@ export const TTSHeader: React.FC = ({ projectName, onProjectNameChange }) => { + return (
      - +
      + + +
      {new Date().toLocaleDateString()}
      - - + +
      diff --git a/src/components/tts/TextInputList.tsx b/src/components/tts/TextInputList.tsx index cd089c6..2047afa 100644 --- a/src/components/tts/TextInputList.tsx +++ b/src/components/tts/TextInputList.tsx @@ -1,42 +1,207 @@ -import { TTSState } from "@/types/tts"; +import { TTSState, Language, Style, Voice } from "@/types/tts"; import { CustomCheckbox } from "@/components/common/CustomCheckbox"; import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Repeat2, Play, Download, MoveVertical } from "lucide-react"; +import { useEffect, useState } from "react"; +import { mockLanguages, mockStyles, mockVoices } from "@/mock/speaker" +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; interface TextInputListProps { state: TTSState; toggleSelection: (id: number) => void; handleTextChange: (id: number, text: string) => void; cancelEdit: () => void; + addTextInput: () => void; + saveInput: () => void; } export const TextInputList: React.FC = ({ state, toggleSelection, handleTextChange, - cancelEdit + cancelEdit, + addTextInput, + saveInput }) => { + // const [languages, setLanguages] = useState([]); + const [languages, setLanguages] = useState(mockLanguages); + // const [styles, setStyles] = useState([]); + const [styles, setStyles] = useState([]); + // const [voices, setVoices] = useState([]); + const [voices, setVoices] = useState([]); + + const [selectedLanguage, setSelectedLanguage] = useState(null); + const [selectedStyle, setSelectedStyle] = useState(null); + const [selectedVoice, setSelectedVoice] = useState(null); + + const [isLanguageSelected, setIsLanguageSelected] = useState(false); + const [isStyleSelected, setIsStyleSelected] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + // useEffect(() => { + // fetch('/api/language') + // .then(response => response.json()) + // .then(data => setLanguages(data.response.languageList)); + // }, []); + + // useEffect(() => { + // if (selectedLanguage) { + // fetch(`/api/style?language=${selectedLanguage}`) + // .then(response => response.json()) + // .then(data => setStyles(data.response.styleList)); + // } + // }, [selectedLanguage]); + + // useEffect(() => { + // if (selectedStyle) { + // fetch(`/api/voice?style=${selectedStyle}`) + // .then(response => response.json()) + // .then(data => setVoices(data.response.voiceList)); + // } + // }, [selectedStyle]); + + useEffect(() => { + if (selectedLanguage) { + setStyles(mockStyles[selectedLanguage as keyof typeof mockStyles] || []); + setIsLanguageSelected(true); + setIsStyleSelected(false); + } + }, [selectedLanguage]); + + useEffect(() => { + if (selectedStyle) { + setVoices(mockVoices[selectedStyle as keyof typeof mockVoices] || []); + setIsStyleSelected(true); + } + }, [selectedStyle]); + + const handleVoiceSelect = (voiceName: string) => { + setSelectedVoice(voiceName); + setIsPopoverOpen(false); + }; + + const handlePopoverOpen = () => { + setIsPopoverOpen(true); + setIsLanguageSelected(false); + setIsStyleSelected(false); + setSelectedStyle(null); + setSelectedVoice(null); + }; + return ( <> {state.textInputs.map((input) => (
      - toggleSelection(input.id)} - /> - handleTextChange(input.id, e.target.value)} - placeholder="내용을 입력해주세요.(최대 2,000자)" - onFocus={() => { - if (input.text === '') { - cancelEdit(); - } - }} - /> +
      +
      +
      + + + + + +
      +
      + {languages.map(lang => ( +
      { + setSelectedLanguage(lang.languageCode); + setIsLanguageSelected(true); + }} + > + {lang.languageName} +
      + ))} +
      + {isLanguageSelected && ( +
      + {styles.map(style => ( +
      { + setSelectedStyle(style.name); + setIsStyleSelected(true); + }} + > + {style.mood} +
      + ))} +
      + )} + {isStyleSelected && ( +
      + {voices.map(voice => ( +
      handleVoiceSelect(voice.name)} + > + {voice.name} +
      + ))} +
      + )} +
      +       +       + + + + + + + +
      +
      + + + +
      +
      +
      + toggleSelection(input.id)} + /> + handleTextChange(input.id, e.target.value)} + placeholder="내용을 입력해주세요.(최대 2,000자)" + onFocus={() => { + if (input.text === '') { + cancelEdit(); + } + }} + /> +
      + +
      + {input.isEditing ? ( + <> + + + + ) : ( + + )} +
      +
      ))} diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx new file mode 100644 index 0000000..4216fea --- /dev/null +++ b/src/components/ui/command.tsx @@ -0,0 +1,150 @@ +import * as React from "react" +import { type DialogProps } from "@radix-ui/react-dialog" +import { Command as CommandPrimitive } from "cmdk" +import { cn } from "@/lib/utils" +import { Dialog, DialogContent } from "@/components/ui/dialog" +import { MagnifyingGlassIcon } from "@radix-ui/react-icons" + +const Command = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Command.displayName = CommandPrimitive.displayName + +const CommandDialog = ({ children, ...props }: DialogProps) => { + return ( + + + + {children} + + + + ) +} + +const CommandInput = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
      + + +
      +)) + +CommandInput.displayName = CommandPrimitive.Input.displayName + +const CommandList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) + +CommandList.displayName = CommandPrimitive.List.displayName + +const CommandEmpty = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => ( + +)) + +CommandEmpty.displayName = CommandPrimitive.Empty.displayName + +const CommandGroup = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) + +CommandGroup.displayName = CommandPrimitive.Group.displayName + +const CommandSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +CommandSeparator.displayName = CommandPrimitive.Separator.displayName + +const CommandItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) + +CommandItem.displayName = CommandPrimitive.Item.displayName + +const CommandShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +CommandShortcut.displayName = "CommandShortcut" + +export { + Command, + CommandDialog, + CommandInput, + CommandList, + CommandEmpty, + CommandGroup, + CommandItem, + CommandShortcut, + CommandSeparator, +} diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index d40c864..b5aaef7 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -1,3 +1,5 @@ +"use client" + import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { cn } from "@/lib/utils" diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx new file mode 100644 index 0000000..d82e714 --- /dev/null +++ b/src/components/ui/popover.tsx @@ -0,0 +1,31 @@ +import * as React from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import { cn } from "@/lib/utils" + +const Popover = PopoverPrimitive.Root + +const PopoverTrigger = PopoverPrimitive.Trigger + +const PopoverAnchor = PopoverPrimitive.Anchor + +const PopoverContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + + + +)) +PopoverContent.displayName = PopoverPrimitive.Content.displayName + +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } diff --git a/src/mock/speaker.ts b/src/mock/speaker.ts new file mode 100644 index 0000000..e9e0074 --- /dev/null +++ b/src/mock/speaker.ts @@ -0,0 +1,52 @@ +export const mockLanguages = [ + { languageCode: "ko", languageName: "한국어" }, + { languageCode: "en", languageName: "영어" }, + { languageCode: "ja", languageName: "일본어" }, +]; + +export const mockStyles = { + ko: [ + { name: "standard", mood: "표준" }, + { name: "cheerful", mood: "밝은" }, + { name: "calm", mood: "차분한" }, + ], + en: [ + { name: "casual", mood: "캐주얼" }, + { name: "formal", mood: "공식적인" }, + ], + ja: [ + { name: "polite", mood: "정중한" }, + { name: "friendly", mood: "친근한" }, + ], +}; + +export const mockVoices = { + standard: [ + { voiceSeq: 1, name: "김철수" }, + { voiceSeq: 2, name: "이영희" }, + ], + cheerful: [ + { voiceSeq: 3, name: "박지성" }, + { voiceSeq: 4, name: "손흥민" }, + ], + calm: [ + { voiceSeq: 5, name: "정우성" }, + { voiceSeq: 6, name: "고소영" }, + ], + casual: [ + { voiceSeq: 3, name: "John" }, + { voiceSeq: 4, name: "Lizy" }, + ], + formal: [ + { voiceSeq: 5, name: "Noah" }, + { voiceSeq: 6, name: "Elowen" }, + ], + polite: [ + { voiceSeq: 3, name: "みつき" }, + { voiceSeq: 4, name: "あいり" }, + ], + friendly: [ + { voiceSeq: 5, name: "あんな" }, + { voiceSeq: 6, name: "ななこ" }, + ], +}; \ No newline at end of file diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx index f1ee5ac..b327367 100644 --- a/src/pages/TTS.tsx +++ b/src/pages/TTS.tsx @@ -37,7 +37,7 @@ const TTS: React.FC = () => { }; return ( -
      +
      { toggleSelection={toggleSelection} handleTextChange={handleTextChange} cancelEdit={cancelEdit} + addTextInput={addTextInput} + saveInput={saveInput} /> -
      - {textInputs.some((input) => input.isEditing) ? ( - <> - - - - ) : ( - - )} -
      ); }; diff --git a/src/stores/textInputStore.ts b/src/stores/textInputStore.ts index c4db32e..f603a1f 100644 --- a/src/stores/textInputStore.ts +++ b/src/stores/textInputStore.ts @@ -18,6 +18,7 @@ export const useTextInputs = create((set) => ({ ], isAllSelected: false, // 초기값 설정 editingId: null, // 초기값 설정 + addTextInput: () => set((state) => { const newId = @@ -32,6 +33,7 @@ export const useTextInputs = create((set) => ({ ], }; }), + addTextInputs: (texts) => set((state) => ({ ...state, @@ -45,14 +47,16 @@ export const useTextInputs = create((set) => ({ })), ], })), + handleTextChange: (id, newText) => set((state) => ({ ...state, textInputs: state.textInputs.map((input) => - input.id === id ? { ...input, text: newText } : input + input.id === id ? { ...input, text: newText, isEditing: true } : input ), editingId: state.editingId === null ? id : state.editingId, })), + toggleSelection: (id) => set((state) => ({ ...state, @@ -60,6 +64,7 @@ export const useTextInputs = create((set) => ({ input.id === id ? { ...input, isSelected: !input.isSelected } : input ), })), + toggleAllSelection: () => set((state) => { const newIsAllSelected = !state.isAllSelected; @@ -72,22 +77,28 @@ export const useTextInputs = create((set) => ({ })), }; }), + deleteSelectedInputs: () => set((state) => ({ ...state, textInputs: state.textInputs.filter((input) => !input.isSelected), isAllSelected: false, })), + saveInput: () => set((state) => ({ ...state, + textInputs: state.textInputs.map((input) => + input.id === state.editingId ? { ...input, isEditing: false } : input + ), editingId: null, })), + cancelEdit: () => set((state) => ({ ...state, textInputs: state.textInputs.map((input) => - input.id === state.editingId ? { ...input, text: '' } : input + input.id === state.editingId ? { ...input, text: '', isEditing: false } : input ), editingId: null, })), diff --git a/src/types/tts.ts b/src/types/tts.ts index ffec1d5..b84cc12 100644 --- a/src/types/tts.ts +++ b/src/types/tts.ts @@ -9,4 +9,20 @@ export interface TTSState { textInputs: TextInput[]; isAllSelected: boolean; editingId: number | null; +} + +export interface Language { + languageCode: string; + languageName: string; +} + + +export interface Style { + name: string; + mood: string; +} + +export interface Voice { + voiceSeq: string; + name: string; } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index c996beb..357f425 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -115,4 +115,5 @@ module.exports = { }, }, plugins: [require('tailwindcss-animate')], + mode: "jit", }; From 3781449a36db4837eae0bdbcf60b2b6ed29fcb68 Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Fri, 29 Nov 2024 10:22:34 +0900 Subject: [PATCH 55/73] =?UTF-8?q?fix:=20file=20=ED=83=AD=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=ED=95=B4=EB=91=94=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20edit=ED=83=AD?= =?UTF-8?q?=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=82=AC=EB=9D=BC=EC=A7=80?= =?UTF-8?q?=EB=8A=94=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95=20(#61)=20(#62?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/TTSSidebar.tsx | 21 ++++++++++++++- .../sidebar/sidebarContent/FileContent.tsx | 26 ++++++++++++++----- 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/components/sidebar/TTSSidebar.tsx b/src/components/sidebar/TTSSidebar.tsx index a02f86a..d2b48be 100644 --- a/src/components/sidebar/TTSSidebar.tsx +++ b/src/components/sidebar/TTSSidebar.tsx @@ -3,8 +3,16 @@ import { Button } from '@/components/ui/button'; import EditContent from '@/components/sidebar/sidebarContent/EditContent'; import { FileContent } from '@/components/sidebar/sidebarContent/FileContent'; +interface IFileStatus { + name: string; + status: '완료' | '오류'; +} + const TTSSidebar = () => { const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); + const [allFiles, setAllFiles] = useState([]); // 전체 업로드 시도된 파일 리스트 + const [uploadedFiles, setUploadedFiles] = useState([]); // 업로드 완료된 파일 리스트 + const [uploadingCount, setUploadingCount] = useState(0); // 현재 업로드 중인 파일 개수 return ( <> @@ -25,7 +33,18 @@ const TTSSidebar = () => {
      {/* 탭별 콘텐츠 */} - {activeTab === 'file' ? : } + {activeTab === 'file' ? ( + + ) : ( + + )} ); }; diff --git a/src/components/sidebar/sidebarContent/FileContent.tsx b/src/components/sidebar/sidebarContent/FileContent.tsx index 87a3ab4..57015ca 100644 --- a/src/components/sidebar/sidebarContent/FileContent.tsx +++ b/src/components/sidebar/sidebarContent/FileContent.tsx @@ -1,18 +1,30 @@ -import { useState } from 'react'; import { Button } from '@/components/ui/button'; -import { useTextInputs } from '@/stores/textInputStore'; import { CircularProgress } from '@/components/ui/CircularProgress'; +import { useTextInputs } from '@/stores/textInputStore'; interface IFileStatus { name: string; - status: '완료' | '오류'; // 완료 또는 오류 상태 + status: '완료' | '오류'; +} + +interface IFileContentProps { + allFiles: IFileStatus[]; + setAllFiles: React.Dispatch>; + uploadedFiles: string[]; + setUploadedFiles: React.Dispatch>; + uploadingCount: number; + setUploadingCount: React.Dispatch>; } -export const FileContent = () => { +export const FileContent: React.FC = ({ + allFiles, + setAllFiles, + uploadedFiles, + setUploadedFiles, + uploadingCount, + setUploadingCount, +}) => { const { addTextInputs } = useTextInputs(); - const [allFiles, setAllFiles] = useState([]); // 전체 업로드 시도된 파일 리스트 - const [uploadedFiles, setUploadedFiles] = useState([]); // 업로드 완료된 파일 리스트 - const [uploadingCount, setUploadingCount] = useState(0); // 현재 업로드 중인 파일 개수 const handleFileUpload = (e: React.ChangeEvent) => { const files = e.target.files; From 0b2152d2eca41e3f781c8a6ff0cce44f471702e2 Mon Sep 17 00:00:00 2001 From: kimisadev27 <34756233+kimisadev27@users.noreply.github.com> Date: Fri, 29 Nov 2024 10:53:14 +0900 Subject: [PATCH 56/73] =?UTF-8?q?[fix]:=20=EB=B0=B0=ED=8F=AC=20api=20endPo?= =?UTF-8?q?int=20=EB=93=B1=EB=A1=9D=20(#64)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30) * fix: 버그 수정 (#63) * fix: 배포 api endPoint 등록 (#63) --------- Co-authored-by: wonjichoe Co-authored-by: Haeun --- .github/workflows/main.yml | 2 +- package-lock.json | 26 ++++++++++++++++++++++++++ package.json | 1 + src/components/tts/TTSHeader.tsx | 4 ++-- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f815045..aff45bb 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -29,7 +29,7 @@ jobs: AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_REGION: ap-northeast-2 # 예: us-east-1 SOURCE_DIR: ./dist # 빌드된 정적 파일 경로 - + VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL}} - name: Invalidate CloudFront cache run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*" env: diff --git a/package-lock.json b/package-lock.json index b3f6d87..944ad70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "cmdk": "^1.0.4", "dayjs": "^1.11.13", "lucide-react": "^0.454.0", "react": "^18.3.1", @@ -3341,6 +3342,22 @@ "node": ">=6" } }, + "node_modules/cmdk": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz", + "integrity": "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-id": "^1.1.0", + "@radix-ui/react-primitive": "^2.0.0", + "use-sync-external-store": "^1.2.2" + }, + "peerDependencies": { + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5857,6 +5874,15 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 23ba9d4..cfe0ff3 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "cmdk": "^1.0.4", "dayjs": "^1.11.13", "lucide-react": "^0.454.0", "react": "^18.3.1", diff --git a/src/components/tts/TTSHeader.tsx b/src/components/tts/TTSHeader.tsx index 04cc6a2..47ea214 100644 --- a/src/components/tts/TTSHeader.tsx +++ b/src/components/tts/TTSHeader.tsx @@ -26,8 +26,8 @@ export const TTSHeader: React.FC = ({
      {new Date().toLocaleDateString()}
      - - + +
      From 4f13907ab161b5b85f86bef8adeeb105c3c2b94f Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Mon, 2 Dec 2024 10:52:15 +0900 Subject: [PATCH 57/73] =?UTF-8?q?[Feature]=20edit=20=ED=83=AD=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=84=A0=ED=83=9D=ED=95=9C=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=B2=B4=ED=81=AC=ED=95=9C=20=EC=9D=B8=ED=92=8B=EC=B0=BD?= =?UTF-8?q?=EC=97=90=20=EC=A0=81=EC=9A=A9=20(#67)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: ttsVoice 호출api (#66) * feat: popover 컴포넌트 분리 (#66) * feat: ttsSidebar에 voiceSelectPopover 적용 * feat: 개별적용 버튼 생성 및 onclick함수 생성 (#66) * feat: edit 탭에서 선택한 내용 ttsInputList에 적용 (#66) * feat: edit에서 설정한 값 tts페이지 태그에 적용 (#66) * feat: 체크박스 선택한 항목에 edit에서 적용한 설정 적용 (#66) --- src/apis/ttsVoice.ts | 26 ++ src/components/common/VoiceSelectPopover.tsx | 126 +++++++++ .../sidebar/sidebarContent/EditContent.tsx | 139 ++++++++-- src/components/tts/TextInputList.tsx | 242 ++++++------------ src/pages/TTS.tsx | 20 +- src/stores/textInputStore.ts | 64 ++++- src/stores/useAudioSettingsStore.ts | 36 +++ src/types/tts.ts | 7 +- 8 files changed, 458 insertions(+), 202 deletions(-) create mode 100644 src/apis/ttsVoice.ts create mode 100644 src/components/common/VoiceSelectPopover.tsx create mode 100644 src/stores/useAudioSettingsStore.ts diff --git a/src/apis/ttsVoice.ts b/src/apis/ttsVoice.ts new file mode 100644 index 0000000..cb74e3c --- /dev/null +++ b/src/apis/ttsVoice.ts @@ -0,0 +1,26 @@ +import axios from 'axios'; +import apiClient from '@/apis/apiClient'; + +interface Language { + languageCode: string; + languageName: string; + regionCode: string; + regionName: string; +} + +interface LanguageResponse { + status: number; + response: { + languageList: Language[]; + }; +} + +export const ttsVoice = async (): Promise => { + try { + const response = await apiClient.get('/language'); + return response.data.response.languageList; + } catch (error) { + console.error(error); + throw new Error('언어 데이터를 가져오는 데 실패했습니다.'); + } +}; diff --git a/src/components/common/VoiceSelectPopover.tsx b/src/components/common/VoiceSelectPopover.tsx new file mode 100644 index 0000000..632e220 --- /dev/null +++ b/src/components/common/VoiceSelectPopover.tsx @@ -0,0 +1,126 @@ +import { useState, useEffect } from 'react'; +import { Button } from '@/components/ui/button'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/components/ui/popover'; +import { mockLanguages, mockStyles, mockVoices } from '@/mock/speaker'; +import { ChevronDown } from 'lucide-react'; + +interface VoiceSelectionPopoverProps { + selectedLanguage: string | null; + setSelectedLanguage: (language: string) => void; + selectedStyle: string | null; + setSelectedStyle: (style: string) => void; + selectedVoice: string | null; + setSelectedVoice: (voice: string) => void; +} + +export const VoiceSelectionPopover: React.FC = ({ + selectedLanguage, + setSelectedLanguage, + selectedStyle, + setSelectedStyle, + selectedVoice, + setSelectedVoice, +}) => { + const [languages, setLanguages] = useState(mockLanguages); + const [styles, setStyles] = useState([]); + const [voices, setVoices] = useState([]); + const [isLanguageSelected, setIsLanguageSelected] = useState(false); + const [isStyleSelected, setIsStyleSelected] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + useEffect(() => { + if (selectedLanguage) { + setStyles(mockStyles[selectedLanguage as keyof typeof mockStyles] || []); + setIsLanguageSelected(true); + setIsStyleSelected(false); + } + }, [selectedLanguage]); + + useEffect(() => { + if (selectedStyle) { + setVoices(mockVoices[selectedStyle as keyof typeof mockVoices] || []); + setIsStyleSelected(true); + } + }, [selectedStyle]); + + const handleVoiceSelect = (voiceName: string) => { + setSelectedVoice(voiceName); + setIsPopoverOpen(false); + }; + + const handlePopoverOpen = () => { + setIsPopoverOpen(true); + setIsLanguageSelected(false); + setIsStyleSelected(false); + setSelectedStyle(''); + setSelectedVoice(''); + }; + + return ( + + + + + +
      +
      + {languages.map((lang) => ( +
      { + setSelectedLanguage(lang.languageCode); + setIsLanguageSelected(true); + }} + > + {lang.languageName} +
      + ))} +
      + {isLanguageSelected && ( +
      + {styles.map((style) => ( +
      { + setSelectedStyle(style.name); + setIsStyleSelected(true); + }} + > + {style.mood} +
      + ))} +
      + )} + {isStyleSelected && ( +
      + {voices.map((voice) => ( +
      handleVoiceSelect(voice.name)} + > + {voice.name} +
      + ))} +
      + )} +
      +       +       + ); +}; diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index a814ef4..f000144 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -2,28 +2,44 @@ import { useState } from 'react'; import { DropdownSelector } from '@/components/ui/dropDownSelector'; import { SliderControl } from '@/components/ui/sliderControl'; import { Button } from '@/components/ui/button'; +import { VoiceSelectionPopover } from '@/components/common/VoiceSelectPopover'; +import { useAudioSettingsStore } from '@/stores/useAudioSettingsStore'; +import { useTextInputs } from '@/stores/textInputStore'; const EditContent = () => { - const [selectedFavorite, setSelectedFavorite] = useState('성우 이름'); - const [selectedVoice, setSelectedVoice] = useState('성우 이름'); + //로컬 상태 + const [localSpeed, setLocalSpeed] = useState(1); + const [localSliders, setLocalSliders] = useState([ + { id: 'pitch', value: 0.0, min: -20.0, max: 20.0, label: '음높이' }, + { id: 'volume', value: 0.0, min: -10.0, max: 10.0, label: '음량' }, + ]); + const [localVoices, setLocalVoices] = useState(null); + const [isPreviewLoading, setIsPreviewLoading] = useState(false); const [isApplyLoading, setIsApplyLoading] = useState(false); + const [selectedLanguage, setSelectedLanguage] = useState(null); + const [selectedStyle, setSelectedStyle] = useState(null); - // 속도 값을 블럭으로 표현 const speedValues = [0.25, 0.5, 1, 2, 4]; - const [selectedSpeed, setSelectedSpeed] = useState(1); // 기본값 1 + const { + selectedSpeed, + setSelectedSpeed, + sliders, + setSliders, + selectedVoices, + setSelectedVoices, + } = useAudioSettingsStore(); const handleSpeedClick = (value: number) => { - setSelectedSpeed(value); + setLocalSpeed(value); }; - const [sliders, setSliders] = useState([ - { id: 'pitch', value: 0.0, label: '음높이', min: -20.0, max: 20.0 }, - { id: 'volume', value: 0.0, label: '음량', min: -10.0, max: 10.0 }, - ]); + const handleVoiceChange = (voice: string | null) => { + setLocalVoices(voice); + }; const handleSliderChange = (id: string, value: number) => { - setSliders((prev) => + setLocalSliders((prev) => prev.map((slider) => (slider.id === id ? { ...slider, value } : slider)) ); }; @@ -31,6 +47,8 @@ const EditContent = () => { const handlePreview = async () => { try { setIsPreviewLoading(true); + setSelectedSpeed(localSpeed); + setSelectedVoices(localVoices); console.log( '미리 듣기: 속도 값 -', selectedSpeed, @@ -44,14 +62,22 @@ const EditContent = () => { } }; - const handleApply = async () => { + //전체 적용 + const handleAllApply = async () => { try { setIsApplyLoading(true); + setSelectedSpeed(localSpeed); + setSelectedVoices(localVoices); + localSliders.forEach((slider) => { + setSliders(slider.id, slider.value); + }); console.log( '전체 적용: 속도 값 -', selectedSpeed, ', 음높이 및 음량 값 -', - sliders + sliders, + '전체 적용 스타일 :', + selectedVoices ); } catch (error) { console.error('전체 적용 실패:', error); @@ -60,23 +86,86 @@ const EditContent = () => { } }; + //개별 적용 + const handleApply = async () => { + try { + setIsApplyLoading(true); + + // 1. zustand AudioSettings의 상태를 업데이트 + setSelectedSpeed(localSpeed); + setSelectedVoices(localVoices); + localSliders.forEach((slider) => { + setSliders(slider.id, slider.value); + }); + + // 2. 체크된 텍스트 입력 항목들을 가져옴 + const selectedInputs = useTextInputs + .getState() + .textInputs.filter((input) => input.isSelected); + + if (selectedInputs.length === 0) { + alert('적용할 항목이 없습니다. 적어도 하나의 항목을 선택하세요.'); + setIsApplyLoading(false); + return; + } + + // 3. 선택된 텍스트 항목에 설정을 적용 + useTextInputs.setState((state) => ({ + textInputs: state.textInputs.map((input) => { + if (input.isSelected) { + return { + ...input, + speed: localSpeed, + pitch: + localSliders.find((slider) => slider.id === 'pitch')?.value || + 0, + volume: + localSliders.find((slider) => slider.id === 'volume')?.value || + 0, + voice: localVoices, + }; + } + return input; + }), + })); + + // 4. 설정 적용 후 로그 + console.log( + '개별 적용 완료: 속도 값 -', + localSpeed, + ', 음높이 및 음량 값 -', + localSliders, + ', 적용된 텍스트 항목 수 -', + selectedInputs.length, + ', 보이스 -', + localVoices + ); + } catch (error) { + console.error('개별 적용 실패:', error); + } finally { + setIsApplyLoading(false); + } + }; + return (
      {/* 컨텐츠 영역 */}
      {/* 즐겨찾기 Dropdown */} - + /> */} {/* 보이스 옵션 Dropdown */} - {/* 속도 블럭 선택 */} @@ -88,7 +177,7 @@ const EditContent = () => { key={value} onClick={() => handleSpeedClick(value)} className={`flex-1 py-2 rounded ${ - selectedSpeed === value + localSpeed === value ? 'border border-gray-300 bg-blue-2 text-gray-700' : 'border border-gray-300 bg-gray-100 text-gray-500 opacity-50 ' }`} @@ -100,7 +189,7 @@ const EditContent = () => {
      {/* 음높이 및 음량 슬라이더 */} - {sliders.map((slider) => ( + {localSliders.map((slider) => ( { className='w-full text-white bg-black' onClick={handleApply} disabled={isApplyLoading} + > + 개별 적용하기 + + + diff --git a/src/components/tts/TextInputList.tsx b/src/components/tts/TextInputList.tsx index 2047afa..58f35cc 100644 --- a/src/components/tts/TextInputList.tsx +++ b/src/components/tts/TextInputList.tsx @@ -1,182 +1,82 @@ -import { TTSState, Language, Style, Voice } from "@/types/tts"; -import { CustomCheckbox } from "@/components/common/CustomCheckbox"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Repeat2, Play, Download, MoveVertical } from "lucide-react"; -import { useEffect, useState } from "react"; -import { mockLanguages, mockStyles, mockVoices } from "@/mock/speaker" -import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { CustomCheckbox } from '@/components/common/CustomCheckbox'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Repeat2, Play, Download, MoveVertical } from 'lucide-react'; +import { TextInput } from '@/types/tts'; interface TextInputListProps { - state: TTSState; + textInputs: TextInput[]; toggleSelection: (id: number) => void; - handleTextChange: (id: number, text: string) => void; + handleTextChange: (id: number, newText: string) => void; cancelEdit: () => void; addTextInput: () => void; saveInput: () => void; + isAllSelected: boolean; + editingId: number | null; } export const TextInputList: React.FC = ({ - state, + textInputs, toggleSelection, handleTextChange, cancelEdit, addTextInput, - saveInput + saveInput, }) => { - // const [languages, setLanguages] = useState([]); - const [languages, setLanguages] = useState(mockLanguages); - // const [styles, setStyles] = useState([]); - const [styles, setStyles] = useState([]); - // const [voices, setVoices] = useState([]); - const [voices, setVoices] = useState([]); - - const [selectedLanguage, setSelectedLanguage] = useState(null); - const [selectedStyle, setSelectedStyle] = useState(null); - const [selectedVoice, setSelectedVoice] = useState(null); - - const [isLanguageSelected, setIsLanguageSelected] = useState(false); - const [isStyleSelected, setIsStyleSelected] = useState(false); - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - - // useEffect(() => { - // fetch('/api/language') - // .then(response => response.json()) - // .then(data => setLanguages(data.response.languageList)); - // }, []); - - // useEffect(() => { - // if (selectedLanguage) { - // fetch(`/api/style?language=${selectedLanguage}`) - // .then(response => response.json()) - // .then(data => setStyles(data.response.styleList)); - // } - // }, [selectedLanguage]); - - // useEffect(() => { - // if (selectedStyle) { - // fetch(`/api/voice?style=${selectedStyle}`) - // .then(response => response.json()) - // .then(data => setVoices(data.response.voiceList)); - // } - // }, [selectedStyle]); - - useEffect(() => { - if (selectedLanguage) { - setStyles(mockStyles[selectedLanguage as keyof typeof mockStyles] || []); - setIsLanguageSelected(true); - setIsStyleSelected(false); - } - }, [selectedLanguage]); - - useEffect(() => { - if (selectedStyle) { - setVoices(mockVoices[selectedStyle as keyof typeof mockVoices] || []); - setIsStyleSelected(true); - } - }, [selectedStyle]); - - const handleVoiceSelect = (voiceName: string) => { - setSelectedVoice(voiceName); - setIsPopoverOpen(false); - }; - - const handlePopoverOpen = () => { - setIsPopoverOpen(true); - setIsLanguageSelected(false); - setIsStyleSelected(false); - setSelectedStyle(null); - setSelectedVoice(null); - }; - return ( <> - {state.textInputs.map((input) => ( -
      -
      -
      -
      - - - - - -
      -
      - {languages.map(lang => ( -
      { - setSelectedLanguage(lang.languageCode); - setIsLanguageSelected(true); - }} - > - {lang.languageName} -
      - ))} -
      - {isLanguageSelected && ( -
      - {styles.map(style => ( -
      { - setSelectedStyle(style.name); - setIsStyleSelected(true); - }} - > - {style.mood} -
      - ))} -
      - )} - {isStyleSelected && ( -
      - {voices.map(voice => ( -
      handleVoiceSelect(voice.name)} - > - {voice.name} -
      - ))} -
      - )} -
      -       -       - - - - - - - + + + + + +
      -
      - +
      +
      -
      +
      toggleSelection(input.id)} /> - handleTextChange(input.id, e.target.value)} - placeholder="내용을 입력해주세요.(최대 2,000자)" + placeholder='내용을 입력해주세요.(최대 2,000자)' onFocus={() => { if (input.text === '') { cancelEdit(); @@ -185,22 +85,34 @@ export const TextInputList: React.FC = ({ />
      -
      - {input.isEditing ? ( - <> - - - - ) : ( - - )} -
      + + + ) : ( + + )} +
      ))} diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx index b327367..91bb0fb 100644 --- a/src/pages/TTS.tsx +++ b/src/pages/TTS.tsx @@ -1,12 +1,10 @@ -import React, { useRef } from 'react'; -import { useParams } from 'react-router-dom'; - -import { useOutsideClick } from '@/hooks/useOutsideClick'; -import { TTSHeader } from '@/components/tts/TTSHeader'; import { TTSControls } from '@/components/tts/TTSControls'; +import { TTSHeader } from '@/components/tts/TTSHeader'; import { TextInputList } from '@/components/tts/TextInputList'; -import { Button } from '@/components/ui/button'; +import { useOutsideClick } from '@/hooks/useOutsideClick'; import { useTextInputs } from '@/stores/textInputStore'; +import React, { useRef } from 'react'; +import { useParams } from 'react-router-dom'; const TTS: React.FC = () => { const { projectId } = useParams<{ projectId: string }>(); @@ -37,7 +35,10 @@ const TTS: React.FC = () => { }; return ( -
      +
      { /> -
      ); }; diff --git a/src/stores/textInputStore.ts b/src/stores/textInputStore.ts index f603a1f..76b7b36 100644 --- a/src/stores/textInputStore.ts +++ b/src/stores/textInputStore.ts @@ -10,14 +10,33 @@ interface TTSStore extends TTSState { deleteSelectedInputs: () => void; saveInput: () => void; cancelEdit: () => void; + updateInputSettings: ( + id: number, + newSettings: Partial<{ + speed: number; + pitch: number; + volume: number; + voice: string; + }> + ) => void; + resetInputSettings: (id: number) => void; } export const useTextInputs = create((set) => ({ textInputs: [ - { id: 1, text: '', isSelected: false, isEditing: false }, // 초기값 설정 + { + id: 1, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, ], - isAllSelected: false, // 초기값 설정 - editingId: null, // 초기값 설정 + isAllSelected: false, + editingId: null, addTextInput: () => set((state) => { @@ -29,7 +48,16 @@ export const useTextInputs = create((set) => ({ ...state, textInputs: [ ...state.textInputs, - { id: newId, text: '', isSelected: false, isEditing: false }, + { + id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, ], }; }), @@ -44,6 +72,10 @@ export const useTextInputs = create((set) => ({ text: text.trim(), isSelected: false, isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', })), ], })), @@ -98,8 +130,30 @@ export const useTextInputs = create((set) => ({ set((state) => ({ ...state, textInputs: state.textInputs.map((input) => - input.id === state.editingId ? { ...input, text: '', isEditing: false } : input + input.id === state.editingId + ? { ...input, text: '', isEditing: false } + : input ), editingId: null, })), + + // 새로운 설정값을 업데이트하는 함수 + updateInputSettings: (id, newSettings) => + set((state) => ({ + ...state, + textInputs: state.textInputs.map((input) => + input.id === id ? { ...input, ...newSettings } : input + ), + })), + + // 개별 항목 설정 초기화 함수 + resetInputSettings: (id) => + set((state) => ({ + ...state, + textInputs: state.textInputs.map((input) => + input.id === id + ? { ...input, speed: 1, pitch: 0, volume: 0, voice: '' } + : input + ), + })), })); diff --git a/src/stores/useAudioSettingsStore.ts b/src/stores/useAudioSettingsStore.ts new file mode 100644 index 0000000..5e889ec --- /dev/null +++ b/src/stores/useAudioSettingsStore.ts @@ -0,0 +1,36 @@ +// src/stores/audioSettingsStore.ts +import { create } from 'zustand'; + +interface Slider { + id: string; + value: number; + min: number; + max: number; + label: string; +} + +interface AudioSettingsState { + selectedSpeed: number; + selectedVoices: string | null; + sliders: Slider[]; + setSelectedSpeed: (speed: number) => void; + setSelectedVoices: (voice: string | null) => void; + setSliders: (id: string, value: number) => void; +} + +export const useAudioSettingsStore = create((set) => ({ + selectedSpeed: 1, // 기본 속도 + selectedVoices: null, // 선택된 보이스 초기값 + sliders: [ + { id: 'pitch', value: 0.0, min: -20.0, max: 20.0, label: '음높이' }, + { id: 'volume', value: 0.0, min: -10.0, max: 10.0, label: '음량' }, + ], + setSelectedSpeed: (speed) => set({ selectedSpeed: speed }), + setSelectedVoices: (voice) => set({ selectedVoices: voice }), + setSliders: (id, value) => + set((state) => ({ + sliders: state.sliders.map((slider) => + slider.id === id ? { ...slider, value } : slider + ), + })), +})); diff --git a/src/types/tts.ts b/src/types/tts.ts index b84cc12..272891f 100644 --- a/src/types/tts.ts +++ b/src/types/tts.ts @@ -3,6 +3,10 @@ export interface TextInput { text: string; isSelected: boolean; isEditing: boolean; + speed: number; + pitch: number; + volume: number; + voice: string | null; } export interface TTSState { @@ -16,7 +20,6 @@ export interface Language { languageName: string; } - export interface Style { name: string; mood: string; @@ -25,4 +28,4 @@ export interface Style { export interface Voice { voiceSeq: string; name: string; -} \ No newline at end of file +} From 3825548884a20b2bda6288175aedddbb7379188d Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Mon, 2 Dec 2024 14:03:51 +0900 Subject: [PATCH 58/73] =?UTF-8?q?fix:=20=20=EC=88=98=EC=A0=95=20(#68)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useTextInputs.ts | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/src/hooks/useTextInputs.ts b/src/hooks/useTextInputs.ts index ac74ea4..cda15f7 100644 --- a/src/hooks/useTextInputs.ts +++ b/src/hooks/useTextInputs.ts @@ -3,7 +3,18 @@ import { TextInput, TTSState } from '@/types/tts'; export const useTextInputs = () => { const [state, setState] = useState({ - textInputs: [{ id: 0, text: '', isSelected: false, isEditing: false }], + textInputs: [ + { + id: 1, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, + ], isAllSelected: false, editingId: null, }); @@ -17,8 +28,17 @@ export const useTextInputs = () => { setState((prev) => ({ ...prev, textInputs: [ - ...prev.textInputs, - { id: newId, text: '', isSelected: false, isEditing: false }, + ...state.textInputs, + { + id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, ], })); }; @@ -28,12 +48,16 @@ export const useTextInputs = () => { const updatedState = { ...prev, textInputs: [ - ...prev.textInputs, + ...state.textInputs, ...texts.map((text, index) => ({ - id: prev.textInputs.length + index + 1, + id: state.textInputs.length + index + 1, text: text.trim(), isSelected: false, isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', })), ], }; From 4b335752864869a20a3371bcc9e15953691f1dff Mon Sep 17 00:00:00 2001 From: wonjichoi Date: Mon, 2 Dec 2024 17:39:31 +0900 Subject: [PATCH 59/73] =?UTF-8?q?[Feat]=20TTS=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=B0=BD=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20(#69)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30) * fix: 버그 수정 (#63) * fix: 배포 api endPoint 등록 (#63) * fix: 재생성->TTS 생성워딩 수정(#30) * feat: 텍스트 추가 버튼 인풋 영역 호버 시 나타나게 처리 (#30) * feat: 텍스트 추가 클릭시 클릭한 영역 바로 다음에 새로운 영역 생성 (#30) * feat: 버튼 양 사이드 영역 라인 추가 (#30) * fix: 화살표 아이콘 삭제 (#30) * feat: 저장/취소 버튼 input 옆으로 나오게(#30) * design: 저장/취소 버튼 인풋창 안으로 수정(#30) * fix: 타입에러 수정 (#30) * feat: 선택한 체크박스 개수 표시되게하는 기능 추가(#30) * fix: 불필요한 부분 삭제 (#30) --------- Co-authored-by: Haeun --- src/components/tts/TTSControls.tsx | 12 +++- src/components/tts/TextInputList.tsx | 83 +++++++++++++++---------- src/components/ui/button.tsx | 1 + src/hooks/useTextInputs.ts | 74 ++++++++++++++-------- src/pages/TTS.tsx | 9 ++- src/stores/textInputStore.ts | 91 +++++++++++++++++++--------- src/types/shadcn-ui.d.ts | 11 ---- 7 files changed, 179 insertions(+), 102 deletions(-) delete mode 100644 src/types/shadcn-ui.d.ts diff --git a/src/components/tts/TTSControls.tsx b/src/components/tts/TTSControls.tsx index 70e7907..5a5fdcb 100644 --- a/src/components/tts/TTSControls.tsx +++ b/src/components/tts/TTSControls.tsx @@ -8,17 +8,21 @@ interface TTSControlsProps { state: TTSState; toggleAllSelection: () => void; deleteSelectedInputs: () => void; - addTextInput: () => void; + addTextInput: (hoveredId: number) => void; saveInput: () => void; cancelEdit: () => void; + selectedCount: number; + totalCount: number; } export const TTSControls: React.FC = ({ state, toggleAllSelection, deleteSelectedInputs, + selectedCount, + totalCount, }) => { - const anySelected = state.textInputs.some(input => input.isSelected); + const anySelected = selectedCount > 0; return ( <> @@ -30,7 +34,9 @@ export const TTSControls: React.FC = ({ checked={state.isAllSelected} onCheckedChange={toggleAllSelection} /> - +
      -
      -
      +
      toggleSelection(input.id)} + onCheckedChange={() => handleToggleSelection(input.id)} /> handleTextChange(input.id, e.target.value)} placeholder='내용을 입력해주세요.(최대 2,000자)' onFocus={() => { + handleInputFocus(input.id, true); if (input.text === '') { cancelEdit(); } }} + onBlur={() => handleInputFocus(input.id, false)} /> -
      - -
      - {input.isEditing ? ( - <> - - - - ) : ( - +
      )}
      + {inputHoverStates[input.id] && !inputEditingStates[input.id] &&( +
      + <> +
      + +
      + +
      + )}
      ))} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index b9c60d3..7972270 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -25,6 +25,7 @@ const buttonVariants = cva( }, size: { default: 'h-9 px-4 py-2', + xs: 'h-6 rounded-md px-4 text-xs', sm: 'h-8 rounded-md px-3 text-xs', lg: 'h-10 rounded-md px-8', icon: 'h-9 w-9', diff --git a/src/hooks/useTextInputs.ts b/src/hooks/useTextInputs.ts index cda15f7..7d7311a 100644 --- a/src/hooks/useTextInputs.ts +++ b/src/hooks/useTextInputs.ts @@ -19,33 +19,53 @@ export const useTextInputs = () => { editingId: null, }); - const addTextInput = () => { + const addTextInput = (hoveredId: number) => { const newId = state.textInputs.length > 0 ? Math.max(...state.textInputs.map((input) => input.id)) + 1 : 1; - setState((prev) => ({ - ...prev, - textInputs: [ - ...state.textInputs, - { - id: newId, - text: '', - isSelected: false, - isEditing: false, - speed: 1, - pitch: 0, - volume: 0, - voice: '', - }, - ], - })); + const currentIndex = state.textInputs.findIndex((input) => input.id === hoveredId); + if (currentIndex === -1) { + setState((prev) => ({ + ...prev, + textInputs: [ + ...prev.textInputs, + { + id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '' + }, + ], + })); + } else { + setState((prev) => ({ + ...prev, + textInputs: [ + ...prev.textInputs.slice(0, currentIndex + 1), + { + id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, + ...prev.textInputs.slice(currentIndex + 1), + ], + })); + } }; const addTextInputs = (texts: string[]) => { - setState((prev) => { - const updatedState = { + setState((prev) => ({ ...prev, textInputs: [ ...state.textInputs, @@ -57,15 +77,13 @@ export const useTextInputs = () => { speed: 1, pitch: 0, volume: 0, - voice: '', + voice: '' })), ], - }; - return updatedState; - }); + })); }; const handleTextChange = (id: number, newText: string) => { - if (newText.length > 1000) return; + if (newText.length > 2000) return; if (!/^[가-힣a-zA-Z0-9\s.,!?]*$/.test(newText)) return; setState((prev) => ({ @@ -111,6 +129,10 @@ export const useTextInputs = () => { const saveInput = () => { setState((prev) => ({ ...prev, + textInputs: prev.textInputs.map((input) => + input.id === prev.editingId ? { ...input, isEditing: false } : input + // editingId: null, + ), editingId: null, })); }; @@ -119,7 +141,9 @@ export const useTextInputs = () => { setState((prev) => ({ ...prev, textInputs: prev.textInputs.map((input) => - input.id === prev.editingId ? { ...input, text: '' } : input + input.id === prev.editingId + ? { ...input, text: '', isEditing: false } + : input ), editingId: null, })); diff --git a/src/pages/TTS.tsx b/src/pages/TTS.tsx index 91bb0fb..a787568 100644 --- a/src/pages/TTS.tsx +++ b/src/pages/TTS.tsx @@ -34,9 +34,11 @@ const TTS: React.FC = () => { setProjectName(e.target.value); }; + const selectedCount = textInputs.filter((input) => input.isSelected).length; + return ( -
      { addTextInput={addTextInput} saveInput={saveInput} cancelEdit={cancelEdit} + selectedCount={selectedCount} + totalCount={textInputs.length} /> { cancelEdit={cancelEdit} addTextInput={addTextInput} saveInput={saveInput} + onSelectionChange={(selectedCount, totalCount) => {}} />
      ); diff --git a/src/stores/textInputStore.ts b/src/stores/textInputStore.ts index 76b7b36..6030820 100644 --- a/src/stores/textInputStore.ts +++ b/src/stores/textInputStore.ts @@ -1,8 +1,22 @@ import { create } from 'zustand'; import { TTSState } from '@/types/tts'; -interface TTSStore extends TTSState { - addTextInput: () => void; +interface ExtendedTTSState extends TTSState { + textInputs: { + id: number; + text: string; + isSelected: boolean; + isEditing: boolean; + speed: number; + pitch: number; + volume: number; + voice: string; + }[]; + isAllSelected: boolean; + editingId: number | null; +} +interface TTSStore extends ExtendedTTSState { + addTextInput: (hoveredId: number) => void; addTextInputs: (texts: string[]) => void; handleTextChange: (id: number, newText: string) => void; toggleSelection: (id: number) => void; @@ -38,32 +52,51 @@ export const useTextInputs = create((set) => ({ isAllSelected: false, editingId: null, - addTextInput: () => - set((state) => { + addTextInput: (hoveredId: number) => + set((state: ExtendedTTSState) => { const newId = state.textInputs.length > 0 ? Math.max(...state.textInputs.map((input) => input.id)) + 1 : 1; - return { - ...state, - textInputs: [ - ...state.textInputs, - { - id: newId, - text: '', - isSelected: false, - isEditing: false, - speed: 1, - pitch: 0, - volume: 0, - voice: '', - }, - ], - }; + const currentIndex = state.textInputs.findIndex((input) => input.id === hoveredId); + if (currentIndex === -1) { + return { + ...state, + textInputs: [ + ...state.textInputs, + { id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, + ], + }; + } else { + return { + ...state, + textInputs: [ + ...state.textInputs.slice(0, currentIndex + 1), + { id: newId, + text: '', + isSelected: false, + isEditing: false, + speed: 1, + pitch: 0, + volume: 0, + voice: '', + }, + ...state.textInputs.slice(currentIndex + 1), + ], + }; + } }), addTextInputs: (texts) => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: [ ...state.textInputs, @@ -81,7 +114,7 @@ export const useTextInputs = create((set) => ({ })), handleTextChange: (id, newText) => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === id ? { ...input, text: newText, isEditing: true } : input @@ -90,7 +123,7 @@ export const useTextInputs = create((set) => ({ })), toggleSelection: (id) => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === id ? { ...input, isSelected: !input.isSelected } : input @@ -98,7 +131,7 @@ export const useTextInputs = create((set) => ({ })), toggleAllSelection: () => - set((state) => { + set((state: ExtendedTTSState) => { const newIsAllSelected = !state.isAllSelected; return { ...state, @@ -111,14 +144,14 @@ export const useTextInputs = create((set) => ({ }), deleteSelectedInputs: () => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.filter((input) => !input.isSelected), isAllSelected: false, })), saveInput: () => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === state.editingId ? { ...input, isEditing: false } : input @@ -127,7 +160,7 @@ export const useTextInputs = create((set) => ({ })), cancelEdit: () => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === state.editingId @@ -139,7 +172,7 @@ export const useTextInputs = create((set) => ({ // 새로운 설정값을 업데이트하는 함수 updateInputSettings: (id, newSettings) => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === id ? { ...input, ...newSettings } : input @@ -148,7 +181,7 @@ export const useTextInputs = create((set) => ({ // 개별 항목 설정 초기화 함수 resetInputSettings: (id) => - set((state) => ({ + set((state: ExtendedTTSState) => ({ ...state, textInputs: state.textInputs.map((input) => input.id === id diff --git a/src/types/shadcn-ui.d.ts b/src/types/shadcn-ui.d.ts deleted file mode 100644 index 877ccb9..0000000 --- a/src/types/shadcn-ui.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare module '@/components/ui/input' { - export const Input: React.ComponentType>; -} - -declare module '@/components/ui/label' { - export const Label: React.ComponentType>; -} - -declare module '@/components/ui/checkbox' { - export const Checkbox: React.ComponentType>; -} \ No newline at end of file From 1e63a2001f1fb17bdba9ea72462bae3be5f41994 Mon Sep 17 00:00:00 2001 From: wonjichoi Date: Tue, 3 Dec 2024 10:15:55 +0900 Subject: [PATCH 60/73] =?UTF-8?q?[Fix]=20=EC=97=90=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20(#71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30) * fix: 버그 수정 (#63) * fix: 배포 api endPoint 등록 (#63) * fix: 재생성->TTS 생성워딩 수정(#30) * feat: 텍스트 추가 버튼 인풋 영역 호버 시 나타나게 처리 (#30) * feat: 텍스트 추가 클릭시 클릭한 영역 바로 다음에 새로운 영역 생성 (#30) * feat: 버튼 양 사이드 영역 라인 추가 (#30) * fix: 화살표 아이콘 삭제 (#30) * feat: 저장/취소 버튼 input 옆으로 나오게(#30) * design: 저장/취소 버튼 인풋창 안으로 수정(#30) * fix: 타입에러 수정 (#30) * feat: 선택한 체크박스 개수 표시되게하는 기능 추가(#30) * fix: 불필요한 부분 삭제 (#30) * feat: 옵션 값 표시 색상 기본값에서 달라지면 색상 표시 (#30) * fix: EditContent.tsx * feat: pencil 아이콘 클릭 시 프로젝트명 수정 (#30) --------- Co-authored-by: Haeun --- .../sidebar/sidebarContent/EditContent.tsx | 4 ++-- src/components/tts/TTSHeader.tsx | 24 +++++++++++++++++-- src/components/tts/TextInputList.tsx | 7 +++--- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx index f000144..a3e8128 100644 --- a/src/components/sidebar/sidebarContent/EditContent.tsx +++ b/src/components/sidebar/sidebarContent/EditContent.tsx @@ -13,7 +13,7 @@ const EditContent = () => { { id: 'pitch', value: 0.0, min: -20.0, max: 20.0, label: '음높이' }, { id: 'volume', value: 0.0, min: -10.0, max: 10.0, label: '음량' }, ]); - const [localVoices, setLocalVoices] = useState(null); + const [localVoices, setLocalVoices] = useState(''); const [isPreviewLoading, setIsPreviewLoading] = useState(false); const [isApplyLoading, setIsApplyLoading] = useState(false); @@ -122,7 +122,7 @@ const EditContent = () => { volume: localSliders.find((slider) => slider.id === 'volume')?.value || 0, - voice: localVoices, + voice: localVoices ?? '', }; } return input; diff --git a/src/components/tts/TTSHeader.tsx b/src/components/tts/TTSHeader.tsx index 47ea214..876e19d 100644 --- a/src/components/tts/TTSHeader.tsx +++ b/src/components/tts/TTSHeader.tsx @@ -1,6 +1,7 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Pencil } from 'lucide-react'; +import { useState } from "react"; interface TTSHeaderProps { projectName: string; @@ -11,17 +12,36 @@ export const TTSHeader: React.FC = ({ projectName, onProjectNameChange }) => { + + const [isEditable, setisEditable] = useState(false); + + const handleEditClick = () => { + setisEditable(true); + const inputRef = document.getElementById('project-name-input'); + if (inputRef) { + (inputRef as HTMLInputElement).focus(); + } + }; + + const handleInputClick = (e: React.MouseEvent) => { + if (!isEditable) { + e.preventDefault; + } + } return (
      - +
      {new Date().toLocaleDateString()} diff --git a/src/components/tts/TextInputList.tsx b/src/components/tts/TextInputList.tsx index 66aa76d..3d562de 100644 --- a/src/components/tts/TextInputList.tsx +++ b/src/components/tts/TextInputList.tsx @@ -56,23 +56,24 @@ export const TextInputList: React.FC = ({ >
      - - - - -
      diff --git a/src/components/sidebar/sidebarContent/FileContent.tsx b/src/components/sidebar/sidebarContent/FileContent.tsx index 57015ca..ed1b80c 100644 --- a/src/components/sidebar/sidebarContent/FileContent.tsx +++ b/src/components/sidebar/sidebarContent/FileContent.tsx @@ -107,14 +107,16 @@ export const FileContent: React.FC = ({ }; return ( -
      +
      - +
      + +
      = ({ current={uploadedFiles.length} /> -
        +
          {allFiles.map((file, index) => (
        • - {file.name} + {file.name}
          = ({ file.status === '완료' ? 'bg-blue-500' : 'bg-red-500' }`} > - {file.status} + {file.status}
          • ))} diff --git a/src/components/ui/CircularProgress.tsx b/src/components/ui/CircularProgress.tsx index 1f4cd01..470d247 100644 --- a/src/components/ui/CircularProgress.tsx +++ b/src/components/ui/CircularProgress.tsx @@ -12,7 +12,7 @@ interface CircularProgressProps { export const CircularProgress: React.FC = ({ current, total, - size = 40, + size = 30, strokeWidth = 4, trackColor = '#e0e0e0', progressColor = '#3ddc85', diff --git a/src/components/ui/sliderControl.tsx b/src/components/ui/sliderControl.tsx index 47f1db9..209ac7e 100644 --- a/src/components/ui/sliderControl.tsx +++ b/src/components/ui/sliderControl.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Slider } from '@/components/ui/slider'; export const SliderControl = ({ @@ -13,23 +14,75 @@ export const SliderControl = ({ min: number; max: number; }) => { + const [isEditing, setIsEditing] = useState(false); + const [inputValue, setInputValue] = useState(value.toString()); + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + const handleInputBlur = () => { + const parsedValue = parseFloat(inputValue); + + // 입력 값이 숫자인지 확인 + if (!isNaN(parsedValue)) { + const adjustedValue = Math.min(Math.max(parsedValue, min), max); + onChange([adjustedValue]); + setInputValue(adjustedValue.toString()); + } else { + setInputValue(value.toString()); // 유효하지 않은 값일 경우 기존 값 복원 + } + + setIsEditing(false); // 입력 모드 종료 + }; + + const handleInputKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + (e.target as HTMLInputElement).blur(); // Enter 키로 입력 완료 + } + }; + + const handleInputFocus = () => { + setInputValue(''); // 포커스 시 기존 값 초기화 + }; + return ( -
          - {/* 제목 */} - - {/* 슬라이더 및 값 */} -
          +
          + {/* 라벨과 값 */} +
          + + {isEditing ? ( + + ) : ( + setIsEditing(true)} + > + {value ? parseFloat(value.toFixed(1)) : '기본'} + + )} +
          + {/* 슬라이더 */} +
          onChange(v)} max={max} min={min} - step={0.1} // 소수점 조정을 위한 step 추가 - className='flex-1' + step={0.1} + className='w-full' /> - - {value ? value.toFixed(2) : '기본'} -
          ); diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx index f86f6c1..ba819ef 100644 --- a/src/layout/ProjectLayout.tsx +++ b/src/layout/ProjectLayout.tsx @@ -8,6 +8,7 @@ import { Link, useParams } from 'react-router-dom'; import TTS from '@/pages/TTS'; import VC from '@/pages/VC'; import Concat from '@/pages/Concat'; +import Logo from '@/assets/logo.png'; const ProjectLayout = () => { // Footer 상태 관리 (열림/닫힘 여부) @@ -49,22 +50,33 @@ const ProjectLayout = () => { return (
          {/* 헤더 */} -
          -

          로고

          +
          +

          + +

          +
          +
          + ); +}; diff --git a/src/components/concat/ConcatLayout.tsx b/src/components/concat/ConcatLayout.tsx index 972cf0c..b0ea7a3 100644 --- a/src/components/concat/ConcatLayout.tsx +++ b/src/components/concat/ConcatLayout.tsx @@ -13,21 +13,23 @@ const ConcatLayout = () => { const onSubmit: SubmitHandler = (data) => console.log(data); return ( - <> - -
          -
          -
          + + +
          + {/* 메인 콘텐츠 */} +
          +
          - -
          - - - + + {/* 우측 사이드바 */} + +
          + +           ); }; diff --git a/src/components/concat/ConcatTextItem.tsx b/src/components/concat/ConcatTextItem.tsx new file mode 100644 index 0000000..88a58fc --- /dev/null +++ b/src/components/concat/ConcatTextItem.tsx @@ -0,0 +1,78 @@ +import { Input } from '@/components/ui/input'; +import { GripVertical, Play } from 'lucide-react'; +import { Checkbox } from '@/components/ui/checkbox'; +import { IConcatdata, IFormValues } from '@/types/concat'; +import { useConcatCheckboxStore } from '@/stores/concatCheckboxStore'; +import { useSortable } from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { useFormContext } from 'react-hook-form'; + +interface IConcatTextItemProps { + item: IConcatdata; + dndId: string; +} + +export const ConcatTextItem = ({ item, dndId }: IConcatTextItemProps) => { + const selectedItems = useConcatCheckboxStore((state) => state.selectedItems); + const toggleItem = useConcatCheckboxStore((state) => state.toggleItem); + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: dndId }); + + const style = { + transform: CSS.Transform.toString(transform), + transition, + }; + + const { register } = useFormContext(); + + return ( +
        • +
          +
          + { + toggleItem(item.id); + }} + className='data-[state=checked]:bg-green-6 data-[state=checked]:border-green-6 border-gray-300 w-5 h-5' + /> + +
          + + +
          + +
          +
          + +
          +
          + 무음 추가 : 0.0초 +
          +
          +
          • + ); +}; + +export default ConcatTextItem; diff --git a/src/components/concat/ConcatTextWrap.tsx b/src/components/concat/ConcatTextWrap.tsx new file mode 100644 index 0000000..fae8146 --- /dev/null +++ b/src/components/concat/ConcatTextWrap.tsx @@ -0,0 +1,73 @@ +import ConcatTextItem from '@/components/concat/ConcatTextItem'; +import { Button } from '@/components/ui/button'; +import { IConcatdata } from '@/types/concat'; +import { useState } from 'react'; +import { + DndContext, + closestCenter, + DragEndEvent, + DragOverlay, + DragStartEvent, +} from '@dnd-kit/core'; +import { + SortableContext, + arrayMove, + verticalListSortingStrategy, +} from '@dnd-kit/sortable'; +import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; + +interface IConcatTextWrapProps { + datas: IConcatdata[]; +} +export const ConcatTextWrap = ({ datas }: IConcatTextWrapProps) => { + const [items, setItems] = useState(datas); + const [activeId, setActiveId] = useState(null); + + const dragHandler = { + start: (event: DragStartEvent) => { + setActiveId(event.active.id as string); + }, + end: (event: DragEndEvent) => { + setActiveId(null); + const { active, over } = event; + if (!over || active.id === over.id) return; + const oldIndex = items.findIndex((item) => item.dndId === active.id); + const newIndex = items.findIndex((item) => item.dndId === over.id); + setItems((prevItems) => arrayMove(prevItems, oldIndex, newIndex)); + }, + }; + + const dragOverlay = items.find((item) => item.dndId === activeId); + + return ( +
            + + item.dndId)} + strategy={verticalListSortingStrategy} + > + {items.map((item) => ( + + ))} + + + + {dragOverlay ? ( + + ) : null} + + +
          + ); +}; + +export default ConcatTextWrap; diff --git a/src/components/sidebar/ConcatSidebar.tsx b/src/components/sidebar/ConcatSidebar.tsx index ad8eca3..f5c656a 100644 --- a/src/components/sidebar/ConcatSidebar.tsx +++ b/src/components/sidebar/ConcatSidebar.tsx @@ -1,9 +1,88 @@ +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Separator } from '@/components/ui/separator'; +import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; + const ConcatSidebar = () => { + const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); + return ( -
          -

          Concat 설정

          -

          여기에는 Concat 관련 설정 내용이 들어갑니다.

          -
          + <> +
          + + +
          + {activeTab === 'file' ? ( +
          +
          +
          +

          편집 오디오

          + + +
            +
          • test.wav
            • +
          • asdfdf.wav
            • +
          • test.wav
            • +
          • asdfdf.wav
            • +
          • test.wav
            • +
          • asdfdf.wav
            • +
          • asdfdf.wav
            • +
          • test.wav
            • +
          + +           +
          + + +
          +

          텍스트

          + +
          + + + +
          +

          배경 오디오

          + +
            +
          • asdfsd.mp3
            • +
          +
          +
          + +
          + ) : ( + <> +

          무음 추가

          + +
          + + +
          + + )} + ); }; diff --git a/src/components/sidebar/HomeSidebar.tsx b/src/components/sidebar/HomeSidebar.tsx index 6be89f3..0321192 100644 --- a/src/components/sidebar/HomeSidebar.tsx +++ b/src/components/sidebar/HomeSidebar.tsx @@ -27,7 +27,7 @@ import { IProjectProps } from '@/types/project'; import { Button } from '@/components/ui/button'; import NewProjectButton from '@/components/common/NewProjectButton'; import useLogout from '@/hooks/apis/useLogout'; -import { useAuthStore } from '@/stores/authStore'; +import useAuthStore from '@/stores/authStore'; // Menu items. const Menus = [ diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx new file mode 100644 index 0000000..cf253cf --- /dev/null +++ b/src/components/ui/scroll-area.tsx @@ -0,0 +1,46 @@ +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx new file mode 100644 index 0000000..e56b0af --- /dev/null +++ b/src/components/ui/textarea.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Textarea = React.forwardRef< + HTMLTextAreaElement, + React.ComponentProps<"textarea"> +>(({ className, ...props }, ref) => { + return ( +