Merge pull request #52 from TeamPiickle/feat/#47-login_modal

Feat/#47 login modal

src/asset/icon/index.ts

@@ -4,6 +4,7 @@ export { ReactComponent as IcCloseBtn } from "./closeBtn.svg";
 export { ReactComponent as IcEmptyHeart } from "./emptyHeart.svg";
 export { ReactComponent as IcFilterBtn } from "./filterBtn.svg";
 export { ReactComponent as IcFullHeart } from "./fullHeart.svg";
+export { ReactComponent as IcGrayHeart } from "./grayHeart.svg";
 export { ReactComponent as IcHamburger } from "./hamburger.svg";
 export { ReactComponent as IcLogo } from "./logo.svg";
 export { ReactComponent as IcMenuBarImg } from "./MenuBar Profile.svg";

src/components/CardCollection/Card/index.tsx

@@ -4,16 +4,25 @@ import CustomFullHeart from "../CustomFullHeart";
 import TagsSlider from "../TagsSlider";
 import { St } from "./style";
 
-export default function Card() {
+interface LoginCheckProps {
+  openLoginModalHandler: () => void;
+}
+
+export default function Card(props: LoginCheckProps) {
   const [isBookmarked, setIsBookmarked] = useState(false);
+  const { openLoginModalHandler } = props;
+  const handleClickHeart = () => {
+    setIsBookmarked((prev) => !prev);
+    openLoginModalHandler();
+  };
 
   return (
     <St.Card>
       <St.TagsWrapper>
         <TagsSlider tags={["재미", "if충", "if충", "if충", "if충", "if충", "if충", "if충", "if충x"]} />
       </St.TagsWrapper>
       <St.ContentWrapper>우리집공양추르하ㅐ</St.ContentWrapper>
-      <St.HeartWrapper onClick={() => setIsBookmarked((prev) => !prev)}>
+      <St.HeartWrapper onClick={handleClickHeart}>
         <St.IcEmptyHeart />
         {isBookmarked && <CustomFullHeart />}
       </St.HeartWrapper>

src/components/CardCollection/CardSlider/index.tsx

@@ -8,9 +8,9 @@ import LastCard from "../Card/LastCard";
 import { St } from "./style";
 
 interface CardSliderProps {
-  openHandler: () => void;
+  openFilterModalHandler: () => void;
+  openLoginModalHandler: () => void;
 }
-
 const sliderSettings = {
   className: "center",
   centerMode: true,
@@ -22,21 +22,21 @@ const sliderSettings = {
 };
 
 export default function CardSlider(props: CardSliderProps) {
-  const { openHandler } = props;
+  const { openFilterModalHandler, openLoginModalHandler } = props;
 
   return (
     <St.Wrapper>
       <Slider {...sliderSettings}>
-        <Card />
-        <Card />
-        <Card />
-        <Card />
-        <Card />
-        <Card />
+        <Card openLoginModalHandler={openLoginModalHandler} />
+        <Card openLoginModalHandler={openLoginModalHandler} />
+        <Card openLoginModalHandler={openLoginModalHandler} />
+        <Card openLoginModalHandler={openLoginModalHandler} />
+        <Card openLoginModalHandler={openLoginModalHandler} />
+        <Card openLoginModalHandler={openLoginModalHandler} />
         <LastCard />
       </Slider>
       {/* 마지막 index에서는 필터버튼 없애주기 */}
-      <St.IcFilterBtn onClick={openHandler} />
+      <St.IcFilterBtn onClick={openFilterModalHandler} />
     </St.Wrapper>
   );
 }

src/components/CardCollection/LoginModal/index.tsx

@@ -0,0 +1,25 @@
+import { IcGrayHeart } from "../../../asset/icon/index";
+import Modal from "../../common/Modal";
+import { St } from "./style";
+
+interface LoginCheckProps {
+  closeHandler: () => void;
+}
+
+export default function LoginModal(props: LoginCheckProps) {
+  const { closeHandler } = props;
+  return (
+    <Modal closeHandler={closeHandler}>
+      <St.Container>
+        <St.Wrapper>
+          <IcGrayHeart />
+          <St.ModalContents>로그인을 하시면 북마크 기능인 마이피클을 이용할 수 있어요!</St.ModalContents>
+        </St.Wrapper>
+        <St.Buttons>
+          <St.LoginButton to="/login">로그인</St.LoginButton>
+          <St.SignUpButton>회원가입</St.SignUpButton>
+        </St.Buttons>
+      </St.Container>
+    </Modal>
+  );
+}

src/components/CardCollection/LoginModal/style.ts

@@ -0,0 +1,80 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+export const St = {
+  Container: styled.section`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 6rem;
+
+    margin-top: 5rem;
+    height: 13.6rem;
+    background: #eef5f3;
+  `,
+
+  Wrapper: styled.div`
+    display: flex;
+    gap: 2rem;
+  `,
+
+  ModalContents: styled.p`
+    width: 16.5rem;
+
+    letter-spacing: -0.03rem;
+    ${({ theme }) => theme.fonts.body4};
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+
+  Buttons: styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0rem;
+    gap: 0.8rem;
+
+    width: 29.6rem;
+    height: 3.6rem;
+  `,
+
+  LoginButton: styled(Link)`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0.8rem 4.8rem;
+    gap: 0.8rem;
+
+    width: 14.4rem;
+    height: 3.6rem;
+    background: ${({ theme }) => theme.colors.white};
+
+    box-shadow: 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
+    border-radius: 4.7rem;
+
+    letter-spacing: -0.03rem;
+    ${({ theme }) => theme.fonts.btn1};
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+
+  SignUpButton: styled.button`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0.8rem 4.8rem;
+    gap: 0.8rem;
+
+    width: 14.4rem;
+    height: 3.6rem;
+    background: ${({ theme }) => theme.colors.white};
+
+    box-shadow: 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
+    border-radius: 4.7rem;
+
+    letter-spacing: -0.03rem;
+    ${({ theme }) => theme.fonts.btn1};
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+};

src/components/CardCollection/index.tsx

@@ -3,22 +3,42 @@ import { useState } from "react";
 import Header from "../common/Header";
 import CardSlider from "./CardSlider";
 import FilterModal from "./FilterModal";
+import LoginModal from "./LoginModal";
 import { St } from "./style";
 
 export default function CardCollection() {
   const [isOpened, setIsOpened] = useState<boolean>(false);
+  const [isLoginOpened, setLoginOpened] = useState<boolean>(false);
 
   const openModal = () => {
     setIsOpened(true);
   };
+
   const closeModal = () => {
     setIsOpened(false);
   };
 
+  const openLoginModal = () => {
+    setLoginOpened(true);
+  };
+
+  const closeLoginModal = () => {
+    setLoginOpened(false);
+  };
+
+  const clickHandleFilterModal = () => {
+    openModal();
+  };
+
+  const clickHandleLoginModal = () => {
+    openLoginModal();
+  };
+
   return (
     <St.MainPage>
       <Header />
-      <CardSlider openHandler={openModal} />
+      <CardSlider openFilterModalHandler={clickHandleFilterModal} openLoginModalHandler={clickHandleLoginModal} />
+      {isLoginOpened && <LoginModal closeHandler={closeLoginModal} />}
       {isOpened && <FilterModal closeHandler={closeModal} />}
     </St.MainPage>
   );

src/components/Main/Footer/style.ts

@@ -6,7 +6,6 @@ export const St = {
     position: relative;
     padding-bottom: 30rem;
     height: 22rem;
-
     background-color: ${({ theme }) => theme.colors.gray100};
   `,
 
@@ -24,11 +23,7 @@ export const St = {
 
   BasicInfoTitle: styled.li`
     height: 1.7rem;
-
     ${({ theme }) => theme.fonts.footer1};
-
-    font-family: "Pretendard";
-
     color: ${({ theme }) => theme.colors.bg};
   `,
 
@@ -46,9 +41,7 @@ export const St = {
   ServiceInfoTitle: styled.li`
     height: 1.7rem;
     margin-bottom: 0.3rem;
-
     ${({ theme }) => theme.fonts.footer1};
-
     color: ${({ theme }) => theme.colors.bg};
   `,