[황혜진] sprint6

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#환경변수 무시
+.env

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/api/itemApi.js

@@ -1,40 +1,16 @@
 //itemApi.js
-const BASE_URL = process.env.REACT_APP_BASE_URL;
-
-// export async function getProducts(params = {}) {
-//   // URLSearchParams을 이용하면 파라미터 값을 자동으로 쉽게 인코딩할 수 있어요.
-//   const query = new URLSearchParams(params).toString();
+import axios from "axios";
 
-//   try {
-//     const response = await fetch(`${BASE_URL}/products?${query}`);
-//     if (!response.ok) {
-//       throw new Error(`HTTP error: ${response.status}`);
-//     }
-//     const body = await response.json();
-//     return body;
-//   } catch (error) {
-//     console.error("Failed to fetch products:", error);
-//     throw error;
-//   }
-// }
+const BASE_URL = process.env.REACT_APP_BASE_URL;
 
 export async function getProducts({ page, pageSize, orderBy, keyword }) {
-  const queryParams = new URLSearchParams({
-    page,
-    pageSize,
-    orderBy,
-  });
+  try {
+    const response = await axios.get(`${BASE_URL}/products`, {
+      params: { page, pageSize, orderBy, keyword },
+    });
 
-  if (keyword) {
-    queryParams.append("keyword", keyword);
+    return response.data;
+  } catch (error) {
+    throw new Error(`HTTP error: ${error.response?.status || error.message}`);
   }
-
-  const response = await fetch(
-    `https://panda-market-api.vercel.app/products?${queryParams.toString()}`
-  );
-  if (!response.ok) {
-    throw new Error(`HTTP error: ${response.status}`);
-  }
-
-  return response.json();
 }

src/components/ImageUploader.jsx

@@ -0,0 +1,68 @@
+// ImageUploader.jsx
+import * as S from "./ImageUploader.styles";
+import upload_de from "../assets/images/icons/upload_de.svg";
+import ic_X from "../assets/images/icons/ic_X.svg";
+import { useState } from "react";
+
+export default function ImageUploader() {
+  const [previewImage, setPreviewimage] = useState(null);
+  const [showLimitText, setShowLimitText] = useState(false);
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setPreviewimage(imageUrl);
+      setShowLimitText(false); // 새로 업로드 성공했으니 문구 지우기
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setPreviewimage(null);
+    setShowLimitText(false); // 이미지 삭제했으니 문구 지우기
+  };
+
+  const handleUploadClick = (e) => {
+    if (previewImage) {
+      e.preventDefault();
+      setShowLimitText(true); // 문구 보여주기
+    }
+  };
+
+  const isImageUploaded = !!previewImage;
+
+  return (
+    <S.UploadContainer>
+      {/* 업로드 버튼 */}
+      <div>
+        <S.UploadLabel htmlFor="imageUpload">
+          <S.ImageUploadIcon src={upload_de} alt="이미지 업로드 아이콘" />
+        </S.UploadLabel>
+        <S.HiddenInput
+          id="imageUpload"
+          type="file"
+          accept="image/*"
+          onChange={handleImageChange}
+          onClick={handleUploadClick}
+        />
+        {showLimitText && (
+          <S.LimitText>*이미지 등록은 최대 1장까지 가능합니다.</S.LimitText>
+        )}
+      </div>
+
+      {/* 이미지 미리보기 */}
+      {isImageUploaded && (
+        <div>
+          <S.PreviewWrapper>
+            <S.ImageContainer>
+              <S.PreviewImage src={previewImage} alt="상품 이미지 미리보기" />
+              <S.RemoveButton onClick={handleRemoveImage}>
+                <S.CloseIcon src={ic_X} alt="삭제" />
+              </S.RemoveButton>
+            </S.ImageContainer>
+          </S.PreviewWrapper>
+        </div>
+      )}
+    </S.UploadContainer>
+  );
+}

src/components/ImageUploader.styles.jsx

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import theme from "../styles/theme";
+
+export const UploadContainer = styled.div`
+  display: flex;
+  gap: 24px;
+`;
+
+export const UploadLabel = styled.label`
+  width: 100%;
+  height: 100%;
+`;
+
+export const ImageUploadIcon = styled.img``;
+
+export const HiddenInput = styled.input`
+  display: none;
+`;
+
+export const PreviewWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export const ImageContainer = styled.div`
+  position: relative;
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  overflow: hidden;
+`;
+
+export const PreviewImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+`;
+
+export const RemoveButton = styled.button`
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  cursor: pointer;
+`;
+
+export const CloseIcon = styled.img`
+  width: 24px;
+  height: 24px;
+`;
+
+export const LimitText = styled.p`
+  color: ${theme.colors.Error100};
+  font: ${theme.fonts.H5Regular};
+  margin-top: 8px;
+`;

src/components/TagInput.jsx

@@ -0,0 +1,50 @@
+// TagInput.jsx
+import * as S from "./TagInput.styles";
+import ic_x from "../assets/images/icons/ic_X.svg";
+import { useState } from "react";
+
+export default function TagInput({ onChange }) {
+  const [tags, setTags] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && inputValue.trim().length > 1) {
+      e.preventDefault();
+
+      if (!tags.includes(inputValue.trim())) {
+        const updatedTags = [...tags, inputValue.trim()];
+        setTags(updatedTags);
+        onChange(updatedTags);
+      }
+      setTimeout(() => setInputValue(""), 0); // 입력 후 초기화 + 엔터 눌렀을 때 새로고침 방지 비동기처리
+    }
+  };
+
+  const handleDeleteTag = (tagToDelete) => {
+    const updatedTags = tags.filter((tag) => tag !== tagToDelete);
+    setTags(updatedTags);
+    onChange(updatedTags);
+  };
+
+  return (
+    <S.TagWrapper>
+      <S.StyledInput
+        type="text"
+        placeholder="태그를 입력해주세요"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <S.TagList>
+        {tags.map((tag) => (
+          <S.TagItem key={tag}>
+            {tag}
+            <S.DeleteButton onClick={() => handleDeleteTag(tag)}>
+              <img src={ic_x} alt="삭제" />
+            </S.DeleteButton>
+          </S.TagItem>
+        ))}
+      </S.TagList>
+    </S.TagWrapper>
+  );
+}

src/components/TagInput.styles.jsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import theme from "../styles/theme";
+
+export const TagWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+`;
+
+export const StyledInput = styled.input`
+  width: 100%;
+  padding: 16px 24px;
+  gap: 10px;
+  border: none;
+  border-radius: 12px;
+  background-color: ${theme.colors.Gray100};
+  font: ${theme.fonts.H5Regular};
+`;
+
+export const TagList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  height: 36px;
+  gap: 12px;
+`;
+
+export const TagItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 6px 12px 6px 16px;
+  border-radius: 26px;
+  background-color: ${theme.colors.Gray100};
+  color: ${theme.fonts.H5Regular};
+  gap: 10px;
+`;
+
+export const DeleteButton = styled.button`
+  width: 24px;
+  height: 24px;
+`;

src/components/common/Card.jsx

@@ -4,8 +4,7 @@ import ic_heart from "../../assets/images/icons/ic_heart.svg";
 import placeholder from "../../assets/images/placeholder.jpg";
 
 export default function Card({ item, size }) {
-  const imageURL =
-    item.images && item.images.length > 0 ? item.images[0] : placeholder;
+  const imageURL = item?.images?.[0] ?? placeholder;
 
   return (
     <CardWrapper size={size}>