refactor(fe): refactor public directory (#2188)

* refactor(re): refactor public folde * Optimised images with calibre/image-actions * fix(fe): fix directory * fix(fe): fix file name --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
skkuding · Nov 9, 2024 · 33ef1a3 · 33ef1a3
1 parent 73b897f
commit 33ef1a3
Show file tree

Hide file tree

Showing 68 changed files with 73 additions and 182 deletions.
diff --git a/apps/frontend/app/(client)/(main)/_components/ContestCard.tsx b/apps/frontend/app/(client)/(main)/_components/ContestCard.tsx
@@ -2,7 +2,7 @@
 
 import ContestStatusTimeDiff from '@/components/ContestStatusTimeDiff'
 import { cn, dateFormatter } from '@/lib/utils'
-import CalendarIcon from '@/public/20_calendar.svg'
+import calendarIcon from '@/public/icons/calendar.svg'
 import type { Contest } from '@/types/type'
 import Image from 'next/image'
 import 'react-circular-progressbar/dist/styles.css'
@@ -52,7 +52,7 @@ export default function ContestCard({ contest }: Props) {
       <div className="mb-4 flex items-center justify-between">
         <div className="line-clamp-2 flex flex-col gap-2">
           <div className="inline-flex items-center gap-2 whitespace-nowrap text-xs text-gray-800 opacity-80">
-            <Image src={CalendarIcon} alt="Calendar" />
+            <Image src={calendarIcon} alt="Calendar" />
             <p className="overflow-hidden text-ellipsis whitespace-pre-wrap">
               {startTime} ~ {endTime}
             </p>

diff --git a/apps/frontend/app/(client)/(main)/_components/Footer.tsx b/apps/frontend/app/(client)/(main)/_components/Footer.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import CodedangLogo from '@/public/codedang.svg'
+import codedangLogo from '@/public/logos/codedang-with-text.svg'
 import Image from 'next/image'
 import { AiOutlineLink } from 'react-icons/ai'
 import { AiFillMail } from 'react-icons/ai'
@@ -21,7 +21,7 @@ export default function Footer() {
   return (
     <footer className="h-100 mt-8 flex w-full flex-col items-center justify-center gap-10 bg-gray-50 md:h-80 md:items-center">
       <div className="flex min-w-fit items-center justify-center">
-        <Image src={CodedangLogo} alt="코드당" width={180} height={28} />
+        <Image src={codedangLogo} alt="코드당" width={180} height={28} />
       </div>
       <div className="flex items-center justify-center gap-3">
         <a

diff --git a/apps/frontend/app/(client)/(main)/_components/Header.tsx b/apps/frontend/app/(client)/(main)/_components/Header.tsx
@@ -1,6 +1,6 @@
 import HeaderAuthPanel from '@/components/auth/HeaderAuthPanel'
 import { auth } from '@/lib/auth'
-import CodedangLogo from '@/public/codedang.svg'
+import codedangLogo from '@/public/logos/codedang-with-text.svg'
 import Image from 'next/image'
 import Link from 'next/link'
 import NavLink from './NavLink'
@@ -14,7 +14,7 @@ export default async function Header() {
         <div className="flex min-w-fit items-center justify-between gap-8 text-[16px]">
           <Link href="/">
             <Image
-              src={CodedangLogo}
+              src={codedangLogo}
               alt="코드당"
               width={135.252}
               height={28}

diff --git a/apps/frontend/app/(client)/(main)/_components/StatusBadge.tsx b/apps/frontend/app/(client)/(main)/_components/StatusBadge.tsx
@@ -1,33 +1,33 @@
 import { cn } from '@/lib/utils'
-import FinishedIcon from '@/public/20_finished.svg'
-import OngoingIcon from '@/public/20_ongoing.svg'
-import UpcomingIcon from '@/public/20_upcoming.svg'
+import finishedIcon from '@/public/icons/finished.svg'
+import ongoingIcon from '@/public/icons/ongoing.svg'
+import upcomingIcon from '@/public/icons/upcoming.svg'
 import Image from 'next/image'
 import React from 'react'
 
 const variants = {
   registeredOngoing: {
-    image: OngoingIcon,
+    image: ongoingIcon,
     text: 'ONGOING',
     color: 'text-blue-500'
   },
   registeredUpcoming: {
-    image: UpcomingIcon,
+    image: upcomingIcon,
     text: 'UPCOMING',
     color: 'text-red-400'
   },
   ongoing: {
-    image: OngoingIcon,
+    image: ongoingIcon,
     text: 'ONGOING',
     color: 'text-blue-500'
   },
   upcoming: {
-    image: UpcomingIcon,
+    image: upcomingIcon,
     text: 'UPCOMING',
     color: 'text-red-400'
   },
   finished: {
-    image: FinishedIcon,
+    image: finishedIcon,
     text: 'FINISHED',
     color: 'text-gray-400'
   }

diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { convertToLetter, dateFormatter } from '@/lib/utils'
-import CheckIcon from '@/public/check-green.svg'
+import checkIcon from '@/public/icons/check-green.svg'
 import type { ContestProblem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 import Image from 'next/image'
@@ -31,7 +31,7 @@ export const columns: ColumnDef<ContestProblem>[] = [
     cell: ({ row }) =>
       row.original.submissionTime && (
         <div className="flex items-center justify-center">
-          <Image src={CheckIcon} alt="check" width={24} height={24} />
+          <Image src={checkIcon} alt="check" width={24} height={24} />
         </div>
       )
   },

diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/layout.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/layout.tsx
@@ -2,8 +2,8 @@ import ContestStatusTimeDiff from '@/components/ContestStatusTimeDiff'
 import { auth } from '@/lib/auth'
 import { fetcher, fetcherWithAuth, getStatusWithStartEnd } from '@/lib/utils'
 import { dateFormatter } from '@/lib/utils'
-import Calendar from '@/public/20_calendar.svg'
-import CheckIcon from '@/public/check_blue.svg'
+import calendarIcon from '@/public/icons/calendar.svg'
+import checkIcon from '@/public/icons/check-blue.svg'
 import type { Contest } from '@/types/type'
 import Image from 'next/image'
 import ContestTabs from '../_components/ContestTabs'
@@ -63,7 +63,7 @@ export default async function Layout({
             <div className="flex items-center gap-2">
               {isRegistered && contestStatus !== 'upcoming' && (
                 <>
-                  <Image src={CheckIcon} alt="check" width={24} height={24} />
+                  <Image src={checkIcon} alt="check" width={24} height={24} />
                   <p className="text-primary-light text-sm font-bold">
                     Total score
                   </p>
@@ -78,7 +78,7 @@ export default async function Layout({
           </div>
           <div className="flex flex-col items-end gap-4">
             <div className="flex gap-2">
-              <Image src={Calendar} alt="calendar" width={24} height={24} />
+              <Image src={calendarIcon} alt="calendar" width={24} height={24} />
               <p className="font-medium text-[#333333]">
                 {formattedStartTime} ~ {formattedEndTime}
               </p>

diff --git a/apps/frontend/app/(client)/(main)/contest/_components/FinishedTableColumns.tsx b/apps/frontend/app/(client)/(main)/contest/_components/FinishedTableColumns.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { dateFormatter } from '@/lib/utils'
-import CheckIcon from '@/public/check-gray-icon.svg'
+import checkIcon from '@/public/icons/check-gray.svg'
 import type { Contest } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 import Image from 'next/image'
@@ -22,7 +22,7 @@ export const columns: ColumnDef<Contest>[] = [
     cell: ({ row }) =>
       row.original.isRegistered && (
         <div className="flex items-center justify-center">
-          <Image src={CheckIcon} alt="check" height={24} />
+          <Image src={checkIcon} alt="check" height={24} />
         </div>
       )
   },

diff --git a/apps/frontend/app/(client)/(main)/page.tsx b/apps/frontend/app/(client)/(main)/page.tsx
@@ -11,7 +11,7 @@ const slides = [
     topTitle: 'Welcome to',
     bottomTitle: 'CODEDANG',
     sub: 'Online Judge Platform for SKKU',
-    img: '/codedang-carousel.png',
+    img: '/banners/codedang-carousel.png',
     imgAlt: 'Codedang',
     href: '/problem'
   },
@@ -20,7 +20,7 @@ const slides = [
     topTitle: 'Contribute to',
     bottomTitle: 'Codedang on GitHub',
     sub: 'Our project is open source',
-    img: '/github-carousel.png',
+    img: '/banners/github.png',
     imgAlt: 'GitHub',
     href: 'https://github.com/skkuding/codedang'
   },
@@ -29,7 +29,7 @@ const slides = [
     topTitle: 'SKKUDING',
     bottomTitle: 'Beta Service',
     sub: "Feel free to contact us if there's any bug",
-    img: '/bug-carousel.png',
+    img: '/banners/bug.png',
     imgAlt: 'Bug',
     href: 'https://pf.kakao.com/_UKraK/chat'
   }

diff --git a/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
-import invisible from '@/public/24_invisible.svg'
-import visible from '@/public/24_visible.svg'
+import invisibleIcon from '@/public/icons/invisible.svg'
+import visibleIcon from '@/public/icons/visible.svg'
 import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
@@ -56,7 +56,7 @@ export default function CurrentPwSection({
             onClick={() => setPasswordShow(!passwordShow)}
           >
             <Image
-              src={passwordShow ? visible : invisible}
+              src={passwordShow ? visibleIcon : invisibleIcon}
               alt={passwordShow ? 'visible' : 'invisible'}
             />
           </span>

diff --git a/apps/frontend/app/(client)/(main)/settings/_components/LogoSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/LogoSection.tsx
@@ -1,4 +1,4 @@
-import codedangSymbol from '@/public/codedang-editor.svg'
+import codedangSymbol from '@/public/logos/codedang-editor.svg'
 import Image from 'next/image'
 
 export default function LogoSection() {

diff --git a/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx
@@ -1,7 +1,7 @@
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
-import invisible from '@/public/24_invisible.svg'
-import visible from '@/public/24_visible.svg'
+import invisibleIcon from '@/public/icons/invisible.svg'
+import visibleIcon from '@/public/icons/visible.svg'
 import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
@@ -52,7 +52,7 @@ export default function NewPwSection({
             onClick={() => setNewPasswordShow(!newPasswordShow)}
           >
             <Image
-              src={newPasswordShow ? visible : invisible}
+              src={newPasswordShow ? visibleIcon : invisibleIcon}
               alt={newPasswordShow ? 'visible' : 'invisible'}
             />
           </span>

diff --git a/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx
@@ -1,6 +1,6 @@
 import { Input } from '@/components/ui/input'
-import invisible from '@/public/24_invisible.svg'
-import visible from '@/public/24_visible.svg'
+import invisibleIcon from '@/public/icons/invisible.svg'
+import visibleIcon from '@/public/icons/visible.svg'
 import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
@@ -48,7 +48,7 @@ export default function ReEnterNewPwSection({
             onClick={() => setConfirmPasswordShow(!confirmPasswordShow)}
           >
             <Image
-              src={confirmPasswordShow ? visible : invisible}
+              src={confirmPasswordShow ? visibleIcon : invisibleIcon}
               alt={confirmPasswordShow ? 'visible' : 'invisible'}
             />
           </span>

diff --git a/apps/frontend/app/admin/contest/[contestId]/(overall)/layout.tsx b/apps/frontend/app/admin/contest/[contestId]/(overall)/layout.tsx
@@ -4,7 +4,7 @@ import KatexContent from '@/components/KatexContent'
 import { Button } from '@/components/ui/button'
 import { GET_CONTEST } from '@/graphql/contest/queries'
 import { dateFormatter } from '@/lib/utils'
-import Period from '@/public/period.svg'
+import periodIcon from '@/public/icons/period.svg'
 import { useQuery } from '@apollo/client'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -47,7 +47,7 @@ export default function Layout({
           Invitation code: {contestData?.invitationCode}
         </p>
         <div className="flex items-center gap-2">
-          <Image src={Period} alt="period" width={22} />
+          <Image src={periodIcon} alt="period" width={22} />
           <p className="font-semibold">
             {dateFormatter(contestData?.startTime, 'YY-MM-DD HH:mm')} ~{' '}
             {dateFormatter(contestData?.endTime, 'YY-MM-DD HH:mm')}

diff --git a/apps/frontend/app/admin/contest/_components/ContestTableColumns.tsx b/apps/frontend/app/admin/contest/_components/ContestTableColumns.tsx
@@ -11,8 +11,8 @@ import {
 } from '@/components/ui/tooltip'
 import { UPDATE_CONTEST_VISIBLE } from '@/graphql/contest/mutations'
 import { cn, dateFormatter } from '@/lib/utils'
-import InvisibleIcon from '@/public/24_invisible.svg'
-import VisibleIcon from '@/public/24_visible.svg'
+import invisibleIcon from '@/public/icons/invisible.svg'
+import visibleIcon from '@/public/icons/visible.svg'
 import { useMutation } from '@apollo/client'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import type { ColumnDef, Row } from '@tanstack/react-table'
@@ -82,9 +82,9 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
                   className="h-6 w-6"
                 >
                   {row.original.isVisible ? (
-                    <Image src={VisibleIcon} alt="Visible" />
+                    <Image src={visibleIcon} alt="Visible" />
                   ) : (
-                    <Image src={InvisibleIcon} alt="Invisible" />
+                    <Image src={invisibleIcon} alt="Invisible" />
                   )}
                 </button>
               </TooltipTrigger>

diff --git a/apps/frontend/app/admin/layout.tsx b/apps/frontend/app/admin/layout.tsx
@@ -1,5 +1,5 @@
 import { Separator } from '@/components/ui/separator'
-import CodedangLogo from '@/public/codedang.svg'
+import codedangLogo from '@/public/logos/codedang-with-text.svg'
 import Image from 'next/image'
 import Link from 'next/link'
 import ClientApolloProvider from './_components/ApolloProvider'
@@ -14,7 +14,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           {/* <GroupSelect /> */}
           <Link href="/" className="ml-6">
             <Image
-              src={CodedangLogo}
+              src={codedangLogo}
               alt="코드당"
               width={135.252}
               height={28}

diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
@@ -1,4 +1,4 @@
-import welcomeLogo from '@/public/welcome.svg'
+import welcomeLogo from '@/public/logos/welcome.png'
 import Image from 'next/image'
 
 export default function Page() {

diff --git a/apps/frontend/app/admin/problem/_components/ContainedContests.tsx b/apps/frontend/app/admin/problem/_components/ContainedContests.tsx
@@ -12,7 +12,7 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 import { GET_BELONGED_CONTESTS } from '@/graphql/contest/queries'
-import FileInfoIcon from '@/public/24_compile.svg'
+import fileInfoIcon from '@/public/icons/file-info.svg'
 import { useQuery } from '@apollo/client'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import Image from 'next/image'
@@ -73,7 +73,7 @@ export default function ContainedContests({
                 onMouseEnter={() => setIsTooltipOpen(true)}
                 onMouseLeave={() => setIsTooltipOpen(false)}
               >
-                <Image src={FileInfoIcon} alt="fileinfo" />
+                <Image src={fileInfoIcon} alt="fileinfo" />
               </button>
             </TooltipTrigger>
           </DialogTrigger>

diff --git a/apps/frontend/components/ContestStatusTimeDiff.tsx b/apps/frontend/components/ContestStatusTimeDiff.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { cn } from '@/lib/utils'
-import ClockIcon from '@/public/20_clock.svg'
+import ClockIcon from '@/public/icons/clock.svg'
 import type { Contest } from '@/types/type'
 import type { ContestStatus } from '@/types/type'
 import dayjs from 'dayjs'

diff --git a/apps/frontend/components/Cover.tsx b/apps/frontend/components/Cover.tsx
@@ -13,9 +13,9 @@ const bgColors: { [key: string]: string } = {
 }
 
 const icons: { [key: string]: string } = {
-  problem: '/codedang-icon.png',
-  notice: '/notice-icon.png',
-  contest: '/contest-icon.png'
+  problem: '/banners/codedang.png',
+  notice: '/banners/notice.png',
+  contest: '/banners/contest.png'
 }
 
 /**

diff --git a/apps/frontend/components/EditorDescription.tsx b/apps/frontend/components/EditorDescription.tsx
@@ -16,10 +16,10 @@ import {
   DialogTrigger
 } from '@/components/ui/dialog'
 import { convertToLetter } from '@/lib/utils'
-import CopyIcon from '@/public/24_copy.svg'
-import compileIcon from '@/public/compileVersion.svg'
-import copyIcon from '@/public/copy.svg'
-import copyCompleteIcon from '@/public/copyComplete.svg'
+import compileIcon from '@/public/icons/compile-version.svg'
+import copyBlueIcon from '@/public/icons/copy-blue.svg'
+import copyCompleteIcon from '@/public/icons/copy-complete.svg'
+import copyIcon from '@/public/icons/copy.svg'
 import type { ContestProblem, ProblemDetail } from '@/types/type'
 import type { Level } from '@/types/type'
 import { motion } from 'framer-motion'
@@ -145,7 +145,9 @@ export function EditorDescription({
                                   toast('Successfully copied', {
                                     unstyled: true,
                                     closeButton: false,
-                                    icon: <Image src={CopyIcon} alt="copy" />,
+                                    icon: (
+                                      <Image src={copyBlueIcon} alt="copy" />
+                                    ),
                                     style: { backgroundColor: '#f0f8ff' },
                                     classNames: {
                                       toast:
@@ -203,7 +205,9 @@ export function EditorDescription({
                                   toast('Successfully copied', {
                                     unstyled: true,
                                     closeButton: false,
-                                    icon: <Image src={CopyIcon} alt="copy" />,
+                                    icon: (
+                                      <Image src={copyBlueIcon} alt="copy" />
+                                    ),
                                     style: { backgroundColor: '#f0f8ff' },
                                     classNames: {
                                       toast:

diff --git a/apps/frontend/components/EditorHeader.tsx b/apps/frontend/components/EditorHeader.tsx
@@ -22,7 +22,7 @@ import {
 } from '@/components/ui/select'
 import { auth } from '@/lib/auth'
 import { fetcherWithAuth } from '@/lib/utils'
-import submitIcon from '@/public/submit.svg'
+import submitIcon from '@/public/icons/submit.svg'
 import useAuthModalStore from '@/stores/authModal'
 import {
   useLanguageStore,