[김현묵] sprint9

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;

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() {
         <ItemTitle title={item.title} />
         <div className="infoLine2">
           <div className="box">
-            <UserId userId={item.user.id} img={'/img/ic_big_profile.png'} />
+            <UserId userId={item.user.name} img={'/img/ic_big_profile.png'} />
             <CreatedAt date={item.createdAt} />
           </div>
           <div className="box">
@@ -52,7 +59,9 @@ export default function BoardItem() {
       </div>
       <Coment />
       <ComentList coment={[1, 2, 3, 4, 6, 7, 8]} />
-      <button className="backBtn">목록으로 돌아가기</button>
+      <Link href="/board" className="backBtn">
+        목록으로 돌아가기
+      </Link>
     </Layout>
   );
 }

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<HTMLAnchorElement>) => {
+    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() {
       </div>
       <div className="boardLine">
         <TitleLine text={'베스트 게시글'}>
-          <Link className="writeBoard" href={'/board/write'}>
+          <Link
+            className="writeBoard"
+            href={'/board/write'}
+            onClick={writeHandle}
+          >
             글쓰기
           </Link>
         </TitleLine>
@@ -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}
               />

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) => {

next/app/globals.css

@@ -1,18 +1,19 @@
 @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 */
 * {
   padding: 0;
   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;
-}
+}

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 (
     <Layout>
       <MarketSection
-        className={"sell"}
-        title={"판매 중인 상품"}
+        className={'sell'}
+        title={'판매 중인 상품'}
         data={sellProduct.value}
         itemMaxWidth={sellItmeSize}
       >
         <div className="marketEtc">
           <div className="searchBox">
             <button className="submit" onClick={searchKewordHandle}>
-              <img src="./img/ic_search.svg" alt="search" />
+              <Image
+                src="/img/ic_search.svg"
+                alt="search"
+                width={24}
+                height={24}
+              />
             </button>
             <input
               type="text"
@@ -93,7 +96,7 @@ export default function UsedMarket() {
               placeholder="검색할 상품을 입력해주세요"
             />
           </div>
-          <Link href="/registration">상품등록하기</Link>
+          <Link href="/items/write">상품등록하기</Link>
           <select onChange={selectHandle}>
             <option value="recent" defaultChecked>
               최신순