Merge pull request #15 from Read-bird/feature/dw

feat: 베이직 모달, 덜 읽음 모달, 마이페이지 - 서재, 도감 퍼블리싱

src/assets/icons/IconArrLeftWhite.tsx

@@ -0,0 +1,8 @@
+export const IconArrLeftWhite = () => {
+    return(
+        <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.93934 13.0607C0.353553 12.4749 0.353553 11.5251 0.93934 10.9393L10.4853 1.3934C11.0711 0.807611 12.0208 0.807611 12.6066 1.3934C13.1924 1.97919 13.1924 2.92893 12.6066 3.51472L4.12132 12L12.6066 20.4853C13.1924 21.0711 13.1924 22.0208 12.6066 22.6066C12.0208 23.1924 11.0711 23.1924 10.4853 22.6066L0.93934 13.0607ZM3 13.5H2V10.5H3V13.5Z" fill="white"/>
+        </svg>
+
+    )
+}

src/assets/icons/IconArrRightGray.tsx

@@ -0,0 +1,8 @@
+export const IconArrRightGray = () => {
+    return(
+        <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.0607 13.0607C13.6464 12.4749 13.6464 11.5251 13.0607 10.9393L3.51472 1.3934C2.92893 0.807611 1.97919 0.807611 1.3934 1.3934C0.807611 1.97919 0.807611 2.92893 1.3934 3.51472L9.87868 12L1.3934 20.4853C0.807611 21.0711 0.807611 22.0208 1.3934 22.6066C1.97919 23.1924 2.92893 23.1924 3.51472 22.6066L13.0607 13.0607ZM11 13.5H12V10.5H11V13.5Z" fill="#ABABAB"/>
+        </svg>
+    )
+}
+

src/assets/icons/index.tsx

@@ -10,3 +10,5 @@ export * from './IconProgress';
 export * from './IconReact';
 export * from './IconSearch';
 export * from './IconSuccess';
+export * from './IconArrRightGray';
+export * from './IconArrLeftWhite';

src/components/common/Search/SearchList.tsx

@@ -1,11 +1,12 @@
 import {TBookDetail} from "@api/types/book";
 import styled from "styled-components";
