From b9a48352e0ebd531763a6b1fb1cf1f144f8c7ddd Mon Sep 17 00:00:00 2001 From: takasuka_takumi Date: Thu, 2 May 2024 18:16:53 +0900 Subject: [PATCH] feat/takumi0616/234-record-add-modal --- api/app/models/record.rb | 60 +-- api/db/fixtures/record.rb | 56 +-- docker-compose.yml | 6 +- view/next-project/package-lock.json | 451 ++++++++++++++++-- .../RecordAddModal/RecordAddModal.module.css | 248 ++++++---- .../common/RecordAddModal/RecordAddModal.tsx | 236 +++++---- .../RecordEditModal/RecordEditModal.tsx | 1 + .../src/components/icons/CloseModal.tsx | 46 ++ 8 files changed, 816 insertions(+), 288 deletions(-) create mode 100644 view/next-project/src/components/icons/CloseModal.tsx diff --git a/api/app/models/record.rb b/api/app/models/record.rb index a939841..786f401 100644 --- a/api/app/models/record.rb +++ b/api/app/models/record.rb @@ -10,8 +10,8 @@ def self.with_curriculum_and_teacher(record_id) "curriculum": record.chapter.nil? || record.chapter.curriculum.nil? ? nil: record.chapter.curriculum, "curriculum_title": record.chapter.nil? || record.chapter.curriculum.nil? ? nil: record.chapter.curriculum.title, "chapter": record.chapter.nil? ? nil: record.chapter, - "teacher": record.teacher.user.name, - "user": record.user.name, + "teacher": record.teacher&.user&.name, + "user": record.user&.name, "skills": record.chapter.nil? || record.chapter.curriculum.nil? ? nil: record.chapter.curriculum.skills.map{ |skill| { @@ -24,62 +24,54 @@ def self.with_curriculum_and_teacher(record_id) def self.with_teacher_and_skills @records = Record.eager_load(:teacher, :chapter, :user) - .map{ - |record| + .map do |record| { "id": record.id, "title": record.title, - "user_id": record.user.id, - "user_name": record.user.name, - "teacher_id": record.teacher.nil? ? nil: record.teacher.user.id, - "teacher_name": record.teacher.nil? ? nil: record.teacher.user.name, - "chapter_id": record.chapter.nil? ? nil: record.chapter.id, - "chapter_title": record.chapter.nil? ? nil: record.chapter.title, - "curriculum_id": record.chapter.nil? ? nil: record.chapter.curriculum.id, - "curriculum_title": record.chapter.nil? ? nil: record.chapter.curriculum.title, - "skills": record.chapter.nil? || record.chapter.curriculum.nil? ? nil: record.chapter.curriculum.skills.map{ - |skill| - { - "name": skill.name, - } - }, + "user_id": record.user&.id, + "user_name": record.user&.name, + "teacher_id": record.teacher&.user&.id, + "teacher_name": record.teacher&.user&.name, + "chapter_id": record.chapter&.id, + "chapter_title": record.chapter&.title, + "curriculum_id": record.chapter&.curriculum&.id, + "curriculum_title": record.chapter&.curriculum&.title, + "skills": record.chapter&.curriculum&.skills&.map{ |skill| { "name": skill.name } } || [], "created_at": record.created_at, "updated_at": record.updated_at, } - } + end end + def self.with_teacher_and_skill(record_id) @record = Record.eager_load(:teacher, :chapter, :user).where(records: {id: record_id}) - .map{ - |record| + .map do |record| { "id": record.id, "title": record.title, - "user_id": record.user.id, - "user_name": record.user.name, - "teacher_id": record.teacher.nil? ? nil: record.teacher.user.id, - "teacher_name": record.teacher.nil? ? nil: record.teacher.user.name, - "chapter_id": record.chapter.nil? ? nil: record.chapter.id, - "chapter_title": record.chapter.nil? ? nil: record.chapter.title, - "skills": record.chapter.nil? || record.chapter.curriculum.nil? ? nil: record.chapter.curriculum.skills.map{ - |skill| - { - "name": skill.name, - } - }, + "user_id": record.user&.id, + "user_name": record.user&.name, + "teacher_id": record.teacher&.user&.id, + "teacher_name": record.teacher&.user&.name, + "chapter_id": record.chapter&.id, + "chapter_title": record.chapter&.title, + "skills": record.chapter&.curriculum&.skills&.map{ |skill| { "name": skill.name } } || [], "created_at": record.created_at, "updated_at": record.updated_at, } - } + end end def self.get_teacher(record_id) record = Record.find(record_id) + return nil unless record.teacher && record.teacher.user + { "id": record.teacher.id, "user_id": record.teacher.user.id, "record_id": record.id, } end + end diff --git a/api/db/fixtures/record.rb b/api/db/fixtures/record.rb index 95a868b..b922bc9 100644 --- a/api/db/fixtures/record.rb +++ b/api/db/fixtures/record.rb @@ -1,29 +1,29 @@ Record.seed( :id, - { id: 1, title: 'TypeScriptで二分木を反転', content: 'test_content', homework: 'test_homework', user_id: 1}, - { id: 2, title: 'GoでFizzBuzz', content: 'test_content', homework: 'test_homework', user_id: 2, chapter_id: 2 }, - { id: 3, title: 'Reactのルーティングについての記事を読んだ', content: 'test_content', homework: 'test_homework', user_id: 3, chapter_id: 3 }, - { id: 4, title: 'TypeScriptのインターフェースを書いた', content: 'test_content', homework: 'test_homework', user_id: 4, chapter_id: 4 }, - { id: 5, title: 'TypeScriptのバックエンドツールに関する記事を読んだ', content: 'test_content', homework: 'test_homework', user_id: 1, chapter_id: 1 }, - { id: 6, title: 'Goによるオニオンアーキテクチャを実装した', content: 'test_content', homework: 'test_homework', user_id: 2, chapter_id: 2 }, - { id: 7, title: 'Reactとnode-fetchによるAPI操作', content: 'test_content', homework: 'test_homework', user_id: 3, chapter_id: 3 }, - { id: 8, title: 'Goのインターフェースを書いた', content: 'test_content', homework: 'test_homework', user_id: 4, chapter_id: 4 }, - { id: 9, title: 'WSLの環境構築', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1 }, - { id: 10, title: 'Linuxのコマンド学習', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2 }, - { id: 11, title: 'GitとGitHubについて動画学習', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3 }, - { id: 12, title: 'GitHub初期設定（SSH Keyの登録など）', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4 }, - { id: 13, title: 'WSL上にRubyの環境構築', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1 }, - { id: 14, title: 'Rubyでメソッドと配列について学習', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2 }, - { id: 15, title: 'Rubyのif，for，while文について学習', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3 }, - { id: 16, title: 'Dockerをつかってみる', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4 }, - { id: 17, title: 'FastAPIでToDoリスト作成', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1 }, - { id: 18, title: 'Azure for Student でインスタンス作成', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2 }, - { id: 19, title: 'AzureにSSH接続', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3 }, - { id: 20, title: 'お名前.comでドメイン取得とDNS設定', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4 }, - { id: 21, title: 'Nginxを使ったリバースプロキシの設定', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1 }, - { id: 22, title: 'AzureにStickeeをデプロイ', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2 }, - { id: 23, title: 'Certbotを用いたSSLの設定', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3 }, - { id: 24, title: 'Softether VPNをインストール（vpnserver）', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4 }, - { id: 25, title: 'Softether VPNをインストール（vpnclient）', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1 }, - { id: 26, title: 'NginxでVPN越しにリバースプロキシ', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2}, - { id: 27, title: 'AWSでインスタンスを作成', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3}, -) + { id: 1, title: 'TypeScriptで二分木を反転', content: 'test_content', homework: 'test_homework', user_id: 1, release: true }, + { id: 2, title: 'GoでFizzBuzz', content: 'test_content', homework: 'test_homework', user_id: 2, chapter_id: 2, release: true }, + { id: 3, title: 'Reactのルーティングについての記事を読んだ', content: 'test_content', homework: 'test_homework', user_id: 3, chapter_id: 3, release: true }, + { id: 4, title: 'TypeScriptのインターフェースを書いた', content: 'test_content', homework: 'test_homework', user_id: 4, chapter_id: 4, release: true }, + { id: 5, title: 'TypeScriptのバックエンドツールに関する記事を読んだ', content: 'test_content', homework: 'test_homework', user_id: 1, chapter_id: 1, release: true }, + { id: 6, title: 'Goによるオニオンアーキテクチャを実装した', content: 'test_content', homework: 'test_homework', user_id: 2, chapter_id: 2, release: true }, + { id: 7, title: 'Reactとnode-fetchによるAPI操作', content: 'test_content', homework: 'test_homework', user_id: 3, chapter_id: 3, release: true }, + { id: 8, title: 'Goのインターフェースを書いた', content: 'test_content', homework: 'test_homework', user_id: 4, chapter_id: 4, release: true }, + { id: 9, title: 'WSLの環境構築', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1, release: true }, + { id: 10, title: 'Linuxのコマンド学習', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2, release: true }, + { id: 11, title: 'GitとGitHubについて動画学習', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3, release: true }, + { id: 12, title: 'GitHub初期設定（SSH Keyの登録など）', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4, release: true }, + { id: 13, title: 'WSL上にRubyの環境構築', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1, release: true }, + { id: 14, title: 'Rubyでメソッドと配列について学習', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2, release: true }, + { id: 15, title: 'Rubyのif，for，while文について学習', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3, release: true }, + { id: 16, title: 'Dockerをつかってみる', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4, release: true }, + { id: 17, title: 'FastAPIでToDoリスト作成', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1, release: true }, + { id: 18, title: 'Azure for Student でインスタンス作成', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2, release: true }, + { id: 19, title: 'AzureにSSH接続', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3, release: true }, + { id: 20, title: 'お名前.comでドメイン取得とDNS設定', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4, release: true }, + { id: 21, title: 'Nginxを使ったリバースプロキシの設定', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1, release: true }, + { id: 22, title: 'AzureにStickeeをデプロイ', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2, release: true }, + { id: 23, title: 'Certbotを用いたSSLの設定', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3, release: true }, + { id: 24, title: 'Softether VPNをインストール（vpnserver）', content: 'test_content', homework: 'なし', user_id: 4, chapter_id: 4, release: true }, + { id: 25, title: 'Softether VPNをインストール（vpnclient）', content: 'test_content', homework: 'なし', user_id: 1, chapter_id: 1, release: true }, + { id: 26, title: 'NginxでVPN越しにリバースプロキシ', content: 'test_content', homework: 'なし', user_id: 2, chapter_id: 2, release: true }, + { id: 27, title: 'AWSでインスタンスを作成', content: 'test_content', homework: 'なし', user_id: 3, chapter_id: 3, release: true }, +) \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 530511d..b4a4c6c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,3 @@ -version: "3" services: seeds_db: image: mysql:8.0 @@ -23,6 +22,11 @@ services: - seeds_db stdin_open: true tty: true + environment: + DB_HOST: seeds_db + DB_USER: root + DB_PASSWORD: password + DB_NAME: myapp_development seeds_view: build: ./view diff --git a/view/next-project/package-lock.json b/view/next-project/package-lock.json index e7f63d2..dc442b2 100644 --- a/view/next-project/package-lock.json +++ b/view/next-project/package-lock.json @@ -67,7 +67,6 @@ "version": "7.12.11", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", - "dev": true, "dependencies": { "@babel/highlight": "^7.10.4" } @@ -464,6 +463,11 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -725,6 +729,40 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", + "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz", + "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", + "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "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.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -749,7 +787,6 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", - "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -789,6 +826,226 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@next/env": { "version": "13.5.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz", @@ -2156,6 +2413,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dompurify": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz", @@ -3075,6 +3341,11 @@ "node": ">=8" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -3134,7 +3405,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3477,7 +3747,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz", "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==", - "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -3871,7 +4140,6 @@ "version": "2.13.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", - "dev": true, "dependencies": { "hasown": "^2.0.0" }, @@ -5964,10 +6232,9 @@ } }, "node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "peer": true + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, "node_modules/react-markdown": { "version": "8.0.2", @@ -5999,11 +6266,6 @@ "react": ">=16" } }, - "node_modules/react-markdown/node_modules/react-is": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.0.0.tgz", - "integrity": "sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==" - }, "node_modules/react-particles": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/react-particles/-/react-particles-2.8.0.tgz", @@ -8288,7 +8550,6 @@ "version": "7.12.11", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", - "dev": true, "requires": { "@babel/highlight": "^7.10.4" } @@ -8596,6 +8857,11 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -8820,6 +9086,36 @@ } } }, + "@floating-ui/core": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", + "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", + "requires": { + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/dom": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz", + "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==", + "requires": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/react-dom": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", + "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "requires": { + "@floating-ui/dom": "^1.0.0" + } + }, + "@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -8841,7 +9137,6 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", - "requires": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -8872,6 +9167,97 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "requires": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + } + }, + "@mui/core-downloads-tracker": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==" + }, + "@mui/material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + } + }, + "@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + } + }, + "@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "requires": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + } + }, + "@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + } + }, + "@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "requires": {} + }, + "@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "requires": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + } + }, "@next/env": { "version": "13.5.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz", @@ -9843,6 +10229,15 @@ "esutils": "^2.0.2" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dompurify": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz", @@ -10553,6 +10948,11 @@ "to-regex-range": "^5.0.1" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -10602,8 +11002,7 @@ "function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", - "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==" }, "function.prototype.name": { "version": "1.1.6", @@ -10845,7 +11244,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz", "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==", - "dev": true, "requires": { "function-bind": "^1.1.2" } @@ -11123,7 +11521,6 @@ "version": "2.13.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", - "dev": true, "requires": { "hasown": "^2.0.0" } @@ -12515,10 +12912,9 @@ "requires": {} }, "react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "peer": true + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, "react-markdown": { "version": "8.0.2", @@ -12540,13 +12936,6 @@ "unified": "^10.0.0", "unist-util-visit": "^4.0.0", "vfile": "^5.0.0" - }, - "dependencies": { - "react-is": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.0.0.tgz", - "integrity": "sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==" - } } }, "react-particles": { diff --git a/view/next-project/src/components/common/RecordAddModal/RecordAddModal.module.css b/view/next-project/src/components/common/RecordAddModal/RecordAddModal.module.css index 06cb9f6..2ade248 100644 --- a/view/next-project/src/components/common/RecordAddModal/RecordAddModal.module.css +++ b/view/next-project/src/components/common/RecordAddModal/RecordAddModal.module.css @@ -2,11 +2,9 @@ top: 0; left: 0; position: fixed; - padding: 100px; height: 100%; width: 100%; - z-index: 11; - background-color: rgba(51, 51, 51, 0.3); + z-index: 50; overflow: auto; } @@ -20,135 +18,207 @@ .modalContent { width: 100%; - z-index: 15; display: flex; flex-flow: column; padding: 50px 50px; - color: var(--accent-7); - border-radius: var(--card-radius); - background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); - backdrop-filter: blur(10px); - gap: 30px; + background-color: #ffac5d; } -.contentsTitle { - width: 100%; +.modalHeader { display: flex; - justify-content: start; - align-items: start; - flex-flow: row; - flex-wrap: nowrap; + justify-content: space-between; + margin-bottom: 3rem; } -.modalContentContents { - width: 100%; +.closeButton { + flex-grow: 0; + align-items: center; +} + +.modalButtons { display: flex; - justify-content: start; - align-items: start; - flex-flow: row; - flex-wrap: nowrap; + margin-top: 12px; + align-items: center; + gap: 2rem; } -.contentsMde { - width: 100%; +.releaseToggle { + display: flex; + align-items: center; } -.contentsMde span { - font-size: 16px; - background-color: #fff; +.modalSubmitButton { + display: flex; } -.homeworkMde { - width: 100%; +.inputWrap { + position: relative; + width: 85%; + margin-bottom: 2rem; } -.homeworkMde span { +.textBox { + width: 100%; + padding: 15px; + border: none; + border-radius: 10px; font-size: 16px; - background-color: #fff; + outline: none; + position: relative; + z-index: 1; + background-color: #FFB773; + border: 1px solid rgba(255, 183, 115, 0.5); + background-clip: padding-box; + color: #FFF; + font-weight: bold; } -.modalContent input { - font-size: 1.6rem; - width: 100%; - letter-spacing: 1px; - color: var(--accent-6); - background: none; - border: 1px solid var(--accent-4); - padding: 10px; +.textBox::placeholder { + color: white; } -.modalContent input:focus { - border: 1px solid var(--button-secondary); - z-index: 10; - outline: 0; +.label { + position: absolute; + top: 18px; + left: 20px; + font-size: 24px; + color: #a0a0a0; + transition: all 0.25s ease; + z-index: 0; + font-weight: bold; +} + +.focus { + top: -24px; + left: 10px; + font-size: 14px; + color: white; +} + +.recordContent { + display: flex; } -.modalContent textarea { - font-size: 1.6rem; - width: 50%; - height: 50rem; - color: var(--accent-6); - background: none; - border: 1px solid var(--accent-4); +.editorSection { + width: 65%; + padding-left: 48px; +} + +.titleInput { padding: 10px; + border: none; + background-color: #FFB773; + border-radius: 5px; + margin-bottom: 10px; } -.modalContent textarea:focus { - border: 1px solid var(--button-secondary); - z-index: 10; - outline: 0; +.mdeWrapper { + border: 16px solid #F8F8F8; + border-radius: 16px; + padding: 4px; + background-color: white; + margin-bottom: 5rem; } -.modalContent select { - font-size: 1.6rem; +.simpleMde { width: 100%; - letter-spacing: 1px; - color: var(--accent-6); - background: none; - border: 1px solid var(--accent-4); - padding: 10px; + height: auto; + z-index: 55; } -.modalContent select:focus { - border: 1px solid var(--button-secondary); - z-index: 10; - outline: 0; +.selectSection { + width: 35%; + padding-left: 4rem; + margin-top: 68px; } -.modalName { +.selectSection { display: flex; - justify-content: center; - align-items: center; + flex-direction: column; } -.modalContentClose { - display: flex; - justify-content: start; - align-items: start; +.selectLabel { + font-size: 14px; + color: #666; + margin: 8px; + margin-bottom: 12px; } -.modalContentCloseIcon { - background: none; +.selectWrapper { + position: relative; border: none; - margin: -20px; - border-radius: var(--button-radius); - text-align: center; - font-size: 2.8rem; - color: var(--button-secondary); - display: flex; - justify-content: center; - align-items: center; + border-radius: 10px; + background: #FFFFFF; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + overflow: hidden; + height: 8rem; + margin-bottom: 2rem; } -.modalSubmitButton { - display: flex; - justify-content: center; - align-items: center; +.selectWrapper select { + text-align: center; + width: 100%; + border: none; + border-radius: 10px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + cursor: pointer; + font-size: 16px; + color: #333; + outline: none; + font-weight: bold; +} + +.toggle { + position: relative; + width: 150px; + height: 42px; + border-radius: 20px; + overflow: hidden; + cursor: pointer; + background: #f45e55; + transition: background-color 0.2s; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.toggle.checked { + background: #4be9ac; +} + +.toggle input[type=checkbox] { + display: none; +} + +.toggle:before { + content: "Not Release"; + position: absolute; + top: 50%; + left: 30px; + transform: translateY(-50%); + color: #fff; + font-size: 14px; /* 文字サイズを調整 */ + transition: 0.2s ease-out; +} + +.toggle:after { + content: "Release"; + position: absolute; + top: 50%; + right: 14px; /* 調整された位置 */ + transform: translateY(-50%) translateX(100%); + width: 130px; /* 更新されたラベル幅 */ + color: #fff; + font-size: 14px; /* 文字サイズを調整 */ + text-align: center; + transition: 0.2s ease-out; } -.textButton:active { +.toggle.checked:before { + transform: translateY(-50%) translateX(-300%); } -.releaseToggle{ - font-size: 1.6rem; -} \ No newline at end of file +.toggle.checked:after { + transform: translateY(-50%); +} diff --git a/view/next-project/src/components/common/RecordAddModal/RecordAddModal.tsx b/view/next-project/src/components/common/RecordAddModal/RecordAddModal.tsx index 1a3ab0c..8596d99 100644 --- a/view/next-project/src/components/common/RecordAddModal/RecordAddModal.tsx +++ b/view/next-project/src/components/common/RecordAddModal/RecordAddModal.tsx @@ -9,6 +9,7 @@ import dynamic from 'next/dynamic'; import RecordAddAnimation from '@components/common/RecordAddAnimation'; import Switch from '@mui/material/Switch'; import { useAuth } from 'src/context/AuthProvider'; +import CloseModal from '@components/icons/CloseModal'; const SimpleMde = dynamic(() => import('react-simplemde-editor'), { ssr: false }); @@ -27,7 +28,7 @@ interface Record { chapter_id: number; created_at?: string; updated_at?: string; - release?: boolean; // 追加 + release?: boolean; } interface Curriculum { @@ -70,7 +71,7 @@ interface Skill { } const RecordAddModal: FC = (props) => { - const { currentUser } = useAuth(); // ログインしているユーザーの情報を取得 + const { currentUser } = useAuth(); const [curriculumChapters, setCurriculumChapters] = useState([]); const [curriculumChapter, setCurriculumChapter] = useState(); const [records, setRecords] = useState([]); @@ -79,15 +80,33 @@ const RecordAddModal: FC = (props) => { const [isAnimationOpen, setIsAnimationOpen] = useState(false); const [newRecordId, setNewRecordId] = useState(''); const [release, setRelease] = useState(false); + const { isOpen, setIsOpen } = props; + const [isFocused, setIsFocused] = useState(false); + const [placeholder, setPlaceholder] = useState('Record Name'); + const [isActive, setIsActive] = useState(false); - const contentSentence = - '# 内容・やったこと \n\n\n' + - '# 具体的な内容 \n\n\n' + - '# ポイント \n\n\n' + - '# 学習の際の工夫点 \n\n\n' + - '# 使用した記事 \n\n\n'; - const homeworkSentence = - '# 次回までの課題 \n\n\n' + '# 参考資料 \n\n\n' + '# 次回までに勉強しておいた方がいいこと\n\n\n'; + const toggleSwitch = () => { + setIsActive(!isActive); + }; + + const handleFocus = () => { + setIsFocused(true); + setPlaceholder(''); + }; + + const handleBlur = () => { + setIsFocused(false); + if (!recordData.title) { + setPlaceholder('Record Name'); + } + }; + + const handleCloseModal = () => { + setIsOpen(false); + }; + + const contentSentence = ''; + const homeworkSentence = ''; const [recordData, setRecordData] = useState({ title: '', @@ -137,16 +156,13 @@ const RecordAddModal: FC = (props) => { setTeacherData({ ...teacherData, user_id: e.target.value }); }; - // レコード編集用ハンドラー const handleRecordMarkdown = useCallback((value: string) => { setRecordMarkdown(value); }, []); - // Homework編集用ハンドラー const handleHomeworkMarkdown = useCallback((value: string) => { setHomeworkMarkdown(value); }, []); - // カリキュラムのセレクトボックスの変更を検知 const handleCurriculum = useCallback( (e: React.ChangeEvent) => { setCurriculumChapter( @@ -156,7 +172,6 @@ const RecordAddModal: FC = (props) => { [curriculumChapters, setCurriculumChapter], ); - // フォームデータの送信とページの表を再レンダリング const submitRecord = async (recordData: Record, teacherData: Teacher) => { const submitRecordUrl = `${process.env.CSR_API_URI}/records`; const submitData = { @@ -175,14 +190,12 @@ const RecordAddModal: FC = (props) => { const response = await post(submitRecordUrl, submitData); if (response.ok) { const newRecord = await response.json(); - // props.setNewRecordsが関数であることを確認してから呼び出す if (typeof props.setNewRecords === 'function') { props.setNewRecords((prevRecords) => [...prevRecords, newRecord]); } - setIsAnimationOpen(true); // アニメーションを表示 - props.setIsOpen(false); // モーダルを閉じる + setIsAnimationOpen(true); + props.setIsOpen(false); } else { - // エラーハンドリング console.error('Failed to add record:', response.statusText); } } catch (error) { @@ -202,96 +215,109 @@ const RecordAddModal: FC = (props) => { )}
-
- -
-
-

New Record

-
-

Record Name

-
- +
+
+ +
+ +
+
+
+ {}} /> +
+
+
+ +
+
-

Contents

- -

Homework

- -

Teacher

-
- + +
+
+ +
+
+ +
+
+ +
+
+
+
Teacher
+ +
+
+
+
+
Curriculum
+ -
-

Curriculum

-
- -
-

Chapter

-
- -
-
- - boolean) } }) => - setRelease(event.target.checked) - } - color='primary' - /> -
-
- + {curriculumChapters.map((curriculum) => ( + + ))} + +
+
+
+
+
Chapter
+ +
+
+
diff --git a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx index a271295..f50aaee 100644 --- a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx +++ b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx @@ -205,6 +205,7 @@ const RecordEditModal: FC = (props) => {
+