Merge pull request #214 from kimsayhi/React-김세환-sprint7

[김세환] sprint7
codeit-bootcamp-frontend · Jul 8, 2024 · 77a6a69 · 77a6a69
2 parents c91abd0 + 7ae4394
commit 77a6a69
Show file tree

Hide file tree

Showing 22 changed files with 676 additions and 198 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,15 +2,35 @@ import { Outlet, useLocation } from "react-router-dom";
 
 import "./assets/styles/common.css";
 import HeaderNav from "./components/reusable/HeaderNav";
+import { ThemeProvider } from "styled-components";
+import { useEffect, useState } from "react";
+import useDetectViewport from "./hooks/useDetectViewport";
 
 function App() {
   const location = useLocation();
   const here = location.pathname;
+  const sizeName = useDetectViewport();
+  const [themes, setThemes] = useState({
+    normalFont: {
+      large: "18px",
+      medium: "16px",
+      small: "14px",
+    },
+    size: sizeName,
+  });
 
+  useEffect(() => {
+    setThemes((prev) => ({
+      ...prev,
+      size: sizeName,
+    }));
+  }, [sizeName]);
   return (
     <>
-      {here !== "/auth" && <HeaderNav></HeaderNav>}
-      <Outlet></Outlet>
+      <ThemeProvider theme={themes}>
+        {here !== "/auth" && <HeaderNav></HeaderNav>}
+        <Outlet></Outlet>
+      </ThemeProvider>
     </>
   );
 }

