Merge pull request #139 from dmswn1004/develop

fix: 사진 비율 수정

.storybook/main.ts

@@ -10,6 +10,8 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/testing-react',
     '@storybook/testing-library',
+    '@storybook/addon-a11y',
+    '@storybook/icons',
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/preview.tsx

@@ -24,6 +24,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    a11y: {
+      element: '#root',
+      options: {},
+      manual: false,
+    },
   },
 };
 

package.json

@@ -17,6 +17,7 @@
     "@sentry/react": "^7.109.0",
     "@sentry/tracing": "^7.42.0",
     "@stomp/stompjs": "^7.0.0",
+    "@storybook/icons": "^1.2.9",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
     "@tanstack/react-query": "^4.26.1",
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.0",
+    "@storybook/addon-a11y": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",

src/components/Carousel/styles.tsx

@@ -23,6 +23,7 @@ export const Image = styled.img`
   width: 100%;
   height: 30rem;
   object-fit: cover;
+  aspect-ratio: 4 / 3;
 `;
 
 export const ButtonWrapper = styled.div`

src/components/ProductForm/styles.tsx

@@ -23,12 +23,12 @@ export const ProductContent = styled.div`
   padding-left: 1rem;
 `;
 
-export const ImageDiv = styled.div`
+export const ImageDiv = styled.img`
   width: 9rem;
   height: 9rem;
-  border-radius: 10px;
-  background-size: cover;
-  background-repeat: no-repeat;
+  border-radius: 1rem;
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
 `;
 
 export const TextDiv = styled.div`

src/components/ProductForm/ui/Thumbnail.tsx

@@ -3,7 +3,7 @@ import * as S from '../styles';
 
 const Thumbnail = () => {
   const { items } = useProductContext();
-  return <S.ImageDiv style={{ backgroundImage: `url(${items.thumbnailURL})` }} />;
+  return <S.ImageDiv alt={items.title} src={items.thumbnailURL} />;
 };
 
 export default Thumbnail;

src/constants/mypageItem.ts

@@ -0,0 +1,9 @@
+import Heart from '@/assets/HeartIcon.svg';
+import Store from '@/assets/StoreIcon.svg';
+import Cart from '@/assets/CartIcon.svg';
+
+export const MYPAGE_ITEMS = [
+  { path: '/wishlist', imgSrc: Heart, altText: 'heartIcon', label: '좋아요 목록' },
+  { path: '/saleslist', imgSrc: Store, altText: 'StoreIcon', label: '판매 내역' },
+  { path: '/purchaselist', imgSrc: Cart, altText: 'CartIcon', label: '구매 내역' },
+];

src/hooks/useFetchProductList.ts

@@ -18,20 +18,6 @@ const useFetchProductList = ({ path, queryKey }: FetchProductListProps) => {
 
       const products = response.data.map((item: Product) => item);
 
-      // const productsWithChatroomCounts = await Promise.all(
-      //   response.data.map(async (product: Product) => {
-      //     const chatroomResponse = await restFetcher({
-      //       method: 'GET',
-      //       path: `/chatroom/count/${product.productId}`,
-      //     });
-      //     return { ...product, chatroomCount: chatroomResponse.data };
-      //   }),
-      // );
-
-      // return {
-      //   data: productsWithChatroomCounts,
-      //   nextPage: response.data.length ? pageParam + 1 : undefined,
-      // };
       return { data: products, nextPage: response.data.length ? pageParam + 1 : undefined };
     } catch (error) {
       return { data: [], nextPage: undefined };

src/hooks/useProductForm.ts

@@ -16,11 +16,11 @@ const useProductForm = ({ state }: ProductFormProps) => {
 
   const mutateChangeProductState = useMutation(
     (product: Product) => {
-      let newState = state === 'SOLD' ? 'SALE' : 'SOLD';
+      let body = state === 'SOLD' ? { state: 'SALE' } : { state: 'SOLD', buyerEmail: null };
       return restFetcher({
         method: 'PUT',
         path: `/products/state/${product.productId}`,
-        body: { state: newState },
+        body: body,
       });
     },
     {

src/pages/MyPage/index.tsx

@@ -1,22 +1,14 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as S from './styles';
-import profile from '../../assets/profile.svg';
-import Heart from '../../assets/HeartIcon.svg';
-import Store from '../../assets/StoreIcon.svg';
-import Cart from '../../assets/CartIcon.svg';
+import profile from '@/assets/profile.svg';
+import { MYPAGE_ITEMS } from '@/constants/mypageItem';
 import TopNavBar from '@/components/TopNavBar';
 import { restFetcher } from '@/queryClient';
 import { useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { UserInfo } from '@/types/userInfo';
 
-const NAV_ITEMS = [
-  { path: '/wishlist', imgSrc: Heart, altText: 'heartIcon', label: '좋아요 목록' },
-  { path: '/saleslist', imgSrc: Store, altText: 'StoreIcon', label: '판매 내역' },
-  { path: '/purchaselist', imgSrc: Cart, altText: 'CartIcon', label: '구매 내역' },
-];
-
 const MyPage: React.FC = () => {
   const navigate = useNavigate();
 
@@ -50,7 +42,7 @@ const MyPage: React.FC = () => {
 
         <S.Title>나의 거래</S.Title>
 
-        {NAV_ITEMS.map((item, index) => (
+        {MYPAGE_ITEMS.map((item, index) => (
           <S.ItemBox key={index}>
             <S.ClickArea onClick={() => navigate(item.path)}>
               <img src={item.imgSrc} alt={item.altText} />
@@ -59,7 +51,13 @@ const MyPage: React.FC = () => {
           </S.ItemBox>
         ))}
 
-        <S.NavBtn onClick={() => navigate('/edit_info')}>계정 / 정보 관리</S.NavBtn>
+        <S.ButtonWrapper>
+          <S.NavBtn onClick={() => navigate('/edit_info')}>계정 / 정보 관리</S.NavBtn>
+
+          <S.FormBtn href="https://docs.google.com/forms/d/e/1FAIpQLScBTFRrxNFv69iL--I2rpCg8lb7n6VCRw42QIUOr2tLVHEgfQ/viewform">
+            마음의 소리함 📮
+          </S.FormBtn>
+        </S.ButtonWrapper>
       </S.Div>
     </>
   );

src/pages/MyPage/styles.tsx

@@ -21,14 +21,14 @@ export const ChangImg = styled.img`
 
 export const Name = styled.span`
   color: #000;
-  font-size: 23px;
+  font-size: 2.4rem;
   font-weight: 700;
 `;
 
 export const Title = styled.span`
   display: flex;
   color: #000;
-  font-size: 15px;
+  font-size: 1.5rem;
   font-weight: 700;
 `;
 
