Merge pull request #22 from erica0321/fix/convention

[수정] classname 형식 수정
team-joytas · Jan 5, 2025 · 874f17c · 874f17c
2 parents e4e1913 + 07559c8
commit 874f17c
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 142 deletions.
diff --git a/src/app/components/(main)/BannerSection.tsx b/src/app/components/(main)/BannerSection.tsx
@@ -1,10 +1,6 @@
 function Banner({ children }: { children: React.ReactNode }) {
   return (
-    <section
-      className={
-        'px-[20px] py-[14px] border-b-[1px] border-header-line w-full h-fit flex flex-col'
-      }
-    >
+    <section className='px-[20px] py-[14px] border-b-[1px] border-header-line w-full h-fit flex flex-col'>
       {children}
     </section>
   )
@@ -13,9 +9,9 @@ function Banner({ children }: { children: React.ReactNode }) {
 function Course() {
   return (
     <Banner>
-      <p className={'text-headline font-bold'}>원하는 지역</p>
-      <p className={'text-headline font-bold'}>원하는 코스대로!</p>
-      <span className={'text-sub text-black opacity-50 mt-[1px]'}>
+      <p className='text-headline font-bold'>원하는 지역</p>
+      <p className='text-headline font-bold'>원하는 코스대로!</p>
+      <span className='text-sub text-black opacity-50 mt-[1px]'>
         다른 사람들이 만든 코스를 즐기고 공유해요
       </span>
     </Banner>
@@ -25,9 +21,9 @@ function Course() {
 function News() {
   return (
     <Banner>
-      <p className={'text-headline font-bold'}>우리들의.코스</p>
-      <p className={'text-headline font-bold'}>우코 소식통!</p>
-      <span className={'text-sub text-black opacity-50 '}>
+      <p className='text-headline font-bold'>우리들의.코스</p>
+      <p className='text-headline font-bold'>우코 소식통!</p>
+      <span className='text-sub text-black opacity-50'>
         우코의 새로운 소식들을 빠르게 확인해요
       </span>
     </Banner>

diff --git a/src/app/components/(main)/BottomSection.tsx b/src/app/components/(main)/BottomSection.tsx
@@ -4,24 +4,16 @@ import Link from 'next/link'
 
 export default function BottomSection() {
   return (
-    <section className={'w-full h-fit py-[18px] px-[20px]'}>
+    <section className='w-full h-fit py-[18px] px-[20px]'>
       <Image width={100} height={22} alt='logo' src={logo_long} />
-      <div
-        className={
-          'flex flex-col text-[10px] w-full mt-[20px] gap-[2px] text-black opacity-50'
-        }
-      >
+      <div className='flex flex-col text-[10px] w-full mt-[20px] gap-[2px] text-black opacity-50'>
         <span>(주) 우코</span>
         <span>대표이사 김지홍 | 사업자등록번호 000-00-00000 </span>
         <span>통신판매업신고번호: 제 0000-0000호 </span>
         <span>대표전화: 000-0000-0000 </span>
         <span>서울특별시 어쩌구</span>
 
-        <div
-          className={
-            'flex flex-row gap-[5px] text-[10px] text-black opacity-80 mt-[5px]'
-          }
-        >
+        <div className='flex flex-row gap-[5px] text-[10px] text-black opacity-80 mt-[5px]'>
           <Link href='/terms'>서비스 이용약관</Link>
           <span> | </span>
           <Link href='/privacy'>개인정보 처리방침</Link>

diff --git a/src/app/components/(main)/EventItem.tsx b/src/app/components/(main)/EventItem.tsx
@@ -5,7 +5,7 @@ export default function EventItem() {
   return (
     <Link
       href={'/events/1'}
-      className={'w-[138px] h-[187px] rounded-[10px] bg-light-gray'}
+      className='w-[138px] h-[187px] rounded-[10px] bg-light-gray'
     ></Link>
   )
 }
diff --git a/src/app/components/(main)/EventSection.tsx b/src/app/components/(main)/EventSection.tsx
@@ -6,19 +6,19 @@ import EventItem from './EventItem'
 
 export default function EventSection() {
   return (
-    <section className={'w-full h-fit py-[22px]'}>
-      <div className={'flex items-center justify-between px-[20px]'}>
-        <div className={'flex flex-col'}>
-          <p className={'text-headline text-brand font-bold'}>이벤트</p>
-          <span className={'text-sub text-black opacity-50'}>
+    <section className='w-full h-fit py-[22px]'>
+      <div className='flex items-center justify-between px-[20px]'>
+        <div className='flex flex-col'>
+          <p className='text-headline text-brand font-bold'>이벤트</p>
+          <span className='text-sub text-black opacity-50'>
             새로운 이벤트, 놓치지 말고 챙기세요
           </span>
         </div>
         <Link href='/events'>더보기</Link>
       </div>
       <Spacer height={22} />
-      <div className={'w-full h-fit overflow-x-auto scrollbar-hide px-[20px]'}>
-        <div className={'w-fit flex gap-[14px]'}>
+      <div className='w-full h-fit overflow-x-auto scrollbar-hide px-[20px]'>
+        <div className='w-fit flex gap-[14px]'>
           <EventItem />
           <EventItem />
           <EventItem />

diff --git a/src/app/components/(main)/LikeCourseItem.tsx b/src/app/components/(main)/LikeCourseItem.tsx
@@ -9,48 +9,42 @@ export default function LikeCourseItem() {
   return (
     <Link
       href={'/courses/1'}
-      className={
-        'w-[207px] h-[230px] flex flex-col gap-[10px] rounded-[10px] bg-white drop-shadow-[0_0_4px_rgba(0,0,0,0.15)]'
-      }
+      className='w-[207px] h-[230px] flex flex-col gap-[10px] rounded-[10px] bg-white drop-shadow-[0_0_4px_rgba(0,0,0,0.15)]'
     >
       <div>
         <Image
           src={''}
           width={207}
           height={100}
-          className={'bg-light-gray rounded-tr-[10px] rounded-tl-[10px]'}
+          className='bg-light-gray rounded-tr-[10px] rounded-tl-[10px]'
           alt='course-image'
         />
-        <div
-          className={
-            'absolute top-[85px] left-[10px] w-[27px] h-[27px] bg-gradient-to-r from-[#9997F2] to-[#4341EA] p-[1px] rounded-[50%]'
-          }
-        >
+        <div className='absolute top-[85px] left-[10px] w-[27px] h-[27px] bg-gradient-to-r from-[#9997F2] to-[#4341EA] p-[1px] rounded-[50%]'>
           <ProfileImage
-            className={'w-[25px] h-[25px]'}
+            className='w-[25px] h-[25px]'
             src={'https://img.choroc.com/newshop/goods/009179/009179_1.jpg'}
           />
         </div>
       </div>
-      <div className={'flex mt-[5px] flex-col gap-[4px] px-[10px]'}>
-        <span className={'text-sub font-semibold'}>찰떡콩떡</span>
+      <div className='flex mt-[5px] flex-col gap-[4px] px-[10px]'>
+        <span className='text-sub font-semibold'>찰떡콩떡</span>
         <p
           className={
             'text-sub font-extrabold overflow-hidden text-ellipsis w-full text-nowrap'
           }
         >
           찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡
         </p>
-        <span className={'text-sub text-ellipsis w-full line-clamp-2'}>
+        <span className='text-sub text-ellipsis w-full line-clamp-2'>
           찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡 찰떡콩떡
         </span>
       </div>
-      <div className={'flex items-center gap-[4px] px-[10px]'}>
-        <div className={'flex items-center gap-[4px]'}>
+      <div className='flex items-center gap-[4px] px-[10px]'>
+        <div className='flex items-center gap-[4px]'>
           <Image src={heart_color} width={20} height={20} alt='like' />
           <span>25</span>
         </div>
-        <div className={'flex items-center gap-[4px]'}>
+        <div className='flex items-center gap-[4px]'>
           <Image src={comment} width={20} height={20} alt='comment' />
           <span>03</span>
         </div>

diff --git a/src/app/components/(main)/LikeCourseSection.tsx b/src/app/components/(main)/LikeCourseSection.tsx
@@ -6,30 +6,22 @@ import LikeCourseItem from './LikeCourseItem'
 
 export default function LikeCourseSection() {
   return (
-    <section
-      className={'w-full h-fit py-[22px] border-b-[1px] border-header-line'}
-    >
-      <div className={'px-[20px] flex items-center justify-between'}>
-        <div className={'flex flex-col'}>
+    <section className='w-full h-fit py-[22px] border-b-[1px] border-header-line'>
+      <div className='px-[20px] flex items-center justify-between'>
+        <div className='flex flex-col'>
           <p>
-            <span className={'text-headline text-brand font-bold'}>
-              홍인데유
-            </span>
-            <span className={'text-main font-bold'}>&nbsp;님의 관심코스</span>
+            <span className='text-headline text-brand font-bold'>홍인데유</span>
+            <span className='text-main font-bold'>&nbsp;님의 관심코스</span>
           </p>
-          <span className={'text-sub text-black opacity-50'}>
+          <span className='text-sub text-black opacity-50'>
             관심있는 지역/장소들을 내 코스로 만들어봐요
           </span>
         </div>
         <Link href='/notices'>더보기</Link>
       </div>
       <Spacer height={12} />
-      <div
-        className={
-          'w-full h-fit overflow-x-auto scrollbar-hide py-[10px] px-[20px]'
-        }
-      >
-        <div className={'w-fit flex gap-[22px]'}>
+      <div className='w-full h-fit overflow-x-auto scrollbar-hide py-[10px] px-[20px]'>
+        <div className='w-fit flex gap-[22px]'>
           <LikeCourseItem />
           <LikeCourseItem />
           <LikeCourseItem />

diff --git a/src/app/components/(main)/NewCourseItem.tsx b/src/app/components/(main)/NewCourseItem.tsx
@@ -15,23 +15,17 @@ export default function NewCourseItem() {
   return (
     <Link
       href={'/'}
-      className={
-        'w-full h-[100px] flex items-center rounded-[10px] bg-white drop-shadow-[0_0_4px_rgba(0,0,0,0.15)]'
-      }
+      className='w-full h-[100px] flex items-center rounded-[10px] bg-white drop-shadow-[0_0_4px_rgba(0,0,0,0.15)]'
     >
-      <div className={'ml-[10px] w-[138px] h-fit flex flex-col'}>
-        <span className={'text-sub text-black opacity-50'}>2024-12-24</span>
-        <span className={'text-sub text-black font-semibold'}>서울 / 강남</span>
-        <p className={'text-main text-black font-bold break-keep mt-[4px]'}>
+      <div className='ml-[10px] w-[138px] h-fit flex flex-col'>
+        <span className='text-sub text-black opacity-50'>2024-12-24</span>
+        <span className='text-sub text-black font-semibold'>서울 / 강남</span>
+        <p className='text-main text-black font-bold break-keep mt-[4px]'>
           먹고 구경하고 먹고 강남 한바퀴!
         </p>
       </div>
-      <div
-        className={
-          'flex-1  h-fit overflow-x-auto flex gap-[9px] scrollbar-hide pr-[10px]'
-        }
-      >
-        <div className={'w-fit flex gap-[9px]'}>
+      <div className='flex-1  h-fit overflow-x-auto flex gap-[9px] scrollbar-hide pr-[10px]'>
+        <div className='w-fit flex gap-[9px]'>
           <CourseImage
             index={1}
             src={'https://img.choroc.com/newshop/goods/009179/009179_1.jpg'}
@@ -61,21 +55,15 @@ interface CourseImageProps {
 
 function CourseImage({ index, src }: CourseImageProps) {
   return (
-    <div
-      className={'w-[60px] h-[58px] relative flex items-center justify-center'}
-    >
+    <div className='w-[60px] h-[58px] relative flex items-center justify-center'>
       <Image
         src={src}
         alt={'먹고 구경하고 먹고 강남 한바퀴!'}
         width={52}
         height={52}
-        className={'w-[52px] h-[52px] object-cover rounded-[5px] bg-light-gray'}
+        className='w-[52px] h-[52px] object-cover rounded-[5px] bg-light-gray'
       />
-      <span
-        className={
-          'absolute w-[13px] h-[13px] bg-container-light-blue top-[0px] left-[0px] flex items-center justify-center rounded-full'
-        }
-      >
+      <span className='absolute w-[13px] h-[13px] bg-container-light-blue top-[0px] left-[0px] flex items-center justify-center rounded-full'>
         {index}
       </span>
     </div>

diff --git a/src/app/components/(main)/NewCourseSection.tsx b/src/app/components/(main)/NewCourseSection.tsx
@@ -6,18 +6,18 @@ import Spacer from '@components/Spacer'
 
 export default function NewCourseSection() {
   return (
-    <section className={'w-full h-fit px-[20px] py-[22px]'}>
-      <div className={'flex items-center justify-between'}>
-        <div className={'flex flex-col'}>
-          <p className={'text-headline text-brand font-bold'}>New</p>
-          <span className={'text-sub text-black opacity-50'}>
+    <section className='w-full h-fit px-[20px] py-[22px]'>
+      <div className='flex items-center justify-between'>
+        <div className='flex flex-col'>
+          <p className='text-headline text-brand font-bold'>New</p>
+          <span className='text-sub text-black opacity-50'>
             이번 주 새로운 공유된 코스들을 구경하고 저장해보세요
           </span>
         </div>
         <Link href='/notices'>더보기</Link>
       </div>
       <Spacer height={22} />
-      <div className={'flex flex-col gap-[15px]'}>
+      <div className='flex flex-col gap-[15px]'>
         <NewCourseItem />
         <NewCourseItem />
         <NewCourseItem />

diff --git a/src/app/components/(main)/NoticeItem.tsx b/src/app/components/(main)/NoticeItem.tsx
@@ -13,12 +13,10 @@ export default function NoticeItem() {
   return (
     <Link
       href={`/notices/1`}
-      className={
-        'w-full h-fit px-[20px] py-[16px] bg-light-gray rounded-[10px] flex justify-between items-center'
-      }
+      className='w-full h-fit px-[20px] py-[16px] bg-light-gray rounded-[10px] flex justify-between items-center'
     >
-      <p className={'text-sub font-semibold'}>[공지] 우코 이용약관 개정 안내</p>
-      <p className={'text-sub font-light opacity-50'}>2024-12-24</p>
+      <p className='text-sub font-semibold'>[공지] 우코 이용약관 개정 안내</p>
+      <p className='text-sub font-light opacity-50'>2024-12-24</p>
     </Link>
   )
 }
diff --git a/src/app/components/(main)/NoticeSection.tsx b/src/app/components/(main)/NoticeSection.tsx
@@ -6,22 +6,18 @@ import NoticeItem from './NoticeItem'
 
 export default function NoticeSection() {
   return (
-    <section
-      className={
-        'w-full h-fit py-[22px] px-[20px] border-b-[1px] border-header-line'
-      }
-    >
-      <div className={'flex items-center justify-between'}>
-        <div className={'flex flex-col'}>
-          <p className={'text-headline text-brand font-bold'}>공지사항</p>
-          <span className={'text-sub text-black opacity-50'}>
+    <section className='w-full h-fit py-[22px] px-[20px] border-b-[1px] border-header-line'>
+      <div className='flex items-center justify-between'>
+        <div className='flex flex-col'>
+          <p className='text-headline text-brand font-bold'>공지사항</p>
+          <span className='text-sub text-black opacity-50'>
             우코를 사용하실 때, 알고 있으면 좋아요
           </span>
         </div>
         <Link href='/notices'>더보기</Link>
       </div>
       <Spacer height={22} />
-      <div className={'flex flex-col gap-[10px]'}>
+      <div className='flex flex-col gap-[10px]'>
         <NoticeItem />
         <NoticeItem />
         <NoticeItem />

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -28,7 +28,7 @@ export default function Footer() {
         'fixed bottom-0 shadow-custom max-w-[375px] text-gray-400 text-base bg-white flex w-full h-[60px] justify-around items-center'
       }
     >
-      <Link href='/' className={'flex flex-col items-center mb-[5px]'}>
+      <Link href='/' className='flex flex-col items-center mb-[5px]'>
         <Image
           src={isHome ? homePurple : home}
           width={25}
@@ -37,7 +37,7 @@ export default function Footer() {
         />
         <span className={`text-[10px] ${isHome && 'text-brand'}`}>홈</span>
       </Link>
-      <Link href='/courses' className={'flex flex-col items-center mb-[5px]'}>
+      <Link href='/courses' className='flex flex-col items-center mb-[5px]'>
         <Image
           src={isCourse ? coursePurple : course}
           width={25}
@@ -46,7 +46,7 @@ export default function Footer() {
         />
         <span className={`text-[10px] ${isCourse && 'text-brand'}`}>코스</span>
       </Link>
-      <Link href='/schedules' className={'flex flex-col items-center mb-[5px]'}>
+      <Link href='/schedules' className='flex flex-col items-center mb-[5px]'>
         <Image
           src={isPlan ? planPurple : plan}
           width={25}
@@ -55,7 +55,7 @@ export default function Footer() {
         />
         <span className={`text-[10px] ${isPlan && 'text-brand'}`}>플랜</span>
       </Link>
-      <Link href='/users/1' className={'flex flex-col items-center mb-[5px]'}>
+      <Link href='/users/1' className='flex flex-col items-center mb-[5px]'>
         <Image src={isMy ? myPurple : my} width={25} height={25} alt='마이' />
         <span className={`text-[10px] ${isMy && 'text-brand'}`}>마이</span>
       </Link>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -27,9 +27,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='kr' className={`h-full ${pretendard.variable}`}>
-      <body className={'h-full flex items-center flex-col overflow-y-scroll'}>
+      <body className='h-full flex items-center flex-col overflow-y-scroll'>
         <Header />
-        <div className={'mx-auto flex-1 text-black w-full max-w-[375px]'}>
+        <div className='mx-auto flex-1 text-black w-full max-w-[375px]'>
           {children}
           <LayoutSpacer />
         </div>