[명지우] sprint7

README.md

@@ -1,6 +1,6 @@
-## 판다마켓 6
+## 판다마켓 7
 
-**🌐 배포 url: https://myungjiwoo-pandamarket.netlify.app/additem**
+**🌐 배포 url: https://myungjiwoo-pandamarket.netlify.app/items**
 
 ### 기본 요구사항
 
@@ -10,24 +10,14 @@
 
 ### 체크 리스트 (기본)
 
-- [x] 상품 등록 페이지 주소는 "/additem"이다.
-- [x] 페이지 주소가 "/additem"일 때 상단 네비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"이다.
-- [x] 상품 이미지는 최대 한 개까지 업로드할 수 있다.
-- [x] 각 input의 placeholder 값을 정확히 입력한다.
-- [x] 이미지를 제외하고 input에 모든 값을 입력하면 '등록' 버튼이 활성화 된다. (api를 통한 상품 등록은 추후 미션에서 적용)
+- [x] 상품 상세 페이지 주소는 “/items/{productId}” 이다.
+- [x] 상세 정보 : response 로 받은 아래의 데이터로 화면을 구현한다. (favoriteCount, images, tags, name, description)
+- [x] 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동한다.
+- [x] 문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변경된다.
+- [x] 문의 : response 로 받은 아래의 데이터로 화면을 구현한다. (image, nickname, content, description, updatedAt)
+- [x] 문의를 수정하려면 기존 문의글이 input으로 바뀐다.
+- [x] 아무 문의가 없을때는 적절한 안내 문구를 띄워준다.
 
 ### 체크 리스트 (심화)
 
-- [x] 이미지 안의 x 버튼을 누르면 이미지가 삭제된다.
-- [x] 추가된 태그 안의 x 버튼을 누르면 해당 태그는 삭제된다.
-
-### 추가 기능
-
-- [x] 오류 메시지를 토스트 메시지로 구현 (react-toastify 라이브러리 사용)
-
-### 구현 포인트
-
-- [x] 입력 컴포넌트 계층화 및 재사용
-  - `Base~ 컴포넌트` : 최소 단위 입력 컴포넌트
-  - `~Field 컴포넌트` : 공통 인터페이스를 추가한 확장 컴포넌트 (label, error messge 등)
-  - `Item~Field 컴포넌트` : 도메인 전용 컴포넌트
+- [ ] 모든 버튼에 자유롭게 Hover 효과를 적용한다.

src/GlobalStyle.jsx