diff --git a/src/assets/images/empty_comments.svg b/src/assets/images/empty_comments.svg
diff --git a/src/assets/images/ic_back.svg b/src/assets/images/ic_back.svg
diff --git a/src/assets/styledComponents/CommonStyled.jsx b/src/assets/styledComponents/CommonStyled.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin: 70px auto 250px;
+  max-width: 1200px;
+  height: auto;
+  display: flex;
+
+  @media (max-width: 1199px) {
+    justify-content: center;
+    width: 100%;
+    padding: 0 24px 0;
+  }
+  @media (max-width: 1199px) {
+    padding: 0 16px 0;
+  }
+`;
+
+export const Button = styled.button`
+  background-color: var(--gray-400);
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  padding: 12px 23px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/assets/styledComponents/DetailItemStyled.jsx b/src/assets/styledComponents/DetailItemStyled.jsx
@@ -0,0 +1,192 @@
+import styled from "styled-components";
+
+import { Button, Container } from "./CommonStyled";
+
+export const DetailContainer = styled(Container)`
+  padding-top: 24px;
+  color: var(--gray-800);
+  flex-direction: column;
+`;
+
+export const BackButton = styled(Button)`
+  width: 240px;
+  margin: 0 auto;
+  background-color: var(--blue);
+  border-radius: 40px;
+  img {
+    padding-left: 10px;
+  }
+`;
+export const ItemInfoContainer = styled.div`
+  display: flex;
+  flex-direction: ${({ theme }) => (theme.size === "small" ? "column" : "row")};
+  gap: 24px;
+  padding-bottom: 32px;
+  border-bottom: 1px solid var(--gray-200);
+  .images {
+    width: ${({ theme }) =>
+      theme.size === "large"
+        ? "486px"
+        : theme.size === "medium"
+        ? "343px"
+        : "100%"};
+    height: auto;
+    border-radius: 16px;
+    object-fit: contain;
+  }
+`;
+
+export const RightContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+`;
+
+export const RightHeaderContainer = styled.div`
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--gray-200);
+  .name {
+    padding-bottom: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+  .price {
+    font-size: 40px;
+    font-weight: 600;
+  }
+`;
+
+export const RightMainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+  padding-top: 16px;
+  .info-titles {
+    padding-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--gray-600);
+  }
+  .description {
+    font-size: 16px;
+    font-weight: 400;
+    padding-bottom: 24px;
+  }
+`;
+export const TagsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const RightFooterWrapper = styled.div`
+  button {
+    height: 40px;
+    border: 1px solid var(--gray-200);
+    border-radius: 35px;
+    display: flex;
+    gap: 6px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--gray-500);
+    img {
+      width: 23px;
+      height: 27px;
+    }
+  }
+`;
+
+export const TagButton = styled.button`
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 16px;
+  background-color: var(--gray-100);
+  border-radius: 26px;
+`;
+
+export const CommentsContainer = styled.div`
+  margin-top: 24px;
+`;
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: ${({ theme }) => theme.normalFont.medium};
+  label {
+    width: 100%;
+    font-weight: 600;
+  }
+  textarea {
+    width: 100%;
+    padding: 16px 24px;
+    background-color: var(--gray-100);
+    margin: 16px 0;
+    min-height: 104px;
+    resize: none;
+    border: none;
+    border-radius: 12px;
+    outline: none;
+    &::placeholder {
+      color: var(--gray-400);
+    }
+  }
+`;
+export const CommentButton = styled(Button)`
+  width: 80px;
+  background-color: ${({ $active }) =>
+    $active ? "var(--blue)" : "var(--gray-400)"};
+`;
+
+export const CommentsItem = styled.div`
+  padding-top: 24px;
+  font-weight: 400;
+  border-bottom: 1px solid var(--gray-200);
+  .content {
+    font-size: ${({ theme }) => theme.normalFont.medium};
+  }
+  &:last-child {
+    margin-bottom: 40px;
+  }
+`;
+
+export const WriterContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  padding: 24px 0;
+  .image {
+    width: 40px;
+    height: 40px;
+  }
+`;
+export const WriterRight = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  .nickname {
+    font-size: ${({ theme }) => theme.normalFont.small};
+    color: var(--gray-600);
+  }
+  .time {
+    font-size: ${({ theme }) => theme.normalFont.small - 2};
+    color: var(--gray-400);
+  }
+`;
+
+export const EmptyCommentsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto 24px;
+  img {
+    width: 200px;
+    height: 200px;
+  }
+  p {
+    color: var(--gray-400);
+    font-size: ${({ theme }) => theme.normalFont.medium};
+  }
+`;
diff --git a/src/components/addItem/AddItemFileInput.jsx b/src/components/addItem/AddItemFileInput.jsx
@@ -21,14 +21,10 @@ function AddItemFileInput({ onChange, images, onDelete }) {
           name="images"
           value=""
         />
-        {!images.length ||
+        {images?.length > 0 &&
           images.map((e, i) => {
             return (
-              <div
-                className="preview-wrapper"
-                key={Date.now() + i * 13}
-                onClick={onDelete}
-              >
+              <div className="preview-wrapper" key={Date.now() + i * 13}>
                 <img className="previews" src={images[i]} />
                 <button
                   type="button"
@@ -37,7 +33,7 @@ function AddItemFileInput({ onChange, images, onDelete }) {
                     onDelete(i);
                   }}
                 >
-                  <img src={xButton}></img>
+                  <img src={xButton} />
                 </button>
               </div>
             );

diff --git a/src/components/addItem/AddItemInputs.jsx b/src/components/addItem/AddItemInputs.jsx
@@ -4,9 +4,10 @@ import "josa-complete";
 
 function AddItemInputs({ label, name, value, onChange, onKeyDown }) {
   const josa = `${label.을를}`;
+
   return (
     <>
-      {name !== "description" ? (
+      {name !== "description" && (
         <InputContainer>
           <label htmlFor={`additem-${name}`}>{label}</label>
           <input
@@ -18,7 +19,8 @@ function AddItemInputs({ label, name, value, onChange, onKeyDown }) {
             onKeyDown={onKeyDown}
           ></input>
         </InputContainer>
-      ) : (
+      )}
+      {name === "description" && (
         <InputContainer>
           <label htmlFor={`additem-${name}`}>{label}</label>
           <textarea

diff --git a/src/components/addItem/AddItemMain.jsx b/src/components/addItem/AddItemMain.jsx
@@ -13,13 +13,7 @@ const INIT_VALUSE = {
 
 function AddItemMain() {
   const [tagValue, setTagValue] = useState("");
-  const [values, setValues] = useState({
-    images: [],
-    tags: [],
-    price: "",
-    description: "",
-    name: "",
-  });
+  const [values, setValues] = useState(INIT_VALUSE);
   const [isValuesFill, setIsValuesFill] = useState(false);
 
   const valuesChecker = () => {

diff --git a/src/components/apis.js b/src/components/apis.js
@@ -20,12 +20,24 @@ const getItems = async ({
 
 const getItemInfo = async (id) => {
   try {
-    const response = await fetch(`${BASE_URL}/products/${id}`);
-    const itemInfo = await response.json();
+    const responseInfo = await fetch(`${BASE_URL}/products/${id}`);
+    const itemInfo = await responseInfo.json();
     return itemInfo;
   } catch (err) {
-    console.log(err);
+    console.log("패치에러", err);
+  }
+};
+
+const getItemComments = async (id, limit = 3) => {
+  try {
+    const responseComments = await fetch(
+      `${BASE_URL}/products/${id}/comments?limit=${limit}`
+    );
+    const itemComments = await responseComments.json();
+    return itemComments;
+  } catch (err) {
+    console.log("패치에러", err);
   }
 };
 
-export { getItems, getItemInfo };
+export { getItems, getItemInfo, getItemComments };