Merge branch 'main' of https://github.com/2023WISCOM/WISCOM-FE into f…

…eature/#10-guestbook
2023WISCOM · Nov 2, 2023 · 0638de8 · 0638de8
2 parents 7d66f53 + 2128276
commit 0638de8
Show file tree

Hide file tree

Showing 15 changed files with 470 additions and 76 deletions.
diff --git a/WISCOM/src/Router.jsx b/WISCOM/src/Router.jsx
@@ -4,6 +4,7 @@ import Main from './page/Main';
 import Guestbook from './page/Guestbook';
 import Project from './page/Project';
 import Developer from './page/Developer';
+import Map from './page/Map';
 import Nav from './components/common/Nav/Nav';
 
 function AppNavigation() {
@@ -27,6 +28,7 @@ function AppNavigation() {
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/guestbook" element={<Guestbook />} />
+          <Route path="/map" element={<Map />} />
           <Route path="/project/:post_id" element={<Project />} />
           <Route path="/developer" element={<Developer />} />
         </Routes>
@@ -52,4 +54,7 @@ const GlobalWrapper = styled.main`
   @media screen and (max-width: 833px) {
     padding: 5rem;
   }
+  @media screen and (max-width: 400px) {
+    padding: 3rem;
+  }
 `;
diff --git a/WISCOM/src/components/Main/Folder.jsx b/WISCOM/src/components/Main/Folder.jsx
@@ -6,7 +6,7 @@ export default function Folder() {
   return (
     <>
       <F.FolderWrapper>
-        <F.FolderGroup href="/project">
+        <F.FolderGroup href="/map">
           <motion.div
             whileHover={{
               scale: 1.2,

diff --git a/WISCOM/src/components/Map/MapStyle.jsx b/WISCOM/src/components/Map/MapStyle.jsx
@@ -0,0 +1,145 @@
+import styled from 'styled-components';
+
+export const MapContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Floorplan = styled.div`
+  position: relative;
+  width: 300px;
+  height: 450px;
+  border: 2.5px solid black;
+  margin: 0 auto;
+
+  @media screen and (max-width: 400px) {
+    width: 280px;
+  }
+  @media screen and (max-width: 350px) {
+    width: 250px;
+  }
+`;
+
+export const Title = styled.div`
+  color: #000;
+  text-align: center;
+  font-size: 35px;
+  font-style: normal;
+  font-weight: 600;
+  margin-bottom: 30px;
+`;
+
+export const Room = styled.div`
+  position: absolute;
+  width: 50px;
+  height: 80px;
+  border: 2px solid black;
+  background-color: #fff;
+  border-radius: 10px;
+
+  font-size: 20px;
+  padding: 5px 0 0 5px;
+
+  @media screen and (max-width: 350px) {
+    width: 40px;
+    height: 80px;
+  }
+`;
+
+export const RoomR = styled.div`
+  position: absolute;
+  width: 80px;
+  height: 50px;
+  border: 2px solid black;
+  background-color: #fff;
+  border-radius: 10px;
+  font-size: 20px;
+  padding: 5px 0 0 5px;
+
+  @media screen and (max-width: 350px) {
+    width: 70px;
+    height: 40px;
+  }
+`;
+
+export const Info = styled.div`
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  width: 50px;
+  height: 50px;
+  border: 2px solid black;
+  text-align: center;
+  line-height: 50px;
+  font-size: 15px;
+  background-color: #fff;
+
+  @media screen and (max-width: 400px) {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+export const Door = styled.div`
+  position: absolute;
+  background-color: #ffffff;
+  z-index: 2;
+
+  bottom: -20px;
+  left: 230px;
+  width: 50px;
+  height: 60px;
+
+  @media screen and (max-width: 400px) {
+    bottom: -20px;
+    left: 215px;
+    width: 50px;
+    height: 60px;
+  }
+  @media screen and (max-width: 350px) {
+    bottom: -20px;
+    left: 200px;
+    width: 50px;
+    height: 30px;
+  }
+`;
+
+export const LineContainer = styled.div`
+  :nth-of-type(1) {
+    top: 0px;
+    left: 220px;
+    width: 10px;
+    height: 180px;
+  }
+
+  :nth-of-type(2) {
+    top: 180px;
+    left: 220px;
+    width: 78px;
+    height: 10px;
+  }
+`;
+export const Line = styled.div`
+  position: absolute;
+  background-color: #000000;
+  z-index: 2;
+
+  @media screen and (max-width: 400px) {
+    &:nth-child(2) {
+      width: 59px;
+    }
+  }
+
+  @media screen and (max-width: 350px) {
+    &:nth-child(1) {
+      left: 200px;
+    }
+    &:nth-child(2) {
+      top: 180px;
+      left: 200px;
+      width: 48px;
+      height: 10px;
+    }
+  }
+`;
diff --git a/WISCOM/src/components/Map/MapWrapper.jsx b/WISCOM/src/components/Map/MapWrapper.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import * as M from './MapStyle';
+
+export default function MapWrapper() {
+  const [activeTeamIndex, setActiveTeamIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveTeamIndex((prevIndex) => (prevIndex + 1) % 11);
+    }, 2000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <M.MapContainer>
+      <M.Title>WISCOM MAP</M.Title>
+      <M.Floorplan>
+        <M.RoomR
+          style={{
+            top: '10px',
+            left: '100px',
+            backgroundColor: activeTeamIndex === 0 ? '#7ce06b' : undefined,
+          }}>
+          01
+        </M.RoomR>
+        <M.Room style={{ top: '100px', left: '10px', backgroundColor: activeTeamIndex === 1 ? '#7ce06b' : undefined }}>
+          02
+        </M.Room>
+        <M.Room style={{ top: '100px', left: '90px', backgroundColor: activeTeamIndex === 2 ? '#7ce06b' : undefined }}>
+          03
+        </M.Room>
+        <M.Room style={{ top: '100px', left: '150px', backgroundColor: activeTeamIndex === 3 ? '#7ce06b' : undefined }}>
+          04
+        </M.Room>
+        <M.Room style={{ top: '190px', left: '150px', backgroundColor: activeTeamIndex === 4 ? '#7ce06b' : undefined }}>
+          05
+        </M.Room>
+        <M.Room style={{ top: '190px', left: '90px', backgroundColor: activeTeamIndex === 5 ? '#7ce06b' : undefined }}>
+          06
+        </M.Room>
+        <M.Room style={{ top: '280px', left: '10px', backgroundColor: activeTeamIndex === 6 ? '#7ce06b' : undefined }}>
+          07
+        </M.Room>
+        <M.Room style={{ top: '280px', left: '90px', backgroundColor: activeTeamIndex === 7 ? '#7ce06b' : undefined }}>
+          08
+        </M.Room>
+        <M.RoomR
+          style={{ top: '280px', left: '150px', backgroundColor: activeTeamIndex === 9 ? '#7ce06b' : undefined }}>
+          10
+        </M.RoomR>
+        <M.RoomR
+          style={{ bottom: '10px', left: '30px', backgroundColor: activeTeamIndex === 8 ? '#7ce06b' : undefined }}>
+          09
+        </M.RoomR>
+        <M.RoomR
+          style={{ bottom: '10px', left: '125px', backgroundColor: activeTeamIndex === 10 ? '#7ce06b' : undefined }}>
+          11
+        </M.RoomR>
+
+        <M.Door />
+
+        <M.LineContainer>
+          <M.Line />
+          <M.Line />
+        </M.LineContainer>
+
+        <M.Info>Info</M.Info>
+      </M.Floorplan>
+    </M.MapContainer>
+  );
+}
diff --git a/WISCOM/src/components/Map/ProjectList.jsx b/WISCOM/src/components/Map/ProjectList.jsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+import * as MP from './ProjectListStyle';
+
+export default function ProjectList() {
+  const [activeTeamIndex, setActiveTeamIndex] = useState(0);
+
+  const TeamList = [
+    { team: 'HATCH', service: 'Pocket Pose : PoPo' },
+    { team: 'DRAKE', service: 'FREN:SEND' },
+    { team: 'HIGHFIVE', service: '아트어리' },
+    { team: '딱꼼', service: '어댄고(Urdango)' },
+    { team: 'IDEAL', service: 'DUK TO ME' },
+    { team: '내마음을UNLOCK', service: 'UNLOCK' },
+    { team: '클래스메이트', service: 'SchoolLog' },
+    { team: '한울', service: 'We:Lover' },
+    { team: '한소리', service: '실록 샐록' },
+    { team: '사현희있어요', service: '라-이터' },
+    { team: 'AFORE', service: 'Fairy Tale' },
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveTeamIndex((prevIndex) => (prevIndex + 1) % TeamList.length);
+    }, 2000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  const onClickPrj = (index) => {
+    window.location.href = `project/${index}`;
+  };
+  return (
+    <>
+      <MP.ListWrapper>
+        {TeamList.map(({ team, service }, index) => (
+          <MP.Team
+            key={team}
+            onClick={() => onClickPrj(index)}
+            style={{
+              color: activeTeamIndex === index ? '#7ce06b' : 'black',
+            }}>
+            {String(index + 1).padStart(2, '0')}.{team} - {service}
+          </MP.Team>
+        ))}
+      </MP.ListWrapper>
+    </>
+  );
+}
diff --git a/WISCOM/src/components/Map/ProjectListStyle.jsx b/WISCOM/src/components/Map/ProjectListStyle.jsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const ListWrapper = styled.div`
+  margin-top: 5rem;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (max-width: 760px) and (min-width: 685px) {
+    padding-left: 3rem;
+  }
+`;
+
+export const Team = styled.div`
+  color: #000;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+
+  letter-spacing: 1px;
+  line-height: 50px;
+
+  @media screen and (max-width: 400px) {
+    font-size: 15px;
+  }
+  @media screen and (max-width: 350px) {
+    font-size: 13px;
+  }
+
+  &:hover {
+    color: #7ce06b;
+  }
+`;
diff --git a/WISCOM/src/components/Project/Developer.jsx b/WISCOM/src/components/Project/Developer.jsx
@@ -1,5 +1,3 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom'; // useParams 가져오기
 import * as D from './ProjectStyle';
 import DeveloperProfile from './DeveloperProfile.jsx';
 
@@ -9,24 +7,7 @@ import BackYellow from '../../img/Project/BackgroundYellow.svg';
 
 const backgroundImages = [BackGreen, BackBlue, BackGreen, BackYellow];
 
-// 재사용 쉽도록 수정
-const Developer = () => {
-  const [data, setData] = useState(null);
-  const { post_id } = useParams();
-
-  useEffect(() => {
-    // 정적 URL을 사용하여 데이터를 가져옵니다.
-    fetch(`https://dswuwis.store/posts/${post_id}/`, {
-      method: 'GET',
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        setData(data);
-        console.log('가져와짐'); // 데이터를 성공적으로 가져온 후에 로깅
-      })
-      .catch((error) => console.error('Error fetching data:', error));
-  }, [post_id]);
-
+const Developer = ({ data }) => {
   return (
     <D.DeveloperContainer>
       {data && (

diff --git a/WISCOM/src/components/Project/ImageSlider.jsx b/WISCOM/src/components/Project/ImageSlider.jsx
@@ -13,8 +13,9 @@ const ImageSlider = () => {
   const [showArrows, setShowArrows] = useState(false);
 
   useEffect(() => {
+    const nextPostId = Number(post_id) + 1;
     // 정적 URL을 사용하여 데이터를 가져옵니다.
-    fetch(`https://dswuwis.store/posts/${post_id}/`, {
+    fetch(`http://13.124.248.135/posts/${nextPostId}/`, {
       method: 'GET',
     })
       .then((response) => response.json())
@@ -56,7 +57,7 @@ const ImageSlider = () => {
             <I.BannerImage
               key={index}
               className={`${index === currentIdx ? 'active' : ''}`}
-              src={`https://dswuwis.store/${image}`}
+              src={`http://13.124.248.135/${image}`}
               alt={`slide ${index}`}
             />
           ))}