Styling/#124

.github/workflows/ci-cd.yml

@@ -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 }}

app/(sub-page)/components/navigation-bar.tsx

@@ -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 (
@@ -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>
   );

app/(sub-page)/components/navigation-items.tsx

@@ -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>
+  );
+}

app/(sub-page)/grade-upload/components/manual.tsx

@@ -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

app/(sub-page)/my/page.tsx

@@ -14,7 +14,7 @@ import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture.s
 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 />}>
@@ -25,7 +25,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 />

app/(sub-page)/sign-in/page.tsx

@@ -1,10 +1,40 @@
 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';
 
 export default function Page() {
   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>
   );
 }

app/(sub-page)/sign-up/components/sign-up-container.tsx

@@ -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');
@@ -18,7 +18,7 @@ export default function SignUpContainer() {
           />
         </Funnel.Step>
         <Funnel.Step name="form">
-          <SignUpForm
+          <SignUp
             onNext={() => {
               setStep('success');
             }}

app/(sub-page)/sign-up/components/sign-up-success.tsx

@@ -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>
+    </>
   );
 }

app/(sub-page)/sign-up/components/sign-up-terms.tsx

@@ -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>

app/(sub-page)/sign-up/components/sign-up.tsx

@@ -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>
+  );
+}

app/(sub-page)/sign-up/page.tsx

@@ -1,19 +1,12 @@
 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';
 
-// Refactor: fallback 스켈레톤으로 대체
 export default function Page() {
   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>

app/business/api-path.ts

@@ -1,11 +1,12 @@
-const BASE_URL = 'http://localhost:9090';
-process.env.API_MOCKING === 'enable' ? 'http://localhost:9090' : '';
+import { setupURL } from '../utils/api/setup-url.util';
+
+const { BASE_URL, PARSE_API_URL } = setupURL();
 
 export const API_PATH = {
   default: BASE_URL,
   revenue: `${BASE_URL}/revenue`,
   registerUserGrade: `${BASE_URL}/parsing-text`,
-  parsePDFtoText: `${BASE_URL}/parsePDFtoText`,
+  parsePDFtoText: PARSE_API_URL,
   takenLectures: `${BASE_URL}/taken-lectures`,
   user: `${BASE_URL}/users`,
   graduations: `${BASE_URL}/graduations`,