Merge branch 'prod' into feat/bottom

Author: ottlseo

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
     "airbnb/hooks",
-    "airbnb-typescript", 
+    "airbnb-typescript",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
@@ -15,8 +15,8 @@
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/jsx-props-no-spreading": "off",
-    "react/function-component-definition": "off",
     "react/prop-types": "off",
+    "react/function-component-definition": "off",
     "import/no-extraneous-dependencies": "off",
     "import/extensions": "off",
     "linebreak-style": "off",

@types/sponsor.ts

@@ -6,9 +6,9 @@ export interface Sponsor {
   managerTel: string;
   managerEmail: string;
   businessRegistrationNumber: string;
-  logoImage: File | null;
-  bankBookFile: File | null;
-  businessRegistrationFile: File | null;
+  logoImage: FileList | null;
+  bankBookFile: FileList | null;
+  businessRegistrationFile: FileList | null;
 }
 
 export type SponsorInputInfo = Pick<

components/Portal.ts

@@ -0,0 +1,48 @@
+import { css } from '@/stitches.config';
+import { useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+const portalStyle = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  height: '100%',
+  width: '100%',
+  backgroundColor: '$backgroundPrimary70',
+});
+
+function ReactPortal({
+  children,
+  id = 'portal-wrapper',
+}: React.PropsWithChildren<{ id?: string }>) {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  useLayoutEffect(() => {
+    let element = document.getElementById(id);
+    let systemCreated = false;
+    if (!element) {
+      systemCreated = true;
+      element = document.createElement('div');
+      element.setAttribute('id', id);
+      element.className = portalStyle();
+      document.body.appendChild(element);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      if (systemCreated && element?.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [id]);
+
+  if (wrapperElement === null) {
+    return null;
+  }
+
+  return createPortal(children, wrapperElement);
+}
+
+export default ReactPortal;

components/common/Button.tsx

@@ -39,6 +39,16 @@ export const StyledButton = styled('button', {
         width: '100%',
       },
     },
+    reversal: {
+      true: {
+        color: '$backgroundPrimary',
+        backgroundColor: '$textPrimary',
+      },
+      false: {
+        color: '$textPrimary',
+        backgroundColor: '$backgroundPrimary',
+      },
+    },
   },
 });
 
@@ -62,17 +72,24 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: 'small' | 'big' | 'flat';
   icon?: React.ReactNode;
   disabled?: boolean;
