Merge pull request #73 from efub-ecyce/feat/#72

Feat/#72
efub-ecyce · Dec 3, 2024 · 93a8bda · 93a8bda
2 parents 25c5a04 + d054140
commit 93a8bda
Show file tree

Hide file tree

Showing 42 changed files with 1,481 additions and 1,303 deletions.
diff --git a/src/assets/ReviewPage/karma-logo-gray copy.svg b/src/assets/ReviewPage/karma-logo-gray copy.svg
diff --git a/src/assets/ReviewPage/karma-logo-gray.svg b/src/assets/ReviewPage/karma-logo-gray.svg
diff --git 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<BtnProps>`
-    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;
-`;
+  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
@@ -16,24 +16,34 @@ const Filter: React.FC<FilterProps> = ({ onFilterChange }) => {
 
   return (
     <S.Wrapper>
-      <S.FilterIcon><FilterIcon /></S.FilterIcon>
+      <S.FilterIcon>
+        <FilterIcon />
+      </S.FilterIcon>
       {/* 기본값 (getAllProduct 호출) */}
       <S.Btn
         active={!activeBtn}
         onClick={() => handleBtnClick(null as unknown as string)}
-      >전체</S.Btn>
+      >
+        전체
+      </S.Btn>
       <S.Btn
         active={activeBtn === '후기순'}
         onClick={() => handleBtnClick('후기순')}
-      >후기순</S.Btn>
+      >
+        후기순
+      </S.Btn>
       <S.Btn
         active={activeBtn === '북마크순'}
         onClick={() => handleBtnClick('북마크순')}
-      >북마크순</S.Btn>
+      >
+        북마크순
+      </S.Btn>
       <S.Btn
         active={activeBtn === '최신순'}
         onClick={() => handleBtnClick('최신순')}
-      >최신순</S.Btn>
+      >
+        최신순
+      </S.Btn>
     </S.Wrapper>
   );
 };

diff --git a/src/components/PaymentPage/DeliverInfoComponent.style.ts b/src/components/PaymentPage/DeliverInfoComponent.style.ts
@@ -3,18 +3,17 @@ import * as font from '../../styles/font';
 
 export const Wrapper = styled.div`
   width: 100%;
-    box-sizing: border-box;
+  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: 12.8rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 1rem;
   background-color: var(--white02);
 `;
 
@@ -23,11 +22,11 @@ export const Title = styled.div`
   color: var(--black02);
   font-size: 20px;
   width: 100%;
-    box-sizing: border-box;
+  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;
   }
 `;
 
@@ -45,7 +44,7 @@ export const Btn = styled.div`
 export const Line = styled.div`
   width: 100%;
   height: 0.01875rem;
-  background: #C1D1D1;
+  background: #c1d1d1;
   margin-top: 0.6rem;
 `;
 
@@ -57,10 +56,13 @@ export const IndexText = styled.div`
 `;
 
 export const Text = styled.div`
