diff --git a/client/components/BrandFocus.tsx b/client/components/BrandFocus.tsx new file mode 100644 index 0000000..bd24cc3 --- /dev/null +++ b/client/components/BrandFocus.tsx @@ -0,0 +1,119 @@ +import Link from "next/link"; +import React from "react"; + +function BrandFocus() { + return ( +
+
+
+ Brand Focus +
+
추천 브랜드
+
+ {/* map 함수가 return값이 필요해서 return 해와야 된다라고 오인 */} + {BrandArray1.map((item, i) => ( +
+ + + +
+ {item?.name} +
+
+ ))} +
+
+
+ ); +} + +export default BrandFocus; + +interface Brand { + name: string; + ImageUrl: string; +} + +const BrandArray1: Array = [ + { + name: "애플", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfNTMg/MDAxNjYxMTMyMzQ4Njg5.RsvtKwAj6FHj1FDDL5TY1ycECnCPB12EttYPY5M1gBsg.vpRsBYsFuP-GSd4ODRJe2P4TkiVFE9Buu6Yj777Kesog.JPEG/a_d8ca5e787c1a47f086c405177abc9694.jpg?type=m_webp", + }, + { + name: "루이비통", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA5MzBfMTM2/MDAxNjY0NTM2NDQ2MzQ5.kC1qMK6mltl0PvSNqWiq3KroRn067Mbae-OzlEnwMEQg.jcAazVYaMq-ZB6fewYkisfqBQIIK6n6L59h_1PpKwaUg.JPEG/a_8a407a9e001a425ab4c10864c6fd273d.jpg?type=m_webp", + }, + { + name: "강혁", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjEwMDdfMTQ2/MDAxNjY1MTM0ODc5Mzcx.hWLeBlp0yyEWGq6goJeMLPoSZTTgufx7_2wLDPvOLeYg.xycA1YUscG0NS63oPgVIpxoMhLt_2z-n_Xz4zqApRE8g.JPEG/a_e9f65e8566144b8e8aaf25ab788969dd.jpg?type=m_webp", + }, + { + name: "우영미", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMjUy/MDAxNjYxMTMyNTE3NDkw.WBGPz7YTPljlTjBVVGNKHY8a0UohliA2ahbwJmqF4rAg.4QYXLQna4D-CHul0MSeru4vP1dcn-qRVkPDuezT3_5sg.JPEG/a_5f636bae775f4b5f8538d969e6916238.jpg?type=m_webp", + }, + { + name: "에르메스", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMTU2/MDAxNjYxMTMyMjc3ODYy.o_bZ8NwB1fDxBycvBadiwSjJ3sJrAfNcgzHXZO3SCskg.U9-45gdxEevSSwnM8xAHqDBdIsBhbR4TCwK3xrBmMaIg.JPEG/a_41ee4f97c403419784fe145cbfe9e950.jpg?type=m_webp", + }, + { + name: "발렌시아가", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMjgw/MDAxNjYxMTMyNTAwODI0.uvibwIpVXKhBYiNd5gCCRH-W0qk-RX3J1FXF58o69nMg.aa6DHYk0_42QwB5scZ2taZL8WGKmfkcMlOMWl9AV5z0g.JPEG/a_4ed967e942554a14a5687b0d527bbe58.jpg?type=m_webp", + }, + { + name: "아크테릭스", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA5MzBfMjMz/MDAxNjY0NTM2NzM2Mzc1.6w2bcZkBccLv112TzFBOvWKzBsx8qE4A4Q4ODq5uz6Ig.qOOuTt5_Ch5khC3ODXUGnh1s1ErTwxg42w4fG2lzzDAg.JPEG/a_54af49e527524cdc98db28d6fb1ffade.jpg?type=m_webp", + }, + { + name: "렉토", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjEwMDdfMTEx/MDAxNjY1MTM0ODM4MDMw.HzVvSOi98fjQmP3oroAmNe2sR32FZDFbobzy7tjpIZ4g.reteIbS3HkHf-UxIRYF-BIHFxCpH1JrRcEFSmcJVxfMg.JPEG/a_02632df7a3a049e7b6037802a5a206b4.jpg?type=m_webp", + }, + { + name: "샤넬", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfODMg/MDAxNjYxMTMyMjY2NDU0.veNBMpvgteBr5I5SLuqNPHR8CkwWhEytMWZoG735frkg.PerHHfgDwBfbVU1BIwEXChh2_-w8u261iDgwUJiCp54g.JPEG/a_e37129ba9c134102b8f886ee9cfc5b57.jpg?type=m_webp", + }, + { + name: "디올", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMjM2/MDAxNjYxMTMyMzE0NTg5.f8aopPNBfz2TiMXJPHCA4cDSE564M-5m_1CVOqBaMJcg.LP8fIRuj3KwekpzWqPNM1E7udU5MgzCeyeVG5hL8oFog.JPEG/a_dd2fc85edf3b45e18d1c1b83180c004c.jpg?type=m_webp", + }, + { + name: "스톤 아일랜드", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMTgg/MDAxNjYxMTMyNDg5MzI4.91XVGjgCI_MCIl_wqButgXZUy7kdk_yXjOn2kg8y6AEg.dyIleHyozgiFkXvyk8pAn0SUAuz2IkwxqXxVC1Clb48g.JPEG/a_36de4c2d690d423ea5ba7a876b00ebd3.jpg?type=m_webp", + }, + { + name: "롤렉스", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMTgy/MDAxNjYxMTMyMzI1ODY2.omWU_zpi2-_4IK9XyTPQFDfqADR6p8yqhK_VdchChFwg.h2JuTtFOH763vLDGZIbMj2HC53joOaME44CbdEjGaA0g.JPEG/a_080b41c445b94290b693aa53a8751fc5.jpg?type=m_webp", + }, + , + { + name: "보테가 베네타", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMTY2/MDAxNjYxMTMyNDE3MDg1.NH05zJR5hBf3wHvQNhnvKLVxlGLtXBwaLYNuxsXQL78g.B2wHGjWAx_2n6oXfK4gy92vHpu7hbjin0U_XNwa8mlcg.JPEG/a_fe6d110270b4422e9d35b90e66a3235d.jpg?type=m_webp", + }, + , + { + name: "셀린느", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfMTEw/MDAxNjYxMTMyNDI3Njg4.gNnZj-Nb_7BNlNaJ0KMwEoxtp1E3O_PYvNFiwz0USPEg.cVgu4uf4pB24POhPepRYihXTIG146a9_iShSKfCPFnsg.JPEG/a_ecbebc5f0f354369bac78d86766ed990.jpg?type=m_webp", + }, + , + { + name: "프라다", + ImageUrl: + "https://kream-phinf.pstatic.net/MjAyMjA4MjJfNTAg/MDAxNjYxMTMyNDY2ODM1.IYpY8jJHjZTN9g-Yjc9HJ3x7npeZ-0VCrMr4KApSSNMg.a_Wtikd-hRYxM1nImn9s94MVpuzoLz04JPpGOvQM52Mg.JPEG/a_1d7ab41649cc478988f6759f8d6c2bc0.jpg?type=m_webp", + }, +]; diff --git a/client/components/Carousel.tsx b/client/components/Carousel.tsx new file mode 100644 index 0000000..5452a14 --- /dev/null +++ b/client/components/Carousel.tsx @@ -0,0 +1,117 @@ +import icons from "./icons"; +import { useState, useEffect, useCallback, MouseEvent } from "react"; +import { cls, cycler } from "../utils"; +import { Picture } from "../types"; + +interface Props { + pictures: Picture[]; +} + +const Carousel = ({ pictures }: Props) => { + const [selected, setSelected] = useState(0); + const [dragState, setDragState] = useState({ + startPoint: 0, + isDragging: false, + isFlipped: false, + }); + const pictureCycler = cycler(pictures.length); + const handleChangeLeft = () => { + setSelected((cur) => pictureCycler(cur - 1)); + }; + const handleChangeRight = () => { + setSelected((cur) => pictureCycler(cur + 1)); + }; + const handleClickPicture = + (selected: number) => (event: MouseEvent) => { + console.log(selected); + console.log("event.target : ", event); + }; + const nextImage = useCallback(() => { + setSelected((cur) => pictureCycler(cur + 1)); + }, []); + useEffect(() => { + setInterval(nextImage, 5000); + }, []); + const handleDrag = (e: MouseEvent) => { + if (dragState.isFlipped) return; + if (e.nativeEvent.screenX - dragState.startPoint < -50) { + setSelected((cur) => pictureCycler(cur + 1)); + setDragState((cur) => ({ + ...cur, + isFlipped: true, + })); + } else if (e.nativeEvent.screenX - dragState.startPoint > 50) { + setSelected((cur) => pictureCycler(cur - 1)); + setDragState((cur) => ({ + ...cur, + isFlipped: true, + })); + } + }; + const handleDragStart = (e: MouseEvent) => { + setDragState(() => ({ + isFlipped: false, + isDragging: true, + startPoint: e.nativeEvent.screenX, + })); + }; + const handleDragEnd = (e: MouseEvent) => { + setDragState((cur) => ({ + ...cur, + isDragging: false, + })); + }; + const handleClickIndicator = (index: number) => () => { + setSelected(index); + }; + + return ( +
+ {pictures.map((picture, i) => ( + selected ? "opacity-0" : "opacity-100 " + )} + /> + ))} + +
+ + +
+
    + {pictures.map((picture, i) => ( +
  • + ))} +
