Next 오명섭 sprint9

.env

@@ -0,0 +1,3 @@
+# swagger url
+# https://panda-market-api.vercel.app/docs/#/
+NEXT_PUBLIC_API_URL = https://panda-market-api.vercel.app/products

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }

.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,8 +29,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+# .env*
 
 # vercel
 .vercel

README.md

@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -18,23 +18,23 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

app/fqa/page.tsx

@@ -0,0 +1,8 @@
+'use client'
+import React from 'react'
+
+function Fqa() {
+  return <div>FQA</div>
+}
+
+export default Fqa

app/items/[id]/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+import React, { useEffect } from 'react'
+import { Button, UserIconInfo } from '@/components/index'
+import '@/styles/css/style.css'
+import Comments from '@/components/Comments'
+import Image from 'next/image'
+import { useParams } from 'next/navigation'
+import { ic_heart, ic_X } from '@/public/common'
+import { useSelector } from 'react-redux'
+import { getProduct, useAppDispatch } from '@/service/reducerSlice'
+import { InitialStateType } from '@/store/store'
+
+function Products() {
+  const getParams = useParams()
+  const id = getParams.id ? +getParams.id : 0
+  const dispatch = useAppDispatch()
+  const productData = useSelector((state: InitialStateType) => state.data.product)
+
+  const handleImageClick = () => {
+    console.log('구현중')
+  }
+
+  useEffect(() => {
+    dispatch(getProduct({ id: id }))
+  }, [productData, id])
+
+  return (
+    productData && (
+      <main>
+        <section className='section'>
+          <div className='productsContents'>
+            <div className='image'>
+              <Image fill className='productImg' src={productData.images[0] || ic_X} alt='itemImg' />
+            </div>
+            <div className='productDetail'>
+              <h2>{productData.name}</h2>
+              <h2>{productData.price}</h2>
+              <div className='line' />
+              <span className='productDescTitle'>상품 소개</span>
+              <span className='productDesc'>{productData.description}</span>
+              <span className='productDescTitle'>상품 태그</span>
+              <div className='productTag'>
+                {productData.tags.map((tag, idx) => {
+                  return (
+                    <button key={`tagButton${idx}`} className='tagButton'>
+                      {tag}
+                    </button>
+                  )
+                })}
+              </div>
+              <div className='spaceBetween'>
+                <UserIconInfo image={null} nickname={productData.ownerNickname} desc={productData.updatedAt} />
+                <Button className='heartButton' onClick={handleImageClick}>
+                  <Image src={ic_heart || ic_X} alt='heart' />
+                  {productData.favoriteCount}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className='line' />
+          <Comments id={id} />
+        </section>
+      </main>
+    )
+  )
+}
+
+export default Products

app/items/addItem/page.tsx

@@ -0,0 +1,71 @@
+'use client'
+import React, { ChangeEvent, useState } from 'react'
+import '@/styles/css/style.css'
+import { TextInput, ItemImage, TagInput, Textarea } from '@/components/index'
+
+function AddItem() {
+  const [itemName, setItemName] = useState<string>('')
+  const [itemDetail, setItemDetail] = useState<string>('')
+  const [itemPrice, setItemPrice] = useState<string>('')
+  const [itemTagArr, setItemTagArr] = useState<Array<string>>([])
+  const [addItemImageURL, setAddItemImageURL] = useState<Array<string>>([])
+
+  const handleItemNameChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setItemName(e.target.value)
+  }
+  const handleItemDetailChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setItemDetail(e.target.value)
+  }
+
+  const handleItemPriceChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setItemPrice(e.target.value)
+  }
+
+  const handleTagChange = (value: Array<string>) => {
+    setItemTagArr(value)
+  }
+
+  const handleImageChange = () => {
+    setAddItemImageURL([])
+  }
+
+  const handleItamSubmit = async () => {
+    if (addItemImageURL.length < 1) return alert('상품 이미지를 입력해주세요.')
+    if (itemName.length < 1) return alert('상품명을 입력해주세요.')
+    if (itemDetail.length < 1) return alert('상품 소개를 입력해주세요.')
+    if (itemPrice.length < 1) return alert('상품 가격을 입력해주세요.')
+    if (itemTagArr.length < 1) return alert('상품 태그를 입력해주세요.')
+    console.log('postAxios')
+  }
+
+  return (
+    <main>
+      <section className='section'>
+        <div className='contentsTopTitle'>
+          <h3>상품 등록하기</h3>
+          <button className='itemSubmit' type='button' onClick={handleItamSubmit}>
+            등록
+          </button>
+        </div>
+        <div className='addItemContents column'>
+          <h4>상품 이미지</h4>
+          <ItemImage onChange={handleImageChange} />
+        </div>
+        <TextInput id='itemNameInput' className='inputBox' type='text' placeholder='상품명을 입력해주세요' onChange={handleItemNameChange}>
+          <h4>상품명</h4>
+        </TextInput>
+        <Textarea id='itemDetailInput' className='inputBox textarea' placeholder='상품 소개를 입력해주세요' onChange={handleItemDetailChange}>
+          <h4>상품 소개</h4>
+        </Textarea>
+        <TextInput id='itemPriceInput' className='inputBox' type='number' placeholder='판매 가격을 입력해주세요' onChange={handleItemPriceChange}>
+          <h4>판매 가격</h4>
+        </TextInput>
+        <TagInput onChange={handleTagChange}>
+          <h4>태그</h4>
+        </TagInput>
+      </section>
+    </main>
+  )
+}
+
+export default AddItem

app/items/layout.tsx

@@ -0,0 +1,38 @@
+'use client'
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ic_logo_item_pc, ic_user } from '@/public/common'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathName = usePathname()
+  const activeButton = pathName.indexOf('items')
+  return (
+    <html lang='ko'>
+      <body>
+        <div className='navHeader'>
+          <div className='navigation'>
+            <div className='itemLogo'>
+              <Link href={'/'}>
+                <Image src={ic_logo_item_pc} alt='pandaLogo' />
+              </Link>
+            </div>
+            <Link href={'/NoticeBoard'} className={!activeButton ? 'activeNav' : 'inactiveNav'}>
+              자유 게시판
+            </Link>
+            <Link href={'/items'} className={activeButton ? 'activeNav' : 'inactiveNav'}>
+              중고 마켓
+            </Link>
+          </div>
+          <div className='userInfo'>
+            <Link href={'/userInfo'} className='navMarket'>
+              <Image src={ic_user} alt='userInfo' />
+            </Link>
+          </div>
+        </div>
+        {children}
+      </body>
+    </html>
+  )
+}

app/items/page.tsx

@@ -0,0 +1,18 @@
+import '@/styles/css/style.css'
+import BestItemDetail from '@/components/BestItems'
+import ItemDetail from '@/components/ItemDetail'
+
+function Items() {
+  return (
+    <main>
+      <section className='section'>
+        <BestItemDetail />
+      </section>
+      <section className='section'>
+        <ItemDetail />
+      </section>
+    </main>
+  )
+}
+
+export default Items

app/layout.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { Provider } from 'react-redux'
+import store from '@/store/store'
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <html lang='ko'>
+        <body>{children}</body>
+      </html>
+    </Provider>
+  )
+}