@@ -47,21 +47,28 @@ export const ClickArea = styled.div`
 
   &:hover {
     cursor: pointer;
-    // background-color: rgba(217, 217, 217, 0.15);
   }
 `;
 
 export const Item = styled.span`
   position: absolute;
   left: 3.4rem;
   color: #000;
-  font-size: 15px;
+  font-size: 1.5rem;
   font-weight: 400;
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2.6rem;
+`;
+
 export const NavBtn = styled.button`
   margin-top: 6rem;
-  font-size: 15px;
+  font-size: 1.5rem;
   font-weight: 700;
   appearance: none;
   border: 0;
@@ -73,3 +80,15 @@ export const NavBtn = styled.button`
     color: #828385;
   }
 `;
+
+export const FormBtn = styled.a`
+  text-decoration: none;
+  color: black;
+  font-size: 1.5rem;
+  font-weight: 700;
+
+  &:hover {
+    cursor: pointer;
+    color: #828385;
+  }
+`;

src/pages/PurchaseList/index.tsx

@@ -18,15 +18,6 @@ const PurchaseList: React.FC = () => {
   return (
     <>
       <TopNavBar page="나의 구매 내역" />
-      <S.BtnDiv>
-        <S.WriteBtn
-          onClick={() => {
-            navigate('/write');
-          }}
-        >
-          글쓰기
-        </S.WriteBtn>
-      </S.BtnDiv>
 
       <S.ProductContainer>
         {isLoading ? (

src/pages/PurchaseList/styles.tsx

@@ -1,26 +1,5 @@
 import styled from 'styled-components';
 
-export const BtnDiv = styled.div`
-  padding: 2.8rem 2.2rem 0;
-`;
-
-export const WriteBtn = styled.button`
-  width: 10.6rem;
-  height: 3.5rem;
-  appearance: none;
-  border: 0;
-  padding: 0;
-  background-color: transparent;
-  border-radius: 1rem;
-  background: #fd8944;
-  color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 export const ProductContainer = styled.div`
   padding: 3rem 2rem 0;
 `;

src/pages/SalesList/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import * as S from './styles';
 import TopNavBar from '@/components/TopNavBar';
 import ProductForm from '@/components/ProductForm/ProductForm';
@@ -15,7 +14,6 @@ interface ApiResponse {
 }
 
 const SalesList: React.FC = () => {
-  const navigate = useNavigate();
   const userId = localStorage.getItem('userId');
   const [activeIndex, setActiveIndex] = useState<number>(0);
 

src/pages/SellerPage/styles.tsx

@@ -23,7 +23,7 @@ export const Tab = styled.li<{ isActive: boolean }>`
 
 export const TabContent = styled.div`
   padding: 2rem 2rem 0;
-  display: flex;
+  display: wrap;
   align-items: center;
   justify-content: center;
 `;