-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
grade upload/#9
- Loading branch information
Showing
14 changed files
with
224 additions
and
11 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
export default function Manual() { | ||
return ( | ||
<div className="flex justify-center"> | ||
<div className="flex flex-col gap-6"> | ||
<h1 className="text-center text-3xl font-bold p-4 border-b-2 border-gray-100 md:text-4xl"> | ||
한 번의 성적표 입력으로 | ||
<br /> 맞춤형 결과를 확인하세요 ! | ||
</h1> | ||
<div className="text-base flex flex-col gap-2 md:text-lg"> | ||
<div> | ||
1. | ||
<a | ||
target="_blank" | ||
className="pl-1 text-primary hover:text-dark-hover" | ||
href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" | ||
> | ||
MyiWeb MSI | ||
</a> | ||
에 접속 후 로그인(PC환경 권장) | ||
</div> | ||
<div>2. 좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭</div> | ||
<div>3. 우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭</div> | ||
<div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 </div> | ||
<div>5. 저장한 파일 업로드 </div> | ||
<div className="text-xs md:text-sm text-primary"> | ||
• 회원 가입한 학번과 일치하는 학번의 성적표를 입력해야 합니다. | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import ContentContainer from '../../ui/view/atom/content-container'; | ||
import Manual from './components/manual'; | ||
import UploadTakenLecture from '../../ui/lecture/upload-taken-lecture/upload-taken-lecture'; | ||
|
||
export default function GradeUploadPage() { | ||
return ( | ||
<ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh]"> | ||
<Manual /> | ||
<UploadTakenLecture /> | ||
</ContentContainer> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import UploadPdf from '@/app/ui/view/molecule/upload-pdf/upload-pdf'; | ||
import { render, screen } from '@testing-library/react'; | ||
import { userEvent } from '@testing-library/user-event'; | ||
|
||
describe('성적 업로드', () => { | ||
it('파일이 업로드 될 때, pdf file을 업로드 하면 file명이 노출된다.', async () => { | ||
render(<UploadPdf />); | ||
|
||
const targetFile = new File(['grade'], 'grade.pdf', { | ||
type: 'text/plain', | ||
}); | ||
|
||
const uploadBox = await screen.findByTestId('upload-box'); | ||
await userEvent.upload(uploadBox, targetFile); | ||
|
||
expect(screen.getByText(targetFile.name)).toBeInTheDocument(); | ||
}); | ||
|
||
it('파일이 업로드 될 때, pdf가 아닌 file을 업로드 하면 변화가 발생하지않는다.', async () => { | ||
render(<UploadPdf />); | ||
|
||
const targetFile = new File(['grade'], 'grade.png', { | ||
type: 'text/plain', | ||
}); | ||
|
||
const uploadBox = await screen.findByTestId('upload-box'); | ||
await userEvent.upload(uploadBox, targetFile); | ||
expect(screen.queryByText('마우스로 드래그 하거나 아이콘을 눌러 추가해주세요.')).toBeInTheDocument(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
'use server'; | ||
import { FormState } from '@/app/ui/view/molecule/form/form-root'; | ||
import { API_PATH } from '../api-path'; | ||
|
||
export const registerUserGrade = async (prevState: FormState, formData: FormData) => { | ||
const parsingText = await parsePDFtoText(formData); | ||
|
||
const res = await fetch(API_PATH.registerUserGrade, { | ||
method: 'POST', | ||
body: JSON.stringify({ parsingText }), | ||
}); | ||
|
||
if (!res.ok) { | ||
return { | ||
errors: {}, | ||
message: 'fail upload grade', | ||
}; | ||
} | ||
|
||
return { | ||
errors: {}, | ||
message: '', | ||
}; | ||
}; | ||
|
||
export const parsePDFtoText = async (formData: FormData) => { | ||
const res = await fetch(API_PATH.parsePDFtoText, { method: 'POST', body: formData }); | ||
if (!res.ok) { | ||
return { | ||
errors: {}, | ||
message: 'fail parsing to text', | ||
}; | ||
} | ||
return await res.json(); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { useState } from 'react'; | ||
import { z } from 'zod'; | ||
|
||
export type FileType = File | null; | ||
|
||
export default function usePdfFile() { | ||
const [file, setFile] = useState<FileType>(null); | ||
|
||
const changeFile = (file: File) => { | ||
if (!validate.parse(file.name)) return; | ||
setFile(file); | ||
}; | ||
|
||
const validate = z.string().refine((value) => value.endsWith('.pdf'), { | ||
message: 'File must be a PDF', | ||
}); | ||
|
||
return { file, changeFile }; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
app/ui/lecture/upload-taken-lecture/upload-taken-lecture.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
'use client'; | ||
|
||
import { registerUserGrade } from '@/app/business/lecture/taken-lecture.command'; | ||
import UploadPdf from '@/app/ui/view/molecule/upload-pdf/upload-pdf'; | ||
import Form from '../../view/molecule/form'; | ||
|
||
function UploadTakenLecture() { | ||
return ( | ||
<Form action={registerUserGrade} id="성적업로드"> | ||
<UploadPdf /> | ||
<Form.SubmitButton label="결과 보러가기" position="center" size="md" /> | ||
</Form> | ||
); | ||
} | ||
|
||
export default UploadTakenLecture; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import UploadPdf from './upload-pdf'; | ||
|
||
const meta = { | ||
title: 'ui/view/molecule/UploadFile', | ||
component: UploadPdf, | ||
} satisfies Meta<typeof UploadPdf>; | ||
|
||
export default meta; | ||
|
||
export const Default: StoryObj<typeof meta> = { | ||
render: () => <UploadPdf />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
'use client'; | ||
import Image from 'next/image'; | ||
import uploadBox from '@/public/assets/upload-box.svg'; | ||
import checkedBox from '@/public/assets/checked-box.svg'; | ||
import usePdfFile from '@/app/hooks/usePdfFile'; | ||
import { ChangeEvent } from 'react'; | ||
|
||
function UploadPdf() { | ||
const { file, changeFile } = usePdfFile(); | ||
|
||
const handleChangeFileInput = (event: ChangeEvent<HTMLInputElement>) => { | ||
const { files } = event.target; | ||
if (files) changeFile(files[0]); | ||
}; | ||
|
||
return ( | ||
<div className="flex flex-col items-center gap-4"> | ||
<div | ||
role="button" | ||
className="relative p-2 m-auto w-96 flex flex-col justify-center items-center gap-2 border-dashed border-2 rounded-sm rounded-bl-xl border-light-blue-6 bg-light-blue-1 text-light-blue-6 max-lg:w-80" | ||
> | ||
<Image src={file ? checkedBox : uploadBox} width={40} height={28} className="mx-auto" alt="upload-button" /> | ||
<span className="text-center break-keep whitespace-pre-line max-w-48 truncate"> | ||
{file ? file.name : '마우스로 드래그 하거나 아이콘을 눌러 추가해주세요.'} | ||
</span> | ||
<input | ||
onChange={handleChangeFileInput} | ||
type="file" | ||
className="absolute bg-black opacity-0 w-96 max-lg:w-80 h-full" | ||
name="file" | ||
accept=".pdf" | ||
data-testid="upload-box" | ||
required | ||
/> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default UploadPdf; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.