Next 유선향 sprint10

components/Button.tsx

@@ -1,16 +1,28 @@
+import clsx from "clsx";
 import { ReactNode } from "react";
 //
 interface Props {
-  onClick: onClick;
+  onClick?: onClick;
   children: ReactNode;
   disabled?: boolean;
+  className?: string;
 }
-export default function Button({ onClick, children, ...props }: Props) {
+export default function Button({
+  onClick,
+  children,
+  className,
+  disabled,
+  ...props
+}: Props) {
   return (
     <>
       <button
         onClick={onClick}
-        className="flex  bg-blue-500 justify-center items-center w-full h-full rounded-[8px] border-none font-Pretendard text-H5Bold text-gray-100 bg-light-blue cursor-pointer"
+        className={clsx(
+          "flex  bg-blue-500 justify-center items-center w-full h-full rounded-[8px] border-none font-Pretendard text-H5Bold text-gray-100 bg-light-blue cursor-pointer",
+          disabled ? "bg-gray-400" : "",
+          className
+        )}
       >
         {children}
       </button>

components/Card.tsx

@@ -4,9 +4,11 @@ import ProfileImg from "@/public/assets/icons/default.profile.icon.svg";
 import { useFormatDate } from "@/hooks/useFormatting";
 
 import BtnHeart from "./BtnHeart";
+import Profile from "./common/Profile";
 //
 interface Props {
   article: Article;
+  isDetailArticle?: boolean;
 }
 export function BestArticle({ article }: Props) {
   const formattedDate = useFormatDate(article.createdAt);
@@ -41,27 +43,23 @@ export function BestArticle({ article }: Props) {
   );
 }
 
-export function Articles({ article }: Props) {
-  const formattedDate = useFormatDate(article.createdAt);
+export function Articles({ article, isDetailArticle }: Props) {
   const articleImg = article.image || ProfileImg;
 
   return (
     <div className=" flex flex-col gap-4 w-full h-[138px] bg-light-gray px-6 border-b border-gray-200">
       <div className="flex justify-between font-Pretendard text-H3Bold">
         <p>{article.content}</p>
-        <img
-          className="w-[72px] h-[72px] text-H8"
-          src={articleImg}
-          alt="상품이미지"
-        />
+        {!isDetailArticle && (
+          <img
+            className="w-[72px] h-[72px] text-H8"
+            src={article.image || ProfileImg}
+            alt="상품이미지"
+          />
+        )}
       </div>
       <div className="flex justify-between text-gray-500 font-Pretendard text-H7Regular ">
-        <div className="flex gap-2">
-          <Image src={ProfileImg} width={24} height={24} alt="프로필" />
-
-          <div>{article.writer.nickname}</div>
-          {formattedDate}
-        </div>
+        <Profile value={article} />
         <BtnHeart value={article.likeCount} />
       </div>
     </div>

components/Input.tsx

@@ -2,11 +2,13 @@ import PlusIcon from "@/public/assets/icons/plusIcon.svg";
 import DeleteIcon from "@/public/assets/icons/DeleteIcon.svg";
 import SearchIcon from "@/public/assets/icons/search.icon.svg";
 import Image from "next/image";
-import { ChangeEvent, useRef, useState } from "react";
+import { useRef, useState } from "react";
+import { uploadImage } from "@/lib/image";
+import { renameFile } from "@/hooks/useRenameFile";
 //
 
 interface Props {
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
   label?: string;
   placeholder?: string;
   name: string;
@@ -17,8 +19,16 @@ interface Props {
   $edit?: boolean;
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   type?: "text" | "number";
+  isAsterisk?: boolean;
 }
-export function Input({ onChange, type = "text", ...props }: Props) {
+
+export function Input({
+  onChange,
+  placeholder,
+  type = "text",
+  isAsterisk,
+  ...props
+}: Props) {
   const { label, onKeyUp, $edit, $textArea, $comment } = props;
 
   return (
@@ -28,6 +38,7 @@ export function Input({ onChange, type = "text", ...props }: Props) {
           $comment && "text-H5Bold"
         } w-full h-[26px] font-Pretendard text-gray-800 text-H4Bold`}
       >
+        {isAsterisk && <span>*</span>}
         {label}
       </div>
       <input
@@ -37,78 +48,89 @@ export function Input({ onChange, type = "text", ...props }: Props) {
           $edit && "text-H7Regular h-[80px]"
         }relative w-full h-[56px] bg-gray-100 font-Pretendard text-H6Regular border-none rounded-xl text-gray-800 px-4 py-6 placeholder-gray-400 placeholder:text-H5Regular placeholder:absolute focus:outline-none`}
         type={type}
-        onChange={onChange}
+        onChange={(e) => {
+          if (e.nativeEvent.composed) return onChange(e.target.value);
+        }}
         onKeyUp={onKeyUp || undefined}
+        placeholder={placeholder}
       />
     </div>
   );
 }
+
 //
 interface ImgProps extends Omit<Props, "onChange"> {
-  onChange: (value: File | string) => void;
+  onChange: (value: null | string) => void;
 }
-export function ImgInput({ onChange, ...props }: ImgProps) {
+export function ImgInput({ onChange, label, ...props }: ImgProps) {
   const imgRef = useRef<HTMLInputElement>(null);
   const [imgPreview, setImgPreview] = useState<string>("");
 
   const handlePreviewImg = () => {
     if (!imgRef.current || !imgRef.current.files?.length) return;
     const file = imgRef.current.files[0];
+
+    const renamedFile = renameFile(file);
+
     const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onloadend = () => {
+    reader.readAsDataURL(renamedFile);
+
+    reader.onloadend = async () => {
       if (typeof reader.result === "string") {
         setImgPreview(reader.result);
-        onChange(file);
+        const formattedImage = await uploadImage(renamedFile);
+        onChange(formattedImage);
       }
     };
   };
-  //
+
   const handleClickImgDelete = () => {
     setImgPreview("");
-    onChange("");
+    onChange(null);
   };
+
   return (
-    <div className="flex gap-6 mobile:gap-[10px] ">
-      <div className="mobile:w-[168px]  w-[282px] h-[282px] bg-gray-100 rounded-xl  border-none text-gray-800">
-        <input
-          className="relative w-full h-full bg-gray-100 font-Pretendard text-H6Regular border-none rounded-xl text-gray-800 px-4 py-6 
+    <div className="flex flex-col gap-6 mobile:gap-[10px] ">
+      <p className="text-[18px] font-Pretendard text-H4Bold">{label}</p>
+      <div className="relative overflow-hidden gap-6 w-[282px] mobile:w-[168px] mobile:h-[168px] h-[282px] bg-gray-100 rounded-xl  border-none text-gray-800">
+        {!imgPreview ? (
+          <>
+            <input
+              className="hidden w-full h-full  font-Pretendard text-H6Regular border-none rounded-xl text-gray-800 px-4 py-6 
           placeholder-gray-400 placeholder:text-H5Regular placeholder:top-[10px] placeholder:text-left placeholder:absolute focus:outline-none"
-          type="file"
-          id="fileUpload"
-          accept="image/*"
-          ref={imgRef}
-          onChange={handlePreviewImg}
-          {...props}
-        />
-        <label
-          htmlFor="fileUpload"
-          className="absolute text-center text-gray-400 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-H5Regular"
-        >
-          <Image width={48} height={48} src={PlusIcon} alt="추가" />
-          <p>{props.placeholder}</p>
-        </label>
+              type="file"
+              id="fileUpload"
+              accept="image/*"
+              ref={imgRef}
+              onChange={handlePreviewImg}
+              {...props}
+            />
+            <label
+              htmlFor="fileUpload"
+              className="absolute flex flex-col items-center justify-center text-gray-400 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-H5Regular"
+            >
+              <Image width={48} height={48} src={PlusIcon} alt="추가" />
+              <p className="text-center">{props.placeholder}</p>
+            </label>
+          </>
+        ) : (
+          <div className="relative">
+            <img
+              className="z-10 w-full rounded-[6px] object-fill aspect-square"
+              src={imgPreview}
+              alt="이미지 미리보기"
+            />
+            <Image
+              className="absolute top-[15px] right-[15px]"
+              src={DeleteIcon}
+              width={22}
+              height={24}
+              alt="x"
+              onClick={handleClickImgDelete}
+            />
+          </div>
+        )}
       </div>
-
-      {imgPreview && (
-        <div className="relative">
-          <Image
-            className=" aspect-square w-[282px] h-[282px] mobile:w-[168px] "
-            src={imgPreview}
-            width={282}
-            height={282}
-            alt="이미지 미리보기"
-          />
-          <Image
-            className="absolute top-[15px] right-[15px]"
-            src={DeleteIcon}
-            width={22}
-            height={24}
-            alt="x"
-            onClick={handleClickImgDelete}
-          />
-        </div>
-      )}
     </div>
   );
 }
@@ -117,7 +139,9 @@ export function SearchInput({ onChange, ...props }: Props) {
   return (
     <div className="relative w-full">
       <input
-        onChange={onChange}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
         className=" 
       rounded-xl border-none px-[44px] py-[16px] w-full h-[42px] bg-gray-100 
       font-Pretendard text-gray-800 text-H5Regular

components/Nav.tsx

@@ -3,9 +3,22 @@ import pandaLogo from "@/public/assets/Logo/pandaLogo.svg";
 import textLogo from "@/public/assets/Logo/textLogo.svg";
 import myLogo from "@/public/assets/icons/default.profile.icon.svg";
 import Image from "next/image";
-import useWindowSize from "@/hooks/useWindowSize";
+import { useEffect, useState } from "react";
+import Button from "./Button";
+import { signIn } from "@/lib/auth";
+
 export default function Nav() {
-  const device: string = useWindowSize();
+  const [isLogin, setIsLogin] = useState(false);
+  useEffect(() => {
+    const hasAccessToken = Boolean(localStorage.getItem("accessToken"));
+    setIsLogin(hasAccessToken);
+  }, []);
+
+  const handleClickLogin = async () => {
+    await signIn();
+    setIsLogin(true);
+  };
+
   return (
     <div className="fixed top-0 left-0 w-screen h-[70px] bg-white py-[10px] px-[200px] NavPadding:px-[24px] NavPadding:py-[10px]  mobile:px-[15px] mobile:py-[15px] z-50">
       <div className="flex justify-between w-screen max-w-full ">
@@ -27,19 +40,23 @@ export default function Nav() {
             />
           </div>
           <div className="flex w-auto gap-7 mobile:gap-2 font-Pretendard text-H4Bold">
-            <Link href="/docs">자유게시판</Link>
-            <Link href="/items">중고마켓</Link>
+            <Link href="/">자유게시판</Link>
+            <Link href="/">중고마켓</Link>
           </div>
         </div>
-        <Link href="/mypage">
+        {!isLogin ? (
+          <div className="w-[128px] h-12">
+            <Button onClick={() => handleClickLogin()}>로그인</Button>
+          </div>
+        ) : (
           <Image
             className="w-10 h-10"
             src={myLogo}
             alt="프로필 이미지"
             width={40}
             height={40}
           />
-        </Link>
+        )}
       </div>
     </div>
   );

components/Select.tsx

@@ -80,7 +80,7 @@ export function EditSelect({ onChange, ...props }: Props) {
           onClick={() => setIsOpen(!isOpen)}
           className="h-6 bg-white border-none cursor-pointer"
         >
-          <img src={kebabIcon} alt="케밥" />
+          <Image src={kebabIcon} width={24} height={24} alt="케밥" />
         </div>
         <ul
           className={`${

components/board/comment.tsx

@@ -0,0 +1,55 @@
+import { KeyboardEvent, useState } from "react";
+import Profile from "../common/Profile";
+import { EditSelect } from "../Select";
+import { deleteArticleComment, editArticleComment } from "@/lib/comments.api";
+
+interface Props {
+  comment: Comment;
+}
+export default function Comment({ comment }: Props) {
+  const [isEdit, setIsEdit] = useState(false);
+  const [currentValue, setCurrentValue] = useState(comment.content);
+  const handleSelect = async (option: string) => {
+    switch (option) {
+      case "수정하기": {
+        setIsEdit(true);
+        break;
+      }
+      case "삭제하기": {
+        await deleteArticleComment(comment.id);
+        break;
+      }
+    }
+  };
+  const handleChange = async (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      await editArticleComment(comment.id, currentValue);
+      setCurrentValue(currentValue);
+    }
+  };
+  return (
+    <>
+      <div className="flex flex-col w-full gap-6 mb-3 h-fit">
+        <div className="flex justify-between w-full">
+          {isEdit ? (
+            <input
+              className="w-full"
+              value={currentValue}
+              onChange={(e) => {
+                setCurrentValue(e.currentTarget.value);
+              }}
+              onKeyDown={(e) => handleChange(e)}
+            />
+          ) : (
+            <p>{currentValue}</p>
+          )}
+          <EditSelect onChange={(option) => handleSelect(option)} />
+        </div>
+        <div>
+          <Profile isComment value={comment} />
+        </div>
+      </div>
+      <div className="w-full h-px bg-gray-300" />
+    </>
+  );
+}