From 7e1eb74c313ed7e66f4325447c0c4c6246182b17 Mon Sep 17 00:00:00 2001 From: sunub Date: Thu, 21 Dec 2023 23:31:32 +0900 Subject: [PATCH] =?UTF-8?q?todo:=20Sign-up=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=99=80=20SignUpForm=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jest.config.ts | 2 +- next.config.js | 2 +- package.json | 10 +- pnpm-lock.yaml | 131 +++++++++++++-- src/app/auth.ts | 0 src/app/sign-up/page.tsx | 9 + src/components/Form/Form.styled.ts | 156 ------------------ src/components/Form/Form.tsx | 64 ------- src/components/Form/Helper/Helper.tsx | 33 ---- src/components/Form/Helper/index.ts | 2 - src/components/Form/Id/Id.tsx | 70 -------- src/components/Form/Id/index.ts | 2 - src/components/Form/Password/Password.tsx | 85 ---------- src/components/Form/Password/index.ts | 2 - src/components/Form/index.ts | 2 - .../FormHeader/FormHeader.styled.tsx | 14 -- src/components/FormHeader/FormHeader.tsx | 14 -- src/components/FormHeader/index.ts | 2 - src/components/SignUpForm/SignUpForm.tsx | 5 + src/components/SignUpForm/index.ts | 2 + tsconfig.json | 11 +- 21 files changed, 148 insertions(+), 470 deletions(-) create mode 100644 src/app/auth.ts create mode 100644 src/app/sign-up/page.tsx delete mode 100644 src/components/Form/Form.styled.ts delete mode 100644 src/components/Form/Form.tsx delete mode 100644 src/components/Form/Helper/Helper.tsx delete mode 100644 src/components/Form/Helper/index.ts delete mode 100644 src/components/Form/Id/Id.tsx delete mode 100644 src/components/Form/Id/index.ts delete mode 100644 src/components/Form/Password/Password.tsx delete mode 100644 src/components/Form/Password/index.ts delete mode 100644 src/components/Form/index.ts delete mode 100644 src/components/FormHeader/FormHeader.styled.tsx delete mode 100644 src/components/FormHeader/FormHeader.tsx delete mode 100644 src/components/FormHeader/index.ts create mode 100644 src/components/SignUpForm/SignUpForm.tsx create mode 100644 src/components/SignUpForm/index.ts diff --git a/jest.config.ts b/jest.config.ts index 3667b34..4cb7bf6 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -152,7 +152,7 @@ const config: Config = { // setupFiles: [], // A list of paths to modules that run some code to configure or set up the testing framework before each test - setupFilesAfterEnv: ["./jest.setup.ts"], + setupFilesAfterEnv: ["./jest.setup.ts", "./tsconfig.json"], // The number of seconds after which a test is considered as slow and reported as such in the results. // slowTestThreshold: 5, diff --git a/next.config.js b/next.config.js index a4bee02..7b09dd4 100644 --- a/next.config.js +++ b/next.config.js @@ -5,4 +5,4 @@ const nextConfig = { }, }; -export default nextConfig; +module.exports = nextConfig; diff --git a/package.json b/package.json index ce63cf3..9d7c3b7 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,15 @@ { "name": "for-digital-divide", "version": "0.1.0", - "types": "module", "private": true, - "type": "module", "scripts": { "dev": "next dev --turbo", + "dev:tsnode": "pnpm exec nodemon --watch ./src/lib/action.ts --exec 'ts-node' ./src/lib/action.ts", "build": "next build", "start": "next start", "lint": "next lint", "seed": "node -r dotenv/config ./scripts/seed.mjs", - "test:unit": "jest", + "test:unit": "jest --config ./jest.config.ts", "test:e2e": "pnpm exec playwright --config ./playwright.config.ts" }, "dependencies": { @@ -36,7 +35,8 @@ "react-remove-scroll": "^2.5.7", "styled-components": "^6.0.7", "three": "^0.159.0", - "typescript": "5.2.2" + "typescript": "5.2.2", + "valibot": "^0.24.1" }, "devDependencies": { "@playwright/test": "^1.40.1", @@ -46,11 +46,13 @@ "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.1", + "@types/bcrypt": "^5.0.2", "@types/jest": "^29.5.11", "@types/styled-components": "^5.1.26", "babel-jest": "^29.7.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", + "nodemon": "^3.0.2", "ts-jest": "^29.1.1", "ts-node": "^10.9.2" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92068dc..8efee6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ dependencies: typescript: specifier: 5.2.2 version: 5.2.2 + valibot: + specifier: ^0.24.1 + version: 0.24.1 devDependencies: '@playwright/test': @@ -97,6 +100,9 @@ devDependencies: '@testing-library/user-event': specifier: ^14.5.1 version: 14.5.1(@testing-library/dom@9.3.3) + '@types/bcrypt': + specifier: ^5.0.2 + version: 5.0.2 '@types/jest': specifier: ^29.5.11 version: 29.5.11 @@ -112,6 +118,9 @@ devDependencies: jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 + nodemon: + specifier: ^3.0.2 + version: 3.0.2 ts-jest: specifier: ^29.1.1 version: 29.1.1(@babel/core@7.23.6)(babel-jest@29.7.0)(jest@29.7.0)(typescript@5.2.2) @@ -163,7 +172,7 @@ packages: '@babel/traverse': 7.23.6 '@babel/types': 7.23.6 convert-source-map: 2.0.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -419,7 +428,7 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.23.6 '@babel/types': 7.23.6 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -477,7 +486,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) espree: 9.6.1 globals: 13.23.0 ignore: 5.3.0 @@ -499,7 +508,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 2.0.1 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -1401,6 +1410,12 @@ packages: '@babel/types': 7.23.6 dev: true + /@types/bcrypt@5.0.2: + resolution: {integrity: sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==} + dependencies: + '@types/node': 20.5.7 + dev: true + /@types/cacheable-request@6.0.3: resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==} dependencies: @@ -1577,7 +1592,7 @@ packages: '@typescript-eslint/types': 6.13.2 '@typescript-eslint/typescript-estree': 6.13.2(typescript@5.2.2) '@typescript-eslint/visitor-keys': 6.13.2 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) eslint: 8.48.0 typescript: 5.2.2 transitivePeerDependencies: @@ -1608,7 +1623,7 @@ packages: dependencies: '@typescript-eslint/types': 6.13.2 '@typescript-eslint/visitor-keys': 6.13.2 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 @@ -1646,7 +1661,6 @@ packages: /abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} - dev: false /acorn-globals@7.0.1: resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==} @@ -1677,7 +1691,7 @@ packages: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -1989,6 +2003,11 @@ packages: find-versions: 5.1.0 dev: true + /binary-extensions@2.2.0: + resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} + engines: {node: '>=8'} + dev: true + /brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -2127,6 +2146,21 @@ packages: engines: {node: '>=10'} dev: true + /chokidar@3.5.3: + resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + engines: {node: '>= 8.10.0'} + dependencies: + anymatch: 3.1.3 + braces: 3.0.2 + glob-parent: 5.1.2 + is-binary-path: 2.1.0 + is-glob: 4.0.3 + normalize-path: 3.0.0 + readdirp: 3.6.0 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /chownr@2.0.0: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} @@ -2334,7 +2368,7 @@ packages: ms: 2.1.3 dev: false - /debug@4.3.4: + /debug@4.3.4(supports-color@5.5.0): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} peerDependencies: @@ -2344,6 +2378,7 @@ packages: optional: true dependencies: ms: 2.1.2 + supports-color: 5.5.0 /decimal.js@10.4.3: resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==} @@ -2721,7 +2756,7 @@ packages: eslint: '*' eslint-plugin-import: '*' dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) enhanced-resolve: 5.15.0 eslint: 8.48.0 eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0) @@ -2889,7 +2924,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -3429,7 +3464,7 @@ packages: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) transitivePeerDependencies: - supports-color dev: true @@ -3447,7 +3482,7 @@ packages: engines: {node: '>= 6'} dependencies: agent-base: 6.0.2 - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -3466,6 +3501,10 @@ packages: /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} + /ignore-by-default@1.0.1: + resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==} + dev: true + /ignore@5.3.0: resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==} engines: {node: '>= 4'} @@ -3551,6 +3590,13 @@ packages: dependencies: has-bigints: 1.0.2 + /is-binary-path@2.1.0: + resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} + engines: {node: '>=8'} + dependencies: + binary-extensions: 2.2.0 + dev: true + /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} engines: {node: '>= 0.4'} @@ -3743,7 +3789,7 @@ packages: resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==} engines: {node: '>=10'} dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@5.5.0) istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -4613,6 +4659,30 @@ packages: /node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + /nodemon@3.0.2: + resolution: {integrity: sha512-9qIN2LNTrEzpOPBaWHTm4Asy1LxXLSickZStAQ4IZe7zsoIpD/A7LWxhZV3t4Zu352uBcqVnRsDXSMR2Sc3lTA==} + engines: {node: '>=10'} + hasBin: true + dependencies: + chokidar: 3.5.3 + debug: 4.3.4(supports-color@5.5.0) + ignore-by-default: 1.0.1 + minimatch: 3.1.2 + pstree.remy: 1.1.8 + semver: 7.5.4 + simple-update-notifier: 2.0.0 + supports-color: 5.5.0 + touch: 3.1.0 + undefsafe: 2.0.5 + dev: true + + /nopt@1.0.10: + resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==} + hasBin: true + dependencies: + abbrev: 1.1.1 + dev: true + /nopt@5.0.0: resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} engines: {node: '>=6'} @@ -5101,6 +5171,10 @@ packages: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} dev: true + /pstree.remy@1.1.8: + resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==} + dev: true + /pump@3.0.0: resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==} dependencies: @@ -5283,6 +5357,13 @@ packages: readable-stream: 3.6.2 dev: true + /readdirp@3.6.0: + resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} + engines: {node: '>=8.10.0'} + dependencies: + picomatch: 2.3.1 + dev: true + /redent@3.0.0: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} engines: {node: '>=8'} @@ -5519,6 +5600,13 @@ packages: /signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} + /simple-update-notifier@2.0.0: + resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==} + engines: {node: '>=10'} + dependencies: + semver: 7.5.4 + dev: true + /sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: true @@ -5859,6 +5947,13 @@ packages: ieee754: 1.2.1 dev: true + /touch@3.1.0: + resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==} + hasBin: true + dependencies: + nopt: 1.0.10 + dev: true + /tough-cookie@4.1.3: resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==} engines: {node: '>=6'} @@ -6073,6 +6168,10 @@ packages: which-boxed-primitive: 1.0.2 dev: false + /undefsafe@2.0.5: + resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==} + dev: true + /universalify@0.2.0: resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} engines: {node: '>= 4.0.0'} @@ -6158,6 +6257,10 @@ packages: convert-source-map: 2.0.0 dev: true + /valibot@0.24.1: + resolution: {integrity: sha512-Toclbuy20XsECZiueh2dkQ63he2AGaBIj/FJRDAFti2kueFldm9bjJzSYvPaL5CE1HXDMRhq7olak8at7xCz5A==} + dev: false + /w3c-xmlserializer@4.0.0: resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==} engines: {node: '>=14'} diff --git a/src/app/auth.ts b/src/app/auth.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx new file mode 100644 index 0000000..e4661e0 --- /dev/null +++ b/src/app/sign-up/page.tsx @@ -0,0 +1,9 @@ +function SignUpPage() { + return ( +
+

Sign Up Page

+
+ ); +} + +export default SignUpPage; diff --git a/src/components/Form/Form.styled.ts b/src/components/Form/Form.styled.ts deleted file mode 100644 index 6931ade..0000000 --- a/src/components/Form/Form.styled.ts +++ /dev/null @@ -1,156 +0,0 @@ -"use client"; - -import styled from "styled-components"; -import Link from "next/link"; - -const Button = styled.button` - width: 100%; - cursor: pointer; - padding: 16px 24px 16px 24px; - background-color: oklch(65.57% 0.19552898037793698 288.17775174927874); - border-radius: 24px; - font-weight: 700; - color: white; -`; - -const InputGroup = styled.div` - box-shadow: 0px 0.6px 5.2px rgba(0, 0, 0, 0.011), - 0px 1.5px 12.6px rgba(0, 0, 0, 0.016), 0px 2.9px 23.7px rgba(0, 0, 0, 0.02), - 0px 5.1px 42.2px rgba(0, 0, 0, 0.024), 0px 9.6px 79px rgba(0, 0, 0, 0.029), - 0px 23px 189px rgba(0, 0, 0, 0.04); -`; - -const InputWrapper = styled.div<{ $isUpper: boolean; $isLower: boolean }>` - position: relative; - - display: flex; - flex-direction: row; - align-items: center; - ${(props) => - props.$isUpper && - "border-bottom: 1px solid oklch(16.73% 0.005 83 / 20%); border-bottom: 1px solid oklch(16.73% 0.005 83 / 20%);"} - ${(props) => - props.$isLower - ? "border-bottom: 1px solid oklch(16.73% 0.005 83 / 20%);" - : "border-top: 1px solid oklch(16.73% 0.005 83 / 20%);"} - border-left: 1px solid oklch(16.73% 0.005 83 / 20%); - border-right: 1px solid oklch(16.73% 0.005 83 / 20%); - - ${(props) => - props.$isUpper && - "border-top-left-radius: 8px;border-top-right-radius: 8px;"} - ${(props) => - props.$isLower && - "border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;"} - - padding: 4px 16px 4px 16px; - gap: 8px; -`; - -const Input = styled.input` - border: none; - padding: 16px 0 16px 0; - font-size: 16px; - font-weight: 700; - background: none; - - -webkit-appearance: none; - appearance: none; - font-family: inherit; - font-size: 16px; - height: 52px; - padding: 0 16px; - - &:focus { - outline: none; - appearance: none; - } -`; - -const VisbilityButton = styled.button` - display: grid; - place-items: center; -`; - -const HelpWrapper = styled.ul` - display: flex; - justify-content: space-between; - padding: 16px; -`; - -const HelperList = styled.li<{ $left: number }>` - position: relative; - list-style: none; - - &::before { - content: ""; - display: block; - position: absolute; - top: 10px; - left: ${(props) => props.$left}px; - width: 1px; - height: 12px; - border-radius: 0.5px; - background-color: #dadada; - } -`; - -const Helper = styled(Link)` - text-decoration: none; - font-size: 14px; - line-height: 17px; - color: #8f8f8f; -`; - -const Placeholder = styled.div<{ $isFocus: boolean }>` - position: absolute; - top: 17px; - left: 65px; - pointer-events: none; - user-select: none; - will-change: transform, background, color; // Inform the browser that these properties are likely to change - background: ${(props) => - props.$isFocus ? "oklch(96.33% 0.017 294.49)" : "transparent"}; - color: ${(props) => - props.$isFocus - ? "oklch(65.57% 0.19552898037793698 288.17775174927874)" - : "oklch(16.73% 0.005 83 / 20%)"}; - - transform: ${(props) => - props.$isFocus ? "translateY(-110%) scale(0.8)" : ""}; - transition: transform 200ms ease-in-out, background 200ms ease-in-out, - color 200ms ease-in-out; // Specify transitions for each property -`; -export { - Helper, - InputGroup, - Button, - InputWrapper, - HelpWrapper, - HelperList, - Input, - VisbilityButton, - Placeholder, -}; - -// -webkit-appearance: none; -// font-family: inherit; -// font-size: 16px; -// font-size: var(--lg-font-size); -// height: 52px; -// height: var(--input-height); -// line-height: 1.1; -// line-height: var(--base-line-height); -// outline: none; -// padding: 0 16px; -// padding: var(--input-padding); -// width: 100%; -// color: #2d333a; -// color: var(--input-text-color); -// background-color: #fff; -// background-color: var(--input-background-color); -// transition: box-shadow .2s ease-in-out,border-color .2s ease-in-out; -// border-radius: 3px; -// border-radius: var(--input-border-radius); -// border: 1px solid #c2c8d0; -// border: var(--input-border-width) solid var(--input-border-color); diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx deleted file mode 100644 index 7654d32..0000000 --- a/src/components/Form/Form.tsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; - -import React from "react"; -import * as Styled from "./Form.styled"; -import Id from "./Id"; -import Password from "./Password"; -import Helper from "./Helper"; -import InvalidMessage from "../InvalidMessage"; - -function Form() { - const [id, setId] = React.useState(""); - const [password, setPassword] = React.useState(""); - const [isIdValid, setIsIdValid] = React.useState({ - id: true, - password: true, - }); - - function handleSubmit(e: React.FormEvent) { - e.preventDefault(); - - if (id.length < 6 || id.length > 20) { - setIsIdValid((prev) => ({ ...prev, id: false })); - } else if (password.length < 8) { - setIsIdValid((prev) => ({ ...prev, password: false })); - } - } - return ( -
- - - - - - {isIdValid.id ? null : ( - - )} - {isIdValid.password ? null : ( - - )} - { - if (id.length >= 6 && id.length <= 20) { - setIsIdValid((prev) => ({ ...prev, id: true })); - } - if (password.length >= 8) { - setIsIdValid((prev) => ({ ...prev, password: true })); - } - - if (id.length < 6 || id.length > 20) { - setIsIdValid((prev) => ({ ...prev, id: false })); - } else if (password.length < 8) { - setIsIdValid((prev) => ({ ...prev, password: false })); - } - }} - > - 로그인 - - - ); -} - -export default Form; diff --git a/src/components/Form/Helper/Helper.tsx b/src/components/Form/Helper/Helper.tsx deleted file mode 100644 index ed0ef83..0000000 --- a/src/components/Form/Helper/Helper.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import * as Styled from "../Form.styled"; - -const HELPERS = [ - { - name: "비밀번호 찾기", - href: "/login/find-password", - left: 0, - }, - { - name: "아이디 찾기", - href: "/login/find", - left: -25, - }, - { - name: "회원가입", - href: "/login/register", - left: -24, - }, -]; - -function Helper() { - return ( - - {HELPERS.map((helper) => ( - - {helper.name} - - ))} - - ); -} -export default Helper; diff --git a/src/components/Form/Helper/index.ts b/src/components/Form/Helper/index.ts deleted file mode 100644 index 3583f8c..0000000 --- a/src/components/Form/Helper/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Helper"; -export { default } from "./Helper"; diff --git a/src/components/Form/Id/Id.tsx b/src/components/Form/Id/Id.tsx deleted file mode 100644 index 42c8937..0000000 --- a/src/components/Form/Id/Id.tsx +++ /dev/null @@ -1,70 +0,0 @@ -"use client"; - -import useToggle from "@hooks/use-toggle"; -import * as Styled from "../Form.styled"; -import VisuallyHidden from "@compo/VisuallyHidden"; -import InvalidMessage from "@/components/InvalidMessage"; -import React from "react"; - -function Id({ - setId, -}: { - setId: React.Dispatch>; -}) { - const [value, setValue] = React.useState(""); - const [isFocused, toggleIsFocused] = useToggle(false); - - return ( - <> - - - - { - const currValue = e.target.value; - setValue(() => currValue); - setId(() => currValue); - }} - /> - - {value.length > 0 ? "" : "아이디를 입력해주세요"} - - - - ); -} - -const GoogleIcon = ({ - name, - isFocused, - ...delegated -}: { - name: string; - isFocused: boolean; -}) => { - const color = isFocused - ? "oklch(16.73% 0.005 83 / 80%)" - : "oklch(16.73% 0.005 83 / 20%)"; - - return ( - - {name} - - ); -}; - -export default React.memo(Id); diff --git a/src/components/Form/Id/index.ts b/src/components/Form/Id/index.ts deleted file mode 100644 index f6b9795..0000000 --- a/src/components/Form/Id/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Id"; -export { default } from "./Id"; diff --git a/src/components/Form/Password/Password.tsx b/src/components/Form/Password/Password.tsx deleted file mode 100644 index 023bc34..0000000 --- a/src/components/Form/Password/Password.tsx +++ /dev/null @@ -1,85 +0,0 @@ -"use client"; - -import React from "react"; -import * as Styled from "../Form.styled"; -import VisuallyHidden from "@compo/VisuallyHidden"; -import useToggle from "@hooks/use-toggle"; - -function Password({ - setPassword, -}: { - setPassword: React.Dispatch>; -}) { - const [value, setValue] = React.useState(""); - const [isFocused, toggleIsFocused] = useToggle(false); - const [isShown, toggleIsShown] = useToggle(false); - - return ( - - - - { - const currValue = e.target.value; - setValue(() => currValue); - setPassword(() => currValue); - }} - onFocus={toggleIsFocused} - onBlur={toggleIsFocused} - /> - - - - - {value.length > 0 ? "" : "비밀번호를 입력해주세요"} - - - ); -} - -const VisbilityIcon = ({ isShown }: { isShown: boolean }) => { - const color = isShown - ? "oklch(16.73% 0.005 83 / 80%)" - : "oklch(16.73% 0.005 83 / 20%)"; - - return ( - - {isShown ? "visibility_off" : "visibility"} - - ); -}; - -const GoogleIcon = ({ - name, - isFocused, - ...delegated -}: { - name: string; - isFocused: boolean; -}) => { - const color = isFocused - ? "oklch(16.73% 0.005 83 / 80%)" - : "oklch(16.73% 0.005 83 / 20%)"; - - return ( - - {name} - - ); -}; -export default React.memo(Password); diff --git a/src/components/Form/Password/index.ts b/src/components/Form/Password/index.ts deleted file mode 100644 index 16cbda8..0000000 --- a/src/components/Form/Password/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Password"; -export { default } from "./Password"; diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts deleted file mode 100644 index a5c6fdf..0000000 --- a/src/components/Form/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Form"; -export { default } from "./Form"; diff --git a/src/components/FormHeader/FormHeader.styled.tsx b/src/components/FormHeader/FormHeader.styled.tsx deleted file mode 100644 index cc46c96..0000000 --- a/src/components/FormHeader/FormHeader.styled.tsx +++ /dev/null @@ -1,14 +0,0 @@ -"use client"; - -import styled from "styled-components"; - -export const Header = styled.header` - display: flex; - justify-content: center; - align-items: center; - padding: 1rem 1rem 3rem 1rem; -`; - -export const Title = styled.h1` - font-size: 2rem; -`; diff --git a/src/components/FormHeader/FormHeader.tsx b/src/components/FormHeader/FormHeader.tsx deleted file mode 100644 index f8b7a22..0000000 --- a/src/components/FormHeader/FormHeader.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import * as Styled from "./FormHeader.styled"; -import VisuallyHidden from "../VisuallyHidden"; - -function FormHeader() { - return ( - - 사이트 로그인 페이지 - 로그인 - - ); -} - -export default FormHeader; diff --git a/src/components/FormHeader/index.ts b/src/components/FormHeader/index.ts deleted file mode 100644 index 9b4b9ad..0000000 --- a/src/components/FormHeader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./FormHeader"; -export { default } from "./FormHeader"; diff --git a/src/components/SignUpForm/SignUpForm.tsx b/src/components/SignUpForm/SignUpForm.tsx new file mode 100644 index 0000000..6de3ded --- /dev/null +++ b/src/components/SignUpForm/SignUpForm.tsx @@ -0,0 +1,5 @@ +function SignUpForm() { + return; +} + +export default SignUpForm; diff --git a/src/components/SignUpForm/index.ts b/src/components/SignUpForm/index.ts new file mode 100644 index 0000000..cff61e6 --- /dev/null +++ b/src/components/SignUpForm/index.ts @@ -0,0 +1,2 @@ +export * from "./SignUpForm"; +export { default } from "./SignUpForm"; diff --git a/tsconfig.json b/tsconfig.json index 2c5ed1b..ba7202b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "baseUrl": ".", "target": "es6", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, @@ -8,9 +7,8 @@ "strict": true, "noEmit": true, "esModuleInterop": true, - "module": "esnext", - "allowSyntheticDefaultImports": true, - "moduleResolution": "Node", + "module": "CommonJS", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -28,6 +26,11 @@ "@public/*": ["./public/*"] } }, + "ts-node": { + "transpileOnly": true, + "files": true, + "esm": false + }, "include": [ "next-env.d.ts", "**/*.ts",