-
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
Tutorial/#107
- Loading branch information
Showing
16 changed files
with
195 additions
and
1 deletion.
There are no files selected for viewing
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,66 @@ | ||
import featureImage1 from '@/public/assets/tutorial/tutorial-feature1.png'; | ||
import featureImage2 from '@/public/assets/tutorial/tutorial-feature2.png'; | ||
import featureImage3 from '@/public/assets/tutorial/tutorial-feature3.png'; | ||
import uploadImage0 from '@/public/assets/tutorial/tutorial0.png'; | ||
import uploadImage1 from '@/public/assets/tutorial/tutorial1.png'; | ||
import uploadImage2 from '@/public/assets/tutorial/tutorial2.png'; | ||
import uploadImage3 from '@/public/assets/tutorial/tutorial3.png'; | ||
import uploadImage4 from '@/public/assets/tutorial/tutorial4.png'; | ||
import { StaticImageData } from 'next/image'; | ||
import Link from 'next/link'; | ||
|
||
interface TutorialItem { | ||
imageUrl: StaticImageData; | ||
title: string; | ||
content: React.ReactNode; | ||
} | ||
|
||
export const TUTORIAL_FEATRUE: TutorialItem[] = [ | ||
{ | ||
imageUrl: featureImage1, | ||
title: 'first', | ||
content: '강의 커스텀을 통한 졸업 사정 예측', | ||
}, | ||
{ | ||
imageUrl: featureImage2, | ||
title: 'second', | ||
content: '카테고리별(교양 / 전공) 수강 학점 현황 조회', | ||
}, | ||
{ | ||
imageUrl: featureImage3, | ||
title: 'third', | ||
content: '카테고리별(교양 / 전공) 미이수 과목 정보 및 잔여 학점 조회', | ||
}, | ||
]; | ||
|
||
export const TUTORIAL_UPLOAD: TutorialItem[] = [ | ||
{ | ||
imageUrl: uploadImage0, | ||
title: '1.', | ||
content: ( | ||
<Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank"> | ||
<span className="text-primary">MyiWeb MSI</span>에 접속 후 로그인(PC환경 권장) | ||
</Link> | ||
), | ||
}, | ||
{ | ||
imageUrl: uploadImage1, | ||
title: '2.', | ||
content: '좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭', | ||
}, | ||
{ | ||
imageUrl: uploadImage2, | ||
title: '3.', | ||
content: '우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭 (모바일 환경에서는 뜨지 않을 수 있습니다.)', | ||
}, | ||
{ | ||
imageUrl: uploadImage3, | ||
title: '4.', | ||
content: '인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 (비율이 깨지지 않도록 조심해주세요.)', | ||
}, | ||
{ | ||
imageUrl: uploadImage4, | ||
title: '5.', | ||
content: '저장한 파일 업로드', | ||
}, | ||
]; |
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,44 @@ | ||
import ImageCard from '@/app/ui/view/molecule/image-card/image-card'; | ||
import TitleBox from '@/app/ui/view/molecule/title-box/title-box'; | ||
import { cn } from '@/app/utils/shadcn/utils'; | ||
import Image from 'next/image'; | ||
import { TUTORIAL_FEATRUE, TUTORIAL_UPLOAD } from './data'; | ||
import ContentContainer from '@/app/ui/view/atom/content-container/content-container'; | ||
|
||
function TutorialPage() { | ||
return ( | ||
<ContentContainer className={cn('flex flex-col gap-10 p-1 py-10', 'md:gap-20')} size="lg"> | ||
<h1 className={cn('text-center text-xl font-bold', 'md:text-3xl')}>튜토리얼</h1> | ||
<p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}> | ||
명지인을 위한 졸업 요건 충족도 확인 서비스 ‘졸업을부탁해’ 입니다. <br /> | ||
우리 서비스의 주요 정보와 사용법을 확인해보세요 | ||
</p> | ||
<TitleBox title="주요 기능"> | ||
<div className="flex gap-2 p-2"> | ||
{TUTORIAL_FEATRUE.map((feature, index) => ( | ||
<Image src={feature.imageUrl} alt={`feature-${index}`} key={index} className="max-w-[32%]" /> | ||
))} | ||
</div> | ||
</TitleBox> | ||
<p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}> | ||
정보 제공을 위해서는 여러분의 이수과목 정보가 필요합니다. | ||
<br /> PDF 업로드를 진행해주세요. | ||
</p> | ||
<TitleBox title="PDF 파일 업로드 방법"> | ||
<div className="flex overflow-scroll gap-8 w-full mt-4"> | ||
{TUTORIAL_UPLOAD.map((feature, index) => ( | ||
<ImageCard | ||
key={index} | ||
image={feature.imageUrl} | ||
title={feature.title} | ||
content={feature.content} | ||
className="min-w-44 h-44 md:min-w-72 md:h-72" | ||
/> | ||
))} | ||
</div> | ||
</TitleBox> | ||
</ContentContainer> | ||
); | ||
} | ||
|
||
export default TutorialPage; |
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 |
---|---|---|
|
@@ -29,6 +29,7 @@ a { | |
|
||
::-webkit-scrollbar { | ||
width: 10px; | ||
height: 10px; | ||
} | ||
|
||
::-webkit-scrollbar-track { | ||
|
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,20 @@ | ||
import featureIamge from '@/public/assets/tutorial/tutorial-feature1.png'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import ImageCard, { ImageCardProps } from './image-card'; | ||
|
||
const meta = { | ||
title: 'ui/view/molecule/ImageCard', | ||
component: ImageCard, | ||
} as Meta<typeof ImageCard>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
args: { | ||
image: featureIamge, | ||
title: 'first', | ||
content: '강의 커스텀을 통한 졸업 사정 예측', | ||
}, | ||
render: (args: ImageCardProps) => <ImageCard {...args} />, | ||
}; |
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,21 @@ | ||
import { cn } from '@/app/utils/shadcn/utils'; | ||
import Image, { StaticImageData } from 'next/image'; | ||
|
||
export interface ImageCardProps { | ||
image: StaticImageData; | ||
title: string; | ||
content: React.ReactNode; | ||
className?: string; | ||
} | ||
|
||
function ImageCard({ image, title, content, className }: ImageCardProps) { | ||
return ( | ||
<div className={cn('flex flex-col gap-2', 'md:gap-4')}> | ||
<Image src={image} alt={title} className={className} /> | ||
<h5 className={cn('font-lg font-medium', 'md:text-2xl')}>{title}</h5> | ||
<p className={cn('text-xs', 'md:text-base')}>{content}</p> | ||
</div> | ||
); | ||
} | ||
|
||
export default ImageCard; |
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,23 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import TitleBox from './title-box'; | ||
import AnnounceMessageBox from '../announce-message-box/announce-massage-box'; | ||
|
||
const meta = { | ||
title: 'ui/view/molecule/TitleBox', | ||
component: TitleBox, | ||
} as Meta<typeof TitleBox>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
interface TitleBoxProps extends React.PropsWithChildren { | ||
title: string; | ||
} | ||
|
||
export const Default: Story = { | ||
args: { | ||
children: <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" />, | ||
title: '졸업 요건 안내', | ||
}, | ||
render: (args: TitleBoxProps) => <TitleBox {...args} />, | ||
}; |
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 { cn } from '@/app/utils/shadcn/utils'; | ||
|
||
function TitleBox({ title, children }: React.PropsWithChildren<{ title: string }>) { | ||
return ( | ||
<div className="flex flex-col justify-center items-center gap-4"> | ||
<h1 className={cn('text-lg font-bold', 'md:text-2xl')}>{title}</h1> | ||
<div className="bg-primary h-1 w-10 text-center rounded-md"></div> | ||
{children} | ||
</div> | ||
); | ||
} | ||
|
||
export default TitleBox; |
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.
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.
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.
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.