공지사항 작업, 등록폼 디자인 수정1
This commit is contained in:
@@ -173,10 +173,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
|
||||
}
|
||||
}}
|
||||
placeholder="교육 과정명을 입력해 주세요."
|
||||
className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 ${
|
||||
className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none ${
|
||||
errors.courseName
|
||||
? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
|
||||
: "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
|
||||
? "border-[#f64c4c] focus:shadow-[inset_0_0_0_1px_#333c47]"
|
||||
: "border-[#dee1e6] focus:shadow-[inset_0_0_0_1px_#333c47]"
|
||||
}`}
|
||||
/>
|
||||
{errors.courseName && (
|
||||
@@ -193,10 +193,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:ring-2 cursor-pointer ${
|
||||
className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
|
||||
errors.instructor
|
||||
? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
|
||||
: "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
|
||||
? "border-[#f64c4c]"
|
||||
: "border-[#dee1e6]"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
|
||||
@@ -117,7 +117,7 @@ export default function AdminCoursesPage() {
|
||||
<div className="flex-1 pt-2 flex flex-col">
|
||||
{courses.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
|
||||
등록된 교육과정이 없습니다.
|
||||
<br />
|
||||
과목을 등록해주세요.
|
||||
|
||||
@@ -5,11 +5,21 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
||||
import DropdownIcon from "@/app/svgs/dropdownicon";
|
||||
import BackArrowSvg from "@/app/svgs/backarrow";
|
||||
import { MOCK_COURSES } from "@/app/admin/courses/mockData";
|
||||
import { MOCK_COURSES, MOCK_CURRENT_USER } from "@/app/admin/courses/mockData";
|
||||
import CloseXOSvg from "@/app/svgs/closexo";
|
||||
|
||||
type Lesson = {
|
||||
id: string;
|
||||
courseName: string; // 교육과정명
|
||||
lessonName: string; // 강좌명
|
||||
attachments: string; // 첨부파일 (예: "강좌영상 3개, VR콘텐츠 2개, 평가문제 1개")
|
||||
questionCount: number; // 학습 평가 문제 수
|
||||
createdBy: string; // 등록자
|
||||
createdAt: string; // 등록일
|
||||
};
|
||||
|
||||
export default function AdminLessonsPage() {
|
||||
// TODO: 나중에 실제 데이터로 교체
|
||||
const items: any[] = [];
|
||||
const [lessons, setLessons] = useState<Lesson[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isRegistrationMode, setIsRegistrationMode] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
@@ -20,17 +30,27 @@ export default function AdminLessonsPage() {
|
||||
const [lessonName, setLessonName] = useState("");
|
||||
const [learningGoal, setLearningGoal] = useState("");
|
||||
const [courseVideoCount, setCourseVideoCount] = useState(0);
|
||||
const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
|
||||
const [vrContentCount, setVrContentCount] = useState(0);
|
||||
const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
|
||||
const [questionFileCount, setQuestionFileCount] = useState(0);
|
||||
|
||||
const totalCount = useMemo(() => items.length, [items]);
|
||||
const totalCount = useMemo(() => lessons.length, [lessons]);
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
|
||||
const paginatedItems = useMemo(() => {
|
||||
const sortedLessons = useMemo(() => {
|
||||
return [...lessons].sort((a, b) => {
|
||||
// 생성일 내림차순 정렬 (최신 날짜가 먼저)
|
||||
return b.createdAt.localeCompare(a.createdAt);
|
||||
});
|
||||
}, [lessons]);
|
||||
|
||||
const totalPages = Math.ceil(sortedLessons.length / ITEMS_PER_PAGE);
|
||||
const paginatedLessons = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return items.slice(startIndex, endIndex);
|
||||
}, [items, currentPage]);
|
||||
return sortedLessons.slice(startIndex, endIndex);
|
||||
}, [sortedLessons, currentPage]);
|
||||
|
||||
// 교육과정 옵션 - mockData에서 가져오기
|
||||
const courseOptions = useMemo(() =>
|
||||
@@ -67,13 +87,67 @@ export default function AdminLessonsPage() {
|
||||
setLessonName("");
|
||||
setLearningGoal("");
|
||||
setCourseVideoCount(0);
|
||||
setCourseVideoFiles([]);
|
||||
setVrContentCount(0);
|
||||
setVrContentFiles([]);
|
||||
setQuestionFileCount(0);
|
||||
};
|
||||
|
||||
const handleRegisterClick = () => {
|
||||
setIsRegistrationMode(true);
|
||||
};
|
||||
|
||||
const handleSaveClick = () => {
|
||||
// 유효성 검사
|
||||
if (!selectedCourse || !lessonName) {
|
||||
// TODO: 에러 메시지 표시
|
||||
return;
|
||||
}
|
||||
|
||||
// 첨부파일 정보 문자열 생성
|
||||
const attachmentParts: string[] = [];
|
||||
if (courseVideoCount > 0) {
|
||||
attachmentParts.push(`강좌영상 ${courseVideoCount}개`);
|
||||
}
|
||||
if (vrContentCount > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${vrContentCount}개`);
|
||||
}
|
||||
if (questionFileCount > 0) {
|
||||
attachmentParts.push(`평가문제 ${questionFileCount}개`);
|
||||
}
|
||||
const attachments = attachmentParts.length > 0
|
||||
? attachmentParts.join(', ')
|
||||
: '없음';
|
||||
|
||||
// 교육과정명 가져오기
|
||||
const courseName = courseOptions.find(c => c.id === selectedCourse)?.name || '';
|
||||
|
||||
// 새 강좌 생성
|
||||
const newLesson: Lesson = {
|
||||
id: String(Date.now()),
|
||||
courseName,
|
||||
lessonName,
|
||||
attachments,
|
||||
questionCount: questionFileCount,
|
||||
createdBy: MOCK_CURRENT_USER,
|
||||
createdAt: new Date().toISOString().split('T')[0],
|
||||
};
|
||||
|
||||
// 강좌 목록에 추가
|
||||
setLessons(prev => [...prev, newLesson]);
|
||||
|
||||
// 등록 모드 종료 및 폼 초기화
|
||||
setIsRegistrationMode(false);
|
||||
setSelectedCourse("");
|
||||
setLessonName("");
|
||||
setLearningGoal("");
|
||||
setCourseVideoCount(0);
|
||||
setCourseVideoFiles([]);
|
||||
setVrContentCount(0);
|
||||
setVrContentFiles([]);
|
||||
setQuestionFileCount(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
{/* 메인 레이아웃 */}
|
||||
@@ -124,7 +198,7 @@ export default function AdminLessonsPage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent cursor-pointer"
|
||||
className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer"
|
||||
>
|
||||
<span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
|
||||
selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
|
||||
@@ -173,7 +247,7 @@ export default function AdminLessonsPage() {
|
||||
value={lessonName}
|
||||
onChange={(e) => setLessonName(e.target.value)}
|
||||
placeholder="강좌명을 입력해 주세요."
|
||||
className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||
className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -191,7 +265,7 @@ export default function AdminLessonsPage() {
|
||||
}
|
||||
}}
|
||||
placeholder="내용을 입력해 주세요. (최대 1,000자)"
|
||||
className="w-full h-[160px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent resize-none"
|
||||
className="w-full h-[160px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] resize-none"
|
||||
/>
|
||||
<div className="absolute bottom-[8px] right-[12px]">
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
|
||||
@@ -220,18 +294,69 @@ export default function AdminLessonsPage() {
|
||||
30MB 미만 파일
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
첨부
|
||||
</button>
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept=".mp4,video/mp4"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
|
||||
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
|
||||
const mp4Files: string[] = [];
|
||||
Array.from(files).forEach((file) => {
|
||||
// mp4 파일이고 30MB 이하인 파일만 필터링
|
||||
if (file.name.toLowerCase().endsWith('.mp4') && file.size <= MAX_SIZE) {
|
||||
mp4Files.push(file.name);
|
||||
}
|
||||
});
|
||||
|
||||
if (courseVideoCount + mp4Files.length <= 10) {
|
||||
setCourseVideoFiles(prev => [...prev, ...mp4Files]);
|
||||
setCourseVideoCount(prev => prev + mp4Files.length);
|
||||
}
|
||||
// input 초기화 (같은 파일 다시 선택 가능하도록)
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{courseVideoFiles.length === 0 ? (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
강좌 주제별 영상 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{courseVideoFiles.map((fileName, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setCourseVideoCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VR 콘텐츠 */}
|
||||
@@ -239,24 +364,75 @@ export default function AdminLessonsPage() {
|
||||
<div className="flex items-center justify-between h-[32px]">
|
||||
<div className="flex items-center gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
VR 콘텐츠 <span className="font-normal">({vrContentCount}/10)</span>
|
||||
VR 콘텐츠 ({vrContentCount}/10)
|
||||
</label>
|
||||
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
|
||||
30MB 미만 파일
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
첨부
|
||||
</button>
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept=".zip,application/zip"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
|
||||
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
|
||||
const zipFiles: string[] = [];
|
||||
Array.from(files).forEach((file) => {
|
||||
// zip 파일이고 30MB 이하인 파일만 필터링
|
||||
if (file.name.toLowerCase().endsWith('.zip') && file.size <= MAX_SIZE) {
|
||||
zipFiles.push(file.name);
|
||||
}
|
||||
});
|
||||
|
||||
if (vrContentCount + zipFiles.length <= 10) {
|
||||
setVrContentFiles(prev => [...prev, ...zipFiles]);
|
||||
setVrContentCount(prev => prev + zipFiles.length);
|
||||
}
|
||||
// input 초기화 (같은 파일 다시 선택 가능하도록)
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{vrContentFiles.length === 0 ? (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{vrContentFiles.map((fileName, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setVrContentFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setVrContentCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 학습 평가 문제 */}
|
||||
@@ -277,12 +453,24 @@ export default function AdminLessonsPage() {
|
||||
>
|
||||
다운로드
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
첨부
|
||||
</button>
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const files = e.target.files;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
const file = files[0];
|
||||
// CSV 파일만 허용
|
||||
if (file.name.toLowerCase().endsWith('.csv')) {
|
||||
setQuestionFileCount(1);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
|
||||
@@ -295,7 +483,7 @@ export default function AdminLessonsPage() {
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex items-center justify-center gap-[12px]">
|
||||
<div className="flex items-center justify-end gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBackClick}
|
||||
@@ -305,6 +493,7 @@ export default function AdminLessonsPage() {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveClick}
|
||||
className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer"
|
||||
>
|
||||
저장하기
|
||||
@@ -339,20 +528,72 @@ export default function AdminLessonsPage() {
|
||||
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex-1 pt-2 flex flex-col">
|
||||
{items.length === 0 ? (
|
||||
{lessons.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||
<span className="block text-center">
|
||||
등록된 강좌가 없습니다.
|
||||
<br />
|
||||
강좌를 등록해주세요.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* TODO: 테이블 또는 리스트를 여기에 추가 */}
|
||||
<div className="rounded-[8px]">
|
||||
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
|
||||
<table className="min-w-full border-collapse">
|
||||
<colgroup>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col style={{ width: 140 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr className="h-12 bg-gray-50 text-left">
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육과정명</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">첨부파일</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">학습 평가 문제 수</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록자</th>
|
||||
<th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedLessons.map((lesson) => (
|
||||
<tr
|
||||
key={lesson.id}
|
||||
className="h-12 hover:bg-[#F5F7FF] transition-colors"
|
||||
>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{lesson.courseName}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{lesson.lessonName}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
|
||||
{lesson.attachments}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{lesson.questionCount}개
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{lesson.createdBy}
|
||||
</td>
|
||||
<td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{lesson.createdAt}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
|
||||
{items.length > ITEMS_PER_PAGE && (() => {
|
||||
{lessons.length > ITEMS_PER_PAGE && (() => {
|
||||
// 페이지 번호를 10단위로 표시
|
||||
const pageGroup = Math.floor((currentPage - 1) / 10);
|
||||
const startPage = pageGroup * 10 + 1;
|
||||
|
||||
37
src/app/admin/notices/mockData.ts
Normal file
37
src/app/admin/notices/mockData.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export type Notice = {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string; // 게시일
|
||||
views: number; // 조회수
|
||||
writer: string; // 작성자
|
||||
content?: string[]; // 본문 내용 (상세 페이지용)
|
||||
hasAttachment?: boolean; // 첨부파일 여부
|
||||
};
|
||||
|
||||
// TODO: 나중에 DB에서 가져오도록 변경
|
||||
export const MOCK_NOTICES: Notice[] = [
|
||||
{
|
||||
id: 2,
|
||||
title: '공지사항 제목이 노출돼요',
|
||||
date: '2025-09-10',
|
||||
views: 1230,
|
||||
writer: '문지호',
|
||||
content: [
|
||||
'사이트 이용 관련 주요 변경 사항을 안내드립니다.',
|
||||
'변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
|
||||
date: '2025-06-28',
|
||||
views: 594,
|
||||
writer: '문지호',
|
||||
hasAttachment: true,
|
||||
content: [
|
||||
'온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
|
||||
'수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,21 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useState, useMemo, useRef, ChangeEvent } from "react";
|
||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
||||
import BackArrowSvg from "@/app/svgs/backarrow";
|
||||
import { MOCK_NOTICES, type Notice } from "@/app/admin/notices/mockData";
|
||||
|
||||
export default function AdminNoticesPage() {
|
||||
// TODO: 나중에 실제 데이터로 교체
|
||||
const items: any[] = [];
|
||||
const [notices, setNotices] = useState<Notice[]>(MOCK_NOTICES);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isWritingMode, setIsWritingMode] = useState(false);
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [attachedFile, setAttachedFile] = useState<File | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const totalCount = useMemo(() => notices.length, [notices]);
|
||||
|
||||
const characterCount = useMemo(() => content.length, [content]);
|
||||
|
||||
const handleBack = () => {
|
||||
setIsWritingMode(false);
|
||||
setTitle('');
|
||||
setContent('');
|
||||
setAttachedFile(null);
|
||||
};
|
||||
|
||||
const handleFileAttach = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
if (file.size > 30 * 1024 * 1024) {
|
||||
alert('30MB 미만의 파일만 첨부할 수 있습니다.');
|
||||
return;
|
||||
}
|
||||
setAttachedFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!title.trim()) {
|
||||
alert('제목을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if (!content.trim()) {
|
||||
alert('내용을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 새 공지사항 추가
|
||||
const newNotice: Notice = {
|
||||
id: notices.length > 0 ? Math.max(...notices.map(n => n.id)) + 1 : 1,
|
||||
title: title.trim(),
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
views: 0,
|
||||
writer: '관리자', // TODO: 실제 작성자 정보 사용
|
||||
content: content.split('\n'),
|
||||
hasAttachment: attachedFile !== null,
|
||||
};
|
||||
|
||||
setNotices([newNotice, ...notices]);
|
||||
handleBack();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (title.trim() || content.trim() || attachedFile) {
|
||||
if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
|
||||
handleBack();
|
||||
}
|
||||
} else {
|
||||
handleBack();
|
||||
}
|
||||
};
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
|
||||
const paginatedItems = useMemo(() => {
|
||||
const sortedNotices = useMemo(() => {
|
||||
return [...notices].sort((a, b) => {
|
||||
// 생성일 내림차순 정렬 (최신 날짜가 먼저)
|
||||
return b.date.localeCompare(a.date);
|
||||
});
|
||||
}, [notices]);
|
||||
|
||||
const totalPages = Math.ceil(sortedNotices.length / ITEMS_PER_PAGE);
|
||||
const paginatedNotices = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return items.slice(startIndex, endIndex);
|
||||
}, [items, currentPage]);
|
||||
return sortedNotices.slice(startIndex, endIndex);
|
||||
}, [sortedNotices, currentPage]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
@@ -30,6 +104,133 @@ export default function AdminNoticesPage() {
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
{isWritingMode ? (
|
||||
<>
|
||||
{/* 작성 모드 헤더 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<div className="flex gap-3 items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
className="flex items-center justify-center w-8 h-8 cursor-pointer"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
공지사항 작성
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 작성 폼 */}
|
||||
<div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
|
||||
<div className="flex flex-col gap-6 w-full">
|
||||
{/* 제목 입력 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||
제목
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="제목을 입력해 주세요."
|
||||
className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 내용 입력 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||
내용
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => {
|
||||
const newContent = e.target.value;
|
||||
if (newContent.length <= 1000) {
|
||||
setContent(newContent);
|
||||
}
|
||||
}}
|
||||
placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
|
||||
className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||
/>
|
||||
<div className="absolute bottom-3 right-3">
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
|
||||
{characterCount}/1000
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 첨부 파일 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<div className="flex items-center justify-between h-8 w-full">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
|
||||
첨부 파일{' '}
|
||||
<span className="font-normal">
|
||||
({attachedFile ? 1 : 0}/1)
|
||||
</span>
|
||||
</label>
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
|
||||
30MB 미만 파일
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFileAttach}
|
||||
className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0"
|
||||
>
|
||||
<span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
|
||||
첨부
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept="*/*"
|
||||
/>
|
||||
</div>
|
||||
<div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-center">
|
||||
{attachedFile ? (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#1b2027]">
|
||||
{attachedFile.name}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
파일을 첨부해주세요.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-3 items-center justify-end shrink-0 w-full">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
|
||||
>
|
||||
저장하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 제목 영역 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
@@ -37,20 +238,85 @@ export default function AdminNoticesPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 헤더 영역 (제목과 콘텐츠 사이) */}
|
||||
<div className="pt-2 pb-4 flex items-center justify-between">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
|
||||
총 {totalCount}건
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsWritingMode(true)}
|
||||
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
|
||||
>
|
||||
작성하기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex-1 pt-8 flex flex-col">
|
||||
{items.length === 0 ? (
|
||||
<div className="flex-1 pt-2 flex flex-col">
|
||||
{notices.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||
현재 관리할 수 있는 항목이 없습니다.
|
||||
등록된 공지사항이 없습니다.
|
||||
<br />
|
||||
공지사항을 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* TODO: 테이블 또는 리스트를 여기에 추가 */}
|
||||
<div className="rounded-[8px]">
|
||||
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
|
||||
<table className="min-w-full border-collapse">
|
||||
<colgroup>
|
||||
<col style={{ width: 80 }} />
|
||||
<col />
|
||||
<col style={{ width: 140 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr className="h-12 bg-gray-50 text-left">
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">제목</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">게시일</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">조회수</th>
|
||||
<th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">작성자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedNotices.map((notice, index) => {
|
||||
// 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
|
||||
const noticeNumber = sortedNotices.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
|
||||
return (
|
||||
<tr
|
||||
key={notice.id}
|
||||
className="h-12 hover:bg-[#F5F7FF] transition-colors"
|
||||
>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap text-center">
|
||||
{noticeNumber}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
|
||||
{notice.title}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{notice.date}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{notice.views.toLocaleString()}
|
||||
</td>
|
||||
<td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{notice.writer}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
|
||||
{items.length > ITEMS_PER_PAGE && (() => {
|
||||
{notices.length > ITEMS_PER_PAGE && (() => {
|
||||
// 페이지 번호를 10단위로 표시
|
||||
const pageGroup = Math.floor((currentPage - 1) / 10);
|
||||
const startPage = pageGroup * 10 + 1;
|
||||
@@ -135,6 +401,8 @@ export default function AdminNoticesPage() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,40 +1,7 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import BackCircleSvg from '../../svgs/backcirclesvg';
|
||||
|
||||
type NoticeItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string;
|
||||
views: number;
|
||||
writer: string;
|
||||
content: string[];
|
||||
};
|
||||
|
||||
const DATA: NoticeItem[] = [
|
||||
{
|
||||
id: 2,
|
||||
title: '공지사항 제목이 노출돼요',
|
||||
date: '2025-09-10',
|
||||
views: 1230,
|
||||
writer: '문지호',
|
||||
content: [
|
||||
'사이트 이용 관련 주요 변경 사항을 안내드립니다.',
|
||||
'변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
|
||||
date: '2025-06-28',
|
||||
views: 594,
|
||||
writer: '문지호',
|
||||
content: [
|
||||
'온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
|
||||
'수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
|
||||
],
|
||||
},
|
||||
];
|
||||
import { MOCK_NOTICES } from '../../admin/notices/mockData';
|
||||
|
||||
export default async function NoticeDetailPage({
|
||||
params,
|
||||
@@ -43,8 +10,8 @@ export default async function NoticeDetailPage({
|
||||
}) {
|
||||
const { id } = await params;
|
||||
const numericId = Number(id);
|
||||
const item = DATA.find((r) => r.id === numericId);
|
||||
if (!item) return notFound();
|
||||
const item = MOCK_NOTICES.find((r) => r.id === numericId);
|
||||
if (!item || !item.content) return notFound();
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
|
||||
@@ -2,37 +2,14 @@
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import PaperClipSvg from '../svgs/paperclipsvg';
|
||||
|
||||
type NoticeRow = {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string;
|
||||
views: number;
|
||||
writer: string;
|
||||
hasAttachment?: boolean;
|
||||
};
|
||||
|
||||
const rows: NoticeRow[] = [
|
||||
{
|
||||
id: 2,
|
||||
title: '공지사항 제목이 노출돼요',
|
||||
date: '2025-09-10',
|
||||
views: 1230,
|
||||
writer: '문지호',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
|
||||
date: '2025-06-28',
|
||||
views: 594,
|
||||
writer: '문지호',
|
||||
hasAttachment: true,
|
||||
},
|
||||
];
|
||||
import { MOCK_NOTICES } from '../admin/notices/mockData';
|
||||
|
||||
export default function NoticesPage() {
|
||||
const router = useRouter();
|
||||
|
||||
// 날짜 내림차순 정렬 (최신 날짜가 먼저)
|
||||
const rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
<div className="flex justify-center">
|
||||
@@ -74,7 +51,10 @@ export default function NoticesPage() {
|
||||
|
||||
{/* 바디 */}
|
||||
<div>
|
||||
{rows.map((r) => (
|
||||
{rows.map((r, index) => {
|
||||
// 번호는 정렬된 목록에서의 순서
|
||||
const noticeNumber = rows.length - index;
|
||||
return (
|
||||
<div
|
||||
key={r.id}
|
||||
role="button"
|
||||
@@ -91,7 +71,7 @@ export default function NoticesPage() {
|
||||
].join(' ')}
|
||||
>
|
||||
<div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
|
||||
{r.id}
|
||||
{noticeNumber}
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
|
||||
@@ -110,7 +90,8 @@ export default function NoticesPage() {
|
||||
</div>
|
||||
<div className="flex items-center px-4">{r.writer}</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
41
src/app/svgs/closexo.tsx
Normal file
41
src/app/svgs/closexo.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
|
||||
type CloseXOSvgProps = React.SVGProps<SVGSVGElement>;
|
||||
|
||||
export default function CloseXOSvg(props: CloseXOSvgProps) {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 14V14C4.686 14 2 11.314 2 8V8C2 4.686 4.686 2 8 2V2C11.314 2 14 4.686 14 8V8C14 11.314 11.314 14 8 14Z"
|
||||
fill="#6C7682"
|
||||
stroke="#6C7682"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.88661 6.11328L6.11328 9.88661"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.88661 9.88661L6.11328 6.11328"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user