[Feat] : Ft/post editor (blob, file 두가지 버전) (#12)

* [Feat] : 게시글작성 초안

* [Feat] : 회원가입 기능 완성(blob버전)

* [Feat] : ui 수정 및 날씨 키워드 추가 , 키워드별 분리

* [Feat] : useCallback 사용

* [Fix] : 엔터 시 키워드 두번 입력되는 문제 수정

* [Feat] : 이미지 삭제버튼추가, 편의성을 위한 버튼 및 문구 수정

* [Feat] : bloburl과 file 둘다 보내는 형식

[description] : firebase에 저장할 bloburl과 file객체 둘 다 저장

Author: xnelb013

.gitmessage

@@ -3,12 +3,13 @@ label : 제목의 길이는 최대 40자로 간단 명료하게 작성
 # label은 소문자로 작성한다.
 # 제목에 .(마침표) 금지
 # <label> 리스트
-# Feat : 새로운 기능
-# Fix : 버그 수정
-# Style : 코드 컨벤션 변경, 코드 수정이 없는 경우
-# Docs : 문서 (문서 추가, 수정, 삭제)
-# Chore : 기타 변경사항 (빌드 스크립트 수정, 라이브러리 추가 등)
-# Test : 테스트 코드 추가
+# ✨Feat : 새로운 기능
+# 🚑️Fix : 버그 수정
+# 🎨Style : 코드 컨벤션 변경, 코드 수정이 없는 경우
+# 📝Docs : 문서 (문서 추가, 수정, 삭제)
+# 🔧Chore : 기타 변경사항 (빌드 스크립트 수정, 라이브러리 추가 등)
+# 🧪Test : 테스트 코드 추가
+# ♻️Refactor
 [description]
 # 내용의 길이는 한 줄당 60글자 내외에서 줄 바꿈. 한글로 간단 명료하게 작성
 # 어떻게 보다는 무엇을, 왜 변경했는지를 작성할 것 (필수)

firebase/firebaseStorage.ts

@@ -0,0 +1,4 @@
+import { getStorage } from "firebase/storage";
+import app from "./firebaseConfig";
+
+export const storage = getStorage(app);

package-lock.json

@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.0.7",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"

package.json

@@ -3,6 +3,7 @@ import type { AppProps } from "next/app";
 import Navbar from "./components/Navbar";
 import "../public/fonts/font.css";
 import "../public/fonts/notoSansKr.css";
+import { RecoilRoot } from "recoil";
 
 export default function App({ Component, pageProps }: AppProps) {
   if (process.env.NODE_ENV === "development") {
@@ -19,13 +20,13 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }
   return (
-    <>
+    <RecoilRoot>
       <div className="wrap">
         <div className="container">
           <Navbar />
           <Component {...pageProps} />
         </div>
       </div>
-    </>
+    </RecoilRoot>
   );
 }

pages/_app.tsx

@@ -0,0 +1,79 @@
+import React, { useState, ChangeEvent, useCallback } from "react";
+import { useRecoilState } from "recoil";
+import { uploadedImageFilesState, uploadedImageUrlsState } from "../../utils/atoms";
+
+const ImageUpload = () => {
+  const [uploadedImageFiles, setUploadedImageFiles] = useRecoilState(uploadedImageFilesState);
+  const [, setUploadedImageUrls] = useRecoilState(uploadedImageUrlsState);
+  const [previews, setPreviews] = useState<string[]>([]);
+
+  const handleDeleteClick = (index: number) => {
+    setPreviews((prevPreviews) => prevPreviews.filter((_, i) => i !== index));
+    setUploadedImageFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const handleAddImageButtonClick = (e: React.MouseEvent<HTMLLabelElement>) => {
+    if (uploadedImageFiles.length > 6) {
+      alert("최대 6개의 이미지만 등록 가능합니다!");
+      e.preventDefault();
+    }
+  };
+
+  const handleImageChange = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      e.preventDefault();
+
+      const files = e.target.files;
+
+      if (files) {
+        let fileArray = Array.from(files);
+
+        // Check the number of images
+        if (fileArray.length + previews.length > 6) {
+          alert("최대 6개의 이미지만 등록 가능합니다!");
+          fileArray = fileArray.slice(0, Math.max(0, 6 - previews.length));
+        }
+
+        const imageURLs = fileArray.map((file) => URL.createObjectURL(file));
+        setPreviews((prevPreviews) => [...prevPreviews, ...imageURLs]);
+
+        // Recoil 상태 업데이트
+        setUploadedImageFiles((prevImages) => [...prevImages, ...fileArray]);
+        // blob url
+        setUploadedImageUrls((prevUrls) => [...prevUrls, ...imageURLs]);
+      }
+
+      e.target.value = "";
+    },
+    [uploadedImageFiles],
+  );
+
+  return (
+    <div>
+      <div className="flex overflow-auto">
+        {previews.map((preview, index) => (
+          <div key={index} className="h-[300px] w-[230px] mr-3 relative flex-shrink-0 ">
+            <img src={preview} alt={`Preview ${index + 1}`} className="h-full w-full mr-3 rounded-lg" />
+            <button
+              onClick={() => handleDeleteClick(index)}
+              className="absolute top-3 right-3 text-sm text-slate-800 w-5 h-5 rounded-full bg-slate-100"
+            >
+              X
+            </button>
+          </div>
+        ))}
+        <input type="file" id="file-input" onChange={handleImageChange} accept="image/*" multiple className="hidden" />
+        <label
+          htmlFor="file-input"
+          onClick={handleAddImageButtonClick}
+          className="btn h-[300px] w-[230px] flex-shrink-0"
+        >
+          <p className=" text-5xl font-light">+</p>
+        </label>
+      </div>
+      <p className=" text-red-600 text-xs mt-1 ml-1">최대 6장까지 업로드 가능합니다.</p>
+    </div>
+  );
+};
+
+export default ImageUpload;

pages/postEditor/ImageUpload.tsx

@@ -0,0 +1,30 @@
+import { ChangeEvent } from "react";
+
+const KeywordCheckbox = ({
+  keyword,
+  isChecked,
+  onChange,
+}: {
+  keyword: string;
+  isChecked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}) => (
+  <div key={keyword}>
+    <input
+      type="checkbox"
+      id={keyword}
+      value={keyword}
+      onChange={onChange}
+      className="hidden peer"
+      checked={isChecked}
+    />
+    <label
+      htmlFor={keyword}
+      className="badge badge-outline border-gray-300 peer-checked:bg-slate-700 peer-checked:text-white p-3 m-1 text-xs whitespace-nowrap"
+    >
+      {keyword}
+    </label>
+  </div>
+);
+
+export default KeywordCheckbox;

pages/postEditor/KeywordCheckbox.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent } from "react";
+
+const KeywordRadioButton = ({
+  name,
+  keyword,
+  isChecked,
+  onChange,
+}: {
+  name: string;
+  keyword: string;
+  isChecked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}) => (
+  <div key={keyword}>
+    <input
+      type="radio"
+      id={keyword}
+      name={name}
+      value={keyword}
+      onChange={onChange}
+      className="hidden peer"
+      checked={isChecked}
+    />
+    <label
+      htmlFor={keyword}
+      className={
+        "badge badge-outline border-gray-300 peer-checked:bg-slate-700 peer-checked:text-white p-3 m-1 text-xs whitespace-nowrap"
+      }
+    >
+      {keyword}
+    </label>
+  </div>
+);
+
+export default KeywordRadioButton;