[유선향] -sprint9

.gitignore

@@ -8,28 +8,20 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
 
 # production
 /build
 
 # misc
 .DS_Store
-*.pem
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.next
+.env.local
 
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

.gitmessage.txt

@@ -0,0 +1,25 @@
+[Type] title 
+
+# [Type] 입력 목록
+#  1. Feat: 새로운 기능 추가
+#  2. Fix: 오류 해결
+#  3. Rename: 파일 혹은 폴더명을 수정만 한 경우
+#  4. Remove: 파일을 삭제만 한 경우
+#  5. Style: 기능 수정 없이 코드 스타일만 변경한 경우 (코드 포매팅, 세미콜론 누락 등)
+#  6. Design: 사용자 UI 디자인 변경 (CSS 등)
+#  7. Refactor: 코드 베이스의 특정 부분을 재정렬 (Refactoring)
+#  8. Test: 테스트와 관련된 모든 것
+#  9. Docs: 문서화에 관한 모든 것
+#  10. Chore: 빌드 업무 수정, 패키지 매니저 수정 (gitignore 수정 등)
+#  11. Perf: 성능 개선
+#
+# [Title] 규칙
+#  1. 50자 이내 짧은 요약 (영어의 경우 첫글자는 대문자로)
+#  2. 명령형으로 작성 (과거형X)
+#  3. 제목 끝에 .(마침표) 금지
+#
+# [Body] 작성 규칙
+#  1. 제목과 본문 사이 빈 칸 한줄 필수 (제목과 본문 분리)
+#  2. 생략 가능, 필요 시 자세한 설명 작성 (72자 내외로 마무리)
+#  3. 적용한 변경사항과 그것을 만든 이유에 대해 설명
+#     - 어떻게보다는 "무엇을", "왜"

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["inputwidth"]
+}

components/BtnHeart.tsx

@@ -0,0 +1,40 @@
+import activeHeart from "@/public/assets/icons/active.heart.icon.svg";
+import inactiveHeart from "@/public/assets/icons/inactive.heart.icon.svg";
+import Image from "next/image";
+
+//
+interface Props {
+  value: number;
+  active?: boolean;
+}
+export default function BtnHeart({ value, ...props }: Props) {
+  const { active, ...rest } = props;
+  const count = value > 9999 ? "9999+" : value;
+  return (
+    <>
+      {active ? (
+        <div className="flex items-center justify-between gap-[6px] w-16 h-6 border-none font-Pretendard text-H7Regular bg-gray-50 text-gray-500 ">
+          <Image
+            width={16}
+            height={16}
+            src={activeHeart}
+            {...rest}
+            alt="좋아요"
+          />
+          {value}
+        </div>
+      ) : (
+        <div className="flex items-center justify-between gap-[6px] w-16 h-6 border-none font-Pretendard text-H7Regular bg-white text-gray-500 ">
+          <Image
+            width={16}
+            height={16}
+            src={inactiveHeart}
+            {...rest}
+            alt="좋아요"
+          />
+          {count}
+        </div>
+      )}
+    </>
+  );
+}

components/Button.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+//
+interface Props {
+  onClick: onClick;
+  children: ReactNode;
+  disabled?: boolean;
+}
+export default function Button({ onClick, children, ...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"
+      >
+        {children}
+      </button>
+    </>
+  );
+}

components/Card.tsx