+  reversal?: boolean;
 }
 
 const Button = ({
   children,
   size = 'small',
   icon,
   disabled = false,
+  reversal = false,
   ...props
 }: ButtonProps) => {
   return (
-    <StyledButton disabled={disabled} size={size} {...props}>
+    <StyledButton
+      disabled={disabled}
+      size={size}
+      reversal={reversal}
+      {...props}
+    >
       {icon ? <IconBox>{icon}</IconBox> : null}
       {children}
     </StyledButton>

components/common/FileUpload/FileItem.tsx

@@ -1,4 +1,8 @@
-import { CloseIcon, FileUploadIcon } from '@/public/icons';
+import {
+  CloseIcon,
+  ImageFileSubmitIcon,
+  PdfFileSubmitIcon,
+} from '@/public/icons';
 import { styled } from '@/stitches.config';
 
 const FileItemWrapper = styled('li', {
@@ -30,7 +34,13 @@ const CloseButton = styled('button', {
   cursor: 'pointer',
 });
 
-const StyledFileUploadIcon = styled(FileUploadIcon, {
+const StyledPdfFileSubmitIcon = styled(PdfFileSubmitIcon, {
+  '& path': {
+    fill: '$textPrimary',
+  },
+});
+
+const StyledImageFileSubmitIcon = styled(ImageFileSubmitIcon, {
   '& path': {
     fill: '$textPrimary',
   },
@@ -46,14 +56,20 @@ const StyledCloseIcon = styled(CloseIcon, {
 
 interface FileItemProps {
   file: File;
+  fileType: 'pdf' | 'image';
   onRemove: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-export const FileItem = ({ file, onRemove }: FileItemProps) => {
+const fileTypeIcon = {
+  pdf: <StyledPdfFileSubmitIcon />,
+  image: <StyledImageFileSubmitIcon />,
+};
+
+export const FileItem = ({ file, fileType, onRemove }: FileItemProps) => {
   return (
     <FileItemWrapper>
       <FileItemLeftGroup>
-        <StyledFileUploadIcon />
+        {fileTypeIcon[fileType]}
         <FileItemName>{file.name}</FileItemName>
       </FileItemLeftGroup>
       <CloseButton onClick={onRemove}>

components/common/FileUpload/FileUpload.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import { FileUploadIcon } from '@/public/icons';
+import { ImageFileIcon, PdfFileIcon } from '@/public/icons';
 import { FileItem } from '@/components/common/FileUpload/FileItem';
 import { styled } from '@/stitches.config';
 
 const StyledFileUpload = styled('div', {
   width: '100%',
-  height: '180px',
+  height: '100px',
   backgroundColor: '$backgroundPrimary',
   border: '2px solid $textPrimary',
 });
@@ -37,7 +37,16 @@ const FileItemLabel = styled('label', {
   padding: 24,
 });
 
-const StyledFileUploadIcon = styled(FileUploadIcon, {
+const StyledPdfFileIcon = styled(PdfFileIcon, {
+  width: '24px',
+  height: '24px',
+
+  '& path': {
+    fill: '$textPrimary',
+  },
+});
+
+const StyledImageFileIcon = styled(ImageFileIcon, {
   width: '24px',
   height: '24px',
 
@@ -48,14 +57,21 @@ const StyledFileUploadIcon = styled(FileUploadIcon, {
 
 interface FileUploadProps {
   labelText: string;
+  fileType: 'pdf' | 'image';
   onFileUpload: (file: FileList) => void;
 }
 
 type FileUploadType = React.InputHTMLAttributes<HTMLInputElement> &
   FileUploadProps;
 
+const fileTypeList = {
+  pdf: { icon: <StyledPdfFileIcon />, accept: '.pdf' },
+  image: { icon: <StyledImageFileIcon />, accept: 'image/png, image/jpg' },
+};
+
 export const FileUpload = ({
   labelText,
+  fileType,
   onFileUpload,
   ...props
 }: FileUploadType) => {
@@ -122,6 +138,9 @@ export const FileUpload = ({
         id={fileInputId}
         type="file"
         onChange={handleFileUpload}
+        multiple
+        accept={fileTypeList[fileType].accept}
+        required
         {...props}
       />
       {uploadedFiles?.length ? (
@@ -130,6 +149,7 @@ export const FileUpload = ({
             <FileItem
               key={file.name}
               file={file}
+              fileType={fileType}
               onRemove={(e) => handleFileRemove(e, index)}
             />
           ))}
@@ -140,7 +160,7 @@ export const FileUpload = ({
           onDragOver={stopSyntheticEvent}
           onDrop={handleDrop}
         >
-          <StyledFileUploadIcon />
+          {fileTypeList[fileType].icon}
           {labelText}
         </FileUploadLabel>
       )}

components/heading.ts

@@ -1,9 +1,15 @@
 import { styled } from '@/stitches.config';
 
 export const H1 = styled('h1', {
-  fontSize: '58px',
-  lineHeight: '68px',
-  fontWeight: 'bold',
+  '@bp1': {
+    fontSize: '48px',
+    lineHeight: '58px',
+  },
+  '@bp2': {
+    fontSize: '58px',
+    lineHeight: '68px',
+    fontWeight: 'bold',
+  },
 });
 
 export const H2 = styled('h2', {
@@ -21,5 +27,5 @@ export const H3 = styled('h3', {
 export const H4 = styled('h4', {
   fontSize: '24px',
   lineHeight: '36px',
-  fontWeight: 'bold',
+  fontWeight: '500',
 });

components/layout/Container.tsx

@@ -3,15 +3,17 @@ import NavBar from './NavBar';
 
 const ContainerBody = styled('div', {
   width: '100%',
+  height: '100%',
 });
 
 const Main = styled('main', {
   width: '100%',
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
+  justifyContent: 'flex-start',
   alignItems: 'center',
+  backgroundColor: '$backgroundPrimary',
 
   '@bp1': {},
   '@bp2': {},
@@ -21,6 +23,7 @@ const Main = styled('main', {
 
 const Wrapper = styled('div', {
   width: '100%',
+  height: '100%',
   marginTop: '80px',
 });
 

components/layout/NavBar.tsx

@@ -22,7 +22,7 @@ const StyledNavArea = styled('div', {
     gap: 0,
   },
   '@bp2': {
-    padding: '24px 80px',
+    padding: '1rem 2rem',
   },
 });
 
@@ -128,7 +128,7 @@ const NavBar = () => {
   return (
     <StyledNavArea>
       <Link href={Routes.HOME.route} passHref>
-        <Logo width={230} />
+        <Logo width={230} height={'100%'} />
         <Title>{Routes.HOME.title}</Title>
       </Link>
       <StyledMenuBox>

components/layout/SeoHeader.tsx

@@ -0,0 +1,29 @@
+import Head from 'next/head';
+import { PropsWithChildren } from 'react';
+
+type HeaderProps = {
+  title?: string;
+  description?: string;
+};
+
+const SeoHeader = ({
+  title,
+  description,
+  children,
+}: PropsWithChildren<HeaderProps>) => {
+  return (
+    <Head>
+      <title>{title || '파이콘 한국 2023'}</title>
+      <meta
+        name="description"
+        content={description || '파이콘 한국 2023 홈페이지'}
+      />
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      {/* TODO:추후 dg 태그 추가하기 */}
+      <link rel="icon" href="/favicon.ico" />
+      {children}
+    </Head>
+  );
+};
+
+export default SeoHeader;