diff --git a/next/app/board/[id]/boardItem.css b/next/app/board/[id]/boardItem.css index bb330bcf2..83f4fb683 100644 --- a/next/app/board/[id]/boardItem.css +++ b/next/app/board/[id]/boardItem.css @@ -139,7 +139,9 @@ color: #9ca3af; } .backBtn { - display: block; + display: flex; + align-items: center; + justify-content: center; width: 240px; height: 48px; background: #3692ff; diff --git a/next/app/board/[id]/page.tsx b/next/app/board/[id]/page.tsx index c768bb592..852f28439 100644 --- a/next/app/board/[id]/page.tsx +++ b/next/app/board/[id]/page.tsx @@ -1,12 +1,18 @@ 'use client'; import Layout, { LayoutInput } from '@/app/shared/components/layout'; -import { UserId, CreatedAt, ItemTitle, Favorite } from '@/app/board/_components'; +import { + UserId, + CreatedAt, + ItemTitle, + Favorite, +} from '@/app/board/_components'; import './boardItem.css'; import { useParams } from 'next/navigation'; import { useEffect, useState } from 'react'; import { boardGetItem, ReturnData } from '@/app/shared/api/board'; import { useRouter } from 'next/navigation'; import EtcBox from '../_components/etcBox'; +import Link from 'next/link'; export default function BoardItem() { const params = useParams(); @@ -16,6 +22,7 @@ export default function BoardItem() { content: '', createdAt: new Date(), user: { + name: '', id: '', }, favorite: 0, @@ -40,7 +47,7 @@ export default function BoardItem() {
- +
@@ -52,7 +59,9 @@ export default function BoardItem() {
- + + 목록으로 돌아가기 + ); } diff --git a/next/app/board/page.tsx b/next/app/board/page.tsx index d643a532f..38d60500c 100644 --- a/next/app/board/page.tsx +++ b/next/app/board/page.tsx @@ -6,14 +6,18 @@ import Link from 'next/link'; import { useEffect, useState } from 'react'; import { getData } from './_hook/hook'; import { BestItem, Item } from './_components'; +import { useAuth } from '../shared/contexts/AuthContext'; +import { useRouter } from 'next/navigation'; export default function Board() { + const { user } = useAuth(); const searchHandle = useChange(); const [data, setData] = useState([]); const [bestData, setBestData] = useState([]); const [pageSize, setPageSize] = useState(6); const [keyword, setKeyword] = useState(''); const [orderBy, setOrderBy] = useState<'recent' | 'favorite'>('recent'); + const router = useRouter(); const searchKewordHandle = (e: any) => { if (e.keyCode === 13 || e.type.toString() === 'click') { setPageSize(6); @@ -24,6 +28,12 @@ export default function Board() { e.preventDefault(); setOrderBy(e.target.value); }; + const writeHandle = (e: React.MouseEvent) => { + e.preventDefault(); + const { href } = e.currentTarget; + if (!!user) router.push(href); + else alert('로그인해주세요'); + }; useEffect(() => { getData({ setFn: setData, pageSize, orderBy, keyword }); getData({ setFn: setBestData, pageSize: 3, orderBy: 'favorite' }); @@ -40,7 +50,7 @@ export default function Board() { title={v.title} content={v.content} createdAt={v.createdAt} - userId={v.user.id} + userId={v.user.name} favorite={v.favorite} boardNumber={v.boardNumber} /> @@ -50,7 +60,11 @@ export default function Board() {
- + 글쓰기 @@ -87,7 +101,7 @@ export default function Board() { title={v.title} content={v.content} createdAt={v.createdAt} - userId={v.user.id} + userId={v.user.name} favorite={v.favorite} boardNumber={v.boardNumber} /> diff --git a/next/app/board/write/page.tsx b/next/app/board/write/page.tsx index 7ef1a8ce5..bfa089b75 100644 --- a/next/app/board/write/page.tsx +++ b/next/app/board/write/page.tsx @@ -10,6 +10,7 @@ import './board.css'; import { useEffect, useState } from 'react'; import { boardCreateData, CreateBoard } from '@/app/shared/api/board'; import { useRouter } from 'next/navigation'; +import { useAuth } from '@/app/shared/contexts/AuthContext'; interface T_Input { value: string; onchange: React.ReactEventHandler; @@ -25,6 +26,7 @@ export default function WriteBoard({ imagesValue?: string[]; btnText?: string; }) { + const { user } = useAuth(); const subject = useChange(); const content = useChange(); const [on, setOn] = useState(''); @@ -63,7 +65,7 @@ export default function WriteBoard({ title: subject.value, content: content.value, images, - userUuid: '9cd3b725-e623-43a3-8ade-1f5a394fb43f', + userUuid: user.uuid, }; boardCreateData(body) .then((res: any) => { diff --git a/next/app/globals.css b/next/app/globals.css index f9b6e411c..d49e8994d 100644 --- a/next/app/globals.css +++ b/next/app/globals.css @@ -1,10 +1,11 @@ @font-face { - font-family: "Pretendard"; + font-family: 'Pretendard'; font-weight: 400; font-display: swap; - src: local("Pretendard Regular"), - url(./font/Pretendard-Regular.woff2) format("woff2"), - url(./font/Pretendard-Regular.woff) format("woff"); + src: + local('Pretendard Regular'), + url(./font/Pretendard-Regular.woff2) format('woff2'), + url(./font/Pretendard-Regular.woff) format('woff'); } /* reset */ * { @@ -12,7 +13,7 @@ margin: 0; line-height: 150%; box-sizing: border-box; - font-family: "Pretendard"; + font-family: 'Pretendard'; } a { text-decoration: none; @@ -50,7 +51,12 @@ img { --gray100: #f3f4f6; --gray50: #f9fafb; } - +.bgPrimary100 { + background-color: var(--primary100) !important; +} +.bgPrimary200 { + background-color: var(--primary200) !important; +} header { width: 100%; height: 70px; @@ -384,7 +390,6 @@ footer .content .icon img { } } - .inputBox { margin-bottom: 32px; } @@ -425,4 +430,4 @@ footer .content .icon img { padding-top: 16px; font-size: 16px; margin-bottom: 16px; -} \ No newline at end of file +} diff --git a/next/app/items/page.tsx b/next/app/items/page.tsx index 14869045a..409568374 100644 --- a/next/app/items/page.tsx +++ b/next/app/items/page.tsx @@ -1,60 +1,58 @@ -"use client" +'use client'; // import "../css/app.css"; -import { useEffect, useRef, useState } from "react"; -import MarketSection, { MarketPageNavi } from "../shared/components/marketSection"; -import { - useChange, - useItmeList, - usePageNavi, - useScreenSize, -} from "../shared/hook/hook"; -import Layout from '../shared/components/layout' -import Link from "next/link"; -import { productsGet } from "../shared/api/product"; +import { useEffect, useRef, useState } from 'react'; +import MarketSection, { + MarketPageNavi, +} from '../shared/components/marketSection'; +import { useChange, useItmeList, usePageNavi } from '../shared/hook/hook'; +import Layout from '../shared/components/layout'; +import Link from 'next/link'; +import { productsGet } from '../shared/api/product'; +import Image from 'next/image'; export default function UsedMarket() { const naviLimit = 5; const [sellLimit, setSellLimit] = useState(10); const sellProduct = useItmeList([{}], sellLimit); - const [sellItmeSize, setSellItemSize] = useState("220px"); - const [arrType, setArrType] = useState("recent"); + const [sellItmeSize, setSellItemSize] = useState('220px'); + const [arrType, setArrType] = useState('recent'); const [onTarget, setOnTarget] = useState(1); const [total, setTotal] = useState(0); - const [keyword, setKeyword] = useState(""); + const [keyword, setKeyword] = useState(''); const pageNavi = usePageNavi(1, 5); const searchHandle = useChange(); const searchRef = useRef(null); - function GetItems(page:any, pageSize:any, orderBy:any, keyword:any) { - productsGet(page, pageSize, orderBy, keyword) - .then((res:any) => { + function GetItems(page: any, pageSize: any, orderBy: any, keyword: any) { + productsGet({ page, pageSize, orderBy, keyword }) + .then((res: any) => { if (res.success) { sellProduct.setValue(res.data); setTotal(res.totalCount / sellLimit); } }) - .catch((err:any) => console.error(err)); + .catch((err: any) => console.error(err)); } useEffect(() => { GetItems(onTarget, sellLimit, arrType, searchHandle.value); }, [onTarget]); - const searchKewordHandle = (e:any) => { - if (e.keyCode === 13 || e.type.toString() === "click") { + const searchKewordHandle = (e: any) => { + if (e.keyCode === 13 || e.type.toString() === 'click') { setOnTarget(1); pageNavi.setStart(1); pageNavi.setLast(5); GetItems(1, sellLimit, arrType, searchHandle.value); } }; - const selectHandle = (e:any) => { + const selectHandle = (e: any) => { e.preventDefault(); setArrType(e.target.value); }; - const pageNaviEvent = (e:any) => { + const pageNaviEvent = (e: any) => { setOnTarget(Number(e.target.textContent)); }; - const nextEvent = (e:any) => { + const nextEvent = (e: any) => { e.preventDefault(); const pageNum = Math.floor(onTarget / naviLimit); if (onTarget % naviLimit === 0) { @@ -63,7 +61,7 @@ export default function UsedMarket() { } setOnTarget(onTarget + 1); }; - const privousEvent = (e:any) => { + const privousEvent = (e: any) => { e.preventDefault(); if (onTarget % naviLimit === 1) { pageNavi.setStart(onTarget - naviLimit); @@ -74,15 +72,20 @@ export default function UsedMarket() { return (
- 상품등록하기 + 상품등록하기 - {triger ?

{errMsg}

: null} + {triger ? ( +

+ {errMsg} +

+ ) : null}
) : (
- {triger ?

{errMsg}

: null} + {triger ? ( +

+ {errMsg} +

+ ) : null}
)} - {id === "tag" ?
{children}
: null} + {id === 'tag' ?
{children}
: null}
); } - -export function TitleLine({ text, children }:{text?:string,children?:any}) { +export function TitleLine({ + text, + children, +}: { + text?: string; + children?: any; +}) { return (

{text}

@@ -111,7 +132,17 @@ export function TitleLine({ text, children }:{text?:string,children?:any}) { ); } -export function ImgBox({ src="/img/arr_left.svg", alt="", width, height }:{src:string,alt:string,width?:string,height?:string}) { +export function ImgBox({ + src = '/img/arr_left.svg', + alt = '', + width, + height, +}: { + src: string; + alt: string; + width?: string; + height?: string; +}) { const imgStyle = { width, height, diff --git a/next/app/shared/components/marketSection.tsx b/next/app/shared/components/marketSection.tsx index 231e146ab..7341f2882 100644 --- a/next/app/shared/components/marketSection.tsx +++ b/next/app/shared/components/marketSection.tsx @@ -1,4 +1,5 @@ -import { useEffect, useRef, useState } from "react"; +import Image from 'next/image'; +import { useEffect, useRef, useState } from 'react'; export default function MarketSection({ className, @@ -6,26 +7,26 @@ export default function MarketSection({ data, itemMaxWidth, children, -}:{ - className?:string - title?:string - data:string[] - itemMaxWidth:string - children?:any +}: { + className?: string; + title?: string; + data: string[]; + itemMaxWidth: string; + children?: any; }) { const [items, setItems] = useState(data); useEffect(() => { setItems(data); }, [data]); return ( -
+

{title}

{children}
    {!!items.length ? ( - items.map((el:any, i:number) => { + items.map((el: any, i: number) => { return ( ); } -function MarketList({ img, name, price, favorite, width }:{ img:string, name:string, price:number, favorite:string, width:string }) { +function MarketList({ + img, + name, + price, + favorite, + width, +}: { + img: string; + name: string; + price: number; + favorite: string; + width: string; +}) { const imgRef = useRef(null); const [imgStyle, setImgStyle] = useState({}); - const notFound = "./img/img_default.png"; + const notFound = './img/img_default.png'; // "https://png.pngtree.com/png-vector/20210221/ourmid/pngtree-error-404-not-found-neon-effect-png-image_2928214.jpg"; - let style = { + const style = { width, }; - const cutPrice = (price:string|number) => { - if(price) - return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const cutPrice = (price: string | number) => { + if (price) return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; useEffect(() => { if (!!imgRef && imgRef.current) { - const imgWidth = imgRef.current.width; - const maxWidth = parseInt(width.split("px")[0], 10); - + const imgWidth = imgRef.current.width; + const maxWidth = parseInt(width.split('px')[0], 10); + if (imgWidth < maxWidth) { setTimeout(() => { setImgStyle({ ...imgStyle, - width: "100%", + width: '100%', }); }, 50); } @@ -81,8 +93,8 @@ function MarketList({ img, name, price, favorite, width }:{ img:string, name:str ref={imgRef} src={!!img ? img : notFound} alt={name} - style={!!img ? imgStyle : { ...imgStyle, width: "100%" }} - onError={(e:any) => { + style={!!img ? imgStyle : { ...imgStyle, width: '100%' }} + onError={(e: any) => { e.target.src = notFound; }} /> @@ -91,7 +103,13 @@ function MarketList({ img, name, price, favorite, width }:{ img:string, name:str

    {name}

    {cutPrice(price)}원

    - favorite + favorite {favorite}

@@ -108,15 +126,14 @@ export function MarketPageNavi({ onNext, onPrivous, total, -}: -{ - onClick:any, - start:any, - last:any, - target:any, - onNext:any, - onPrivous:any, - total:any, +}: { + onClick: any; + start: any; + last: any; + target: any; + onNext: any; + onPrivous: any; + total: any; }) { const arr = []; // if (total < 1) total = Math.ceil(total); @@ -135,7 +152,7 @@ export function MarketPageNavi({ return (