[김참솔] Sprint 7

vite-project/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env.*

vite-project/src/api/api.js

@@ -0,0 +1,22 @@
+function trimPath(str) {
+  let trimmed = str.trim();
+  while (trimmed.startsWith("/")) {
+    trimmed = trimmed.slice(1);
+  }
+  return trimmed;
+}
+
+export function createUrl(path, params) {
+  const trimmed = trimPath(path);
+  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/${trimmed}`);
+
+  if (!params) {
+    return url;
+  }
+
+  Object.keys(params).forEach((key) =>
+    url.searchParams.append(key, params[key])
+  );
+
+  return url;
+}

vite-project/src/api/comments-mock.json

@@ -0,0 +1,60 @@
+{
+  "nextCursor": 0,
+  "list": [
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 판다",
+        "id": 1
+      },
+      "updatedAt": "2024-08-06T02:57:22.000Z",
+      "createdAt": "2024-08-06T02:57:22.000Z",
+      "content": "혹시 사용 기간이 어떻게 되실까요?",
+      "id": 1
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 고양이",
+        "id": 2
+      },
+      "updatedAt": "2025-07-06T02:57:22.000Z",
+      "createdAt": "2025-07-06T02:57:22.000Z",
+      "content": "잘 작동하나요??",
+      "id": 2
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 강아지",
+        "id": 3
+      },
+      "updatedAt": "2025-08-03T02:57:22.000Z",
+      "createdAt": "2025-08-03T02:57:22.000Z",
+      "content": "저도 사고싶어요!",
+      "id": 3
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 고양이",
+        "id": 2
+      },
+      "updatedAt": "2025-08-06T02:57:22.000Z",
+      "createdAt": "2025-08-06T02:57:22.000Z",
+      "content": "제가 샀습니다.",
+      "id": 4
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 토끼",
+        "id": 4
+      },
+      "updatedAt": "2025-08-06T07:10:22.000Z",
+      "createdAt": "2025-08-06T07:10:22.000Z",
+      "content": "까비...",
+      "id": 5
+    }
+  ]
+}

vite-project/src/api/comments.js

@@ -0,0 +1,15 @@
+import mock from "./comments-mock.json";
+
+export async function fetchComments(productId) {
+  // const url = createUrl(`products/${productId}/comments`, { limit });
+  // const response = await fetch(url);
+  // if (!response.ok) {
+  //   throw new Error("Failed to fetch comments");
+  // }
+
+  // const json = await response.json();
+  // return json.list;
+
+  if (!productId) return;
+  return mock.list;
+}

vite-project/src/api/products.js

@@ -1,19 +1,23 @@
+import { createUrl } from "./api";
+
 export async function fetchProducts({
   keyword = "",
   page = 1,
   pageSize = 10,
   orderBy = "recent",
 } = {}) {
-  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/products`);
-  url.searchParams.append("page", page);
-  url.searchParams.append("pageSize", pageSize);
-  url.searchParams.append("orderBy", orderBy);
+  const params = {
+    page,
+    pageSize,
+    orderBy,
+  };
+
   if (keyword) {
-    url.searchParams.append("keyword", keyword);
+    params.keyword = keyword;
   }
 
+  const url = createUrl("products", params);
   const response = await fetch(url);
-
   if (!response.ok) {
     throw new Error("Failed to fetch products");
   }
@@ -24,3 +28,14 @@ export async function fetchProducts({
     numberOfPages: Math.ceil(json.totalCount / pageSize),
   };
 }
+
+export async function fetchProduct(id) {
+  const url = createUrl(`products/${id}`);
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("Failed to fetch product");
+  }
+
+  const json = await response.json();
+  return json;
+}

vite-project/src/components/Nav.jsx

@@ -1,9 +1,8 @@
 import { NavLink, useLocation } from "react-router-dom";
 import largeLogo from "../assets/logo-large.svg";
 import smallLogo from "../assets/logo-small.svg";
-import profileImg from "../assets/profile-default.svg";
-
 import "./Nav.css";
+import Avatar from "./avatar";
 
 function NavigationLink({ to, activePaths = [], children }) {
   const location = useLocation();
@@ -40,9 +39,7 @@ function Nav() {
             중고마켓
           </NavigationLink>
         </ul>
-        <div className="Nav__profile">
-          <img src={profileImg} />
-        </div>
+        <Avatar />
       </div>
     </nav>
   );

vite-project/src/components/OrderBySelect.css

@@ -16,7 +16,7 @@
 
 .OrderBySelect {
   background-color: white;
-  padding: 12px 20px;
+  padding: 8px 20px;
   display: flex;
   gap: 24px;
   outline: none;

vite-project/src/components/add-item/adding-item-image.jsx

@@ -3,11 +3,12 @@ import removeImg from "../../assets/ic-xmark-fill.svg";
 
 const StyledAddingItemImage = styled.div`
   width: 282px;
+  height: 282px;
   position: relative;
 
   & > img {
     width: 100%;
-    aspect-ratio: 1;
+    height: 100%;
     object-fit: cover;
     border-radius: 12px;
   }
@@ -25,10 +26,12 @@ const StyledAddingItemImage = styled.div`
 
   @media (max-width: 1199px) {
     width: 168px;
+    height: 168px;
   }
 
   @media (max-width: 767px) {
     width: 50%;
+    height: auto;
   }
 `;
 

vite-project/src/components/avatar.jsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import defaultImg from "../assets/profile-default.svg";
+
+const StyledAvatar = styled.div`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 20;
+  }
+`;
+
+const DEFAULT_SIZE = 40;
+
+function Avatar({ imageUrl, size = DEFAULT_SIZE }) {
+  return (
+    <StyledAvatar $size={size}>
+      <img src={imageUrl || defaultImg} alt="프로필 사진" />
+    </StyledAvatar>
+  );
+}
+
+export default Avatar;

vite-project/src/components/button/button-styles.js

@@ -0,0 +1,9 @@
+export const BUTTON_SIZE = {
+  medium: "medium",
+  small: "small",
+};
+
+export const BUTTON_TYPE = {
+  round: "round",
+  pill: "pill",
+};

vite-project/src/components/button/button.jsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { BUTTON_SIZE, BUTTON_TYPE } from "./button-styles";
+
+function padding(buttonSize) {
+  return buttonSize === BUTTON_SIZE.medium ? "11px 40px" : "8px 23px";
+}
+
+function fontSize(buttonSize) {
+  return buttonSize === BUTTON_SIZE.medium ? 18 : 16;
+}
+
+function borderRadius(buttonType) {
+  return buttonType === BUTTON_TYPE.round ? 8 : 24;
+}
+
+const StyledButton = styled.button`
+  display: flex;
+  gap: 8px;
+  background-color: var(--color-primary-100);
+  padding: ${({ $size }) => padding($size)};
+  color: var(--color-cool-gray-100);
+  font-size: ${({ $size }) => fontSize($size)}px;
+  font-weight: 600;
+  line-height: 26px;
+  border-radius: ${({ $type }) => borderRadius($type)}px;
+  border: none;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-cool-gray-400);
+    cursor: default;
+  }
+
+  &:hover:not(:disabled) {
+    opacity: 0.5;
+  }
+`;
+
+function Button({
+  children,
+  size = BUTTON_SIZE.small,
+  type = BUTTON_TYPE.round,
+  ...props
+}) {
+  return (
+    <StyledButton $size={size} $type={type} {...props}>
+      {children}
+    </StyledButton>
+  );
+}
+
+export default Button;