-  width: 20rem;
+  width: 16rem;
   ${font.light}
   color: var(--black00);
   font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const TextWrapper = styled.div`
@@ -72,4 +74,4 @@ export const InfoWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`;
+`;
diff --git a/src/components/PaymentPage/DeliverInfoComponent.tsx b/src/components/PaymentPage/DeliverInfoComponent.tsx
@@ -2,39 +2,49 @@ import * as S from './DeliverInfoComponent.style';
 import { ReactComponent as EditIcon } from '../../assets/PaymentPage/edit.svg';
 
 interface AddressProps {
-    recipient: string;
-    phoneNumber: string;
-    postCode: string;
-    address: string;
-    addressDetail: string;
-    onEditAddress: () => void;
+  recipient: string;
+  phoneNumber: string;
+  postCode: string;
+  address: string;
+  addressDetail: string;
+  onEditAddress: () => void;
 }
 
-const DeliverInfoComponent = ({ recipient, phoneNumber, postCode, address, addressDetail, onEditAddress }: AddressProps) => {
-
-    return (
-        <S.Wrapper>
-            <S.TitleWrapper>
-                <S.Title>배송 정보</S.Title>
-                <S.Btn onClick={onEditAddress}><EditIcon /></S.Btn>
-            </S.TitleWrapper>
-            <S.Line></S.Line>
-            <S.InfoWrapper>
-                <S.TextWrapper>
-                    <S.IndexText>수령인</S.IndexText>
-                    <S.Text>{recipient}</S.Text>
-                </S.TextWrapper>
-                <S.TextWrapper>
-                    <S.IndexText>연락처</S.IndexText>
-                    <S.Text>{phoneNumber}</S.Text>
-                </S.TextWrapper>
-                <S.TextWrapper>
-                    <S.IndexText>주소</S.IndexText>
-                    <S.Text>[{postCode}] {address} {addressDetail}</S.Text>
-                </S.TextWrapper>
-            </S.InfoWrapper>
-        </S.Wrapper>
-    );
+const DeliverInfoComponent = ({
+  recipient,
+  phoneNumber,
+  postCode,
+  address,
+  addressDetail,
+  onEditAddress,
+}: AddressProps) => {
+  return (
+    <S.Wrapper>
+      <S.TitleWrapper>
+        <S.Title>배송 정보</S.Title>
+        <S.Btn onClick={onEditAddress}>
+          <EditIcon />
+        </S.Btn>
+      </S.TitleWrapper>
+      <S.Line></S.Line>
+      <S.InfoWrapper>
+        <S.TextWrapper>
+          <S.IndexText>수령인</S.IndexText>
+          <S.Text>{recipient}</S.Text>
+        </S.TextWrapper>
+        <S.TextWrapper>
+          <S.IndexText>연락처</S.IndexText>
+          <S.Text>{phoneNumber}</S.Text>
+        </S.TextWrapper>
+        <S.TextWrapper>
+          <S.IndexText>주소</S.IndexText>
+          <S.Text>
+            [{postCode}] {address} {addressDetail}
+          </S.Text>
+        </S.TextWrapper>
+      </S.InfoWrapper>
+    </S.Wrapper>
+  );
 };
 
 export default DeliverInfoComponent;
diff --git a/src/components/PaymentPage/Header.style.ts b/src/components/PaymentPage/Header.style.ts
@@ -3,11 +3,11 @@ import * as font from '../../styles/font';
 
 export const Wrapper = styled.div`
   width: 100%;
-    box-sizing: border-box;
+  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;
@@ -22,15 +22,15 @@ export const Title = styled.div`
   color: var(--black02);
   font-size: 25px;
   width: 100%;
-    box-sizing: border-box;
+  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;
   }
 `;
 
 export const Btn = styled.div`
-  margin-left: 1rem;
   cursor: pointer;
+  margin-right: 0.2rem;
 `;
diff --git a/src/components/PaymentPage/Header.tsx b/src/components/PaymentPage/Header.tsx
@@ -7,7 +7,9 @@ const Header = () => {
 
   return (
     <S.Wrapper>
-      <S.Btn onClick={() => navigate(-1)}><CloseIcon /></S.Btn>
+      <S.Btn onClick={() => navigate(-1)}>
+        <CloseIcon />
+      </S.Btn>
       <S.Title>결제</S.Title>
     </S.Wrapper>
   );

diff --git a/src/components/PaymentPage/PaymentInfoComponent.style.ts b/src/components/PaymentPage/PaymentInfoComponent.style.ts
@@ -3,18 +3,17 @@ import * as font from '../../styles/font';
 
 export const Wrapper = styled.div`
   width: 100%;
-    box-sizing: border-box;
+  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: 12.8rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 1rem;
   background-color: var(--white02);
 `;
 
@@ -25,9 +24,9 @@ export const Title = styled.div`
   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;
   }
 `;
 
@@ -40,7 +39,7 @@ export const TitleWrapper = styled.div`
 export const Line = styled.div`
   width: 100%;
   height: 0.01875rem;
-  background: #C1D1D1;
+  background: #c1d1d1;
   margin-top: 0.6rem;
 `;
 
@@ -75,4 +74,4 @@ export const TotalPrice = styled.div`
   ${font.semibold}
   color: var(--black02);
   font-size: 20px;
-`;
+`;