From 8a1f4ee9059127a52eee37e567ca30be836bc572 Mon Sep 17 00:00:00 2001 From: nerte Date: Thu, 13 Mar 2025 17:05:18 +0900 Subject: [PATCH 01/18] [Chore] uninstall styled-components --- package-lock.json | 127 ++-------------------------------------------- package.json | 3 +- 2 files changed, 6 insertions(+), 124 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30cf419..06b804e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,7 @@ "lodash.throttle": "^4.1.1", "next": "^15.2.1", "react": "^18", - "react-dom": "^18", - "styled-components": "^6.1.15" + "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", @@ -48,24 +47,6 @@ "tslib": "^2.4.0" } }, - "node_modules/@emotion/is-prop-valid": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", - "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, - "node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" - }, - "node_modules/@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -847,11 +828,6 @@ "@types/react": "^18.0.0" } }, - "node_modules/@types/stylis": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", - "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" - }, "node_modules/@typescript-eslint/parser": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", @@ -1491,14 +1467,6 @@ "node": ">= 6" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001702", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001702.tgz", @@ -1656,24 +1624,6 @@ "node": ">= 8" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "engines": { - "node": ">=4" - } - }, - "node_modules/css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1689,7 +1639,8 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -4380,7 +4331,8 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -4733,11 +4685,6 @@ "node": ">= 0.4" } }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "node_modules/sharp": { "version": "0.33.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", @@ -5140,65 +5087,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/styled-components": { - "version": "6.1.15", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz", - "integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==", - "dependencies": { - "@emotion/is-prop-valid": "1.2.2", - "@emotion/unitless": "0.8.1", - "@types/stylis": "4.2.5", - "css-to-react-native": "3.2.0", - "csstype": "3.1.3", - "postcss": "8.4.49", - "shallowequal": "1.1.0", - "stylis": "4.3.2", - "tslib": "2.6.2" - }, - "engines": { - "node": ">= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.1.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/styled-components/node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" - }, "node_modules/styled-jsx": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz", @@ -5221,11 +5109,6 @@ } } }, - "node_modules/stylis": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", - "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" - }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index 8a2f534..908dafa 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,7 @@ "lodash.throttle": "^4.1.1", "next": "^15.2.1", "react": "^18", - "react-dom": "^18", - "styled-components": "^6.1.15" + "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", From 042579a0a11c348952580166ffe576be39ff2ab8 Mon Sep 17 00:00:00 2001 From: nerte Date: Sat, 5 Apr 2025 06:23:39 +0900 Subject: [PATCH 02/18] [Feat]create [articleId] page and next data fetching :wqgetserversideProps --- components/Button.tsx | 14 +++++- components/Card.tsx | 17 ++++--- components/Input.tsx | 30 ++++++++---- lib/Articles.tsx | 5 ++ package-lock.json | 10 ++++ package.json | 1 + pages/_app.tsx | 2 +- pages/addboard.tsx | 66 +++++++++++++++++++++++++++ pages/board/[articleId].tsx | 48 +++++++++++++++++++ pages/{boards.tsx => board/index.tsx} | 0 public/assets/icons/previous.icon.svg | 4 ++ 11 files changed, 178 insertions(+), 19 deletions(-) create mode 100644 pages/addboard.tsx create mode 100644 pages/board/[articleId].tsx rename pages/{boards.tsx => board/index.tsx} (100%) create mode 100644 public/assets/icons/previous.icon.svg diff --git a/components/Button.tsx b/components/Button.tsx index 883c721..47e80f7 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -1,16 +1,26 @@ +import clsx from "clsx"; import { ReactNode } from "react"; // interface Props { onClick: onClick; children: ReactNode; disabled?: boolean; + className?: string; } -export default function Button({ onClick, children, ...props }: Props) { +export default function Button({ + onClick, + children, + className, + ...props +}: Props) { return ( <> diff --git a/components/Card.tsx b/components/Card.tsx index a6fc4e6..efcca3a 100644 --- a/components/Card.tsx +++ b/components/Card.tsx @@ -7,6 +7,7 @@ import BtnHeart from "./BtnHeart"; // interface Props { article: Article; + isDetailArticle?: boolean; } export function BestArticle({ article }: Props) { const formattedDate = useFormatDate(article.createdAt); @@ -41,7 +42,7 @@ export function BestArticle({ article }: Props) { ); } -export function Articles({ article }: Props) { +export function Articles({ article, isDetailArticle }: Props) { const formattedDate = useFormatDate(article.createdAt); const articleImg = article.image || ProfileImg; @@ -49,17 +50,19 @@ export function Articles({ article }: Props) {

{article.content}

- 상품이미지 + {isDetailArticle && ( + 상품이미지 + )}
프로필 -
{article.writer.nickname}
+
{article.writer?.nickname}
{formattedDate}
diff --git a/components/Input.tsx b/components/Input.tsx index ef448c0..64a1bca 100644 --- a/components/Input.tsx +++ b/components/Input.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; import { ChangeEvent, useRef, useState } from "react"; // -interface Props { +interface Props extends React.InputHTMLAttributes { onChange: (e: ChangeEvent) => void; label?: string; placeholder?: string; @@ -18,7 +18,13 @@ interface Props { onKeyUp?: (e: React.KeyboardEvent) => void; type?: "text" | "number"; } -export function Input({ onChange, type = "text", ...props }: Props) { + +export function Input({ + onChange, + placeholder, + type = "text", + ...props +}: Props) { const { label, onKeyUp, $edit, $textArea, $comment } = props; return ( @@ -28,6 +34,7 @@ export function Input({ onChange, type = "text", ...props }: Props) { $comment && "text-H5Bold" } w-full h-[26px] font-Pretendard text-gray-800 text-H4Bold`} > + * {label}
); } + // interface ImgProps extends Omit { onChange: (value: File | string) => void; } -export function ImgInput({ onChange, ...props }: ImgProps) { +export function ImgInput({ onChange, label, ...props }: ImgProps) { const imgRef = useRef(null); const [imgPreview, setImgPreview] = useState(""); @@ -63,16 +72,19 @@ export function ImgInput({ onChange, ...props }: ImgProps) { } }; }; + // const handleClickImgDelete = () => { setImgPreview(""); onChange(""); }; + return ( -
-
+
+

{label}

+
{imgPreview && (
=6" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", diff --git a/package.json b/package.json index 908dafa..03773dd 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "axios": "^1.8.1", + "clsx": "^2.1.1", "lodash.throttle": "^4.1.1", "next": "^15.2.1", "react": "^18", diff --git a/pages/_app.tsx b/pages/_app.tsx index 5c8e310..1e7e044 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,7 +6,7 @@ export default function App({ Component, pageProps }: AppProps) { <>