@@ -24,6 +24,7 @@ const baseStyle = css`
     padding: 0;
     box-sizing: border-box;
     transition: all 100ms ease-in-out;
+    font-family: "Pretendard", sans-serif;
   }
 
   html,

src/apis/productApi.js

@@ -0,0 +1,26 @@
+import { instance } from "@apis/instance";
+
+const getProduct = async (productId) => {
+  try {
+    const { data } = await instance.get(`/products/${productId}`);
+    return data;
+  } catch (error) {
+    throw new Error(`상품 상세 조회 불러오기 실패: ${error.message}`);
+  }
+};
+
+const getProductComments = async (productId, limit = 10, cursor = null) => {
+  try {
+    let url = `/products/${productId}/comments?limit=${limit}`;
+    if (cursor) {
+      url += `&cursor=${cursor}`;
+    }
+
+    const { data } = await instance.get(url);
+    return data;
+  } catch (error) {
+    throw new Error(`상품의 댓글 정보 불러오기 실패: ${error.message}`);
+  }
+};
+
+export { getProduct, getProductComments };

src/assets/icons/back.jsx

@@ -0,0 +1,19 @@
+const BackIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.53333 3.60012C6.03627 3.60012 5.63333 4.00307 5.63333 4.50012C5.63333 4.99718 6.03627 5.40012 6.53333 5.40012V3.60012ZM6.53333 5.40012H16.6667V3.60012H6.53333V5.40012ZM21.1 9.83345V10.9001H22.9V9.83345H21.1ZM16.6667 15.3335H6.53333V17.1335H16.6667V15.3335ZM21.1 10.9001C21.1 13.3486 19.1151 15.3335 16.6667 15.3335V17.1335C20.1092 17.1335 22.9 14.3427 22.9 10.9001H21.1ZM16.6667 5.40012C19.1151 5.40012 21.1 7.38499 21.1 9.83345H22.9C22.9 6.39088 20.1092 3.60012 16.6667 3.60012V5.40012Z"
+        fill="white"
+      />
+      <path d="M3 16.2335L10.2 12.5384L10.2 19.9285L3 16.2335Z" fill="white" />
+    </svg>
+  );
+};
+
+export default BackIcon;

src/assets/icons/more.jsx

@@ -0,0 +1,17 @@
+const MoreIcon = () => {
+  return (
+    <svg
+      width="3"
+      height="13"
+      viewBox="0 0 3 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="1.5" cy="1.50012" r="1.5" fill="#9CA3AF" />
+      <circle cx="1.5" cy="6.50012" r="1.5" fill="#9CA3AF" />
+      <circle cx="1.5" cy="11.5001" r="1.5" fill="#9CA3AF" />
+    </svg>
+  );
+};
+
+export default MoreIcon;

src/components/DropdownMenu.jsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import styled from "@emotion/styled";
+import BaseButton from "@/components/common/BaseButton";
+import MoreIcon from "@assets/icons/more";
+
+const DROPDOWN_LIST_POSITION = {
+  left: "right: 0; left: auto;",
+  right: "left: 0; right: auto;",
+};
+
+const DropdownMenu = ({
+  dropdownItem1,
+  onDropdownItem1Click,
+  dropdownItem2,
+  onDropdownItem2Click,
+  position = "left",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => setIsOpen((prev) => !prev);
+
+  const handleDropdownItem1Click = () => {
+    onDropdownItem1Click();
+    setIsOpen(false);
+  };
+
+  const handleDropdownItem2Click = () => {
+    onDropdownItem2Click();
+    setIsOpen(false);
+  };
+
+  return (
+    <DropdownMenuContainer>
+      <StyledButton onClick={handleToggle}>
+        <MoreIcon />
+      </StyledButton>
+
+      {isOpen && (
+        <DropdownList listPosition={DROPDOWN_LIST_POSITION[position]}>
+          <DropdownItem onClick={handleDropdownItem1Click}>
+            {dropdownItem1}
+          </DropdownItem>
+          <DropdownItem onClick={handleDropdownItem2Click}>
+            {dropdownItem2}
+          </DropdownItem>
+        </DropdownList>
+      )}
+    </DropdownMenuContainer>
+  );
+};
+
+export default DropdownMenu;
+
+const DropdownMenuContainer = styled.div`
+  position: relative;
+`;
+
+const StyledButton = styled(BaseButton)`
+  width: 2.4rem;
+  height: 2.4rem;
+`;
+
+const DropdownList = styled.ul`
+  width: fit-content;
+  position: absolute;
+  top: 3rem;
+  ${(props) => props.listPosition};
+  border-radius: 0.7rem;
+  border: 1px solid var(--gray200);
+  background-color: var(--white);
+`;
+
+const DropdownItem = styled.li`
+  width: 10rem;
+  padding: 0.8rem 1rem;
+  text-align: center;
+  list-style: none;
+  font-size: 1.4rem;
+  color: var(--gray500);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--gray100);
+  }
+
+  &:first-of-type {
+    border-bottom: 1px solid var(--gray200);
+  }
+`;

src/components/ImageInputField.jsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import styled from "@emotion/styled";
-import BaseImageInput from "@components/BaseImageInput";
+import BaseImageInput from "@/components/common/BaseImageInput";
 import DeleteButton from "@components/DeleteButton";
 import PlusIcon from "@assets/icons/plus";
 

src/components/InputField.jsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import styled from "@emotion/styled";
-import BaseInput from "@components/BaseInput";
+import BaseInput from "@/components/common/BaseInput";
 
 const InputField = ({ id, label, value, onChange, errorMessage, ...props }) => {
   return (

src/components/ProductCard.jsx

@@ -2,6 +2,7 @@ import { useContext, createContext, useRef } from "react";
 import styled from "@emotion/styled";
 import HeartIcon from "@assets/icons/heart";
 import NotFoundImg from "@assets/imgs/notFoundImage@2x.png";
+import { Link } from "react-router-dom";
 
 const ProductContext = createContext({
   id: null,
@@ -22,13 +23,15 @@ const ProductCard = ({ id, src, title, price = 0, like = 0, children }) => {
 
   return (
     <ProductContext.Provider value={contextValue}>
-      <ProductCardLayout>
-        <ProductImg />
-        <ProductTitle />
-        <ProductPrice />
-        <ProductLike />
-        {children}
-      </ProductCardLayout>
+      <Link to={`/items/${id}`}>
+        <ProductCardLayout>
+          <ProductImg />
+          <ProductTitle />
+          <ProductPrice />
+          <ProductLike />
+          {children}
+        </ProductCardLayout>
+      </Link>
     </ProductContext.Provider>
   );
 };

src/components/TextButton.jsx

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+import BaseButton from "@/components/common/BaseButton";
+
+const BUTTON_SIZE = {
+  s: "1.2rem",
+  m: "1.4rem",
+  l: "1.6rem",
+};
+
+const BUTTON_TYPE = {
+  primary: "background-color: var(--blue); color: var(--white);",
+  cancel: "background-color: var(--white); var(--gray500);",
+  danger: "background-color: red; color: var(--white);",
+};
+
+const TextButton = ({
+  text,
+  onClick,
+  disabled = false,
+  size = "m",
+  type = "primary",
+}) => {
+  return (
+    <StyledButton
+      onClick={onClick}
+      disabled={disabled}
+      size={BUTTON_SIZE[size]}
+      type={BUTTON_TYPE[type]}
+    >
+      {text}
+    </StyledButton>
+  );
+};
+
+export default TextButton;
+
+const StyledButton = styled(BaseButton)`
+  padding: 0.8rem 2rem;
+  border-radius: 1rem;
+  font-size: ${(props) => props.size};
+  ${(props) => props.type};
+
+  &:disabled {
+    background-color: var(--gray300);
+    cursor: not-allowed;
+  }
+`;

src/components/TextareaField.jsx

@@ -1,15 +1,20 @@
 import { memo } from "react";
 import styled from "@emotion/styled";
-import BaseTextarea from "@components/BaseTextarea";
+import BaseTextarea from "@/components/common/BaseTextarea";
 
+// styleType : default | addItem
 const TextareaField = ({
   id,
   label,
   value,
   onChange,
   errorMessage,
+  styleType = "default",
   ...props
 }) => {
+  const { InputSection, Label } =
+    textareaStyleMap[styleType] || textareaStyleMap.default;
+
   return (
     <InputSection>
       <Label htmlFor={id}>{label}</Label>
@@ -21,11 +26,15 @@ const TextareaField = ({
 
 export default memo(TextareaField);
 
-const InputSection = styled.div`
+const LargeInputSection = styled.div`
   margin: 2rem 0;
 `;
 
-const Label = styled.label`
+const InputSection = styled.div`
+  margin: 1rem 0;
+`;
+
+const BoldLabel = styled.label`
   display: inline-block;
   margin-bottom: 1rem;
   font-weight: bold;
@@ -34,7 +43,27 @@ const Label = styled.label`
   font-size: 1.8rem;
 `;
 
+const Label = styled.label`
+  display: inline-block;
+  margin-bottom: 1rem;
+  line-height: 2.6rem;
+  color: var(--gray900);
+  font-size: 1.6rem;
+`;
+
 const ErrorMessage = styled.p`
   color: red;
   font-size: 1.4rem;
 `;
+
+// styleType에 따른 스타일 매핑
+const textareaStyleMap = {
+  default: {
+    InputSection: InputSection,
+    Label: Label,
+  },
+  addItem: {
+    InputSection: LargeInputSection,
+    Label: BoldLabel,
+  },
+};

src/components/common/BaseButton.jsx

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+
+const BaseButton = ({ onClick, children, ...props }) => {
+  return (
+    <Button onClick={onClick} {...props}>
+      {children}
+    </Button>
+  );
+};
+
+export default BaseButton;
+
+const Button = styled.button`
+  border: none;
+  background: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;