Skip to content

Commit

Permalink
Merge pull request #132 from Myongji-Graduate/styling/#124
Browse files Browse the repository at this point in the history
Styling/#124
  • Loading branch information
seonghunYang authored Jul 17, 2024
2 parents 593aa70 + b04114f commit 39056f3
Show file tree
Hide file tree
Showing 38 changed files with 529 additions and 189 deletions.
22 changes: 22 additions & 0 deletions .github/workflows/ci-cd.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
name: Vercel Production Deployment

env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
jobs:
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
6 changes: 5 additions & 1 deletion app/(sub-page)/components/navigation-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import SideNavigationBar from './side-navigation-bar';
import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
import Link from 'next/link';
import NavigationItems from './navigation-items';

export default function NavigationBar() {
return (
Expand All @@ -13,7 +14,10 @@ export default function NavigationBar() {
<Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
</Link>
<Responsive maxWidth={1023}>
<SideNavigationBar header={<UserInfoNavigator />} content={<div>콘텐츠</div>} footer={<SignButtonGroup />} />
<SideNavigationBar header={<UserInfoNavigator />} content={<NavigationItems />} footer={<SignButtonGroup />} />
</Responsive>
<Responsive minWidth={1024}>
<NavigationItems />
</Responsive>
</div>
);
Expand Down
45 changes: 45 additions & 0 deletions app/(sub-page)/components/navigation-items.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { auth } from '@/app/business/services/user/user.query';
import Button from '@/app/ui/view/atom/button/button';
import Link from 'next/link';
import { ChevronRightIcon } from 'lucide-react';

export default async function NavigationItems() {
const userInfo = await auth();

return (
<div className="flex flex-col lg:flex-row divide-y lg:divide-y-0 ">
{userInfo ? (
<>
<NavigationItem href={'/my'} label="마이페이지" />
<NavigationItem href={'/result'} label="결과확인" />
</>
) : (
<NavigationItem href={'/sign-in'} label="로그인" />
)}
<NavigationItem href={'/tutorial'} label="튜토리얼" />
<NavigationItem
href={'https://soft-anorak-0ca.notion.site/e35e3b210995463fa748f35aab536f2c?pvs=74'}
label="팀소개"
/>
</div>
);
}

interface NavigationItemProps {
href: string;
label: string;
}

export function NavigationItem({ href, label }: NavigationItemProps) {
return (
<Link href={href} className="flex items-center justify-between">
<Button
size={'xs'}
className="text-black lg:text-white hover:text-slate-400 lg:text-base text-lg my-1"
variant={'text'}
label={label}
/>
<ChevronRightIcon className="h-4 w-4 lg:hidden text-black" />
</Link>
);
}
4 changes: 2 additions & 2 deletions app/(sub-page)/grade-upload/components/manual.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ 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">
<h1 className="text-center text-2xl 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 className="text-base px-6 md:px-0 flex flex-col gap-2 md:text-lg">
<div>
1.
<a
Expand Down
4 changes: 2 additions & 2 deletions app/(sub-page)/my/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const metadata: Metadata = {
export default function MyPage() {
return (
<>
<ContentContainer className="flex">
<ContentContainer className="flex pt-10 lg:pt-16">
<Responsive minWidth={1023}>
<div className="lg:w-[30%]">
<Suspense fallback={<UserInfoNavigatorSkeleton />}>
Expand All @@ -43,7 +43,7 @@ export default function MyPage() {
</Suspense>
</div>
</Responsive>
<div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
<div className="w-full lg:w-[70%] px-7 lg:px-[20px] pt-4 pb-2 flex flex-col gap-12">
<MyResultContainer />
<Suspense fallback={<TakenLectureSkeleton />}>
<TakenLecture />
Expand Down
34 changes: 32 additions & 2 deletions app/(sub-page)/sign-in/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import SignInForm from '@/app/ui/user/sign-in-form/sign-in-form';
import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
import Image from 'next/image';
import MaruImage from '@/public/assets/mju-maru.jpg';
import Separator from '@/app/ui/view/atom/separator';
import Button from '@/app/ui/view/atom/button/button';
import Responsive from '@/app/ui/responsive';
import Link from 'next/link';
import type { Metadata } from 'next';

export const metadata: Metadata = {
Expand All @@ -9,8 +16,31 @@ export const metadata: Metadata = {

export default function SignInPage() {
return (
<ContentContainer className="md:w-[768px]">
<SignInForm />
<ContentContainer className="md:w-[768px] h-[550px] xl:w-[960px] flex p-9">
<Responsive minWidth={767}>
<div className="w-2/4">
<Image className="object-cover h-full" src={MaruImage} alt="마루" />
</div>
</Responsive>
<div className="w-full md:w-2/4 md:pl-7 ">
<div className="pb-12">
<TitleBox title={'로그인'} />
</div>
<SignInForm />
<div className="flex mt-12 space-x-4 h-6 items-center justify-center">
<Link href={'/'}>
<Button className="text-xs" label="아이디 찾기" variant={'text'} />
</Link>
<Separator orientation={'vertical'} />
<Link href={'/'}>
<Button className="text-xs" label="비밀번호 재설정" variant={'text'} />
</Link>
<Separator orientation={'vertical'} />
<Link href={'/sign-up'}>
<Button className="text-xs" label="회원가입" variant={'text'} />
</Link>
</div>
</div>
</ContentContainer>
);
}
4 changes: 2 additions & 2 deletions app/(sub-page)/sign-up/components/sign-up-container.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';
import useFunnel from '@/app/hooks/useFunnel';
import SignUpForm from '@/app/ui/user/sign-up-form/sign-up-form';
import SignUpTerm from './sign-up-terms';
import SignUpSuccess from './sign-up-success';
import SignUp from './sign-up';

export default function SignUpContainer() {
const { Funnel, setStep } = useFunnel<'terms' | 'form' | 'success'>('terms');
Expand All @@ -18,7 +18,7 @@ export default function SignUpContainer() {
/>
</Funnel.Step>
<Funnel.Step name="form">
<SignUpForm
<SignUp
onNext={() => {
setStep('success');
}}
Expand Down
26 changes: 11 additions & 15 deletions app/(sub-page)/sign-up/components/sign-up-success.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import Button from '@/app/ui/view/atom/button/button';
import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
import Link from 'next/link';

// 내용이랑 스타일은 mock인 상태입니다.
export default function SignUpSuccess() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center px-4 sm:px-6">
<div className="max-w-md w-full space-y-8">
<div className="space-y-2">
<h2 className="text-3xl font-extrabold tracking-tight">Youre all set.</h2>
<p className="text-gray-500">
Thanks for signing up! We just need to verify your email address to complete the process.
</p>
</div>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<Link className="inline-block w-full" href="/sign-in">
<Button className="w-full" label={'로그인 하기'} />
</Link>
</div>
<>
<TitleBox title={'회원가입 완료'} />
<div className="h-[260px] text-2xl font-bold flex flex-col items-center justify-center space-y-2">
<div>회원가입이 완료되었습니다</div>
<div className="text-xl font-medium">로그인 후 졸업 사정 결과를 확인해보세요!</div>
<div className="pt-6">
<Link href="/sign-in">
<Button size={'md'} label={'로그인 하기'} />
</Link>
</div>
</div>
</div>
</>
);
}
87 changes: 52 additions & 35 deletions app/(sub-page)/sign-up/components/sign-up-terms.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,71 @@
import Button from '@/app/ui/view/atom/button/button';
import TitleBox from '@/app/ui/view/molecule/title-box/title-box';

interface SignUpTermProps {
onNext?: () => void;
}

// 약관 내용이랑 스타일은 mock인 상태입니다.
// 약관내용 최신화 필요(* 검사 대상)
export default function SignUpTerm({ onNext }: SignUpTermProps) {
const handleAgreeButtonClick = () => {
onNext?.();
};

return (
<div className="max-w-2xl mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
<h1 className="text-3xl font-bold text-center mb-6">알림독의 안내문</h1>
<ul className="list-disc space-y-4 text-sm">
<li>
현재 저희 기능은 한국-한국은 아니라 한국-외국도 가능합니다. 각사별에서 수하인 없더라도 저희가 받는데까지는
무관합니다만, 꼭 관세사무소와 협의하세요!
<ul className="list-disc ml-6 mt-2">
<li>대상: 국외발송, 북부발송, 사회복지대상, ICT용품대상, 일반대상, 미래용품대상(확인)</li>
<li>발송: 16 ~ 22시발</li>
<div className=" mx-auto my-8 md:p-6 bg-white ">
<TitleBox title="약관동의">
<div className="border p-6 pl-8 rounded-lg">
<ul className="list-disc space-y-4 text-sm ">
<li>
현재 검사 가능한 학과-학번은 아래과 같습니다. 검사대상에 속하지 않다면 검사가 불가능합니다. 꼭
검사대상인지 확인하세요!
<ul className="list-disc ml-6 mt-2">
<li>
대학: 경영대학, 법과대학, 사회과학대학, ICT융합대학, 인문대학,{' '}
<span className="text-red-400">미래융합대학(불가)</span>
</li>
<li>학번: 16 ~ 22학번</li>
</ul>
</li>
<li>
교직, 다전공, 연계전공, 편입, 전과, 재외국민/외국인전형에 해당하는 사용자는 검사 기준이 따로 설정되지 않아
검사가 불가능합니다.
</li>
<li>검사를 위해선 성적표를 직접 업로드해야하므로 PC환경에서 진행하는 것을 권장합니다.</li>
<li>
검사 기준은 최신버전 학사안내문(2023.07.24) 반영하여 설정되었으며, 학사안내문은 매년 개편되므로 자신이
알고 있는 구버전과 다를 수 있습니다.
<ul className="list-disc ml-6 mt-2">
<li>
<a
target={'_blank'}
className="text-blue-500 underline "
href="https://www.mju.ac.kr/mjukr/257/subview.do?enc=Zm5jdDF8QEB8JTJGYmJzJTJGbWp1a3IlMkYxNDMlMkYyMDI1ODAlMkZhcnRjbFZpZXcuZG8lM0ZwYWdlJTNEMSUyNnNyY2hDb2x1bW4lM0RzaiUyNnNyY2hXcmQlM0QlRUQlOTUlOTklRUMlODIlQUMlMjZiYnNDbFNlcSUzRCUyNmJic09wZW5XcmRTZXElM0QlMjZyZ3NCZ25kZVN0ciUzRCUyNnJnc0VuZGRlU3RyJTNEJTI2aXNWaWV3TWluZSUzRGZhbHNlJTI2aXNWaWV3JTNEdHJ1ZSUyNnBhc3N3b3JkJTNEJTI2"
>
명지대학교 학사안내문 참고 링크
</a>
</li>
</ul>
</li>
<li>
본 서비스 정보는 공식적인 효력을 갖지 않으며,{' '}
<b>정확한 졸업사정결과를 위해서는 소속 단과대 교학팀에서의 확인을 권장합니다.</b>
</li>
<li>
저장된 사용자 데이터베이스는 익명화되어 저장되고 과목추천 및 교양과목 통계에만 사용되며, 익명 다른 용도로
사용되지 않습니다.
</li>
<li>졸업요건 기준이 잘못 설정되었거나, 오류발생 시 우측 하단 채널톡으로 피드백 부탁드립니다.</li>
</ul>
</li>
<li>
교직, 디자인, 연계개발, 물품, 전자, 자원관리/회계지원에 해당하는 사용자는 각사 기준에 따른 선정되지 않아 각사
별 관리하는데요.
</li>
<li>검사를 위해서 선적품을 직접 연락드려야만 PC화면에서 진행하는 것을 권장합니다.</li>
<li>
검사 기준은 최신버전 확인내역(2023.07.24) 반영하여 선정되었으며, 학사내역은 매년 개편되므로 자사이 외고 있는
구버전과 다를 수 있습니다.
<ul className="list-disc ml-6 mt-2">
<li>문자대항: 학사내역은 확인 클릭</li>
</ul>
</li>
<li>
본 서비스 정보는 공식적인 확인을 전제 않으며, 정확한 증상조사결과를 위해 서류 또는 담당과 교류해야할 사항을
잊지 않습니다.
</li>
<li>
전자문 서화지 데이터베이스는 의무화되어 저희가 고유축적 및 교육과정 등에서 사용되며, 어떤 다른 용도로 사용
되지 않습니다.
</li>
<li>특허요건 기준이 전문 선정되었거나, 오류발생 시 우측 하단 채팅창으로 또는 담당 부서로문의합니다.</li>
</ul>
</div>
</TitleBox>

<div className="mt-8 flex justify-center">
<Button
onClick={handleAgreeButtonClick}
className="ml-4 bg-blue-500 text-white py-2 px-4 rounded-full"
label={'알림독의 안내문'}
// className="ml-4 bg-blue-500 text-white py-2 px-4 rounded-full"
size={'md'}
label={'동의합니다'}
/>
</div>
</div>
Expand Down
27 changes: 27 additions & 0 deletions app/(sub-page)/sign-up/components/sign-up.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Responsive from '@/app/ui/responsive';
import SignUpForm from '@/app/ui/user/sign-up-form/sign-up-form';
import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
import MaruImage from '@/public/assets/mju-maru.jpg';
import Image from 'next/image';

interface SignUpProps {
onNext?: () => void;
}

export default function SignUp({ onNext }: SignUpProps) {
return (
<div className="flex p-9">
<Responsive minWidth={767}>
<div className="w-2/4 flex items-center justify-center">
<Image className="object-cover h-[400px]" src={MaruImage} alt="마루" />
</div>
</Responsive>
<div className="w-full md:w-2/4 md:pl-7 ">
<div className="pb-12">
<TitleBox title={'회원가입'} />
</div>
<SignUpForm onSuccess={onNext} />
</div>
</div>
);
}
14 changes: 3 additions & 11 deletions app/(sub-page)/sign-up/page.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
import SignUpContainer from './components/sign-up-container';
import { Suspense } from 'react';
import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
import LoadingSpinner from '@/app/ui/view/atom/loading-spinner/loading-spinner';
import SignUpFormSkeleton from '@/app/ui/user/sign-up-form/sign-up-form.skeleton';
import type { Metadata } from 'next';

// Refactor: fallback 스켈레톤으로 대체

export const metadata: Metadata = {
title: '회원가입',
description: '졸업을 부탁해에 회원가입 하고 졸업요건을 간편하게 검사해 보세요.',
};

export default function SignUpPage() {
return (
<ContentContainer className="md:w-[768px]">
<Suspense
fallback={
<div className="h-96">
<LoadingSpinner />
</div>
}
>
<ContentContainer className="md:w-[768px] xl:w-[960px]">
<Suspense fallback={<SignUpFormSkeleton />}>
<SignUpContainer />
</Suspense>
</ContentContainer>
Expand Down
Loading

0 comments on commit 39056f3

Please sign in to comment.