Build fixing

eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config({
   extends: [js.configs.recommended, ...tseslint.configs.recommended],
@@ -17,10 +17,8 @@ export default tseslint.config({
     'react-refresh': reactRefresh,
   },
   rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
     ...reactHooks.configs.recommended.rules,
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
-})
+});

src/Router.tsx

@@ -1,5 +1,5 @@
 // Router.tsx
-import { GoormLoader, GoormLoaderProps } from '@goorm-dev/gds-components';
+import { GoormLoader } from '@goorm-dev/gds-components';
 import { Suspense, lazy } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Layout from './components/layout/Layout';
@@ -8,7 +8,6 @@ import Layout from './components/layout/Layout';
 const About = lazy(() => import('./pages/about/About'));
 const Project = lazy(() => import('./pages/project/Project'));
 const Recruit = lazy(() => import('./pages/recruit/Recruit'));
-const Apply = lazy(() => import('./pages/apply/Apply'));
 const NotFound = lazy(() => import('./pages/errors/NotFound'));
 const SearchUniv = lazy(() => import('./pages/searchUniv/SearchUniv'));
 const SignUp = lazy(() => import('./pages/signUp/SignUp'));
@@ -17,7 +16,7 @@ const MyPage = lazy(() => import('./pages/myPage/MyPage'));
 const UpdatePW = lazy(() => import('./pages/updatePW/UpdatePW'));
 
 // GoormLoader 컴포넌트에 전달할 props 설정
