Merge pull request #201 from ssu-student-union/feat/#196_add-channel-…

…talk Feat/#196 add channel talk
ssu-student-union · Oct 9, 2024 · 1bea056 · 1bea056
2 parents ae4a7ff + 6f4c00a
commit 1bea056
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -37,6 +37,49 @@
         }
       })(window.location);
     </script>
+
+    <script>
+      (function () {
+        var w = window;
+        if (w.ChannelIO) {
+          return w.console.error('ChannelIO script included twice.');
+        }
+        var ch = function () {
+          ch.c(arguments);
+        };
+        ch.q = [];
+        ch.c = function (args) {
+          ch.q.push(args);
+        };
+        w.ChannelIO = ch;
+        function l() {
+          if (w.ChannelIOInitialized) {
+            return;
+          }
+          w.ChannelIOInitialized = true;
+          var s = document.createElement('script');
+          s.type = 'text/javascript';
+          s.async = true;
+          s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
+          var x = document.getElementsByTagName('script')[0];
+          if (x.parentNode) {
+            x.parentNode.insertBefore(s, x);
+          }
+        }
+        if (document.readyState === 'complete') {
+          l();
+        } else {
+          w.addEventListener('DOMContentLoaded', l);
+          w.addEventListener('load', l);
+        }
+      })();
+
+      ChannelIO('boot', {
+        pluginKey: '2c1c732a-1359-4d73-9e45-fde8a165842c',
+        customLauncherSelector: '.custom-button-1, #custom-button-2',
+        hideChannelButtonOnBoot: true,
+      });
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/image/channel_talk.svg b/src/assets/image/channel_talk.svg
diff --git a/src/components/Floating/Floating.tsx b/src/components/Floating/Floating.tsx
@@ -3,24 +3,16 @@ import { linkPaths, iconPaths } from './const';
 interface FloatingIconProps {
   icon: 'kakao' | 'insta' | 'youtube';
   fill?: string;
-  size?: string;
   viewBox: string;
   path: 'kakaoLink' | 'instaLink' | 'youtubeLink';
 }
 
-const FloatingIcon = ({ icon, fill = '#ffffff', size = '34px', viewBox, path }: FloatingIconProps) => (
+const FloatingIcon = ({ icon, fill = '#ffffff', viewBox, path }: FloatingIconProps) => (
   <a
     href={linkPaths[path]}
-    className="flex h-20 w-20 cursor-pointer items-center justify-center rounded-[40px] bg-primary hover:bg-blue-700"
+    className="flex h-20 w-20 cursor-pointer items-center justify-center rounded-[40px] bg-primary hover:bg-blue-700 xs:h-[62px] xs:w-[62px] sm:h-[62px] sm:w-[62px]"
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={viewBox}
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} className="h-[34px] w-[34px]  xs:w-[27px] sm:w-[27px]">
       <path fill={fill} d={iconPaths[icon]} />
     </svg>
   </a>
@@ -30,4 +22,4 @@ export const KakaoFloating = () => <FloatingIcon icon="kakao" viewBox="0 0 34 32
 
 export const InstaFloating = () => <FloatingIcon icon="insta" viewBox="0 0 34 34" path="instaLink" />;
 
-export const YoutubeFloating = () => <FloatingIcon icon="youtube" viewBox="0 0 42 42" size="42px" path="youtubeLink" />;
+export const YoutubeFloating = () => <FloatingIcon icon="youtube" viewBox="0 0 42 42" path="youtubeLink" />;
diff --git a/src/pages/main/containers/CounselBtn.tsx b/src/pages/main/containers/CounselBtn.tsx
@@ -0,0 +1,22 @@
+import Channel from '@/assets/image/channel_talk.svg';
+import { InstaFloating, KakaoFloating, YoutubeFloating } from '@/components/Floating/Floating';
+import { Spacing } from '@/components/Spacing';
+
+export function CounselBtn() {
+  return (
+    <div className="relative ">
+      <div className="absolute right-0 h-20 bg-transparent pr-11 xs:pr-5 sm:pr-5">
+        <Spacing size={86} direction="vertical" />
+        <KakaoFloating />
+        <Spacing direction={'vertical'} size={13} />
+        <InstaFloating />
+        <Spacing direction={'vertical'} size={13} />
+        <YoutubeFloating />
+        <Spacing direction={'vertical'} size={13} />
+        <button className="custom-button-1">
+          <img className="h-[78px] w-[78px] xs:w-[60px] sm:w-[60px]" src={Channel} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/main/page.tsx b/src/pages/main/page.tsx
@@ -5,13 +5,16 @@ import PetitionSection from './containers/PetitionSection';
 import { Spacing } from '@/components/Spacing';
 import LostArticleSection from './containers/LostArticleSection';
 import CampusMapSection from './containers/CampusMapSection';
+import { CounselBtn } from './containers/CounselBtn';
 
 export function MainPage() {
   return (
     <>
       <main>
         <MainCarousel />
         <MainScheduleSection />
+        <CounselBtn />
+
         <div className="xs:pl-[3.125rem] sm:pl-[3.125rem] md:pl-[3.125rem] lg:px-[12.5rem] xl:px-[12.5rem] xxl:px-[12.5rem]">
           <Spacing size={86} direction="vertical" />
           <NoticeSection />