Feature/res mobile

src/components/Banner/index.tsx

@@ -38,11 +38,8 @@ const Home = () => {
       </S.TextContainer>
 
       <S.BannerImg>
-        <Image
-        src="/images/projects/Rocket.png"
-        fill alt="Rocket" />
+        <Image src="/images/projects/Rocket.png" fill alt="Rocket" />
       </S.BannerImg>
-
     </S.BannerContainer>
   );
 };

src/components/Banner/style.ts

@@ -75,13 +75,16 @@ export const MobileText = styled.p`
   }
 
   @media (max-width: 390px) {
-    font-size: 6vw;
+    font-size: 5vw;
+    line-height: 1.5rem;
   }
 `;
 
 export const BannerImg = styled.div`
   width: 21.875rem;
   height: 100%;
+  display: flex;
+  position: relative;
 
   img {
     position: relative !important;
@@ -107,5 +110,6 @@ export const BannerImg = styled.div`
     width: 40.6%;
     height: 74.3%;
     bottom: 0.4688rem;
+    right: 0;
   }
 `;

src/components/Card/index.tsx

@@ -60,6 +60,7 @@ const Card = ({
               <C.Modal
                 isDark={isDark}
                 show={showModal}
+                data={data}
                 onClose={handleCloseModal}
                 index={selectedId}
               />

src/components/Card/style.ts

@@ -97,8 +97,8 @@ export const Desc = styled.div`
   margin-left: 2rem;
 `;
 export const DetailBtn = styled.div`
-  width: 22px;
-  height: 22px;
+  width: 1.375rem;
+  height: 1.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -189,7 +189,7 @@ export const Creater = styled.div`
   font-size: 1.25rem;
   font-weight: 600;
   @media (max-width: ${({ theme }) => theme.breakPoint.tablet}) {
-    font-size: 16px;
+    font-size: 1rem;
   }
   transition: ease-in-out 0.3s;
 `;

src/components/Category/style.ts

@@ -12,4 +12,10 @@ export const Categories = styled.div<{ isDark: boolean }>`
   transition: ease-in-out 0.3s;
   color: ${({ theme }) => theme.exception.categories};
   background-color: ${({ theme }) => theme.exception.back};
+
+  @media (max-width: ${({ theme }) => theme.breakPoint.mobile}) {
+    border-radius: 2.8vw;
+    font-size: 2.5vw;
+    height: 2.5vh;
+  }
 `;

src/components/MainContainer/index.tsx

@@ -20,13 +20,16 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
 
   const handlePrevSlide = () => {
     if (slideIndex === 0) {
-      setSlideIndex(project.length % tabletCardBox);
+      setSlideIndex((project.length % tabletCardBox) - 1);
     } else {
       setSlideIndex(slideIndex - 1);
     }
   };
   const handleNextSlide = () => {
-    if (slideIndex > Math.floor(project.length / tabletCardBox)) {
+    if (
+      slideIndex >
+      Math.floor(project.length / tabletCardBox) - (width > 1150 ? 0 : 1)
+    ) {
       setSlideIndex(0);
     } else {
       setSlideIndex(slideIndex + 1);
@@ -45,7 +48,6 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
         <div
           css={css`
             display: flex;
-
             width: 81vw;
             height: 81vw;
             flex-wrap: wrap;
@@ -80,9 +82,14 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
               margin-right: 3.125rem;
               z-index: 1000000000;
               cursor: pointer;
+
               @media (max-width: 1150px) {
                 margin-right: 1.875rem;
               }
+
+              @media (max-width: 620px) {
+                display: none;
+              }
             `}
             alt=""
             onClick={handlePrevSlide}
@@ -96,7 +103,28 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
                   </div>
                 ))
               ) : width <= 620 ? (
-                <div></div>
+                <div
+                  css={css`
+                    width: 100%;
+                    height: 100%;
+                  `}
+                >
+                  <S.MobileCardTitle>등록된 프로젝트</S.MobileCardTitle>
+                  <S.MobileCardWrap>
+                    {project.map((data, slideIndex) => {
+                      return (
+                        <div
+                          key={slideIndex}
+                          css={css`
+                            width: 100%;
+                          `}
+                        >
+                          <C.MobileCard isDark={isDark} data={data} />
+                        </div>
+                      );
+                    })}
+                  </S.MobileCardWrap>
+                </div>
               ) : (
                 tabletCardShow(project, 4)
               )}
@@ -112,9 +140,14 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
               margin-left: 3.125rem;
               z-index: 1000000000;
               cursor: pointer;
