From bb4f862c94ac7f92988b0b0651d873da3bb1bc5f Mon Sep 17 00:00:00 2001 From: m-oooooonchild Date: Tue, 3 Dec 2024 13:00:22 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=90=9B=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EA=B0=9C=EC=88=98=20=EC=A0=9C=ED=95=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Review/ReviewWritePage/ReviewWritePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Review/ReviewWritePage/ReviewWritePage.tsx b/src/pages/Review/ReviewWritePage/ReviewWritePage.tsx index 508ac8a..fc9d8a6 100644 --- a/src/pages/Review/ReviewWritePage/ReviewWritePage.tsx +++ b/src/pages/Review/ReviewWritePage/ReviewWritePage.tsx @@ -85,7 +85,7 @@ const ReviewWritePage = () => { Date: Tue, 3 Dec 2024 13:00:45 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20=EC=9E=91=EA=B0=80=ED=99=88=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=EC=82=AC=EC=A7=84=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfilePage/ProfileCard.style.ts | 172 +++++++++--------- src/components/ProfilePage/ProfileCard.tsx | 4 +- 2 files changed, 88 insertions(+), 88 deletions(-) diff --git a/src/components/ProfilePage/ProfileCard.style.ts b/src/components/ProfilePage/ProfileCard.style.ts index e7cd49b..75632f8 100644 --- a/src/components/ProfilePage/ProfileCard.style.ts +++ b/src/components/ProfilePage/ProfileCard.style.ts @@ -2,124 +2,126 @@ import styled from 'styled-components'; import * as font from '../../styles/font'; export const Container = styled.div` - width: 100%; - height: 38vh; - background: #8FCBC1; - - @media only screen and (min-width: 768px) { - width: 768px; - margin: 0 auto; - } - - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 0.94rem; - - padding: 2rem 1.28125rem; - box-sizing: border-box; + width: 100%; + height: 38vh; + background: #8fcbc1; + + @media only screen and (min-width: 768px) { + width: 768px; + margin: 0 auto; + } + + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 0.94rem; + + padding: 2rem 1.28125rem; + box-sizing: border-box; `; export const Top = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - padding: 0.2rem 1.28125rem; - top: 0; - flex-shrink: 0; - z-index: 1; + width: 100%; + display: flex; + justify-content: space-between; + padding: 0.2rem 1.28125rem; + top: 0; + flex-shrink: 0; + z-index: 1; `; export const Btn = styled.div` - cursor: pointer; - z-index: 1; + cursor: pointer; + z-index: 1; `; export const ChatAndShare = styled.div` - display: flex; - justify-content: flex-end; - align-items: center; - gap: 0.81rem; - z-index: 1; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 0.81rem; + z-index: 1; `; export const BackgroundLogo = styled.div` - position: absolute; - width: 100%; - display: flex; - justify-content: flex-end; - z-index: 0; + position: absolute; + width: 100%; + display: flex; + justify-content: flex-end; + z-index: 0; `; export const ContentWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - margin-top: 2.5rem; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + margin-top: 2.5rem; `; export const ProfileWrapper = styled.div` - width: 100%; - display: flex; - justify-content: flex-start; - align-items: center; - top: 0; - flex-shrink: 0; - margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + top: 0; + flex-shrink: 0; + margin-bottom: 1rem; `; -export const ProfileImg = styled.div` - width: 5.5625rem; - height: 5.5625rem; +export const ProfileImg = styled.img` + width: 5.5625rem; + height: 5.5625rem; + border-radius: 50%; + object-fit: cover; `; export const UserName = styled.div` - ${font.extrabold} - color: var(--Grayscale-white, #FFF); - font-size: 35px; - font-style: normal; - font-weight: 800; - line-height: 150%; - - margin-left: 1rem; + ${font.extrabold} + color: var(--Grayscale-white, #FFF); + font-size: 35px; + font-style: normal; + font-weight: 800; + line-height: 150%; + + margin-left: 1rem; `; export const Bio = styled.div` - ${font.semibold} - color: #F0FEF9; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 150%; - width: 70%; + ${font.semibold} + color: #F0FEF9; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; + width: 70%; `; export const StarScore = styled.div` - ${font.extrabold} - color: var(--Grayscale-white, #FFF); - font-size: 25px; - font-style: normal; - font-weight: 800; - line-height: 150%; + ${font.extrabold} + color: var(--Grayscale-white, #FFF); + font-size: 25px; + font-style: normal; + font-weight: 800; + line-height: 150%; `; export const Stars = styled.div` - display: flex; - align-items: center; - width: 8.25rem; - height: 8.25rem; - flex-shrink: 0; + display: flex; + align-items: center; + width: 8.25rem; + height: 8.25rem; + flex-shrink: 0; `; export const StarsWrapper = styled.div` - display: flex; - justify-content: flex-start; - align-items: center; - width: 12.4375rem; - height: 2.375rem; - flex-shrink: 0; - gap: 0.69rem; - margin-top: 1rem; + display: flex; + justify-content: flex-start; + align-items: center; + width: 12.4375rem; + height: 2.375rem; + flex-shrink: 0; + gap: 0.69rem; + margin-top: 1rem; `; diff --git a/src/components/ProfilePage/ProfileCard.tsx b/src/components/ProfilePage/ProfileCard.tsx index f3c35af..77f26db 100644 --- a/src/components/ProfilePage/ProfileCard.tsx +++ b/src/components/ProfilePage/ProfileCard.tsx @@ -72,9 +72,7 @@ const ProfileCard = ({ - - - + {userName} {content} From 4d63bb6bf93de0e1038045870319892f5292c774 Mon Sep 17 00:00:00 2001 From: m-oooooonchild Date: Tue, 3 Dec 2024 13:15:23 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=92=84=20=EA=B7=B8=EB=A6=AC=EB=93=9C?= =?UTF-8?q?=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/MainPage/MainPage.style.ts | 79 ++++++++++++----------- 1 file changed, 40 insertions(+), 39 deletions(-) diff --git a/src/pages/Main/MainPage/MainPage.style.ts b/src/pages/Main/MainPage/MainPage.style.ts index 9b995a1..0224566 100644 --- a/src/pages/Main/MainPage/MainPage.style.ts +++ b/src/pages/Main/MainPage/MainPage.style.ts @@ -1,56 +1,57 @@ import styled from 'styled-components'; export const Container = styled.div` - width: 100%; - height: 100vh; - background-color: #fafafb; + width: 100%; + height: 100vh; + background-color: #fafafb; - @media only screen and (min-width: 768px) { - width: 768px; - margin: 0 auto; - } + @media only screen and (min-width: 768px) { + width: 768px; + margin: 0 auto; + } - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 1rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; - padding: 0 1.28125rem; - box-sizing: border-box; + padding: 0 1.28125rem; + box-sizing: border-box; - position: relative; + position: relative; `; export const Top = styled.div` - width: 100%; - position: absolute; - top: 0; - flex-shrink: 0; + width: 100%; + position: fixed; + top: 0; + flex-shrink: 0; `; export const NavBar = styled.div` - width: 100%; - position: absolute; - bottom: 0; + width: 100%; + position: fixed; + bottom: -1px; `; export const Contents = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); - gap: 1rem; - width: 100%; - min-height: 850px; - justify-content: center; - overflow-y: auto; - margin-top: calc(8rem); - - scrollbar-width: none; - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } - - align-content: start; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1.3rem), 1fr)); + justify-items: center; + gap: 1rem; + width: 100%; + justify-content: center; + overflow-y: auto; + padding-top: 7rem; + padding-bottom: 6rem; + + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + + align-content: start; `; From d76e1f5ea602cddd6e473a674d7e4a738859c382 Mon Sep 17 00:00:00 2001 From: m-oooooonchild Date: Tue, 3 Dec 2024 13:17:18 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=92=84=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EB=B0=94=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainPage/Filter.style.ts | 70 ++++++++++++++----------- src/components/MainPage/Filter.tsx | 20 +++++-- 2 files changed, 53 insertions(+), 37 deletions(-) diff --git a/src/components/MainPage/Filter.style.ts b/src/components/MainPage/Filter.style.ts index a13bcf6..0af348c 100644 --- a/src/components/MainPage/Filter.style.ts +++ b/src/components/MainPage/Filter.style.ts @@ -2,46 +2,52 @@ import styled from 'styled-components'; import * as font from '../../styles/font'; interface BtnProps { - active: boolean; + active: boolean; } export const Wrapper = styled.div` - width: 100%; - box-sizing: border-box; + width: 100%; + box-sizing: border-box; - @media only screen and (min-width: 768px) { - width: 768px; - margin: 0 auto; - } + @media only screen and (min-width: 768px) { + width: 768px; + margin: 0 auto; + } - height: 3.5rem; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - background-color: var(--white02); + height: 3.5rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + background-color: var(--white02); + + overflow-x: scroll; + &::-webkit-scrollbar { + display: none; + } `; export const FilterIcon = styled.div` - margin-left: 0%.5; + margin-left: 0%.5; `; export const Btn = styled.button` - display: flex; - justify-content: center; - align-items: center; - font-size: 1rem; - width: 5rem; - height: 1.9rem; - border-radius: 0.625rem; - flex-shrink: 0; - cursor: pointer; - margin-left: 1rem; - flex-grow: 1; - max-width: 10rem; - border: ${({ active }) => (active ? 'none' : '1.5px solid var(--mint03)')}; - background-color: ${({ active }) => (active ? 'var(--mint01)' : 'transparent')}; - color: ${({ active }) => (active ? 'var(--white02)' : 'var(--mint03)')}; - ${({ active }) => (active ? font.extrabold : font.semibold)}; - transition: all 0.2s ease-in-out; -`; \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + width: 5rem; + height: 1.9rem; + border-radius: 0.625rem; + flex-shrink: 0; + cursor: pointer; + margin-left: 1rem; + flex-grow: 1; + max-width: 10rem; + border: ${({ active }) => (active ? 'none' : '1.5px solid var(--mint03)')}; + background-color: ${({ active }) => + active ? 'var(--mint01)' : 'transparent'}; + color: ${({ active }) => (active ? 'var(--white02)' : 'var(--mint03)')}; + ${({ active }) => (active ? font.extrabold : font.semibold)}; + transition: all 0.2s ease-in-out; +`; diff --git a/src/components/MainPage/Filter.tsx b/src/components/MainPage/Filter.tsx index 674a5ea..df735ad 100644 --- a/src/components/MainPage/Filter.tsx +++ b/src/components/MainPage/Filter.tsx @@ -16,24 +16,34 @@ const Filter: React.FC = ({ onFilterChange }) => { return ( - + + + {/* 기본값 (getAllProduct 호출) */} handleBtnClick(null as unknown as string)} - >전체 + > + 전체 + handleBtnClick('후기순')} - >후기순 + > + 후기순 + handleBtnClick('북마크순')} - >북마크순 + > + 북마크순 + handleBtnClick('최신순')} - >최신순 + > + 최신순 + ); }; From 6c7fdeb2ddbc6424c173561663583556de62a43f Mon Sep 17 00:00:00 2001 From: m-oooooonchild Date: Tue, 3 Dec 2024 13:31:23 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=92=84=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetailPage/ProductImage.style.ts | 49 ++++------ .../ProductDetailPage/ProductImage.tsx | 46 +++++---- .../ProductDetailPage.style.ts | 29 +++++- .../ProductDetailPage/ProductDetailPage.tsx | 98 +++++++++++-------- 4 files changed, 124 insertions(+), 98 deletions(-) diff --git a/src/components/ProductDetailPage/ProductImage.style.ts b/src/components/ProductDetailPage/ProductImage.style.ts index 6d56764..7486f09 100644 --- a/src/components/ProductDetailPage/ProductImage.style.ts +++ b/src/components/ProductDetailPage/ProductImage.style.ts @@ -1,41 +1,28 @@ import styled from 'styled-components'; export const Container = styled.div` - width: 100%; - height: 23.1875rem; - position: relative; - - @media only screen and (min-width: 768px) { - width: 768px; - margin: 0 auto; - } -`; + width: 100%; + height: 23.1875rem; + position: relative; -export const Top = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - padding: 2rem 1.28125rem; - box-sizing: border-box; - top: 0; - position: absolute; - z-index: 2; -`; + @media only screen and (min-width: 768px) { + width: 768px; + margin: 0 auto; + } -export const BackBtn = styled.div` - cursor: pointer; + flex-shrink: 0; `; export const ImgContainer = styled.div` + width: 100%; + height: 100%; + position: relative; + z-index: 1; + background-color: var(--white01); + + img { width: 100%; height: 100%; - position: relative; - z-index: 1; - background-color: var(--white01); - - img { - width: 100%; - height: 100%; - object-fit: cover; - } -`; \ No newline at end of file + object-fit: cover; + } +`; diff --git a/src/components/ProductDetailPage/ProductImage.tsx b/src/components/ProductDetailPage/ProductImage.tsx index 9bbd9a7..5a87b7c 100644 --- a/src/components/ProductDetailPage/ProductImage.tsx +++ b/src/components/ProductDetailPage/ProductImage.tsx @@ -1,32 +1,30 @@ -import * as S from './ProductImage.style' -import { ReactComponent as GoBack } from '../../assets/ProductDetailPage/arrow_key_left.svg' -import { ReactComponent as Share } from '../../assets/ProductDetailPage/share.svg' -import { useNavigate } from 'react-router-dom' +import * as S from './ProductImage.style'; +import { useNavigate } from 'react-router-dom'; interface ReviewProps { - reviewImg1: string; - reviewImg2: string; - reviewImg3: string; - reviewImg4: string; - reviewImg5: string; + reviewImg1: string; + reviewImg2: string; + reviewImg3: string; + reviewImg4: string; + reviewImg5: string; } -const ProductImage = ({ reviewImg1, reviewImg2, reviewImg3, reviewImg4, reviewImg5}: ReviewProps) => { - const navigate = useNavigate(); +const ProductImage = ({ + reviewImg1, + reviewImg2, + reviewImg3, + reviewImg4, + reviewImg5, +}: ReviewProps) => { + const navigate = useNavigate(); - return ( - - - {reviewImg1 ? Review Image 1 : null} - - - navigate(-1)}> - - - - - - ); + return ( + + + {reviewImg1 ? Review Image 1 : null} + + + ); }; export default ProductImage; diff --git a/src/pages/Product/ProductDetailPage/ProductDetailPage.style.ts b/src/pages/Product/ProductDetailPage/ProductDetailPage.style.ts index 33bb27d..9306170 100644 --- a/src/pages/Product/ProductDetailPage/ProductDetailPage.style.ts +++ b/src/pages/Product/ProductDetailPage/ProductDetailPage.style.ts @@ -16,4 +16,31 @@ export const Container = styled.div` width: 768px; margin: 0 auto; } -`; \ No newline at end of file +`; + +export const Top = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + padding: 2rem 1.28125rem; + box-sizing: border-box; + top: 0; + position: absolute; + z-index: 2; +`; + +export const BackBtn = styled.div` + cursor: pointer; +`; + +export const ContentContainer = styled.div` + display: flex; + flex-direction: column; + + width: 100%; + padding-bottom: 8rem; + overflow-y: scroll; + &::-webkit-scrollbar { + display: none; + } +`; diff --git a/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx b/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx index 9165033..e37dd05 100644 --- a/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx +++ b/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx @@ -6,7 +6,9 @@ import ReviewContent from '../../../components/ProductDetailPage/ReviewContent'; import Footer from '../../../components/ProductDetailPage/Footer'; import { OrderModal } from '../../../components/ProductDetailPage/OrderModal'; import { getProductDetail } from '../../../api/product'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; +import { ReactComponent as GoBack } from '../../../assets/ProductDetailPage/arrow_key_left.svg'; +import { ReactComponent as Share } from '../../../assets/ProductDetailPage/share.svg'; export interface ProductProps { productId: number; @@ -32,32 +34,32 @@ interface Option { } const ProductImgData = { - reviewImg1: "", - reviewImg2: "", - reviewImg3: "", - reviewImg4: "", - reviewImg5: "", + reviewImg1: '', + reviewImg2: '', + reviewImg3: '', + reviewImg4: '', + reviewImg5: '', }; const productDummyData: ProductProps[] = [ { productId: 1, userId: 1, - sellerNickname: "이화여대1886", - productName: "더미데이터 리사이클링", + sellerNickname: '이화여대1886', + productName: '더미데이터 리사이클링', isMarked: false, price: 18000, - content: "더미데이터입니다 대충 설명란임", + content: '더미데이터입니다 대충 설명란임', duration: 1, rating: 0, - productState: "ON_SALE", + productState: 'ON_SALE', deliveryFee: 3000, - materialInfo: "이 제품은 오직 ", - buyerNotice: "배송이 늦어질 수 있습니다.", + materialInfo: '이 제품은 오직 ', + buyerNotice: '배송이 늦어질 수 있습니다.', options: [ - { optionId: 1, optionName: "L 사이즈", optionPrice: 3000 }, - { optionId: 2, optionName: "M 사이즈", optionPrice: 2000 }, - { optionId: 3, optionName: "S 사이즈", optionPrice: 1000 }, + { optionId: 1, optionName: 'L 사이즈', optionPrice: 3000 }, + { optionId: 2, optionName: 'M 사이즈', optionPrice: 2000 }, + { optionId: 3, optionName: 'S 사이즈', optionPrice: 1000 }, ], }, ]; @@ -67,6 +69,7 @@ const ProductDetailPage = () => { const [productInfo, setProductInfo] = useState(null); const { productId } = useParams() as { productId: string }; + const navigate = useNavigate(); useEffect(() => { const getProductInfo = async () => { @@ -97,32 +100,43 @@ const ProductDetailPage = () => { return ( - - {productInfo ? ( - <> - - -