-const loaderProps: GoormLoaderProps = {
+const loaderProps = {
   color: 'black', // 예시 색상
   lottieProps: {
     loop: true,
@@ -62,14 +61,6 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
-      {
-        path: 'apply',
-        element: (
-          <Suspense fallback={<GoormLoader {...loaderProps} />}>
-            <Apply />
-          </Suspense>
-        ),
-      },
       {
         path: 'login',
         element: (

src/components/apply/ApplyHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './style';
 
 function ApplyHeader() {

src/components/about/activity/Activity.module.scss

@@ -9,19 +9,18 @@
   width: 100%;
   height: 100%;
   background-color: var(--gray-000);
+  padding-bottom: 15rem;
 }
 
 .titleText {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 10.19rem;
   gap: var(--space-050);
 }
 
 .activityList {
   margin-top: var(--space-500);
-  margin-bottom: 15rem;
   gap: 2rem;
   display: flex;
   flex-direction: column;

src/components/about/benefit/BenefitDesktop/BenefitDesktop.module.scss

@@ -6,6 +6,7 @@
   position: relative;
   background-color: var(--gray-000);
   padding-top: 15rem;
+  padding-bottom: 15rem;
 }
 
 .benefitTitleWrapper {

src/components/about/benefit/BenefitDesktop/HorizontalScroll.tsx

@@ -1,30 +1,20 @@
-import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
-import { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useRef } from 'react';
 import { BENEFIT_ITEM_DATA } from '../../../../utilities/AboutData';
 import BenefitItem from './BenefitItem';
 
 import styles from './BenefitDesktop.module.scss';
 
 export default function HorizontalScroll() {
   const scrollRef = useRef(null);
-  const ghostRef = useRef(null);
-  const [scrollRange, setScrollRange] = useState(0);
-  const [viewportW, setViewportW] = useState(0);
-
-  const scrollPercentage = useMotionValue(0);
-
-  const transform = useTransform(scrollPercentage, [0, 1], [0, -scrollRange + viewportW]);
-  const physics = { damping: 15, mass: 0.27, stiffness: 55 };
-  const spring = useSpring(transform, physics);
 
   return (
     <div>
-      <motion.section className={styles.motionContainer} ref={scrollRef} style={{ x: spring }}>
+      <motion.section className={styles.motionContainer} ref={scrollRef}>
         {BENEFIT_ITEM_DATA.map((item) => (
           <BenefitItem key={item.title} title={item.title} description={item.description} url={item.url} />
         ))}
       </motion.section>
-      <div ref={ghostRef} />
     </div>
   );
 }

src/components/about/goal/Goal.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
-import GoalImgWhole from '../../../assets/svgs/goal-graphic_whole.svg';
 import classNames from 'classnames/bind';
+import GoalImgWhole from '../../../assets/svgs/goal-graphic_whole.svg';
 
 import styles from './Goal.module.scss';
 

src/components/about/intro/Intro.module.scss

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   background-color: var(--gray-000);
-  padding-bottom: 16rem;
-  padding-top: 9.8rem;
+  padding-bottom: 15rem;
+  padding-top: 15rem;
   width: 100%;
   align-items: center;
 }

src/components/about/intro/Intro.tsx

@@ -1,15 +1,9 @@
-import React from 'react';
-
 import { Text } from '@goorm-dev/vapor-components';
 import styles from './Intro.module.scss';
 
-interface IntroProps {
-  scrollTarget: React.RefObject<HTMLDivElement>;
-}
-
 const TEXT = `카카오와 구름, 그리고 벚꽃과 단풍이 함께하는 \n 전국 대학 IT 연합 동아리입니다.`;
 
-export default function Intro({ scrollTarget }: IntroProps) {
+export default function Intro() {
   // console.log(scrollTarget);
   return (
     <div className={styles.intro}>

src/components/about/mainBanner/MainBanner.module.scss

@@ -10,10 +10,11 @@
   top: 0;
   left: 0;
   z-index: 1;
+
   // NOTE: GDS값 정의 되면 수정 필요
   background-color: rgba(0, 0, 0, 0.32);
   width: 100%;
-  height: 100vw;
+  height: 100%;
 }
 
 .headerText {
@@ -108,33 +109,32 @@
 .mainImg {
   cursor: pointer;
 
-  stroke-dashoffset: -65;
-
-  &:hover {
-    stroke-dashoffset: 0;
-  }
-
   bottom: 6.75rem;
   left: 50%;
   transform: translate(-50%);
 
   stroke-dasharray: 500;
   transition: stroke-dashoffset 0.5s ease-in-out;
-}
-
-.mainImgSmall {
-  cursor: pointer;
 
   stroke-dashoffset: -65;
 
   &:hover {
     stroke-dashoffset: 0;
   }
+}
 
+.mainImgSmall {
   bottom: 6.5rem;
   left: 50%;
   transform: translate(-50%);
 
   stroke-dasharray: 500;
   transition: stroke-dashoffset 0.5s ease-in-out;
+  cursor: pointer;
+
+  stroke-dashoffset: -65;
+
+  &:hover {
+    stroke-dashoffset: 0;
+  }
 }

src/components/about/mainBanner/MainBanner.tsx

@@ -52,6 +52,7 @@ export default function MainBanner() {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
+                    backgroundColor: 'rgba(0, 0, 0, 0.32)',
                   },
                 },
               }}

src/components/about/plan/planDesktop/PlanDesktop.module.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
   justify-content: center;
   position: relative;
+  padding-bottom: 15rem;
 }
 
 .title {
@@ -67,6 +68,10 @@
 // card
 
 .cardList {
+  display: grid;
+  gap: var(--space-200);
+  margin: 0 auto;
+
   @include container-xs {
     margin: 0 auto;
     width: 20.25rem;
@@ -83,10 +88,6 @@
     grid-template-columns: repeat(3, 1fr);
     width: 62.325rem;
   }
-
-  display: grid;
-  gap: var(--space-200);
-  margin: 0 auto;
 }
 
 .card {

src/components/about/projectPreiview/ProjectCarousel.tsx

@@ -9,7 +9,6 @@ import styles from './projectPreview.module.scss';
 
 export default function ProjectCarousel() {
   const [activeIndex, setActiveIndex] = useState(1);
-  const [animating, setAnimating] = useState(false);
 
   const { isMobile } = useIsMobile();
   const CardNumber = isMobile ? 1 : 3;
@@ -23,19 +22,16 @@ export default function ProjectCarousel() {
   }
 
   const next = () => {
-    if (animating) return;
     const nextIndex = activeIndex === splitProjects().length - 1 ? 0 : activeIndex + 1;
     setActiveIndex(nextIndex);
   };
 
   const prev = () => {
-    if (animating) return;
     const prevIndex = activeIndex === 0 ? splitProjects().length - 1 : activeIndex - 1;
     setActiveIndex(prevIndex);
   };
 
   const goToIndex = (newIndex: number) => {
-    if (animating) return;
     setActiveIndex(newIndex);
   };
 

src/components/about/projectPreiview/ProjectPreview.tsx

@@ -4,7 +4,7 @@ import styles from './ProjectPreview.module.scss';
 
 export default function ProjectPreview() {
   return (
-    <div className={styles.container}>
+    <div className={styles.previewContainer}>
       <div>
         <Text typography="heading2" color="gray-900">
           작은 아이디어가 현실로!

src/components/about/projectPreiview/projectPreview.module.scss

@@ -1,5 +1,5 @@
-.container {
-  padding: 11.5rem 4rem;
+.previewContainer {
+  padding: 7.5rem 4rem;
   display: flex;
   position: relative;
   flex-direction: column;

src/components/about/slidingText/SlidingText.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './style';
 
 import TextContent from './TextContent';

src/components/about/slidingText/TextContent.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import * as S from './style';
 
 import AmpersandImg from '../../../assets/svgs/ampersand.svg';
-import DanpoongImg from '../../../assets/svgs/danpoong.svg';
-import ArrowRightImg from '../../../assets/svgs/arrow-right.svg';
 import BeotkkotImg from '../../../assets/svgs/beotkkot.svg';
+import DanpoongImg from '../../../assets/svgs/danpoong.svg';
 
 export default function TextContent() {
   return (

src/components/information/Information.tsx

@@ -1,28 +1,28 @@
-import styles from './information.module.scss';
-import { BackPageIcon, PlusIcon, WarningIcon, ErrorCircleIcon } from '@goorm-dev/gds-icons';
+import { BackPageIcon, PlusIcon, WarningIcon } from '@goorm-dev/gds-icons';
 import {
-  Text,
-  Input,
+  Alert,
   Button,
   Checkbox,
   Dropdown,
-  DropdownToggle,
-  DropdownMenu,
   DropdownItem,
-  Alert,
-  ListGroupItem,
+  DropdownMenu,
+  DropdownToggle,
+  Input,
   ListGroup,
+  ListGroupItem,
+  Text,
 } from '@goorm-dev/vapor-components';
-import { useState } from 'react';
-import Universities from '../../utilities/UnivData';
+import { ChangeEvent, useState } from 'react';
 import errorCircleIcon from '../../assets/svgs/ErrorCircleIcon.svg';
+import Universities from '../../utilities/UnivData';
+import styles from './information.module.scss';
 
 interface SeasonPartSelection {
   selectedSeason: string;
   selectedPart: string;
 }
 
-export default function information() {
+export default function Information() {
   const [openSeasonIndex, setOpenSeasonIndex] = useState<number | null>(null);
   const [openPartIndex, setOpenPartIndex] = useState<number | null>(null);
   const [selections, setSelections] = useState<SeasonPartSelection[]>([

src/components/layout/GridContainer.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 
-export default function GridContainer({ children }) {
+export default function GridContainer({ children }: { children: ReactNode }) {
   return <GridContainerWrapper>{children}</GridContainerWrapper>;
 }
 

src/components/layout/footer/CustomFooter.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import { GithubIcon, InstagramIcon } from '@goorm-dev/gds-icons';
 import * as S from './style';
-import { FacebookIcon, GithubIcon, InstagramIcon } from '@goorm-dev/gds-icons';
 
 function CustomFooter() {
   return (
@@ -14,8 +13,7 @@ function CustomFooter() {
           <S.SocialIcon
             href="https://www.instagram.com/9oormthonuniv.official/"
             target="_blank"
-            rel="noopener noreferrer"
-          >
+            rel="noopener noreferrer">
             <InstagramIcon width="40" height="40" />
           </S.SocialIcon>
           {/*} <S.SocialIcon href="https://facebook.com/9oormthonuniv.official/" target="_blank" rel="noopener noreferrer">