+import {Dispatch, SetStateAction} from "react";
 
 type TProps = {
     bookList: [];
     searchWord: string | null;
-    setIsSearch: any;
-    setSelectBook: any;
+    setIsSearch: Dispatch<SetStateAction<boolean>>;
+    setSelectBook: Dispatch<SetStateAction<any>>;
 }
 
 export const SearchList = ({

src/components/templates/MyPage/BackTitle.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import {IconArrLeftWhite} from "@/assets";
+import {useNavigate} from "react-router-dom";
+
+type TProps = {
+    title: string;
+}
+
+export const BackTitle = ({title}: TProps) => {
+
+    const navigate = useNavigate();
+
+    return(
+        <StyledTitle>
+            <span onClick={() => navigate(-1)}><IconArrLeftWhite /></span>
+            <h2>{title}</h2>
+        </StyledTitle>
+    )
+}
+
+const StyledTitle = styled.div`
+    position: relative;
+  width: 100%;
+  text-align: center;
+  span{
+    position: absolute;
+    left: 22px; top: 0;
+    cursor: pointer;
+  }
+  h2{
+    color: #FFF;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0.16px;
+  }
+`

src/components/templates/MyPage/MyEncyclopediaTemplate/EncyclopediaList.tsx

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import {PlanModalTemplate} from "@components/templates/PlanModalTemplate";
+import {useState} from "react";
+
+export const EncyclopediaList = () => {
+
+    const dummy = [
+        {
+            characterId: 1,
+            characterImg: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA5MjBfMjcw%2FMDAxNjk1MTkyNTk2NzU5.se6L3TYbDZiOH6RU5nEZ6txbZ_C7tJTxpQnnwuySRjYg.vEtVB1n0kWmewRwBlxnsCHU_5B1FoZ6bb7QOqhXnE2Yg.PNG.himelife%2F25.png&type=sc960_832",
+            title: "캐릭터명"
+        },
+        {
+            characterId: 2,
+            characterImg: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA5MjBfMjcw%2FMDAxNjk1MTkyNTk2NzU5.se6L3TYbDZiOH6RU5nEZ6txbZ_C7tJTxpQnnwuySRjYg.vEtVB1n0kWmewRwBlxnsCHU_5B1FoZ6bb7QOqhXnE2Yg.PNG.himelife%2F25.png&type=sc960_832",
+            title: "캐릭터명"
+        },        {
+            characterId: 3,
+            characterImg: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA5MjBfMjcw%2FMDAxNjk1MTkyNTk2NzU5.se6L3TYbDZiOH6RU5nEZ6txbZ_C7tJTxpQnnwuySRjYg.vEtVB1n0kWmewRwBlxnsCHU_5B1FoZ6bb7QOqhXnE2Yg.PNG.himelife%2F25.png&type=sc960_832",
+            title: "캐릭터명"
+        },        {
+            characterId: 4,
+            characterImg: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA5MjBfMjcw%2FMDAxNjk1MTkyNTk2NzU5.se6L3TYbDZiOH6RU5nEZ6txbZ_C7tJTxpQnnwuySRjYg.vEtVB1n0kWmewRwBlxnsCHU_5B1FoZ6bb7QOqhXnE2Yg.PNG.himelife%2F25.png&type=sc960_832",
+            title: "캐릭터명"
+        }
+    ]
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleClick = (id: number) => {
+        setIsOpen(true);
+    }
+
+    return(
+        <StyledUl>
+            {dummy?.map(item => (
+                <li key={item.characterId} onClick={() => handleClick(item.characterId)}>
+                    <div>
+                        <img src={item.characterImg} alt="character-img"/>
+                    </div>
+                    <span>{item.title}</span>
+                </li>
+            ))}
+
+            <PlanModalTemplate
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+                modalIndex={4}
+            />
+        </StyledUl>
+    )
+}
+
+const StyledUl = styled.ul`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-top: 36px;
+    li{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 33.33%;
+      margin-bottom: 30px;
+      cursor: pointer;
+      div{
+        display: flex;
+        width: 96px;
+        height: 96px;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 1px solid rgba(171, 171, 171, 1);
+        img{
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      span{
+        margin-top: 10px;
+      }
+    }
+`

src/components/templates/MyPage/MyEncyclopediaTemplate/MyEncyclopediaTemplate.tsx

@@ -0,0 +1,18 @@
+import {Body, Head, Wrap} from "@components/templates/HomeTemplate/Styled";
+import {BackTitle} from "@components/templates/MyPage/BackTitle";
+import {EncyclopediaList} from "@components/templates/MyPage/MyEncyclopediaTemplate/EncyclopediaList";
+
+export const MyEncyclopediaTemplate = () => {
+    return (
+        <Wrap>
+            <Head style={{paddingBottom: "10px", flex: "0 0 80px"}}>
+                <BackTitle
+                    title="나의 도감"
+                />
+            </Head>
+            <Body>
+                <EncyclopediaList />
+            </Body>
+        </Wrap>
+    )
+}

src/components/templates/MyPage/MyEncyclopediaTemplate/index.tsx

@@ -0,0 +1 @@
+export {MyEncyclopediaTemplate} from "./MyEncyclopediaTemplate"

src/components/templates/MyPage/MyLibraryTemplate/LibraryList.tsx

@@ -0,0 +1,120 @@
+import styled from "styled-components";
+import {Images} from "@/assets";
+
+export const LibraryList = () => {
+
+    const dummy = [
+        {
+            bookId: 1,
+            bookImg: "",
+            title: "데미안",
+            author: "헤르만 헤세",
+            publisher: "민음사",
+            totalPage: "240"
+        },
+        {
+            bookId: 2,
+            bookImg: "",
+            title: "데미안",
+            author: "데미안 길어지면데미안 길어지면데미안 길어지면데미안 길어지면",
+            publisher: "민음사",
+            totalPage: "240"
+        },
+        {
+            bookId: 3,
+            bookImg: "",
+            title: "데미안 길어지면 데미안 길어지면데미안 길어지면데미안 길어지면",
+            author: "헤르만 헤세",
+            publisher: "민음사",
+            totalPage: "240"
+        }
+    ]
+
+    return(
+        <StyledUl>
+            {dummy?.map((item, key) => (
+                <li key={key}>
+                    <div className="book-img">
+                        <Images
+                            imgUrl=""
+                            imgAlt="book-img"
+                        />
+                    </div>
+                    <div className="book-info">
+                        <h3>{item.title}</h3>
+                        <p>{item.author}</p>
+                        <p>{item.publisher}</p>
+                        <span>총 {item.totalPage}쪽</span>
+                    </div>
+                </li>
+            ))}
+        </StyledUl>
+    )
+}
+
+const StyledUl = styled.ul`
+  width: 100%;
+  margin-top: 36px;
+  padding: 0 13px;
+    li{
+      padding: 8px 12px;
+      border-radius: 20px;
+      background: rgba(227, 204, 242, 0.50);
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      margin-bottom: 15px;
+      &:last-child{
+        margin: 0;
+      }
+      .book-img{
+        border: 1px solid #ABABAB;
+        border-radius: 10px;
+        width: 70px; height: 104px;
+        overflow: hidden;
+        img{
+          width: 100%; height: 100%;
+          object-fit: cover;
+        }
+      }
+      
+      .book-info{
+        margin-left: 12px;
+        width: 70%;
+        h3{
+          color: #000;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 24px;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+        p{
+          color: #747474;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0.08px;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+        span{
+          color: #747474;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0.08px;
+          display: block;
+          margin-top: 18px;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
+    }
+`

src/components/templates/MyPage/MyLibraryTemplate/MyLibraryTemplate.tsx

@@ -0,0 +1,18 @@
+import {Body, Head, Wrap} from "@components/templates/HomeTemplate/Styled";
+import {BackTitle} from "@components/templates/MyPage/BackTitle";
+import {LibraryList} from "@components/templates/MyPage/MyLibraryTemplate/LibraryList";
+
+export const MyLibraryTemplate = () => {
+    return(
+        <Wrap>
+            <Head style={{paddingBottom: "10px", flex: "0 0 80px"}}>
+                <BackTitle
+                    title="나의 서재"
+                />
+            </Head>
+            <Body>
+                <LibraryList />
+            </Body>
+        </Wrap>
+    )
+}

src/components/templates/MyPage/MyLibraryTemplate/index.tsx

@@ -0,0 +1 @@
+export {MyLibraryTemplate} from "./MyLibraryTemplate";

src/components/templates/MyPageTemplate/MyBanner.tsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import {Alert} from "@/utils";
+
+export const MyBanner = () => {
+
+    const handleClick = () => {
+        Alert.warning({
+            title: "아직 준비중이에요."
+        })
+    }
+
+    return(
+        <StyledBanner onClick={handleClick}></StyledBanner>
+    )
+}
+
+const StyledBanner = styled.div`
+  margin-top: 9px;
+  border-radius: 50px;
+  border: 2px solid #ABABAB;
+  background: #EFEFF0;
+  width: 366px;
+  height: 70px;
+  cursor: pointer;
+`