= (props) => {
})}
- Student
-
-
-
Curriculum
+
+
+ boolean) } }) =>
+ setRelease(event.target.checked)
+ }
+ color='primary'
+ />
+
+
+
+
+
- {
- if (row.curriculum) router.push(`/${props.route}/${row.curriculum.id}`);
- else router.push(`/${props.route}/${row.id}`);
- }}
- customStyles={CUSTOM_STYLES}
- />
+ {loader ? (
+ Loading
+ ) : (
+ {
+ if (row.curriculum) router.push(`/${props.route}/${row.curriculum.id}`);
+ else router.push(`/${props.route}/${row.id}`);
+ }}
+ customStyles={CUSTOM_STYLES}
+ />
+ )}
);
};
diff --git a/view/next-project/src/components/layout/PostLayout/PostLayout.module.css b/view/next-project/src/components/layout/PostLayout/PostLayout.module.css
new file mode 100644
index 0000000..3f7051a
--- /dev/null
+++ b/view/next-project/src/components/layout/PostLayout/PostLayout.module.css
@@ -0,0 +1,21 @@
+.mainLayoutContainer {
+ width: 100%;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ padding: 50px 100px;
+ margin-top: 60px;
+ gap: 50px 0px;
+ animation: fadeIn 0.5s ease 0s 1 alternate none running;
+ background-color: #f8f1e8;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
diff --git a/view/next-project/src/components/layout/PostLayout/PostLayout.tsx b/view/next-project/src/components/layout/PostLayout/PostLayout.tsx
new file mode 100644
index 0000000..6ceed2b
--- /dev/null
+++ b/view/next-project/src/components/layout/PostLayout/PostLayout.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import Header from '@components/common/Header';
+import s from './PostLayout.module.css';
+
+interface LayoutProps {
+ children?: React.ReactNode;
+}
+
+const PostLayout: FC = (props) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default PostLayout;
diff --git a/view/next-project/src/components/layout/PostLayout/index.ts b/view/next-project/src/components/layout/PostLayout/index.ts
new file mode 100644
index 0000000..28fa5dd
--- /dev/null
+++ b/view/next-project/src/components/layout/PostLayout/index.ts
@@ -0,0 +1 @@
+export { default } from './PostLayout';
diff --git a/view/next-project/src/pages/post/RecordCard.module.css b/view/next-project/src/pages/post/RecordCard.module.css
new file mode 100644
index 0000000..e0b92ce
--- /dev/null
+++ b/view/next-project/src/pages/post/RecordCard.module.css
@@ -0,0 +1,107 @@
+.cardContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: calc(30% - 14px);
+ height: 250px;
+ margin-bottom: 20px;
+ margin-left: 20px;
+ padding: 20px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ border-radius: 15px;
+ transition: transform 0.2s ease-in-out;
+ cursor: pointer;
+ overflow: hidden;
+ position: relative;
+ box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.cardContainer:hover {
+ transform: translateY(-5px);
+}
+
+.cardTitle {
+ font-size: 24px;
+ font-weight: 500;
+ color: #333;
+ text-align: center;
+ margin-left: 10px;
+ margin-right: 10px;
+ top: 0;
+ margin-top: 20px;
+}
+
+.cardIcon {
+ color: #fa8814;
+ font-size: 32px;
+}
+
+.cardContentLength {
+ font-size: 14px;
+ color: #666;
+ margin-top: 5px;
+ position: absolute;
+ bottom: 10px;
+}
+
+.cardUpdated {
+ font-size: 14px;
+ color: #777;
+ position: absolute;
+ bottom: 10px;
+ right: 20px;
+}
+
+.sample {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.sample::before {
+ position: absolute;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ content: '';
+ background-color: #fa8814;
+ animation: wave linear 8s infinite;
+ bottom: -170%;
+ border-radius: 60% 40% / 35% 65%;
+ z-index: 1;
+}
+
+.sample::after {
+ position: absolute;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ content: '';
+ background-color: #ffac5d;
+ animation: wave linear 8s infinite;
+ bottom: -140%;
+ border-radius: 60% 40% / 35% 65%;
+ animation-delay: -3s;
+}
+
+@keyframes wave {
+ 0%,
+ 100% {
+ transform: translateX(0%) rotate(0deg);
+ }
+ 25% {
+ transform: translateX(-10%) rotate(-10deg);
+ }
+ 50% {
+ transform: translateX(0%) rotate(0deg);
+ }
+ 75% {
+ transform: translateX(10%) rotate(10deg);
+ }
+}
diff --git a/view/next-project/src/pages/post/[id]/index.module.css b/view/next-project/src/pages/post/[id]/index.module.css
new file mode 100644
index 0000000..3f05694
--- /dev/null
+++ b/view/next-project/src/pages/post/[id]/index.module.css
@@ -0,0 +1,39 @@
+.recordContentsContainer {
+ width: 100%;
+ margin-bottom: 20px;
+}
+.contentsTitle {
+ margin-top: 2rem;
+ font-size: 2.8rem;
+ margin-bottom: 2rem;
+ padding-left: 10px;
+ font-weight: bold;
+ font-size: 3.6rem;
+ border-left: 6px solid var(--primary);
+}
+.recordContents {
+ font-size: 1.6rem;
+ padding-top: 1rem;
+ padding-bottom: 3rem;
+ margin: 20px 0;
+}
+.homeworkContentsContainer {
+ width: 100%;
+ margin: 20px 0;
+}
+.recordContents {
+ font-size: 1.6rem;
+ padding-top: 1rem;
+ padding-bottom: 3rem;
+ margin: 20px 0;
+}
+
+.parentButton {
+ position: relative;
+ width: 100%;
+}
+.childButton {
+ position: absolute;
+ bottom: 50px;
+ left: -40px;
+}
diff --git a/view/next-project/src/pages/post/[id]/index.tsx b/view/next-project/src/pages/post/[id]/index.tsx
new file mode 100644
index 0000000..95dfbbc
--- /dev/null
+++ b/view/next-project/src/pages/post/[id]/index.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { get } from '@utils/api_methods';
+import MainLayout from '@components/layout/MainLayout';
+import FlatCard from '@components/common/FlatCard';
+import RecordDetailHeader from '@components/common/RecordDetailHeader';
+import s from './index.module.css';
+import Button from '@components/common/BackButton';
+import Row from '@components/layout/RowLayout';
+import EditButton from '@components/common/EditButton';
+import DeleteButton from '@components/common/DeleteButton';
+import RecordEditModal from '@components/common/RecordEditModal';
+import RecordDeleteModal from '@components/common/RecordDeleteModal';
+import Markdown from '@components/common/Markdown';
+
+interface Curriculum {
+ id: number;
+ title: string;
+ content: string;
+ homework: string;
+ created_at: string;
+ updated_at: string;
+}
+
+interface Chapter {
+ id?: number;
+ title: string;
+ content: string;
+ homework: string;
+ curriculum_id: number;
+ order: number;
+ created_at?: string;
+ updated_at?: string;
+}
+
+interface Record {
+ id: number;
+ title: string;
+ content: string;
+ homework: string;
+ user_id: number;
+ curriculum_id: number;
+ created_at: string;
+ updated_at: string;
+}
+
+interface Skill {
+ id: number;
+ name: string;
+}
+
+interface Props {
+ curriculum: Curriculum;
+ chapter: Chapter;
+ record: Record;
+ teacher: string;
+ user: string;
+ skills: Skill[];
+}
+
+export async function getServerSideProps({ params }: any) {
+ const id = params.id;
+ const getRecordUrl = process.env.SSR_API_URI + '/api/v1/get_record_for_view/' + id;
+ const getRes = await get(getRecordUrl);
+ return {
+ props: getRes,
+ };
+}
+
+export default function Page(props: Props) {
+ const formatDate = (date: string) => {
+ let datetime = date.replace('T', ' ');
+ const datetime2 = datetime.substring(0, datetime.length - 5);
+ return datetime2;
+ };
+
+ const [isOpenEditRecordModal, setIsOpenEditRecordModal] = useState(false);
+ const [isOpenDeleteRecordModal, setIsOpenDeleteRecordModal] = useState(false);
+ const openEditRecordModal = (isOpenEditRecordModal: boolean) => {
+ if (isOpenEditRecordModal) {
+ return (
+ <>
+
+
+ );
+ }
+ };
+ const openDeleteRecordModal = (isOpenDeleteRecordModal: boolean) => {
+ if (isOpenDeleteRecordModal) {
+ return (
+ <>
+
+
+ );
+ }
+ };
+
+ return (
+
+
+
+
+
+ setIsOpenEditRecordModal(!isOpenEditRecordModal)} />
+ {openEditRecordModal(isOpenEditRecordModal)}
+ setIsOpenDeleteRecordModal(!isOpenDeleteRecordModal)} />
+ {openDeleteRecordModal(isOpenDeleteRecordModal)}
+
+
+
Contents
+
{props.record.content}
+
+
Homework
+
+ {props.record.homework}
+
+
+
+
+
+
router.push(`/post/${record.id}`)}>
+
+
総文字数: {contentLength}
+
最終更新日: {new Date(record.updated_at).toLocaleDateString()}
+
+ {drafts.map((draft) => (
+
+ ))}
+
+
+ );
+};
+
+export default PostPage;
diff --git a/view/next-project/src/pages/records/index.tsx b/view/next-project/src/pages/records/index.tsx
index fe62017..754f77f 100644
--- a/view/next-project/src/pages/records/index.tsx
+++ b/view/next-project/src/pages/records/index.tsx
@@ -15,7 +15,7 @@ type Record = {
teacher_name: string;
curriculum_id: number;
curriculum_title: string;
- skills: {name: string}[];
+ skills: { name: string }[];
created_at: string;
updated_at: string;
};
@@ -32,15 +32,15 @@ export const getServerSideProps = async () => {
records: json,
},
};
-}
+};
export default function RecordList(props: Props) {
- const [records, setRecords] = useState(props.records)
+ const [records, setRecords] = useState(props.records);
return (
<>
-
+
diff --git a/view/next-project/src/pages/users/index.tsx b/view/next-project/src/pages/users/index.tsx
index bb0cec2..98dc319 100644
--- a/view/next-project/src/pages/users/index.tsx
+++ b/view/next-project/src/pages/users/index.tsx
@@ -4,7 +4,6 @@ import UsersLayout from '@components/layout/UsersLayout';
import styled from 'styled-components';
import AccountCircle from '@components/icons/AccountCircle';
import UserBackgroundAnimation from '@components/common/UsersBackgroundAnimation/UsersBackgroundAnimation';
-import MemberSearchButton from '@components/common/MemberSearchButton';
import React, { useState } from 'react';
import OpenUserDetailModal from '@components/common/UserDetailModal/UserDetailModal';
interface Props {
@@ -255,9 +254,6 @@ export default function UserList(props: Props) {
return (
Members
-
-
-
@@ -268,12 +264,17 @@ export default function UserList(props: Props) {
))}
- {isOpenUserDetailModal && currentUser && currentDetail &&
- }
+ {isOpenUserDetailModal && currentUser && currentDetail && (
+
+ )}
-
-
-
);
}
diff --git a/view/next-project/src/utils/switchChapterIcon.tsx b/view/next-project/src/utils/switchChapterIcon.tsx
index 0641468..f7fa618 100644
--- a/view/next-project/src/utils/switchChapterIcon.tsx
+++ b/view/next-project/src/utils/switchChapterIcon.tsx
@@ -6,10 +6,10 @@ import Psychiatry from '@components/icons/Psychiatry';
// chapterページで表示するアイコンを切り替える関数
export const switchChapterIcon = (length: number, index: number) => {
const icons = [
- ,
- ,
- ,
- ,
+ ,
+ ,
+ ,
+ ,
];
const iconLength = icons.length;
const iconLengthValue = [];