diff --git a/src/Pages/MainPage/MainPage.tsx b/src/Pages/MainPage/MainPage.tsx index 05dffb4..32223a5 100644 --- a/src/Pages/MainPage/MainPage.tsx +++ b/src/Pages/MainPage/MainPage.tsx @@ -14,6 +14,7 @@ const MainPage = () => { isOpenSideBar={isOpenSideBar} handleIsOpenSideBar={handleIsOpenSideBar} /> */} + {/* */} ); diff --git a/src/Styles/Icons.ts b/src/Styles/Icons.ts index 4b43cc4..56cb191 100644 --- a/src/Styles/Icons.ts +++ b/src/Styles/Icons.ts @@ -1,15 +1,17 @@ -import userIcon from "../assets/Icons/user.svg"; -import commentIcon from "../assets/Icons/comment.svg"; import commentHeartIcon from "../assets/Icons/comment-heart.svg"; -import removeIcon from "../assets/Icons/user-remove.svg"; +import commentIcon from "../assets/Icons/comment.svg"; +import reviewWriteIcon from "../assets/Icons/map-marker-plus.svg"; import reviewIcon from "../assets/Icons/review.svg"; import requestIcon from "../assets/Icons/terrace.svg"; -import reviewWriteIcon from "../assets/Icons/map-marker-plus.svg"; +import removeIcon from "../assets/Icons/user-remove.svg"; +import userIcon from "../assets/Icons/user.svg"; +import IconHeart from "../assets/images/ic_heartWhite.svg"; const Icons = { user: userIcon, comment: commentIcon, heart: commentHeartIcon, + boardHeart: IconHeart, remove: removeIcon, review: reviewIcon, request: requestIcon, diff --git a/src/assets/images/ic_add_location.png b/src/assets/images/ic_add_location.png new file mode 100644 index 0000000..a669de9 Binary files /dev/null and b/src/assets/images/ic_add_location.png differ diff --git a/src/assets/images/ic_board_sm_left.png b/src/assets/images/ic_board_sm_left.png new file mode 100644 index 0000000..a555194 Binary files /dev/null and b/src/assets/images/ic_board_sm_left.png differ diff --git a/src/assets/images/ic_heartWhite.svg b/src/assets/images/ic_heartWhite.svg new file mode 100644 index 0000000..38c5d7f --- /dev/null +++ b/src/assets/images/ic_heartWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/ic_location.png b/src/assets/images/ic_location.png new file mode 100644 index 0000000..0d2e994 Binary files /dev/null and b/src/assets/images/ic_location.png differ diff --git a/src/components/Board/components/BoardItem.tsx b/src/components/Board/components/BoardItem.tsx new file mode 100644 index 0000000..d7d2b35 --- /dev/null +++ b/src/components/Board/components/BoardItem.tsx @@ -0,0 +1,71 @@ +import { ReactComponent as IconHeart } from "../../../assets/images/ic_heartWhite.svg"; +import { IMAGES } from "../../../constants/images"; +import { BoardContentText, BoardTitleText } from "./BoardText"; +import * as W from "./styleBoardItem"; +const IconStyle: React.CSSProperties = { + width: "1.5625rem", + marginTop: "0.81rem", +}; +const lacationIconStyle: React.CSSProperties = { + width: "0.9375rem", + height: "1.25rem", + marginRight: "0.19rem", +}; +const moreIconStyle: React.CSSProperties = { + width: "2.1875rem", + height: "2.1875rem", +}; +const textArr = { + title: "한남동 핫플 카페", + content: + "로제도 다녀간 이번주 핫 한 카페임당 모두들 아인슈페너 시키시기를.... 또간집에서 여기 나오면 나 이제 못가.. 다들 그러기전에 얼른ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd", + tag: ["한남동", "카페", "블랙핑크"], + address: "마포구 마포대로 181 1층 구띠커피와인하우스", +}; +const BoardItem = () => { + const MAX_CONTENT_LENGTH = 100; + const truncatedContent = + textArr.content.length > MAX_CONTENT_LENGTH + ? textArr.content.slice(0, MAX_CONTENT_LENGTH) + " ...더보기" + : textArr.content; + return ( + + + + more + + + + + + + + + add + comment + + + + + {textArr.tag.map((idx, item) => ( + + ))} + + + location + + + + + rkdgml + + + + + ); +}; +export default BoardItem; diff --git a/src/components/Board/components/BoardText.tsx b/src/components/Board/components/BoardText.tsx new file mode 100644 index 0000000..bda513c --- /dev/null +++ b/src/components/Board/components/BoardText.tsx @@ -0,0 +1,25 @@ +const titleStyle: React.CSSProperties = { + color: "#FFF", + fontFamily: "Plus Jakarta Sans", + fontSize: "0.75rem", + fontStyle: "normal", + fontWeight: 700, + lineHeight: "normal", + marginBottom: "0.5rem", +}; +const contentStyle: React.CSSProperties = { + color: "#FFF", + fontFamily: "Plus Jakarta Sans", + fontSize: "0.75rem", + fontStyle: "normal", + fontWeight: 400, + lineHeight: "normal", +}; + +export const BoardTitleText = ({ title }: { title: string }) => { + return
{title}
; +}; + +export const BoardContentText = ({ content }: { content: string }) => { + return
{content}
; +}; diff --git a/src/components/Board/components/styleBoardItem.ts b/src/components/Board/components/styleBoardItem.ts new file mode 100644 index 0000000..af57f12 --- /dev/null +++ b/src/components/Board/components/styleBoardItem.ts @@ -0,0 +1,92 @@ +import styled from "styled-components"; + +export const BoardItemBackGournd = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.2); + z-index: 1000; +`; +export const BoardItemBackBox = styled.div<{ background: string }>` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 28.875rem; + height: 37.4375rem; + border-radius: 1.25rem; + z-index: 1001; + display: flex; + flex-direction: column; + background: url(${(props) => props.background}) lightgray 50% / cover + no-repeat; +`; + +export const BoardItemTop = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; + padding-right: 1.38rem; + margin-top: 1rem; +`; +export const BoardItemBottom = styled.div` + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + padding: 1.38rem; +`; + +export const BoardItemContentBox = styled.div` + display: flex; + flex-direction: column; + width: 80%; +`; +export const BoardItemMenuBox = styled.div` + width: 20%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; +`; +export const BoardItemBottomInfo = styled.div` + width: 100%; + display: flex; + padding: 0.62rem 1.38rem; + + flex-direction: column; +`; +export const BoardItemTagBox = styled.div` + width: 100%; + display: flex; + margin-bottom: 0.5rem; +`; +export const BoardItemAddreessBox = styled.div` + display: flex; + align-items: center; +`; + +export const BoardItemUserInfoBox = styled.div` + display: flex; + align-items: center; + margin-top: 0.5rem; +`; + +export const BoardItemUserInfoProflie = styled.div<{ proflie?: string }>` + width: 3.125rem; + height: 3.125rem; + border-radius: 50%; + background: url(${(props) => props.proflie}) lightgray 50% / cover no-repeat; +`; +export const BoardItemUserInfoName = styled.div` + color: #fff; + text-align: center; + font-family: "Plus Jakarta Sans"; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-left: 0.5rem; +`; diff --git a/src/constants/images.ts b/src/constants/images.ts index e9edd25..06b8ed9 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -1,21 +1,24 @@ export const IMAGES = { - mylocation: require("../assets/images/ic_my_location.png"), - //Logo - logoTripview: require("../assets/images/ic_logo_TRIPVIEW.png"), - searchIcon: require("../assets/images/ic_search.png"), - //Login - GoogleLogin: require("../assets/images/ic_googleLogin.png"), - // Main - groupColorBlue: require("../assets/images/ic_main_menu_group.png"), - groupColorWhite: require("../assets/images/ic_main_menu_group_white.png"), + mylocation: require("../assets/images/ic_my_location.png"), + //Logo + logoTripview: require("../assets/images/ic_logo_TRIPVIEW.png"), + searchIcon: require("../assets/images/ic_search.png"), + //Login + GoogleLogin: require("../assets/images/ic_googleLogin.png"), + // Main + groupColorBlue: require("../assets/images/ic_main_menu_group.png"), + groupColorWhite: require("../assets/images/ic_main_menu_group_white.png"), + commentBlack: require("../assets/images/ic_comment_black.png"), + heartColor: require("../assets/images/ic_heart_color.png"), - commentBlack: require("../assets/images/ic_comment_black.png"), - heartColor: require("../assets/images/ic_heart_color.png"), + location: require("../assets/images/ic_location.png"), + addLocation: require("../assets/images/ic_add_location.png"), + moreLeft: require("../assets/images/ic_board_sm_left.png"), - // My page - myReviewWhite: require("../assets/images/ic_my_review.png"), - myCommentWhite: require("../assets/images/ic_my_comment.png"), - myHeartWhite: require("../assets/images/ic_my_comment_heart.png"), - myRemveWhite: require("../assets/images/ic_user_remove.png"), -} \ No newline at end of file + // My page + myReviewWhite: require("../assets/images/ic_my_review.png"), + myCommentWhite: require("../assets/images/ic_my_comment.png"), + myHeartWhite: require("../assets/images/ic_my_comment_heart.png"), + myRemveWhite: require("../assets/images/ic_user_remove.png"), +};