💄Design - bigTablet, lg, md 추가 #40

GDSC-DGU · May 8, 2024 · 6c4e33b · 6c4e33b
1 parent d129179
commit 6c4e33b
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 20 deletions.
diff --git a/src/app/seminar/[id]/page.tsx b/src/app/seminar/[id]/page.tsx
@@ -37,7 +37,7 @@ const SeminarDetailPage = async () => {
   const member = refactorSeminarMemberData(memberList.data[0] ?? SEMINAR_MEMBER_DATA, seminar.id);
 
   return <section className="flex justify-center">
-  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+  <div className="max-w-[1200px] desktop:px-10 bigTablet:px-10 lg:px-10 md:px-10 tablet:px-10 px-4 bg-mono_black">
      <div className="w-full">
         {/* header */}
     <SeminarDetailHeader key={`${seminar.id}_header`} seminar={seminar}/>

diff --git a/src/app/seminar/open/[id]/page.tsx b/src/app/seminar/open/[id]/page.tsx
@@ -46,7 +46,7 @@ const OpenSeminarDetailPage = async () => {
     );
 
   return <section className="flex justify-center">
-  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+  <div className="max-w-[1200px] desktop:px-10 bigTablet:px-10 lg:px-10 md:px-10 tablet:px-10 px-4 bg-mono_black">
      <div className="w-full">
 
          {/* header */}

diff --git a/src/app/seminar/page.tsx b/src/app/seminar/page.tsx
@@ -22,7 +22,7 @@ const SeminarPage = async () => {
   }
 
   return <section className="flex justify-center">
-  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+  <div className="max-w-[1200px] desktop:px-10 bigTablet:px-10 lg:px-10 md:px-10 tablet:px-10 px-4 bg-mono_black">
      <div className="w-full">
 
       {/* header */}

diff --git a/src/components/seminar/header/SeminarHeader.tsx b/src/components/seminar/header/SeminarHeader.tsx
@@ -28,7 +28,7 @@ const SeminarHeader = ({openSeminars}:{openSeminars:OpenSeminar[]}) => {
     <motion.section
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.8 }}
-           transition={{ duration: 0.2 }}
+           transition={{ duration: 0.5 }}
          >
         <Link
                key={active_seminar_id} 

diff --git a/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx b/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx
@@ -22,9 +22,9 @@ import SeminarDetailBannerInform from '../../seminarDetail/banner/SeminarDetailB
  */
 const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar }) => {
   return (
-    <div className="w-full mt-8 flex desktop:flex-row tablet:flex-col flex-col flex-col gap-8">
+    <div className="w-full mt-8 flex desktop:flex-row bigTablet:flex-row lg:flex-row tablet:flex-col md:flex-col flex-col gap-8">
       {/* 왼쪽 컨텐츠 */}
-      <div className="desktop:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
+      <div className="desktop:min-w-[544px] bigTablet:min-w-[544px] lg:min-w-[544px] tablet:w-full md:w-full w-full aspect-w-16 aspect-h-9">
       <motion.section
     initial={{ y: 20, opacity: 0 }}
     whileInView={{ y: 0, opacity: 1 }}
@@ -43,9 +43,9 @@ const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar })
         </motion.section>
       </div>
     {/* 오른쪽 컨텐츠 */}
-    <div className="flex desktop:items-end desktop:mt-0 tablet:mt-8 mt-8">
+    <div className="flex desktop:items-end bigTablet:items-end lg:items-end desktop:mt-0 bigTablet:mt-0 lg:mt-0 tablet:mt-8 md:mt-8 mt-8">
     <div className="w-full flex flex-col gap-6 py-3 whitespace-nowrap">
-        <div className='desktop:flex tablet:hidden hidden'>
+        <div className='desktop:flex bigTablet:flex lg:flex tablet:hidden md:hidden hidden'>
     <Image
           src={TranslateImg.src}
           alt="translate_img"

diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx
@@ -27,7 +27,7 @@ const OpenSeminarDetailSeminars = ({ detailSeminars }: { detailSeminars:OpenSemi
       Seminars
     </p>
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
-    <div className='mt-5 flex grid desktop:grid-cols-2 tablet:grid-cols-1 gap-8'>
+    <div className='mt-5 flex grid desktop:grid-cols-2 bigTablet:grid-cols-2 lg:grid-cols-2 tablet:grid-cols-1 md:grid-cols-1 gap-8'>
     {detailSeminars.map((seminar) => (
        <motion.section
        key={seminar.id}
@@ -43,7 +43,7 @@ const OpenSeminarDetailSeminars = ({ detailSeminars }: { detailSeminars:OpenSemi
           viewport={{ once: true, amount: 0.9 }}
           variants={seminarCardVariants}
           style={{ transformOrigin: '10% 60%' }}
-          whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+          whileHover={{ scale: 1.05, transition: { duration: 0.5 } }}
           whileTap={{ scale: 0.8 }}
         >
       <Link

diff --git a/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx b/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx
@@ -23,9 +23,9 @@ import { SeminarMember } from '@/interfaces/seminar/seminarMember';
  */
 const SeminarDetailBanner = ({ seminar, member }: { seminar: SeminarThumbnail, member: SeminarMember }) => {
   return (
-    <div className="w-full mt-8 pb-6 flex desktop:flex-row tablet:flex-col flex-col flex-col gap-8">
+    <div className="w-full mt-8 pb-6 flex desktop:flex-row bigTablet:flex-row lg:flex-row tablet:flex-col md:flex-col flex-col gap-8">
       {/* 왼쪽 컨텐츠 */}
-      <div className="desktop:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
+      <div className="desktop:min-w-[544px] bigTablet:mint-w-[544px] lg:mint-w-[544px] tablet:w-full md:w-full w-full aspect-w-16 aspect-h-9">
       <motion.section
     initial={{ y: 20, opacity: 0 }}
     whileInView={{ y: 0, opacity: 1 }}
@@ -46,9 +46,9 @@ const SeminarDetailBanner = ({ seminar, member }: { seminar: SeminarThumbnail, m
          </motion.section>
       </div>
     {/* 오른쪽 컨텐츠 */}
-    <div className="flex desktop:items-end desktop:mt-0 tablet-mt-0 mt-8">
+    <div className="flex desktop:items-end bigTablet:items-end desktop:mt-0 lg:items-end bigTablet:mt-0 lg:mt-0 tablet:mt-8 md:mt-8 mt-8">
     <div className="flex flex-col gap-6 py-3 whitespace-nowrap">
-        <div className='desktop:flex tablet:hidden hidden'>
+        <div className='desktop:flex bigTablet:flex lg:flex tablet:hidden md:hidden hidden'>
     <Image
           src={TranslateImg.src}
           alt="translate_img"

diff --git a/src/components/seminar/thumbnail/SeminarPagination.tsx b/src/components/seminar/thumbnail/SeminarPagination.tsx
@@ -8,7 +8,7 @@ interface PaginationProps {
 
   const SeminarPagination: React.FC<PaginationProps> = ({ pageNumbers, currentPage, paginate }) => {
     return (
-      <div className="pt-10 mt-5 desktop:flex tablet:hidden hidden justify-center gap-3">
+      <div className="pt-10 mt-5 desktop:flex bigTablet:flex lg:flex tablet:hidden md:hidden hidden justify-center gap-3">
                 {/* desktop에서만 보이기 */}
         {pageNumbers.map(number => (
             <motion.button

diff --git a/src/components/seminar/thumbnail/SeminarThumbnailList.tsx b/src/components/seminar/thumbnail/SeminarThumbnailList.tsx
@@ -58,15 +58,15 @@ const SeminarThumbnailList = ({ seminars }: { seminars:SeminarThumbnail[] }) =>
           {/* 썸네일 리스트 */}
 
           {/* desktop인 경우 */}
-        <div className="desktop:grid tablet:hidden hidden desktop:grid-cols-3 gap-x-8 gap-y-10">
+        <div className="desktop:grid bigTablet:grid lg:grid tablet:hidden md:hidden hidden desktop:grid-cols-3 gap-x-8 gap-y-10 bigTablet:grid-cols-3 gap-x-8 gap-y-10 lg:grid-cols-3 gap-x-8 gap-y-10">
         {currentItems.map((seminar:SeminarThumbnail, index:number) => (
            <motion.section
            key={index}
            whileHover={{ scale: 1.05, transition: { duration: 0.3 } }}
            whileTap={{ scale: 0.8 }}
            initial={{ y: 20, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
-           transition={{ duration: 0.2 }}
+           transition={{ duration: 0.5 }}
            viewport={{ once: true, amount: 0.9 }}
            variants={seminarCardVariants}
            style={{ transformOrigin: '10% 60%' }}
@@ -84,15 +84,15 @@ const SeminarThumbnailList = ({ seminars }: { seminars:SeminarThumbnail[] }) =>
         </div>
 
          {/*tablet, mobile인 경우 */}
-        <div className="desktop:hidden grid tablet:grid-cols-2 grid-cols-1 gap-x-8 gap-y-10">
+        <div className="desktop:hidden bigTablet:hidden lg:hidden grid tablet:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-x-8 gap-y-10">
           {filteredData.map((seminar:SeminarThumbnail, index:number) => (
           <motion.section
           key={index}
           whileHover={{ scale: 1.05, transition: { duration: 0.3 } }}
           whileTap={{ scale: 0.8 }}
           initial={{ y: 20, opacity: 0 }}
           whileInView={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.5 }}
+          transition={{ duration: 0.5 }}
           viewport={{ once: true, amount: 0.9 }}
           variants={seminarCardVariants}
           style={{ transformOrigin: '10% 60%' }}

diff --git a/src/components/seminar/toggle/SeminarToggleMenu.tsx b/src/components/seminar/toggle/SeminarToggleMenu.tsx
@@ -21,7 +21,7 @@ const SeminarToggleMenu = ({openSeminar}: {openSeminar:OpenSeminar}) => {
            key={openSeminar.id}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.8 }}
-           transition={{ duration: 0.2 }}
+           transition={{ duration: 0.5 }}
          >
       <div
         className="p-3 flex justify-between items-center">