@@ -0,0 +1,69 @@
+import BestImage from "@/public/assets/icons/best.icon.svg";
+import Image from "next/image";
+import ProfileImg from "@/public/assets/icons/default.profile.icon.svg";
+import { useFormatDate } from "@/hooks/useFormatting";
+
+import BtnHeart from "./BtnHeart";
+//
+interface Props {
+  article: Article;
+}
+export function BestArticle({ article }: Props) {
+  const formattedDate = useFormatDate(article.createdAt);
+  const articleImg = article.image || "";
+  return (
+    <div className=" flex flex-col gap-4 w-[384px]tablet:w-full mobile:w-full h-[169px] tablet:h-[198px] border-none bg-gray-50 px-6 rounded-lg">
+      <Image
+        className="w-[102px] h-[30px] "
+        src={BestImage}
+        width={102}
+        height={30}
+        alt="베스트"
+      />
+      <div className="flex justify-between gap-2 tablet:gap-10 font-Pretendard text-H3Bold">
+        <p>{article.content}</p>
+        <Image
+          className="w-[72px] h-[72px] "
+          width={72}
+          height={72}
+          src={articleImg}
+          alt="상품이미지"
+        />
+      </div>
+      <div className="flex justify-between text-gray-500 font-Pretendard text-H7Regular ">
+        <div className="flex gap-2">
+          {article.writer.nickname}
+          <BtnHeart value={article.likeCount} />
+        </div>
+        <div>{formattedDate}</div>
+      </div>
+    </div>
+  );
+}
+
+export function Articles({ article }: Props) {
+  const formattedDate = useFormatDate(article.createdAt);
+  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="상품이미지"
+        />
+      </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>
+        <BtnHeart value={article.likeCount} />
+      </div>
+    </div>
+  );
+}

components/Input.tsx

@@ -0,0 +1,136 @@
+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";
+//
+
+interface Props {
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  placeholder?: string;
+  name: string;
+  tag?: boolean;
+  value?: string;
+  $comment?: boolean;
+  $textArea?: boolean;
+  $edit?: boolean;
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  type?: "text" | "number";
+}
+export function Input({ onChange, type = "text", ...props }: Props) {
+  const { label, onKeyUp, $edit, $textArea, $comment } = props;
+
+  return (
+    <div className="flex flex-col justify-start w-full gap-4">
+      <div
+        className={`${label ? "block" : "none"} ${
+          $comment && "text-H5Bold"
+        } w-full h-[26px] font-Pretendard text-gray-800 text-H4Bold`}
+      >
+        {label}
+      </div>
+      <input
+        className={`${$textArea && "h-[282px]"} ${
+          $comment && "text-H7Regular h-[104px] mobile:h-[129px] "
+        } ${
+          $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}
+        onKeyUp={onKeyUp || undefined}
+      />
+    </div>
+  );
+}
+//
+interface ImgProps extends Omit<Props, "onChange"> {
+  onChange: (value: File | string) => void;
+}
+export function ImgInput({ onChange, ...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 reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      if (typeof reader.result === "string") {
+        setImgPreview(reader.result);
+        onChange(file);
+      }
+    };
+  };
+  //
+  const handleClickImgDelete = () => {
+    setImgPreview("");
+    onChange("");
+  };
+  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 
+          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>
+      </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>
+  );
+}
+
+export function SearchInput({ onChange, ...props }: Props) {
+  return (
+    <div className="relative w-full">
+      <input
+        onChange={onChange}
+        className=" 
+      rounded-xl border-none px-[44px] py-[16px] w-full h-[42px] bg-gray-100 
+      font-Pretendard text-gray-800 text-H5Regular
+      placeholder:text-H5Regular placeholder:text-gray-400
+      "
+      />
+      <Image
+        className="absolute translate-x-0 left-4 top-1/2 -translate-y-2/4"
+        src={SearchIcon}
+        alt="검색"
+        width={15}
+        height={15}
+      />
+    </div>
+  );
+}

components/Nav.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+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";
+export default function Nav() {
+  const device: string = useWindowSize();
+  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 ">
+        <div className="flex items-center w-screen gap-8 mobile:gap-2">
+          <div className="flex w-auto gap-2">
+            <Image
+              className="block w-10 h-10 mobile:hidden"
+              src={pandaLogo}
+              alt="판다로고"
+              width={40}
+              height={40}
+            />
+            <Image
+              className="w-[103px] h-[51px] cursor-pointer mobile:w-20"
+              src={textLogo}
+              alt="판다마켓"
+              width={103}
+              height={51}
+            />
+          </div>
+          <div className="flex w-auto gap-7 mobile:gap-2 font-Pretendard text-H4Bold">
+            <Link href="/docs">자유게시판</Link>
+            <Link href="/items">중고마켓</Link>
+          </div>
+        </div>
+        <Link href="/mypage">
+          <Image
+            className="w-10 h-10"
+            src={myLogo}
+            alt="프로필 이미지"
+            width={40}
+            height={40}
+          />
+        </Link>
+      </div>
+    </div>
+  );
+}