-              @media (max-width: 71.875rem) {
+
+              @media (max-width: 1150px) {
                 margin-left: 1.875rem;
               }
+
+              @media (max-width: 620px) {
+                display: none;
+              }
             `}
             onClick={handleNextSlide}
           />

src/components/MainContainer/style.ts

@@ -10,11 +10,12 @@ export const MainBox = styled.div`
 
   @media (max-width: ${({ theme }) => theme.breakPoint.tablet}) {
     padding-top: 2rem;
-    height: 95vh !important;
+    height: 100vh;
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoint.mobile}) {
     padding-top: 0;
+    height: 100vh;
   }
 
   transition: ease-in-out 0.3s;
@@ -30,8 +31,14 @@ export const CardContainer = styled.div`
 
   @media (max-width: ${({ theme }) => theme.breakPoint.tablet}) {
     margin-top: 3.125rem;
-    padding-bottom: 50px;
+    padding-bottom: 3.125rem;
   }
+
+  @media (max-width: ${({ theme }) => theme.breakPoint.mobile}) {
+    margin-top: 2.5rem;
+  }
+  transition: ease-in-out 0.3s;
+
   background-color: ${({ theme: { gray } }) => gray[0]};
 `;
 
@@ -40,6 +47,12 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   width: 79.0625rem;
+  @media (max-width: ${({ theme }) => theme.breakPoint.tablet}) {
+  }
+  @media (max-width: ${({ theme }) => theme.breakPoint.mobile}) {
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 export const Cards = styled.div`
@@ -54,6 +67,29 @@ export const Cards = styled.div`
     width: 81vw;
     height: 81vw;
   }
+
+  @media (max-width: ${({ theme }) => theme.breakPoint.mobile}) {
+    width: 87.6vw;
+    height: 75vh;
+    overflow: scroll;
+  }
+`;
+
+export const MobileCardTitle = styled.h2`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 4vw;
+  line-height: 1.5625rem;
+  letter-spacing: -0.03em;
+  color: ${({ theme }) => theme.exception.cardTitle};
+  margin-bottom: 0.75rem;
+  width: 71.25rem;
+  width: 87.6vw;
+`;
+
+export const MobileCardWrap = styled.div`
+  width: 87.6vw;
+  height: 10vh;
 `;
 
 export const SlideBox = styled.div`

src/components/MobileCard/index.tsx

@@ -1,22 +1,74 @@
-// import * as S from './style';
-// import projectData from 'interface/projectData';
-// import Link from 'next/link';
+'use client';
+import * as S from './style';
+import projectData from 'interface/projectData';
+import { css } from '@emotion/react';
+import Image from 'next/image';
+import * as C from 'components';
+import { useState } from 'react';
 
-// const MobileCard = ({
-//   data,
-//   index,
-//   isDark,
-// }: {
-//   data: projectData;
-//   index: number;
-//   isDark: Boolean;
-// }) => {
-//   return (
-//     <S.Card>
-//       <Link href={data.projectUrl} target="_blank"></Link>
-//       <S.CardContents></S.CardContents>
-//     </S.Card>
-//   );
-// };
+export const MobileCard = ({
+  data,
+  isDark,
+}: {
+  data: projectData;
+  isDark: boolean;
+}) => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
-// export default MobileCard;
+  const handleOpenModal = (id: string) => {
+    setSelectedId(id);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+  return (
+    <>
+      {showModal && selectedId === data.id && (
+        <C.Modal
+          data={data}
+          isDark={isDark}
+          show={showModal}
+          onClose={handleCloseModal}
+          index={selectedId}
+        />
+      )}
+
+      <S.MobileCard isDark={isDark}>
+        <S.DetailBtn onClick={() => handleOpenModal(data.id)}>
+          상세보기
+        </S.DetailBtn>
+
+        <S.ContentWrap onClick={() => window.open(`${data.projectUrl}`)}>
+          <S.Logo>
+            <Image
+              src={data.projectLogoUri}
+              fill
+              alt="11"
+              css={css`
+                border-radius: 100%;
+              `}
+            ></Image>
+          </S.Logo>
+          <S.CardContents>
+            <S.Title>{data.projectName}</S.Title>
+            <S.Categories>
+              <S.Slide>
+                {data.categories.map(index => (
+                  <div key={index}>
+                    <C.Category data={index} isDark={isDark} />
+                  </div>
+                ))}
+              </S.Slide>
+            </S.Categories>
+          </S.CardContents>
+        </S.ContentWrap>
+        {/* </Link> */}
+      </S.MobileCard>
+    </>
+  );
+};
+
+export default MobileCard;