Merge pull request #29 from TUK-IT-STARTUP-CAMP-TASK/feat/#20

[Feat/#20] 이스터에그 메시지 구현 완료 + 사진 해상도 조정

src/components/JoonMessage1.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+
+import message from '../../public/img/Message/message.png';
+import tree from '../../public/img/Message/tree.png';
+
+function JoonMessage1() {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleImageClick = () => {
+    setIsClicked(true);
+
+    setTimeout(() => {
+      setIsClicked(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-[15%] flex -translate-x-1/2 transform flex-col items-center">
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={handleImageClick}
+        className="w-[24vw] cursor-pointer">
+        <img src={tree} alt="Tree" className="w-full" />
+        {isClicked && (
+          <div className="height-[60vh] absolute bottom-[20vh] left-[15%] z-30 aspect-square w-[30vw]">
+            <img src={message} alt="Message" className="h-full w-full" />
+            <p className="font-nanumPen absolute left-[50%] top-[40%] w-[36%] -translate-x-1/2 -translate-y-1/2 transform text-lg leading-6 text-black md:text-lg">
+              23년은 각자에게 특별한 시간이었고, 이제 우리는 꿈을 향해 더 멋진
+              24년을 함께 만들어 나갑시다!
+            </p>
+            <p className="font-nanumPen absolute left-1/2 top-[52%] -translate-x-1/2 transform text-lg text-black md:text-lg">
+              - Joon -
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default JoonMessage1;

src/components/JoonMessage2.jsx

@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+
+import message2 from '../../public/img/Message/message2.png';
+import snowman3 from '../../public/img/Message/snowman3.png';
+
+function JoonMessage2() {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleImageClick = () => {
+    setIsClicked(true);
+
+    setTimeout(() => {
+      setIsClicked(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-[70%] flex -translate-x-1/2 transform flex-col items-center">
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={handleImageClick}
+        className="w-[13vw] cursor-pointer">
+        <img src={snowman3} alt="Snowman" />
+        {isClicked && (
+          <div className="absolute right-0 top-[-85%] z-20 aspect-square h-auto w-[24vw] md:top-[-85%] md:w-[24vw] ">
+            <img src={message2} alt="Message" className="h-full w-full" />
+            <div className="absolute left-[11.6rem] top-[44%] flex w-32 -translate-x-1/2 -translate-y-1/2 transform flex-col items-center md:w-32">
+              <div className="flex w-full flex-col items-center">
+                <p className="font-nanumPen text-lg text-black md:text-lg">
+                  다음 해에도 함께 성장하는 팀준을 만들고 싶습니다! 화이팅!
+                </p>
+                <p className="font-nanumPen text-center text-base  text-black md:text-base">
+                  - 정현 -
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default JoonMessage2;

src/components/JoonMessage3.jsx

@@ -0,0 +1,49 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+
+import message2 from '../../public/img/Message/message2.png';
+import snowman4 from '../../public/img/Message/snowman4.png';
+
+function JoonMessage3() {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleImageClick = () => {
+    setIsClicked(true);
+
+    setTimeout(() => {
+      setIsClicked(false);
+    }, 2000);
+  };
+  return (
+    <div className="fixed bottom-10 left-[90%] flex -translate-x-1/2 transform flex-col items-center">
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={handleImageClick}
+        className="w-[20vw] cursor-pointer">
+        <img src={snowman4} alt="Snowman" className="h-auto w-[45%]" />
+        {isClicked && (
+          <div className="absolute right-[7.5rem] top-[-7rem] z-20 flex aspect-video h-auto w-[22vw] md:w-[22vw]">
+            <img
+              src={message2}
+              alt="Message"
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute right-[6rem] top-[2rem] flex w-[9vw] -translate-x-[2%] -translate-y-[0.2%] transform flex-col items-center md:w-[9vw]">
+              <div className="flex w-full flex-col items-center justify-center">
+                <p className="font-nanumPen text-lg text-black">
+                  24년에도 재밌는 추억 많이 쌓으면서 코딩해요!!😊
+                </p>
+                <p className="font-nanumPen mt-2 text-lg text-black">
+                  - 수현 -
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default JoonMessage3;

src/pages/GalleryTest.jsx

@@ -16,6 +16,8 @@ import Slider4 from '../components/Swiper/Slider4';
 import Slider5 from '../components/Swiper/Slider5';
 import Slider6 from '../components/Swiper/Slider6';
 
+import '../styles/custom.css';
+
 const textData = [
   ['4월 테커인의 낮', '테커 아이디어톤'],
   ['여름 부트캠프 행아웃데이', '8월 테커인의 낮'],
@@ -51,42 +53,49 @@ function GalleryTest() {
 
   return (
     <div className="bg-[rgba(255, 255, 255, 0.6)] overflow-hidden">
-      <div className="grid grid-cols-3 grid-rows-2 gap-6 mx-6 mt-32">
-        {galleryData.map((gallery, index) => (
-          <div key={index} className="flex h-[16rem]">
+      <div className="mx-6 mt-32 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {galleryData.map((gallery, index) => {
+          const isSpecialImage = index === 0 || index === 1; // 첫 번째와 두 번째 이미지에 대한 특별한 조건
+
+          return (
             <div
-              role="button"
-              tabIndex={0}
-              className="relative w-full h-full overflow-hidden cursor-pointer"
-              onClick={() => handleImageClick(gallery.slider)}
-              onKeyDown={(e) =>
-                e.key === 'Enter' && handleImageClick(gallery.slider)
-              }>
-              <div className="inset-0 flex items-center justify-center transition-shadow duration-300 bg-white opacity-70 hover:shadow-lg">
+              key={index}
+              className={`${isSpecialImage ? 'special-size' : 'h-auto'}`}>
+              <div
+                role="button"
+                tabIndex={0}
+                className="relative flex w-full cursor-pointer items-center justify-center bg-white opacity-70"
+                onClick={() => handleImageClick(gallery.slider)}
+                onKeyDown={(e) =>
+                  e.key === 'Enter' && handleImageClick(gallery.slider)
+                }>
                 <img
                   src={gallery.image}
                   loading="lazy"
                   alt={`img${index}`}
-                  className="object-cover object-center w-full h-full transition duration-300 ease-in-out transform hover:scale-105"
+                  className="h-auto w-full object-cover object-center transition duration-300 ease-in-out hover:scale-105"
                 />
-                <span className="absolute z-20 p-2 text-3xl font-bold text-white transform -translate-y-1/2 bg-gray-500 bg-opacity-50 rounded top-1/2 drop-shadow-md">
+                <span
+                  className="absolute top-1/2 z-10 -translate-y-1/2 transform rounded bg-gray-500 bg-opacity-50 px-2 text-white drop-shadow-md"
+                  style={{ fontSize: 'clamp(1.5rem, 1.5vw, 2.5rem)' }}>
                   {textData[Math.floor(index / 2)][index % 2]}
                 </span>
               </div>
             </div>
-            {activeSlider === gallery.slider && gallery.slider && (
-              <div className="relative z-10 w-full max-w-3xl p-4">
-                {gallery.slider &&
-                  React.createElement(gallery.slider, {
-                    onImageClick: handleImageClick,
-                    onClose: () => handleImageClick(gallery.slider), // 슬라이더를 다시 클릭하면 닫히게 함
-                    images: [gallery.image],
-                  })}
-              </div>
-            )}
-          </div>
-        ))}
+          );
+        })}
       </div>
+      {activeSlider && (
+        <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-50">
+          {React.createElement(activeSlider, {
+            onImageClick: handleImageClick,
+            onClose: () => setActiveSlider(null),
+            images: galleryData.find(
+              (gallery) => gallery.slider === activeSlider,
+            ).image,
+          })}
+        </div>
+      )}
     </div>
   );
 }

src/pages/MainPage.jsx

@@ -17,6 +17,12 @@ import GalleryTest from './GalleryTest';
 import moment from 'moment';
 import 'moment-timezone';
 
+import JoonMessage1 from '../components/JoonMessage1';
+import JoonMessage2 from '../components/JoonMessage2';
+import JoonMessage3 from '../components/JoonMessage3';
+
+import snowfield from '../../public/img/Message/snowfield.png';
+
 function MainPage() {
   const [openAuthenticationModal, setOpenAuthenticationModal] = useState(false);
   const [openMessage, setOpenMessage] = useState(false);
@@ -322,7 +328,6 @@ function MainPage() {
             alt="Moon"
           />
         )}
-
         {!hasToken && (
           <div className="font-omyu_pretty flex items-center justify-center p-5">
             <p className="mr-3 text-white">
@@ -385,6 +390,18 @@ function MainPage() {
             addMessage={addMessage}
           />
         )}
+        <div className="">
+          <img
+            src={snowfield}
+            className="absolute bottom-0 w-full"
+            alt="Snowfield Background"
+          />
+          <div className="z-20 flex flex-row">
+            <JoonMessage1 />
+            <JoonMessage2 />
+            <JoonMessage3 />
+          </div>
+        </div>
       </div>
 
       <div className="top-50 second-page fixed left-0 h-screen w-full overflow-hidden">