Merge pull request #135 from penloo/develop

자신 게시글 작성 &자신 게시글보기 & 자신 게시글 수정 코드 변경 및 css변경
Techeer-market · May 23, 2024 · fe7de84 · fe7de84
2 parents 4416254 + c4b5a6e
commit fe7de84
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 34 deletions.
diff --git a/src/components/ProductForm/ui/IconLayout.tsx b/src/components/ProductForm/ui/IconLayout.tsx
@@ -25,7 +25,7 @@ const IconLayout = () => {
 
       <S.Part>
         <S.Image style={{ backgroundImage: `url(${Chat})` }} />
-        <S.Value>{items.views}</S.Value>
+        <S.Value>{items.chatRooms}</S.Value>
       </S.Part>
 
       {isSalesPage && (

diff --git a/src/pages/ItemDetail/index.tsx b/src/pages/ItemDetail/index.tsx
@@ -28,10 +28,10 @@ interface ItemDetailProps {
   likes: number;
   myheart: boolean; // 좋아요 여부, 이름 수정 필요
   views: number;
+  chatRoom: number;
   createdAt: string;
   location: string;
   updatedAt: string;
-  // chatroomCount: number;
 }
 
 const ItemDetail: React.FC = () => {
@@ -43,8 +43,8 @@ const ItemDetail: React.FC = () => {
   const [userId, setUserId] = useState<string | null>(null);
 
   useEffect(() => {
-    // const storedUserId = localStorage.getItem('userId');
-    // setUserId(storedUserId);
+    const storedUserId = localStorage.getItem('userId');
+    setUserId(storedUserId);
   }, []);
 
   const { data, isLoading } = useQuery<ItemDetailProps, AxiosError>(
@@ -146,8 +146,12 @@ const ItemDetail: React.FC = () => {
   };
   console.log(parsedProductId);
 
+  const goToEdit = () => {
+    navigate(`/item/update/${productId}`);
+  };
+
   if (isLoading) return <Loading />;
-  console.log(productId);
+
   return (
     <S.Container>
       <TopNavBar page="" />
@@ -177,9 +181,9 @@ const ItemDetail: React.FC = () => {
 
             <S.DetailWrapper>
               <S.DetailName>좋아요</S.DetailName>
-              <S.DetailValue>{data?.likes}</S.DetailValue>•<S.DetailName>채팅</S.DetailName>
-              {/* <S.DetailValue>{data?.chatroomCount}</S.DetailValue>•<S.DetailName>조회</S.DetailName> */}
-              <S.DetailValue>{data?.views}</S.DetailValue>
+              <S.DetailValue>{data?.likes}</S.DetailValue>•<S.DetailName>조회</S.DetailName>
+              <S.DetailValue>{data?.views}</S.DetailValue>•<S.DetailName>채팅</S.DetailName>
+              <S.DetailValue>{data?.chatRoom}</S.DetailValue>
             </S.DetailWrapper>
 
             <S.Description>
@@ -203,13 +207,12 @@ const ItemDetail: React.FC = () => {
             />
             <S.Price> {`${data?.price?.toLocaleString()}원`} </S.Price>
           </S.ButtonsBox>
-          <S.ChatButton
-            onClick={() => {
-              handleChat();
-            }}
-          >
-            채팅하기
-          </S.ChatButton>
+          {userId === String(data?.userId) ? (
+            <S.ChatButton onClick={goToEdit}>수정하기</S.ChatButton>
+          ) : (
+            <S.ChatButton onClick={()=>{handleChat()}>채팅하기</S.ChatButton>
+          )}
+       
         </S.Buttons>
       </S.Maincontainer>
 

diff --git a/src/pages/ItemUpadate/index.tsx b/src/pages/ItemUpadate/index.tsx
@@ -15,6 +15,7 @@ const WritePost = () => {
   const [content, setContent] = useState('');
   const [categoryName, setCategoryName] = useState('');
   const [price, setPrice] = useState(0);
+  const [isFree, setIsFree] = useState(false);
   const [productImages, setProductImages] = useState<string[]>([]);
   const [location, setLocation] = useState('');
   const [representativeImage, setRepresentativeImage] = useState<string | null>(null); //대표이미지 선택
@@ -84,21 +85,24 @@ const WritePost = () => {
   };
 
   const handleSubmit = async () => {
-    if (!title || !categoryName || price === 0 || !content || !location) {
+    if (!title || !categoryName || !content || !location) {
       alert('모든 항목을 입력해주세요.');
       return;
     }
 
+    if (!isFree && (!price || price === 0)) {
+      alert('판매 가격을 입력해주세요.');
+      return;
+    }
+
     const formData = new FormData();
     formData.append('title', title);
     formData.append('content', content);
     formData.append('categoryName', categoryName);
     formData.append('price', price.toString());
+    formData.append('isFree', isFree.toString());
     const blobPromises = productImages.map((imageFile) => urlToBlob(imageFile));
-    console.log('sssss', blobPromises);
     const blobs = await Promise.all(blobPromises);
-    console.log('aaaa', blobs);
-
     for (let i = 0; i < blobs.length; i++) {
       formData.append('productImages', blobs[i]);
     }
@@ -128,6 +132,13 @@ const WritePost = () => {
     let value = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 허용
     setPrice(parseInt(value));
   };
+  const toggleFree = () => {
+    setIsFree(true);
+    setPrice(0); // 가격을 비웁니다.
+  };
+  const toggleSale = () => {
+    setIsFree(false);
+  };
 
   const handleDeleteImage = (imageFile: string) => {
     console.log('Current productImages before deletion:', productImages);
@@ -253,16 +264,30 @@ const WritePost = () => {
               </S.Select>
             </S.Label>
           </S.Row>
-
           <S.Row>
-            <S.Label>
-              가격
-              <S.Input
-                name="price"
-                value={`${price.toLocaleString()}`}
-                onChange={handlePriceChange}
-              />
-            </S.Label>
+            <S.Label>가격</S.Label>
+            <div
+              style={{
+                width: '100%',
+                margin: '0.2rem 0 0.5rem 3rem',
+                display: 'flex',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+              }}
+            >
+              <S.Button onClick={toggleSale} disabled={!isFree}>
+                판매하기
+              </S.Button>
+              <S.Button onClick={toggleFree} disabled={isFree}>
+                무료나눔
+              </S.Button>
+            </div>
+            <S.Input
+              name="price"
+              value={`${price.toLocaleString()}`}
+              onChange={handlePriceChange}
+              disabled={isFree}
+            />
           </S.Row>
         </S.Form>
         <S.Form>

diff --git a/src/pages/ItemUpadate/styles.tsx b/src/pages/ItemUpadate/styles.tsx
@@ -86,10 +86,11 @@ export const Form = styled.form`
 `;
 export const Row = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   width: 50rem;
 `;
+
 export const Label = styled.label`
   display: flex;
   flex-direction: column;
@@ -101,12 +102,37 @@ export const Label = styled.label`
   margin-left: 2rem;
   margin-top: 1rem;
 `;
+export const Button = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 8rem;
+  line-height: 3rem;
+  background: #ffffff;
+  border-radius: 4rem;
+  border: 1px solid #b8b8b8;
+  cursor: pointer;
+  font-size: 1.2rem;
+  margin-top: 1rem;
+  margin-right: 1rem;
+
+  &:hover {
+    background: #ff985d;
+    color: #ffffff;
+  }
+  &:disabled {
+    background: #ffcec4;
+    border-color: #ffcec4;
+    cursor: not-allowed;
+  }
+`;
 export const Input = styled.input`
   display: flex;
   width: 95%;
   height: 43px;
   flex-shrink: 0;
-  background: #fff;
+  color: ${(props) => (props.disabled ? '#c9c9c9' : '#000')};
+  background: ${(props) => (props.disabled ? '#e4e4e4' : '#fff')};
   border-radius: 10px;
   border: 1px solid #828385;
   font-size: 1.5rem;

diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
@@ -26,13 +26,13 @@ const index: React.FC = () => {
           <S.NavLink>
             <S.ClickArea>
               <Link to="/category">
-                <RxHamburgerMenu style={{ width: '25px', height: '25px' }} />
+                <RxHamburgerMenu style={{ width: '25px', height: '25px', color: '#fd8944' }} />
                 {/* <img id="category" alt="To category" src={categoryBar}></img> */}
               </Link>
             </S.ClickArea>
             <S.ClickArea>
               <Link to="/search">
-                <IoSearchOutline style={{ width: '25px', height: '25px' }} />
+                <IoSearchOutline style={{ width: '25px', height: '25px', color: '#fd8944' }} />
                 {/* <img id="search" alt="To search" src={searchBtn}></img> */}
               </Link>
             </S.ClickArea>

diff --git a/src/pages/WritePost/index.tsx b/src/pages/WritePost/index.tsx
@@ -21,6 +21,12 @@ const WritePost = () => {
   const [productImages, setProductImages] = useState<File[]>([]);
   const [location, setLocation] = useState('');
   const [representativeImage, setRepresentativeImage] = useState<File | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const storedUserId = localStorage.getItem('userId');
+    setUserId(storedUserId);
+  }, []);
 
   // const [files, setFiles] = useState<File | null>(null);
   // const [fileUrl, setFileUrl] = useState('');
@@ -86,6 +92,9 @@ const WritePost = () => {
     formData.append('content', content);
     formData.append('categoryName', categoryName);
     formData.append('price', price.toString());
+    formData.append('userId', userId ?? ''); // userId 추가
+
+    console.log('userId 는????', userId); // userId 확인을 위한 로그
 
     // 사진이 있는 경우
     if (productImages.length > 0) {
@@ -125,12 +134,12 @@ const WritePost = () => {
         <S.Nav>
           <S.ClickArea>
             <Link to="/category">
-              <RxHamburgerMenu style={{ width: '25px', height: '25px' }} />
+              <RxHamburgerMenu style={{ width: '25px', height: '25px', color: '#fd8944' }} />
             </Link>
           </S.ClickArea>
           <S.ClickArea>
             <Link to="/search">
-              <IoSearchOutline style={{ width: '25px', height: '25px' }} />
+              <IoSearchOutline style={{ width: '25px', height: '25px', color: '#fd8944' }} />
             </Link>
           </S.ClickArea>
         </S.Nav>

diff --git a/src/types/product.ts b/src/types/product.ts
@@ -12,5 +12,6 @@ export type Product = {
   productState: StateType;
   likes: number;
   views: number;
+  chatRooms: number;
   // chatroomCount: number; // 채팅방 개수
 };