From 59198ccabd388c18c943e31e754a9810a11f74a8 Mon Sep 17 00:00:00 2001 From: soohwanpak Date: Mon, 10 Feb 2025 00:36:59 +0900 Subject: [PATCH] =?UTF-8?q?Conflict=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- README.md | 60 +- components/ArticleCommentDropDown.js | 96 - components/ArticleDetail.js | 145 - components/ArticleDropDown.js | 95 - components/BestItem.js | 28 - components/BestItemList.js | 50 - components/DropDown.js | 58 - components/Header.js | 69 - components/PostList.js | 44 - components/PostListAll.js | 58 - components/SearchInput.js | 37 - components/UpdateMain.js | 75 - components/WriteButton.js | 22 - components/WriteMain.js | 68 - components/loginpage/IdInput.js | 36 - components/loginpage/LoginButton.js | 28 - components/loginpage/Modal.js | 17 - components/loginpage/PwInput.js | 56 - components/loginpage/RegisterLinkButton.js | 17 - components/loginpage/WebLogin.js | 29 - components/post.js | 14 - components/registerPage/IdInputRegister.js | 37 - .../registerPage/NicknameInputRegister.js | 18 - components/registerPage/PwInputRegister.js | 105 - components/registerPage/RegisterButton.js | 29 - css/BestItem.module.css | 27 - css/BestItemList.module.css | 61 - css/Dropdown.module.css | 84 - css/Header.module.css | 158 - css/Modal.module.css | 48 - css/Post.module.css | 0 css/PostList.module.css | 129 - css/SearchInput.module.css | 27 - css/Write.module.css | 34 - css/WriteMain.module.css | 69 - css/articleDetail.module.css | 181 - css/login.module.css | 134 - css/register.module.css | 113 - jsconfig.json | 7 - lib/api.js | 10 - lib/instance.js | 12 - netlify.toml | 12 - next.config.mjs | 11 +- package-lock.json | 6946 +++++++++++++---- package.json | 60 +- pages/404.js | 3 - pages/[id]/articleUpdate.js | 12 - pages/_app.js | 14 - pages/_document.js | 22 - pages/articleWrite.js | 11 - pages/articles/[articleId].js | 44 - pages/index.js | 13 - pages/login.js | 81 - pages/signin.js | 78 - postcss.config.js | 6 + postcss.config.mjs | 8 + public/articleImage.png | Bin 0 -> 4448 bytes public/articleheart.png | Bin 0 -> 414 bytes .../{images/BestImage.png => bestarticle.png} | Bin ...downbutton.png => commentdropdownIcon.png} | Bin public/defaultimage.png | Bin 0 -> 2784 bytes public/dropdown.svg | 3 + public/facebook.png | Bin 0 -> 386 bytes public/header-logo.png | Bin 0 -> 2938 bytes public/heartIcon.svg | 3 + public/images/PandaLogo.png | Bin 2955 -> 0 bytes public/images/bestitemimage.png | Bin 3948 -> 0 bytes public/images/dropdown.png | Bin 298 -> 0 bytes public/images/heartIcon.png | Bin 706 -> 0 bytes public/images/noComment.png | Bin 7785 -> 0 bytes public/images/passwordIcon1.svg | 3 - public/images/passwordIcon2.svg | 3 - public/images/return.png | Bin 2881 -> 0 bytes public/images/userIcon.png | Bin 805 -> 0 bytes public/instagram.png | Bin 0 -> 396 bytes public/left.png | Bin 0 -> 1175 bytes public/{images/heart.png => like.png} | Bin .../{images/google.png => login-google.png} | Bin public/{images/kakao.png => login-kakao.png} | Bin public/loginpage-logo.png | Bin 0 -> 6324 bytes public/main1.png | Bin 0 -> 57123 bytes public/main2.png | Bin 0 -> 13441 bytes public/main3.png | Bin 0 -> 27692 bytes public/main4.png | Bin 0 -> 10853 bytes public/main5.png | Bin 0 -> 67642 bytes public/nocomment-.png | Bin 0 -> 11223 bytes public/productdetailImage.png | Bin 0 -> 307625 bytes public/right.png | Bin 0 -> 1178 bytes public/{images/searchIcon.png => search.png} | Bin public/tagdeleteIcon.png | Bin 0 -> 597 bytes public/twitter.png | Bin 0 -> 334 bytes public/userImage.png | Bin 0 -> 1348 bytes public/youtube.png | Bin 0 -> 286 bytes src/app/(router)/articleWrite/page.tsx | 69 + src/app/(router)/border/page.tsx | 11 + src/app/(router)/layout.tsx | 22 + src/app/(router)/market/page.tsx | 11 + src/app/(router)/page.tsx | 16 + .../productDetail/[productId]/page.tsx | 44 + src/app/(router)/productRegistration/page.tsx | 138 + src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 38 + src/app/layout.tsx | 22 + src/app/login/page.tsx | 79 + src/app/providers.tsx | 12 + src/app/register/page.tsx | 94 + src/components/border/AllArticle.tsx | 131 + src/components/border/BestArticle.tsx | 78 + src/components/main/Main1.tsx | 26 + src/components/main/Main2.tsx | 26 + src/components/main/Main3.tsx | 27 + src/components/main/Main4.tsx | 27 + src/components/main/Main5.tsx | 21 + src/components/market/BestProduct.tsx | 84 + .../market/SellingProductHeader.tsx | 153 + .../productDetail/ProductComment.tsx | 181 + src/components/productDetail/ProductInfo.tsx | 57 + src/components/shared/Dropdown.tsx | 90 + src/components/shared/Footer.tsx | 45 + src/components/shared/Header.tsx | 23 + src/components/shared/HeaderLogin.tsx | 66 + src/hook/useLoginForm.ts | 53 + src/hook/useRegisterForm.tsx | 63 + src/lib/axios.ts | 13 + src/store/auth.ts | 31 + src/utils/axios.ts | 108 + styles/global.css | 3 - tailwind.config.ts | 55 + tsconfig.json | 43 + 130 files changed, 7345 insertions(+), 4336 deletions(-) delete mode 100644 components/ArticleCommentDropDown.js delete mode 100644 components/ArticleDetail.js delete mode 100644 components/ArticleDropDown.js delete mode 100644 components/BestItem.js delete mode 100644 components/BestItemList.js delete mode 100644 components/DropDown.js delete mode 100644 components/Header.js delete mode 100644 components/PostList.js delete mode 100644 components/PostListAll.js delete mode 100644 components/SearchInput.js delete mode 100644 components/UpdateMain.js delete mode 100644 components/WriteButton.js delete mode 100644 components/WriteMain.js delete mode 100644 components/loginpage/IdInput.js delete mode 100644 components/loginpage/LoginButton.js delete mode 100644 components/loginpage/Modal.js delete mode 100644 components/loginpage/PwInput.js delete mode 100644 components/loginpage/RegisterLinkButton.js delete mode 100644 components/loginpage/WebLogin.js delete mode 100644 components/post.js delete mode 100644 components/registerPage/IdInputRegister.js delete mode 100644 components/registerPage/NicknameInputRegister.js delete mode 100644 components/registerPage/PwInputRegister.js delete mode 100644 components/registerPage/RegisterButton.js delete mode 100644 css/BestItem.module.css delete mode 100644 css/BestItemList.module.css delete mode 100644 css/Dropdown.module.css delete mode 100644 css/Header.module.css delete mode 100644 css/Modal.module.css delete mode 100644 css/Post.module.css delete mode 100644 css/PostList.module.css delete mode 100644 css/SearchInput.module.css delete mode 100644 css/Write.module.css delete mode 100644 css/WriteMain.module.css delete mode 100644 css/articleDetail.module.css delete mode 100644 css/login.module.css delete mode 100644 css/register.module.css delete mode 100644 jsconfig.json delete mode 100644 lib/api.js delete mode 100644 lib/instance.js delete mode 100644 netlify.toml delete mode 100644 pages/404.js delete mode 100644 pages/[id]/articleUpdate.js delete mode 100644 pages/_app.js delete mode 100644 pages/_document.js delete mode 100644 pages/articleWrite.js delete mode 100644 pages/articles/[articleId].js delete mode 100644 pages/index.js delete mode 100644 pages/login.js delete mode 100644 pages/signin.js create mode 100644 postcss.config.js create mode 100644 postcss.config.mjs create mode 100644 public/articleImage.png create mode 100644 public/articleheart.png rename public/{images/BestImage.png => bestarticle.png} (100%) rename public/{images/dropdownbutton.png => commentdropdownIcon.png} (100%) create mode 100644 public/defaultimage.png create mode 100644 public/dropdown.svg create mode 100644 public/facebook.png create mode 100644 public/header-logo.png create mode 100644 public/heartIcon.svg delete mode 100644 public/images/PandaLogo.png delete mode 100644 public/images/bestitemimage.png delete mode 100644 public/images/dropdown.png delete mode 100644 public/images/heartIcon.png delete mode 100644 public/images/noComment.png delete mode 100644 public/images/passwordIcon1.svg delete mode 100644 public/images/passwordIcon2.svg delete mode 100644 public/images/return.png delete mode 100644 public/images/userIcon.png create mode 100644 public/instagram.png create mode 100644 public/left.png rename public/{images/heart.png => like.png} (100%) rename public/{images/google.png => login-google.png} (100%) rename public/{images/kakao.png => login-kakao.png} (100%) create mode 100644 public/loginpage-logo.png create mode 100644 public/main1.png create mode 100644 public/main2.png create mode 100644 public/main3.png create mode 100644 public/main4.png create mode 100644 public/main5.png create mode 100644 public/nocomment-.png create mode 100644 public/productdetailImage.png create mode 100644 public/right.png rename public/{images/searchIcon.png => search.png} (100%) create mode 100644 public/tagdeleteIcon.png create mode 100644 public/twitter.png create mode 100644 public/userImage.png create mode 100644 public/youtube.png create mode 100644 src/app/(router)/articleWrite/page.tsx create mode 100644 src/app/(router)/border/page.tsx create mode 100644 src/app/(router)/layout.tsx create mode 100644 src/app/(router)/market/page.tsx create mode 100644 src/app/(router)/page.tsx create mode 100644 src/app/(router)/productDetail/[productId]/page.tsx create mode 100644 src/app/(router)/productRegistration/page.tsx create mode 100644 src/app/favicon.ico create mode 100644 src/app/globals.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/login/page.tsx create mode 100644 src/app/providers.tsx create mode 100644 src/app/register/page.tsx create mode 100644 src/components/border/AllArticle.tsx create mode 100644 src/components/border/BestArticle.tsx create mode 100644 src/components/main/Main1.tsx create mode 100644 src/components/main/Main2.tsx create mode 100644 src/components/main/Main3.tsx create mode 100644 src/components/main/Main4.tsx create mode 100644 src/components/main/Main5.tsx create mode 100644 src/components/market/BestProduct.tsx create mode 100644 src/components/market/SellingProductHeader.tsx create mode 100644 src/components/productDetail/ProductComment.tsx create mode 100644 src/components/productDetail/ProductInfo.tsx create mode 100644 src/components/shared/Dropdown.tsx create mode 100644 src/components/shared/Footer.tsx create mode 100644 src/components/shared/Header.tsx create mode 100644 src/components/shared/HeaderLogin.tsx create mode 100644 src/hook/useLoginForm.ts create mode 100644 src/hook/useRegisterForm.tsx create mode 100644 src/lib/axios.ts create mode 100644 src/store/auth.ts create mode 100644 src/utils/axios.ts delete mode 100644 styles/global.css create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index d394ba57c..5ef6a5207 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,7 @@ !.yarn/plugins !.yarn/releases !.yarn/versions -/test.http + # testing /coverage @@ -28,6 +28,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* # env files (can opt-in for committing if needed) .env* diff --git a/README.md b/README.md index 893f3bd57..e215bc4cc 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,36 @@ -# ๐Ÿผ ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). -> _์ด ์ €์žฅ์†Œ๋Š” ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ํด๋ก ํ•˜์—ฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์„ค์ •ํ•˜๊ณ , ๊ฐ ๋ธŒ๋žœ์น˜์—์„œ ํ•ด๋‹น ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•ด ์ฃผ์„ธ์š”!_ ๐Ÿ› ๏ธ +## Getting Started -## ์†Œ๊ฐœ +First, run the development server: -์•ˆ๋…•ํ•˜์„ธ์š”! ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ๐Ÿฅณ -ํŒ๋‹ค๋งˆ์ผ“์€ ๋”ฐ๋œปํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜๋ฅผ ์œ„ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ์ด์—์š”. ์—ฌ๋Ÿฌ๋ถ„์€ ์ด๊ณณ์—์„œ ์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜๊ณ , ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋“ค๊ณผ ์†Œํ†ตํ•˜๋ฉฐ, ์ž์œ ๋กญ๊ฒŒ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”. ๋งค์ฃผ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค์–ด ๊ฐ€๋ฉฐ ์„ฑ์žฅํ•ด ๋‚˜๊ฐ€๋Š” ์—ฌ์ •์„ ํ•จ๊ป˜ํ•ด์š”. ๐Ÿš€ +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` -![PandaMarket](https://github.com/user-attachments/assets/3784b99f-73c9-4349-a9a9-92b2a7563574) -_์œ„ ์ด๋ฏธ์ง€๋Š” ํŒ๋‹ค๋งˆ์ผ“์˜ ๋Œ€ํ‘œ ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค._ ๐Ÿ“ธ +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -## ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์ด๋ž€? ๐Ÿค” +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. -์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์€ **ํ•˜๋‚˜์˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธธ๊ฒŒ ์ง„ํ–‰ํ•˜๋ฉด์„œ, ๊ทธ ๊ณผ์ •์—์„œ ์ฃผ๊ธฐ์ ์œผ๋กœ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‹œ์Šคํ…œ**์ด์—์š”. ๊ฐ ์Šคํ”„๋ฆฐํŠธ๋งˆ๋‹ค ๋ฐฐ์šด ์ด๋ก ์„ ์ ์šฉํ•ด ๋ณด๊ณ , **๋ฉ˜ํ† ๋‹˜๊ป˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•„๊ฐ€๋ฉฐ ์‹ค๋ ฅ์„ ์‘ฅ์‘ฅ ํ‚ค์›Œ๊ฐˆ ์ˆ˜ ์žˆ๋Š” ์ค‘์š”ํ•œ ๊ฐœ์ธ ๊ณผ์ œ**๋ž๋‹ˆ๋‹ค. ๐Ÿ’ช +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. -## ์ฃผ์š” ๊ธฐ๋Šฅ โœจ +## Learn More -1. **์ƒํ’ˆ ๋“ฑ๋ก**: ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๋ฌผ๊ฑด์„ ์˜ฌ๋ฆฌ๊ณ , ์‚ฌ์ง„๊ณผ ์„ค๋ช…์„ ์ถ”๊ฐ€ํ•ด ์ง์ ‘ ํŒ๋งคํ•  ์ˆ˜ ์žˆ์–ด์š”! -2. **๋ฌธ์˜ ๋Œ“๊ธ€**: ์ƒํ’ˆ์— ๋Œ€ํ•œ ๊ถ๊ธˆํ•œ ์ ์ด๋‚˜ ์˜๊ฒฌ์„ ์ž์œ ๋กญ๊ฒŒ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค. ๐Ÿ“ -3. **์ž์œ ๊ฒŒ์‹œํŒ**: ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋กœ ์นœ๊ตฌ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„๊ณ , ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ด์—์š”! ๐Ÿ—ฃ๏ธ +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. -ํ”„๋กœ์ ํŠธ๋Š” ๋‹จ๊ณ„๋ณ„๋กœ ๋‚˜๋‰˜์–ด ์žˆ๊ณ , ๊ฐ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์— ๋งž๋Š” ๋ธŒ๋žœ์น˜๊ฐ€ ์žˆ์–ด์š”. ๊ฐ ๋ธŒ๋žœ์น˜๋ฅผ ํ†ตํ•ด ์ฒด๊ณ„์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉฐ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์–ด์š”. ๐ŸŽฏ +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! -### ๋ธŒ๋žœ์น˜ ์„ค๋ช… +## Deploy on Vercel -1. **basic (part1): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1 ~ 4 FE ์š”๊ตฌ์‚ฌํ•ญ** +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. - - ๊ธฐ๋ณธ์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•œ ์ดˆ๊ธฐ ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. HTML, CSS, JavaScript ๋“ฑ์„ ์‚ฌ์šฉํ•ด ๊ธฐ๋ณธ์„ ๋‹ค์ง‘๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1๋ถ€ํ„ฐ 4๊นŒ์ง€**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - -2. **react (part2): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5 ~ 7 FE ์š”๊ตฌ์‚ฌํ•ญ** - - - React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜์™€ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5๋ถ€ํ„ฐ 7๊นŒ์ง€, ๊ทธ ์ดํ›„**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ Next๊ฐ€ ์•„๋‹Œ React๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด react ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -3. **next (part3,4): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8 FE ์š”๊ตฌ์‚ฌํ•ญ~** - - - Next.js๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)๊ณผ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG) ๋“ฑ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8๋ถ€ํ„ฐ** ์‹œ์ž‘ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ React๊ฐ€ ์•„๋‹Œ Next๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด next ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -> _์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ ๋‚ด ๋ฐฑ์—”๋“œ ์š”๊ตฌ์‚ฌํ•ญ์€ [๋ฐฑ์—”๋“œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ](https://github.com/codeit-sprint-fullstack/3-sprint-mission-be)์˜ ๋ธŒ๋žœ์น˜์—์„œ ๊ด€๋ฆฌํ•ด์ฃผ์„ธ์š”_ - ---- - -๋ณธ ํ”„๋กœ์ ํŠธ๋Š” [์ฝ”๋“œ์ž‡](https://www.codeit.kr)์˜ ์†Œ์œ ์ด๋ฉฐ, ๊ต์œก ๋ชฉ์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ยฉ 2024 Codeit. All rights reserved. +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/components/ArticleCommentDropDown.js b/components/ArticleCommentDropDown.js deleted file mode 100644 index 1b5cd9082..000000000 --- a/components/ArticleCommentDropDown.js +++ /dev/null @@ -1,96 +0,0 @@ -import { useState, useRef, useEffect } from 'react'; -import styles from '@/css/Dropdown.module.css'; -import Image from 'next/image'; -import instance from '@/lib/instance'; - -export default function ArticleCommentDropDown({ id, onCommentAdded }) { - const [isOpen, setIsOpen] = useState(false); - const [isEditing, setIsEditing] = useState(false); - const [editContent, setEditContent] = useState('๋Œ“๊ธ€ ์ˆ˜์ •'); - const dropdownRef = useRef(null); - - - const toggleDropdown = () => { - setIsOpen(!isOpen); - }; - - const handlePatch = () => { - const accessToken = localStorage.getItem('accessToken'); - - try { - instance.patch(`/comments/${id}`, { - content: editContent, - }, { - headers: { - Authorization: `Bearer ${accessToken}`, - } - }); - alert('๋Œ“๊ธ€์ด ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค!'); - setIsEditing(!isEditing); - setIsOpen(!isOpen); - onCommentAdded(); - } catch (error) { - console.error('๋Œ“๊ธ€ ์ˆ˜์ • ์ค‘ ์˜ค๋ฅ˜ ๋ฐœ์ƒ:', error); - } - } - - const handleDelete = () => { - const accessToken = localStorage.getItem('accessToken'); - - instance.delete(`/comments/${id}`, { - headers: { - Authorization: `Bearer ${accessToken}`, - } - }) - .then((response) => { - alert("๋Œ“๊ธ€์ด ์‚ญ์ œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!"); - onCommentAdded(); - setIsOpen(!isOpen); - }).catch((error) => { - console.error(error); - }); - }; - - useEffect(() => { - const handleClickOutside = (e) => { - if (dropdownRef.current && !dropdownRef.current.contains(e.target)) { - setIsOpen(false); - } - }; - - window.addEventListener('click', handleClickOutside); - return () => { - window.removeEventListener('click', handleClickOutside); - }; - }, []); - - return ( -
- - {isOpen && ( - - )} -
- ); -} \ No newline at end of file diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js deleted file mode 100644 index aa1c71888..000000000 --- a/components/ArticleDetail.js +++ /dev/null @@ -1,145 +0,0 @@ -import styles from '@/css/articleDetail.module.css'; -import Image from 'next/image'; -import dayjs from "dayjs"; -import { useRouter } from 'next/router'; -import { useState } from 'react'; -import instance from '@/lib/instance'; -import ArticleDropDown from './ArticleDropDown'; -import ArticleCommentDropDown from './ArticleCommentDropDown'; - -export default function ArticleDetail({ article, onCommentAdded }) { - const [content, setContent] = useState(''); - const router = useRouter(); - - const handleClick = () => { - router.push(`/`); - }; - - const handlePostSubmit = () => { - if (!content) { - alert('๋‚ด์šฉ์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”!'); - } - if (content) { - const accessToken = localStorage.getItem('accessToken'); - instance.post(`/articles/${article.id}/comments`, { - content, - }, { - headers: { - Authorization: `Bearer ${accessToken}`, - } - }).then((response) => { - alert("๋Œ“๊ธ€์ด ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!"); - onCommentAdded(); - setContent(''); - }).catch((error) => { - console.error(error); - }); - } - }; - - const handleKeyDown = (e) => { - if (e.key === 'Enter') { - handlePostSubmit(); - } - }; - - return ( -
-
-
- {article.title} -
- -
-
-
-
- User -
-
{article.writer.nickname}
-
{dayjs(article.createdAt).format('YYYY. MM. DD')}
-
-
-
- heart -
-
{article.likeCount}
-
-
- -
- {article.content} -
- -
๋Œ“๊ธ€ ๋‹ฌ๊ธฐ
-