+
+ ); +}; + +export default Carousel; diff --git a/client/components/Checkbox.tsx b/client/components/Checkbox.tsx new file mode 100644 index 0000000..6568bcb --- /dev/null +++ b/client/components/Checkbox.tsx @@ -0,0 +1,63 @@ +import icons from "./icons"; +import { MouseEventHandler } from "react"; +import { cls } from "../utils"; +import { UseFormRegister, FieldValues } from "react-hook-form"; +interface Props { + main?: boolean; + plus?: boolean; + minus?: boolean; + sub?: boolean; + detail?: boolean; + body: string; + className?: string; + onClickSecond?: MouseEventHandler; +} + +const Checkbox = ({ + main, + plus, + minus, + sub, + detail, + body, + className, + onClickSecond, +}: Props) => { + return ( +
+ + {main && plus ? ( + + ) : null} + {main && minus ? ( + + ) : null} + {sub && detail ? ( + + 내용 보기 + + ) : null} +
+ ); +}; + +export default Checkbox; diff --git a/client/components/Infor.tsx b/client/components/Infor.tsx new file mode 100644 index 0000000..b8376ed --- /dev/null +++ b/client/components/Infor.tsx @@ -0,0 +1,23 @@ +import { useRouter } from "next/router"; + +interface InforProps { + name: string; + url: string; +} + +const Infor = ({ name, url }: InforProps) => { + const router = useRouter(); + const handleClick = () => { + router.push(url); + }; + return ( +
  • + {name} +
    • + ); +}; + +export default Infor; diff --git a/client/components/ItemCard.tsx b/client/components/ItemCard.tsx new file mode 100644 index 0000000..bf14401 --- /dev/null +++ b/client/components/ItemCard.tsx @@ -0,0 +1,51 @@ +import { Item } from "../types"; +import { attachComma, cls } from "../utils"; + +interface Props { + item: Item; +} +const ItemCard = ({ item }: Props) => { + return ( +
    +
    +
    + + + + + + +
    +
    +
    + {item.brand} +
    +
    {item.name}
    + {item.isFast ? ( +
    + 빠른배송 +
    + ) : null} +
    +
    + {attachComma(item.price)}원 +
    +
    즉시 구매가
    +
    +
    +
    +
    + ); +}; + +export default ItemCard; diff --git a/client/components/Portal.tsx b/client/components/Portal.tsx new file mode 100644 index 0000000..5258d14 --- /dev/null +++ b/client/components/Portal.tsx @@ -0,0 +1,11 @@ +import ReactDOM from "react-dom"; +import { ReactNode } from "react"; +interface Props { + children: ReactNode; +} +const Portal = ({ children }: Props) => { + const modalElement = document.querySelector("#portal") as HTMLElement; + return ReactDOM.createPortal(children, modalElement); +}; + +export default Portal; diff --git a/client/components/Showwindow.tsx b/client/components/Showwindow.tsx new file mode 100644 index 0000000..1e79fc8 --- /dev/null +++ b/client/components/Showwindow.tsx @@ -0,0 +1,38 @@ +import { Item } from "../types"; +import ItemCard from "./ItemCard"; + +const Showwindow = () => { + const items: Item[] = Array(4).fill({ + cartegory: "", + brand: "Asics", + name: "Asics x Jessica Gonsalves Gel-Nimbus 9 Cream White", + price: 205000, + isFast: false, + imgUrl: + "https://kream-phinf.pstatic.net/MjAyMjEwMjhfODgg/MDAxNjY2OTI1NDk5NzQz.QcnMiQ5-oS4nmIUgZ_fOntY7mH_EW5X5qN9prw1ktyIg.QcYJwAauPrOETxbcUT5aBlAfcNiJ_4M1E74towQlD8sg.PNG/a_879d30d9d24a429cac07d91ec6dddbb5.png?type=m_webp", + color: "bg-orange-200", + }); + return ( + <> +
    +
    Just Droped
    +
    발매상품
    +
    +
    + {items.map((item, i) => ( + + ))} +
    + + + ); +}; + +export default Showwindow; diff --git a/client/components/Toast.tsx b/client/components/Toast.tsx new file mode 100644 index 0000000..32c72c1 --- /dev/null +++ b/client/components/Toast.tsx @@ -0,0 +1,28 @@ +import { cls } from "../utils"; +import icons from "./icons"; + +interface Props { + isShow: boolean; + message: string; +} + +const Toast = ({ isShow, message }: Props) => { + return ( +
    + +
    + {message} +
    +
    + ); +}; + +export default Toast; diff --git a/client/components/icons.tsx b/client/components/icons.tsx new file mode 100644 index 0000000..a46e8b7 --- /dev/null +++ b/client/components/icons.tsx @@ -0,0 +1,141 @@ +interface IconProps { + strokeWidth?: number; + iconClassName?: string; + [key: string]: any; +} + +const LeftChevron = ({ strokeWidth, iconClassName, ...props }: IconProps) => { + return ( +
    + + + +
    + ); +}; +const RightChevron = ({ strokeWidth, iconClassName, ...props }: IconProps) => { + return ( +
    + + + +
    + ); +}; +const WarnRound = ({ + strokeWidth = 0.8, + iconClassName = "w-6 h-6", + ...props +}: IconProps) => { + return ( +
    + + + +
    + ); +}; +const Plus = ({ + strokeWidth = 1.5, + iconClassName = "w-6 h-6", + ...props +}: IconProps) => { + return ( +
    + + + +
    + ); +}; +const Minus = ({ + strokeWidth = 1.5, + iconClassName = "w-6 h-6", + ...props +}: IconProps) => { + return ( +
    + + + +
    + ); +}; +const Check = ({ + strokeWidth = 1.5, + iconClassName = "w-6 h-6", + ...props +}: IconProps) => { + return ( +
    + + + +
    + ); +}; + +const icons = { LeftChevron, RightChevron, WarnRound, Plus, Minus, Check }; +export default icons; diff --git a/client/components/layout/Footer.tsx b/client/components/layout/Footer.tsx new file mode 100644 index 0000000..8ed128d --- /dev/null +++ b/client/components/layout/Footer.tsx @@ -0,0 +1,114 @@ +import Infor from "../Infor"; + +const Footer = () => { + const utilizeInformations = [ + { name: "검수 기준", url: "#" }, + { name: "이용 정책", url: "#" }, + { name: "패널티 정책", url: "#" }, + { name: "커뮤니티 가이드 라인", url: "#" }, + ]; + const customerSupportInformations = [ + { name: "공지사항", url: "#" }, + { name: "서비스 소개", url: "#" }, + { name: "쇼룸 안내", url: "#" }, + { name: "판매자 방문접수", url: "#" }, + ]; + return ( +
    +
    +
    +
    + 이용안내 +
      + {utilizeInformations.map((infor) => ( + + ))} +
    +
    +
    + 고객지원 +
      + {customerSupportInformations.map((infor) => ( + + ))} +
    +
    +
    +
    + + 고객센터 + + 1588-7813 + + +
    +
    +
    + 운영시간 평일 11:00 - 18:00 (토∙일, 공휴일 휴무) 점심시간 평일 + 13:00 - 14:00 +
    +
    +
    +

    + 1:1 문의하기는 앱에서만 가능합니다. +

    + +
    +
    +
    +
      +
    • 회사소개
      • +
    • 인재채용
      • +
    • 제휴제안
      • +
    • 이용약관
      • +
    • 개인정보처리방침
      • +
    +
    +
    +
    +
    +
    + 크림 주식회사 대표 김창욱 + 사업자등록번호 : + 570-88-01618 사업자정보확인 + 통신판매업 : 제 + 2021-성남분당C-0093호 + 사업장소재지 : + 경기도 성남시 분당구 분당내곡로 131 판교테크원타워 1,8층 + 호스팅서비스: + 네이버클라우드 (주) +
    +
    +
    +
    +
    +
    +

    신한은행 채무지급보증 안내

    +

    + 당사는 고객님의 현금 결제 금액에 대해 신한은행과 채무지급보증 계약을 + 체결하여 안전거래를 보장하고 있습니다. + + 서비스가입 사실 확인 + +

    +
    +
    +

    + 크림(주)는 통신판매 중개자로서 통신판매의 당사자가 아니므로 개별 + 판매자가 등록한 상품정보에 대해서 책임을 지지 않습니다. 단, + 거래과정에서 검수하고 보증하는 내용에 대한 책임은 당사에 있습니다. +

    +

    © KREAM Corp.

    +
    +
    + ); +}; + +export default Footer; diff --git a/client/components/layout/Frame.tsx b/client/components/layout/Frame.tsx new file mode 100644 index 0000000..6190234 --- /dev/null +++ b/client/components/layout/Frame.tsx @@ -0,0 +1,19 @@ +import Header from "./Header"; +import { ReactNode } from "react"; +import Footer from "./Footer"; + +interface Props { + children: ReactNode; +} + +const Frame = ({ children }: Props) => { + return ( + <> +
    +
    {children}
    +