Skip to content

๐Ÿ’„[Design] ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ ˆ์•„์ด์›ƒ ์กฐ์ • ๋งˆ๋ฌด๋ฆฌ #281 #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
s-ja merged 1 commit into from
Nov 27, 2024
Merged

๐Ÿ’„[Design] ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ ˆ์•„์ด์›ƒ ์กฐ์ • ๋งˆ๋ฌด๋ฆฌ #281 #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 7 additions & 15 deletions src/app/admin/(block)/image/components/image-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,21 @@ import Link from "next/link";
import ErrorBoundary from "@components/error-boundary";

interface Props {
// handeInputImageClick: () => void;
selectedImageUrl: string;
connectingUrl?: string;
title: string | null;
}

const ImageBox = ({ selectedImageUrl, connectingUrl, title }: Props) => {
return (
<div className={"overflow-hidden rounded shadow-lg"}>
<div className="overflow-hidden rounded-lg shadow-lg">
<div>
{/*<button*/}
{/* onClick={handeInputImageClick}*/}
{/* className="absolute right-2 top-2 rounded-3xl bg-orange-600 p-2"*/}
{/*>*/}
{/* <Image*/}
{/* src="/assets/icons/icon_pencil.png"*/}
{/* alt="์—ฐํ•„ ์•„์ด์ฝ˜"*/}
{/* width={24}*/}
{/* height={24}*/}
{/* />*/}
{/*</button>*/}
<Link
href={connectingUrl || "#"}
className={`${!connectingUrl && "cursor-default"}`}
aria-disabled={!connectingUrl}
>
<div className="relative h-[20rem] w-full">
<div className="relative aspect-[16/9] w-full bg-neutral-200 dark:bg-neutral-800">
<Image
src={
selectedImageUrl
Expand All @@ -40,13 +28,17 @@ const ImageBox = ({ selectedImageUrl, connectingUrl, title }: Props) => {
}
alt={title ? `${title} ์ด๋ฏธ์ง€` : "๊ธฐ๋ณธ ์ด๋ฏธ์ง€"}
fill
className="object-cover"
sizes="(max-width: 640px) 100vw,
(max-width: 768px) 90vw,
80vw"
/>
</div>
</Link>
</div>
{title && (
<div
className={"flex items-center justify-center py-2"}
className="flex items-center justify-center border-t border-neutral-200 px-3 py-2 text-center dark:border-neutral-700"
aria-label={`์ด๋ฏธ์ง€ ์ œ๋ชฉ: ${title}`}
>
{title}
Expand Down
71 changes: 0 additions & 71 deletions src/app/admin/(block)/image/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,75 +36,12 @@ const Page = () => {
} else await blockApis.handleResponseError(response);
};

// const addImageBlock = async () => {
// const token = sessionStorage.getItem("token");
// if (!token) {
// router.push("/login");
// return;
// }
// const nowSequence = await getSequence(token);
//
// try {
// const response = await fetch(
// `${process.env.NEXT_PUBLIC_API_URL}/api/link/add`,
// {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// Authorization: `Bearer ${token}`,
// },
// body: JSON.stringify(params),
// },
// );
// if (response.ok) {
// alert("์ด๋ฏธ์ง€ ๋ธ”๋ก ์ถ”๊ฐ€ ์™„๋ฃŒ");
// router.push("/admin");
// } else {
// const { status } = response;
// console.log(status);
// if (status === 500) {
// alert("์„œ๋ฒ„ ์—๋Ÿฌ");
// }
// }
// } catch (error) {
// console.log(error);
// }
// };

const handleAddButtonClick = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!selectedImageUrl) return;
addImageBlock();
};

// const handeInputImageClick = () => {
// inputImageRef.current?.click();
// };

// const selectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
// const file = e.target.files?.[0];
// if (!file) {
// return;
// }
// const reader = new FileReader();
// reader.onload = (e) => {
// const dataUrl = e.target?.result;
// if (typeof dataUrl !== "string") {
// return;
// }
// setPreviewImageUrl(dataUrl);
// };
// reader.readAsDataURL(file);
// };

// const handleAddButtonClick = () => {
// if (!checkImageUrl(imageUrl)) {
// alert("์ด๋ฏธ์ง€ URL์„ ํ™•์ธํ•ด์ฃผ์„ธ์š”.");
// return;
// }
// setSelectedImageUrl(imageUrl || previewImageUrl);
// };

const setImageText = (text: string) => {
if (!checkUrl(text) && text !== "") {
alert("URL์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.");
Expand All @@ -129,14 +66,6 @@ const Page = () => {
required
aria-label="์ด๋ฏธ์ง€ URL์„ ์ž…๋ ฅํ•˜์„ธ์š”"
/>
{/*<input*/}
{/* id="file"*/}
{/* ref={inputImageRef}*/}
{/* type="file"*/}
{/* accept="image/*"*/}
{/* style={{ display: "none" }}*/}
{/* onChange={selectFile}*/}
{/*/>*/}
<ImageBox
selectedImageUrl={selectedImageUrl}
connectingUrl={connectingUrl}
Expand Down
26 changes: 15 additions & 11 deletions src/components/UI/empty-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,25 @@ import Image from "next/image";

export default function EmptyBlock() {
return (
<>
<div className="h-64 items-center rounded border bg-slate-100 text-center align-middle">
<Image
className="mb-[10px] ml-[44%] mt-[17px]"
src="/assets/icons/icon_empty.png"
alt="arrow_down"
width={80}
height={40}
/>
<div className="flex h-64 flex-col items-center justify-center rounded border border-[var(--primary-200)] bg-[var(--background)] text-[var(--foreground)] transition-colors duration-200 dark:border-[var(--primary-300)]">
<Image
className="mb-4"
src="/assets/icons/icon_empty.png"
alt="ํ‘œ์‹œํ•  ๋ธ”๋ก์ด ์—†์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์•„์ด์ฝ˜"
width={80}
height={40}
priority
/>
<div className="space-y-2 text-center">
<p>์ง€๊ธˆ ๊ณต๊ฐœ๋œ ๋งํฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค</p>
<p>
<strong className="cursor-pointer">์†Œ์‹๋ฐ›๊ธฐ</strong> ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”
<strong className="cursor-pointer text-[var(--primary)] transition-colors hover:text-[var(--primary-450)] dark:text-[var(--primary-400)] dark:hover:text-[var(--primary-350)]">
์†Œ์‹๋ฐ›๊ธฐ
</strong>{" "}
๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”
</p>
<p>์ƒˆ๋กœ์šด ๋งํฌ๊ฐ€ ์ƒ๊ธฐ๋ฉด ์•Œ๋ ค๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค</p>
</div>
</>
</div>
);
}
23 changes: 11 additions & 12 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,17 @@
[data-theme="dark"] {
--background: #121212;
--foreground: #f5f5f5;
/* Primary Colors - ๋‹คํฌ ๋ชจ๋“œ ์ˆ˜์ • */
--primary: #ff6b31; /* ๋‹คํฌ๋ชจ๋“œ์—์„œ ๋” ์„ ๋ช…ํ•˜๊ฒŒ */
--primary-100: #1a0c04; /* ๋” ์–ด๋‘ก๊ฒŒ ์กฐ์ • */
--primary-200: #331808; /* ๋” ์–ด๋‘ก๊ฒŒ ์กฐ์ • */
--primary-250: #662410; /* ์กฐ์ • */
--primary-300: #993618; /* ์กฐ์ • */
--primary-350: #cc4820; /* ์กฐ์ • */
--primary-400: #ff5b1a; /* ์œ ์ง€ */
--primary-450: #ff6b31; /* ์œ ์ง€ */
/* Input Colors - ๋‹คํฌ ๋ชจ๋“œ ์ˆ˜์ • */
--input-color-line: #993618; /* ๋” ๋ฐ๊ฒŒ ์กฐ์ • */
--input-color-bg: #1a0c04; /* ๋” ์–ด๋‘ก๊ฒŒ ์กฐ์ • */
/* Primary Colors - ๋‹คํฌ ๋ชจ๋“œ */
--primary: #ff6b31;
--primary-100: #1a0c04;
--primary-200: #331808;
--primary-250: #662410;
--primary-300: #993618;
--primary-350: #cc4820;
--primary-400: #ff5b1a;
--primary-450: #ff6b31;
--input-color-line: #993618;
--input-color-bg: #1a0c04;
}

/* ์‹œ์Šคํ…œ ์„ค์ •์— ๋งž์ถ˜ ๋‹คํฌ ๋ชจ๋“œ ํ…Œ๋งˆ ์ ์šฉ */
Expand Down