아이템 추가 *
-
최소 3개, 최대 10개까지 아이템을 추가할 수 있어요.
아이템의 순서대로 순위가 정해져요.
diff --git a/src/app/create/_components/item/Items.tsx b/src/app/create/_components/item/Items.tsx
index e287b31e..4fa0655e 100644
--- a/src/app/create/_components/item/Items.tsx
+++ b/src/app/create/_components/item/Items.tsx
@@ -28,7 +28,7 @@ const urlToDomain = (link: string) => {
export default function Items() {
const [currentLink, setCurrentLink] = useState('');
-
+
const {
register,
control,
@@ -87,7 +87,7 @@ export default function Items() {
const commentError = errorMessage('comment');
const linkError = errorMessage('link');
const imageError = errorMessage('image');
-
+
return (
{(provided, snapshot) => (
diff --git a/src/app/create/_components/item/LinkPreview.css.ts b/src/app/create/_components/item/LinkPreview.css.ts
new file mode 100644
index 00000000..a7c14b02
--- /dev/null
+++ b/src/app/create/_components/item/LinkPreview.css.ts
@@ -0,0 +1,26 @@
+import { style } from '@vanilla-extract/css';
+
+export const previewBox = style({
+ width: '90px',
+ height: '90px',
+
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ position: 'relative',
+
+ backgroundColor: '#EBF4FF',
+
+ borderRadius: '10px',
+ whiteSpace: 'pre-wrap',
+ overflow: 'hidden',
+ cursor: 'pointer',
+});
+
+export const clearButton = style({
+ position: 'absolute',
+ top: '5px',
+ right: '5px',
+});
diff --git a/src/app/create/_components/item/LinkPreview.tsx b/src/app/create/_components/item/LinkPreview.tsx
new file mode 100644
index 00000000..85f6c161
--- /dev/null
+++ b/src/app/create/_components/item/LinkPreview.tsx
@@ -0,0 +1,39 @@
+import Image from 'next/image';
+
+import ClearBlackIcon from '/public/icons/clear_x_black.svg';
+import LinkIcon from '/public/icons/link.svg';
+import * as styles from './LinkPreview.css';
+
+interface LinkPreviewProps {
+ type: 'link' | 'image';
+ url?: string;
+ domain?: string;
+ imageUrl?: string;
+ handleClearButtonClick: () => void;
+}
+
+export default function PreviewBox({ type, url, domain, imageUrl, handleClearButtonClick }: LinkPreviewProps) {
+ const handlePreviewClick = () => {
+ window.open(url);
+ };
+
+ const handleClearClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ handleClearButtonClick();
+ };
+
+ return (
+
+ {type === 'link' && (
+ <>
+
+
{domain}
+ >
+ )}
+ {type === 'image' &&
}
+
+
+ );
+}
diff --git a/src/styles/globalStyles.css.ts b/src/styles/GlobalStyles.css.ts
similarity index 100%
rename from src/styles/globalStyles.css.ts
rename to src/styles/GlobalStyles.css.ts
diff --git a/yarn.lock b/yarn.lock
index 99137dbc..b3e39938 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1134,6 +1134,7 @@
regenerator-runtime "^0.14.0"
"@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3":
+
version "7.23.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -1709,6 +1710,7 @@
resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+
"@esbuild/darwin-x64@0.17.6":
version "0.17.6"
resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.6.tgz#f4dacd1ab21e17b355635c2bba6a31eba26ba569"
@@ -1754,6 +1756,7 @@
resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+
"@esbuild/linux-arm64@0.17.6":
version "0.17.6"
resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.6.tgz#967dfb951c6b2de6f2af82e96e25d63747f75079"
@@ -1948,7 +1951,7 @@
version "0.19.12"
resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
-
+
"@esbuild/win32-ia32@0.17.6":
version "0.17.6"
resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.6.tgz#7fb3f6d4143e283a7f7dffc98a6baf31bb365c7e"
@@ -1958,7 +1961,7 @@
version "0.18.20"
resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
+
"@esbuild/win32-ia32@0.19.12":
version "0.19.12"
resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
@@ -5810,61 +5813,34 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
-esbuild@0.17.6:
- version "0.17.6"
- resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.6.tgz#bbccd4433629deb6e0a83860b3b61da120ba4e01"
- integrity sha512-TKFRp9TxrJDdRWfSsSERKEovm6v30iHnrjlcGhLBOtReE28Yp1VSBRfO3GTaOFMoxsNerx4TjrhzSuma9ha83Q==
- optionalDependencies:
- "@esbuild/android-arm" "0.17.6"
- "@esbuild/android-arm64" "0.17.6"
- "@esbuild/android-x64" "0.17.6"
- "@esbuild/darwin-arm64" "0.17.6"
- "@esbuild/darwin-x64" "0.17.6"
- "@esbuild/freebsd-arm64" "0.17.6"
- "@esbuild/freebsd-x64" "0.17.6"
- "@esbuild/linux-arm" "0.17.6"
- "@esbuild/linux-arm64" "0.17.6"
- "@esbuild/linux-ia32" "0.17.6"
- "@esbuild/linux-loong64" "0.17.6"
- "@esbuild/linux-mips64el" "0.17.6"
- "@esbuild/linux-ppc64" "0.17.6"
- "@esbuild/linux-riscv64" "0.17.6"
- "@esbuild/linux-s390x" "0.17.6"
- "@esbuild/linux-x64" "0.17.6"
- "@esbuild/netbsd-x64" "0.17.6"
- "@esbuild/openbsd-x64" "0.17.6"
- "@esbuild/sunos-x64" "0.17.6"
- "@esbuild/win32-arm64" "0.17.6"
- "@esbuild/win32-ia32" "0.17.6"
- "@esbuild/win32-x64" "0.17.6"
-
-esbuild@^0.18.10:
- version "0.18.20"
- resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
- integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.19.3, "esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0":
+ version "0.19.12"
+ resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+ integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
optionalDependencies:
- "@esbuild/android-arm" "0.18.20"
- "@esbuild/android-arm64" "0.18.20"
- "@esbuild/android-x64" "0.18.20"
- "@esbuild/darwin-arm64" "0.18.20"
- "@esbuild/darwin-x64" "0.18.20"
- "@esbuild/freebsd-arm64" "0.18.20"
- "@esbuild/freebsd-x64" "0.18.20"
- "@esbuild/linux-arm" "0.18.20"
- "@esbuild/linux-arm64" "0.18.20"
- "@esbuild/linux-ia32" "0.18.20"
- "@esbuild/linux-loong64" "0.18.20"
- "@esbuild/linux-mips64el" "0.18.20"
- "@esbuild/linux-ppc64" "0.18.20"
- "@esbuild/linux-riscv64" "0.18.20"
- "@esbuild/linux-s390x" "0.18.20"
- "@esbuild/linux-x64" "0.18.20"
- "@esbuild/netbsd-x64" "0.18.20"
- "@esbuild/openbsd-x64" "0.18.20"
- "@esbuild/sunos-x64" "0.18.20"
- "@esbuild/win32-arm64" "0.18.20"
- "@esbuild/win32-ia32" "0.18.20"
- "@esbuild/win32-x64" "0.18.20"
+ "@esbuild/aix-ppc64" "0.19.12"
+ "@esbuild/android-arm" "0.19.12"
+ "@esbuild/android-arm64" "0.19.12"
+ "@esbuild/android-x64" "0.19.12"
+ "@esbuild/darwin-arm64" "0.19.12"
+ "@esbuild/darwin-x64" "0.19.12"
+ "@esbuild/freebsd-arm64" "0.19.12"
+ "@esbuild/freebsd-x64" "0.19.12"
+ "@esbuild/linux-arm" "0.19.12"
+ "@esbuild/linux-arm64" "0.19.12"
+ "@esbuild/linux-ia32" "0.19.12"
+ "@esbuild/linux-loong64" "0.19.12"
+ "@esbuild/linux-mips64el" "0.19.12"
+ "@esbuild/linux-ppc64" "0.19.12"
+ "@esbuild/linux-riscv64" "0.19.12"
+ "@esbuild/linux-s390x" "0.19.12"
+ "@esbuild/linux-x64" "0.19.12"
+ "@esbuild/netbsd-x64" "0.19.12"
+ "@esbuild/openbsd-x64" "0.19.12"
+ "@esbuild/sunos-x64" "0.19.12"
+ "@esbuild/win32-arm64" "0.19.12"
+ "@esbuild/win32-ia32" "0.19.12"
+ "@esbuild/win32-x64" "0.19.12"
esbuild@^0.19.3, "esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0":
version "0.19.12"
@@ -9063,6 +9039,7 @@ mkdirp@~0.5.1:
minimist "^1.2.6"
mlly@^1.1.0, mlly@^1.2.0, mlly@^1.4.2:
+
version "1.5.0"
resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.5.0.tgz#8428a4617d54cc083d3009030ac79739a0e5447a"
integrity sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==
@@ -10174,6 +10151,7 @@ postcss@^7.0.35:
source-map "^0.6.1"
postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.32, postcss@^8.4.33, postcss@^8.4.4:
+
version "8.4.33"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -10844,11 +10822,26 @@ rollup@^2.43.1:
optionalDependencies:
fsevents "~2.3.2"
-rollup@^3.27.1:
- version "3.29.4"
- resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
- integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollup@^4.2.0:
+ version "4.9.6"
+ resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.6.tgz#4515facb0318ecca254a2ee1315e22e09efc50a0"
+ integrity sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==
+ dependencies:
+ "@types/estree" "1.0.5"
optionalDependencies:
+ "@rollup/rollup-android-arm-eabi" "4.9.6"
+ "@rollup/rollup-android-arm64" "4.9.6"
+ "@rollup/rollup-darwin-arm64" "4.9.6"
+ "@rollup/rollup-darwin-x64" "4.9.6"
+ "@rollup/rollup-linux-arm-gnueabihf" "4.9.6"
+ "@rollup/rollup-linux-arm64-gnu" "4.9.6"
+ "@rollup/rollup-linux-arm64-musl" "4.9.6"
+ "@rollup/rollup-linux-riscv64-gnu" "4.9.6"
+ "@rollup/rollup-linux-x64-gnu" "4.9.6"
+ "@rollup/rollup-linux-x64-musl" "4.9.6"
+ "@rollup/rollup-win32-arm64-msvc" "4.9.6"
+ "@rollup/rollup-win32-ia32-msvc" "4.9.6"
+ "@rollup/rollup-win32-x64-msvc" "4.9.6"
fsevents "~2.3.2"
rollup@^4.2.0:
@@ -11210,7 +11203,7 @@ source-map-support@0.5.13:
buffer-from "^1.0.0"
source-map "^0.6.0"
-source-map-support@^0.5.21, source-map-support@^0.5.6, source-map-support@~0.5.20:
+source-map-support@^0.5.6, source-map-support@~0.5.20:
version "0.5.21"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -12191,19 +12184,16 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
-vite-node@^0.28.5:
- version "0.28.5"
- resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.28.5.tgz#56d0f78846ea40fddf2e28390899df52a4738006"
- integrity sha512-LmXb9saMGlrMZbXTvOveJKwMTBTNUH66c8rJnQ0ZPNX+myPEol64+szRzXtV5ORb0Hb/91yq+/D3oERoyAt6LA==
+vite-node@^1.2.0:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.2.2.tgz#f6d329b06f9032130ae6eac1dc773f3663903c25"
+ integrity sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==
dependencies:
cac "^6.7.14"
debug "^4.3.4"
- mlly "^1.1.0"
- pathe "^1.1.0"
+ pathe "^1.1.1"
picocolors "^1.0.0"
- source-map "^0.6.1"
- source-map-support "^0.5.21"
- vite "^3.0.0 || ^4.0.0"
+ vite "^5.0.0"
vite-node@^1.2.0:
version "1.2.2"
@@ -12221,11 +12211,11 @@ vite-node@^1.2.0:
resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
dependencies:
- esbuild "^0.18.10"
- postcss "^8.4.27"
- rollup "^3.27.1"
+ esbuild "^0.19.3"
+ postcss "^8.4.32"
+ rollup "^4.2.0"
optionalDependencies:
- fsevents "~2.3.2"
+ fsevents "~2.3.3"
vite@^5.0.0, vite@^5.0.11:
version "5.0.12"