Merge branch 'develop' into refactor/cardlist-size

Together-3team · Jun 24, 2024 · 16a5914 · 16a5914
2 parents bbe3a43 + 9e529d6
commit 16a5914
Show file tree

Hide file tree

Showing 21 changed files with 171 additions and 108 deletions.
diff --git a/src/components/auth/LoginButton/GoogleLogin.tsx b/src/components/auth/LoginButton/GoogleLogin.tsx
@@ -11,7 +11,7 @@ export default function GoogleLogin() {
       <a href={API_BASE_URL + `/auth/google/${process.env.NEXT_PUBLIC_AUTH_END}`}>
         <div className={cx('googleButton')}>
           <GoogleLogo />
-          <span>카카오로 계속하기</span>
+          <span>구글로 계속하기</span>
         </div>
       </a>
     </>

diff --git a/src/components/auth/Menu/index.tsx b/src/components/auth/Menu/index.tsx
@@ -8,6 +8,7 @@ import NextButton from '@/components/common/Button/NextButton';
 import NavBottom from '@/components/common/Nav/Bottom';
 import FloatingBox from '@/components/common/Layout/Footer/FloatingBox';
 import { cartQueries } from '@/apis/cart/queries';
+import defaultImg from '@/assets/images/rectangle.png';
 
 import styles from './Menu.module.scss';
 
@@ -25,7 +26,7 @@ export default function Menu() {
     <div className={styles.menuLayout}>
       <h1>마이페이지</h1>
       <div className={styles.profileArea}>
-        <ProfileImgBadge size="large" profileImage={userData.profileImage.split('?')[0]} />
+        <ProfileImgBadge size="large" profileImage={userData.profileImage.split('?')[0] || defaultImg} />
         <h2>{userData.nickname}</h2>
       </div>
       <div className={styles.centerBorder} />

diff --git a/src/components/cart/Card.tsx b/src/components/cart/Card.tsx
@@ -47,8 +47,8 @@ export default function Card({
     onQuantityChange(newQuantity);
   }
 
-  const formattedOriginalCost = originalCost.toLocaleString('ko-KR');
-  const formattedProductCost = productCost.toLocaleString('ko-KR');
+  const totalOriginalCost = (originalCost * productNumber + combinationPrice * productNumber).toLocaleString('ko-KR');
+  const totalProductCost = (productCost * productNumber + combinationPrice * productNumber).toLocaleString('ko-KR');
   const formattedCombinationPrice = combinationPrice.toLocaleString('ko-KR');
 
   return (
@@ -68,15 +68,17 @@ export default function Card({
           <Image className={styles.productImg} src={imageUrl} width={56} height={56} alt="productImg" />
           <div>
             <div className={styles.productTitle}>{productTitle}</div>
-            <div className={styles.optionContainer}>
-              <div className={styles.option}>{option}</div>
-              <div className={styles.optionCost}>(+{formattedCombinationPrice}원)</div>
-            </div>
+            {option !== '기본' && (
+              <div className={styles.optionContainer}>
+                <div className={styles.option}>{option}</div>
+                <div className={styles.optionCost}>(+{formattedCombinationPrice}원)</div>
+              </div>
+            )}
             <div className={styles.moneyContainerRight}>
-              <div className={styles.productCost}>{formattedOriginalCost}원</div>
+              <div className={styles.productCost}>{totalOriginalCost}원</div>
               <div className={styles.realPrice}>
                 <div className={styles.discountRate}>{discountRate.toFixed(0)}%</div>
-                <div className={styles.realMoney}>{formattedProductCost}원</div>
+                <div className={styles.realMoney}>{totalProductCost}원</div>
               </div>
             </div>
           </div>
@@ -86,7 +88,7 @@ export default function Card({
             <button className={styles.plusminus} onClick={removeProduct}>
               -
             </button>
-            <input className={styles.productNumber} type="number" value={productNumber} readOnly />
+            <input className={styles.productNumber} type="text" value={productNumber} readOnly />
             <button className={styles.plusminus} onClick={addProduct}>
               +
             </button>

diff --git a/src/components/cart/TotalPay.module.scss b/src/components/cart/TotalPay.module.scss
@@ -30,6 +30,8 @@
 }
 
 .totalPrice {
+  font-size: 1.8rem;
+  font-weight: 700;
   margin-top: 1rem;
   display: flex;
   justify-content: space-between;

diff --git a/src/components/cart/TotalPay.tsx b/src/components/cart/TotalPay.tsx
@@ -1,13 +1,18 @@
+import classNames from 'classnames/bind';
+
 import styles from './TotalPay.module.scss';
 
 interface TotalPayProps {
   totalPrice: number;
   totalOriginalPrice: number;
   productCount: number; // 전체 상품 수
   title: string;
+  inOrder?: boolean;
 }
 
-export default function TotalPay({ totalPrice, totalOriginalPrice, title, productCount }: TotalPayProps) {
+const cx = classNames.bind(styles);
+
+export default function TotalPay({ totalPrice, totalOriginalPrice, title, productCount, inOrder }: TotalPayProps) {
   const discountAmount = (totalOriginalPrice || 0) - (totalPrice || 0);
   const formattedTotalOriginalPrice = (totalOriginalPrice || 0).toLocaleString('ko-KR');
   const formattedTotalPrice = (totalPrice || 0).toLocaleString('ko-KR');
@@ -25,7 +30,7 @@ export default function TotalPay({ totalPrice, totalOriginalPrice, title, produc
           <div>할인 금액</div>
           <div className={styles.priceBold}>-{formattedDiscountAmount}원</div>
         </div>
-        <div className={`${styles.pricePair} ${styles.pink}`}>
+        <div className={cx('pricePair', { pink: !inOrder })}>
           <div>결제 금액</div>
           <div className={styles.priceBold}>{formattedTotalPrice}원</div>
         </div>
@@ -35,7 +40,7 @@ export default function TotalPay({ totalPrice, totalOriginalPrice, title, produc
         </div>
       </div>
       <div className={styles.line}></div>
-      <div className={styles.totalPrice}>
+      <div className={cx('totalPrice', { pink: inOrder })}>
         <div>총 결제 금액</div>
         <div className={styles.totalPriceNum}>{formattedTotalPrice}원</div>
       </div>

diff --git a/src/components/order/Empty/Empty.module.scss b/src/components/order/Empty/Empty.module.scss
@@ -35,7 +35,6 @@
     display: flex;
     flex-direction: column;
     padding-top: 2.4rem;
-    padding-right: 1.6rem;
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;

diff --git a/src/components/order/OrderFilterBar/index.tsx b/src/components/order/OrderFilterBar/index.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames/bind';
 import useDragScroll from '@/hooks/useDragScroll';
+import scrollToTargetX from '@/utils/scrollToTargetX';
 
 import styles from './OrderFilterBar.module.scss';
-import scrollToTargetX from '@/utils/scrollToTargetX';
 
 const cx = classNames.bind(styles);
 
@@ -35,17 +35,21 @@ export default function OrderFilterBar({ onFilterChange }: OrderFilterBarProps)
 
   const targetRef = useRef<HTMLButtonElement | null>(null);
 
+  const [isClicked, setIsClicked] = useState(false);
+
   const handleButtonClick = useCallback(
     (item: OrderFilterButtonsProps) => {
       setActiveButton(item);
       onFilterChange(item.id);
-      if (targetRef.current) {
-        targetRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
+      setIsClicked(prev => !prev);
     },
     [onFilterChange]
   );
 
+  useEffect(() => {
+    scrollToTargetX(dragScrollProps.ref, targetRef);
+  }, [dragScrollProps.ref, isClicked]);
+
   return (
     <div className={styles.container} {...dragScrollProps}>
       {buttonIds.map(item => (

diff --git a/src/components/payment/Card.tsx b/src/components/payment/Card.tsx
@@ -33,11 +33,13 @@ export default function Card({
         <Image className={styles.productImg} width={56} height={56} src={imageUrl} alt="productImg" />
         <div>
           <div className={styles.productTitle}>{productTitle}</div>
-          <div className={styles.optionContainer}>
-            <div>{option}</div>
-            <div>(+{combinationPrice}원)</div>
-            <div>&nbsp;| {productNumber}개</div>
-          </div>
+          {option !== '기본' && (
+            <div className={styles.optionContainer}>
+              <div>{option}</div>
+              <div>(+{combinationPrice}원)</div>
+              <div>&nbsp;| {productNumber}개</div>
+            </div>
+          )}
           <div className={styles.moneyContainerRight}>
             <div className={styles.productCost}>{totalOriginalCost}원</div>
             <div className={styles.realPrice}>

diff --git a/src/components/payment/PaymentAgree.module.scss b/src/components/payment/PaymentAgree.module.scss
@@ -36,6 +36,7 @@
   display: flex;
   gap: 0.8rem;
   margin: 0.8rem 0;
+  align-items: center;
 }
 
 .check {

diff --git a/src/components/payment/PaymentAgree.tsx b/src/components/payment/PaymentAgree.tsx
@@ -43,19 +43,38 @@ export default function PaymentAgree({ onCheckboxChange }: PaymentAgreeProps) {
         <div className={styles.checkboxTitle}>
           <input
             type="checkbox"
+            id="checkboxAll"
             className={styles.checkbox}
             checked={checkboxChecked}
             onChange={handleCheckboxChange}
           />
-          <div className={styles.agreeTitle}>주문내용 확인 및 결제 동의</div>
+          <label htmlFor="checkboxAll" className={styles.agreeTitle}>
+            주문내용 확인 및 결제 동의
+          </label>
         </div>
         <div className={styles.contentCheckbox}>
-          <input type="checkbox" className={styles.check} checked={check1Checked} onChange={handleCheck1Change} />
-          <div className={styles.checkContent}>(필수) 개인정보 수집, 이용 동의</div>
+          <input
+            type="checkbox"
+            id="check1"
+            className={styles.check}
+            checked={check1Checked}
+            onChange={handleCheck1Change}
+          />
+          <label htmlFor="check1" className={styles.checkContent}>
+            (필수) 개인정보 수집, 이용 동의
+          </label>
         </div>
         <div className={styles.contentCheckbox}>
-          <input type="checkbox" className={styles.check} checked={check2Checked} onChange={handleCheck2Change} />
-          <div className={styles.checkContent}>(필수) 개인정보 제3자 정보 제공 동의</div>
+          <input
+            type="checkbox"
+            id="check2"
+            className={styles.check}
+            checked={check2Checked}
+            onChange={handleCheck2Change}
+          />
+          <label htmlFor="check2" className={styles.checkContent}>
+            (필수) 개인정보 제3자 정보 제공 동의
+          </label>
         </div>
       </div>
     </>

diff --git a/src/components/payment/TotalPay.module.scss b/src/components/payment/TotalPay.module.scss
@@ -24,6 +24,10 @@
   margin-top: 2.4rem;
 }
 
+.priceBold {
+  @include font-body1;
+}
+
 .line {
   width: 100%;
   height: 0.15rem;

diff --git a/src/components/payment/TotalPay.tsx b/src/components/payment/TotalPay.tsx
@@ -21,19 +21,19 @@ export default function TotalPay({ totalPrice, totalOriginalPrice, title, produc
         <div className={styles.individualCost}>
           <div className={`${styles.pricePair} ${styles.gray}`}>
             <div>원가</div>
-            <div>{formattedTotalOriginalPrice}원</div>
+            <div className={styles.priceBold}>{formattedTotalOriginalPrice}원</div>
           </div>
           <div className={styles.pricePair}>
             <div>할인 금액</div>
-            <div>-{formattedDiscountAmount}원</div>
+            <div className={styles.priceBold}>-{formattedDiscountAmount}원</div>
           </div>
           <div className={`${styles.pricePair} ${styles.pink}`}>
             <div>결제 금액</div>
-            <div>{formattedTotalPrice}원</div>
+            <div className={styles.priceBold}>{formattedTotalPrice}원</div>
           </div>
           <div className={styles.pricePair}>
             <div>배송비</div>
-            <div>무료배송</div>
+            <div className={styles.priceBold}>무료배송</div>
           </div>
         </div>
         <div className={styles.line}></div>

diff --git a/src/components/review/WroteReviewCard/index.tsx b/src/components/review/WroteReviewCard/index.tsx
@@ -14,7 +14,9 @@ export default function WroteReviewCard({ href, productInfo, onClick }: WroteRev
     <div className={styles.wroteReviewCardArea} onClick={onClick}>
       <div className={styles.wroteReviewCardLayout}>
         <Card href={href} productInfo={productInfo} direction="row" size="miniImage" />
-        <NextButtonTemp href={href} />
+        <div className={styles.wroteReviewCardButton}>
+          <NextButtonTemp href={href} />
+        </div>
       </div>
       <hr className={styles.updownBorder} />
     </div>

diff --git a/src/pages/my/info/index.tsx b/src/pages/my/info/index.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { QueryClient, dehydrate, useMutation, useQueryClient } from '@tanstack/react-query';
 import * as Yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -68,22 +68,22 @@ export default function Info() {
 
   const methods = useForm<PhoneNumberValue>({
     resolver: yupResolver(phoneNumberSchema),
+    mode: 'onBlur',
   });
   const {
     formState: { errors },
   } = methods;
 
-  const { register, handleSubmit } = methods;
+  const { register, handleSubmit, control } = methods;
 
   const onSubmit: SubmitHandler<PhoneNumberValue> = data => {
     const userEditData: UserEditProps = {
       nickname: userData.nickname,
-      phoneNumber: data.phoneNumber,
+      phoneNumber: data.phoneNumber || userData.phoneNumber,
       profileImage: userData.profileImage,
       isSubscribedToPromotions: userData.isSubscribedToPromotions,
       preferredPet: userData.preferredPet,
     };
-    console.log(data);
 
     const params: UserEditParams = {
       id: userData.id,
@@ -133,15 +133,24 @@ export default function Info() {
               background="background"
               placeholder={userData.email}
             />
-            <Input
-              id="phoneNumber"
-              type="tel"
-              size="large"
-              label="연락처"
-              isError={errors.phoneNumber && true}
-              labelStyle={'label'}
-              placeholder="000-0000-0000 형식으로 입력해주세요"
-              defaultValue={userData.phoneNumber}
+            <Controller
+              control={control}
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  id="phoneNumber"
+                  type="tel"
+                  size="large"
+                  label="연락처"
+                  onBlur={() => {
+                    field.onBlur();
+                  }}
+                  isError={errors.phoneNumber && true}
+                  labelStyle={'label'}
+                  placeholder="000-0000-0000 형식으로 입력해주세요"
+                  defaultValue={userData.phoneNumber}
+                />
+              )}
               {...register('phoneNumber')}
             />
             {errors.phoneNumber && <span className={styles.errorText}>{errors.phoneNumber.message}</span>}

diff --git a/src/pages/my/order/[purchaseId].tsx b/src/pages/my/order/[purchaseId].tsx
@@ -32,6 +32,7 @@ export default function OrderDetail() {
     detailedAddress: purchaseDetailData.data.detailedAddress,
     zipCode: purchaseDetailData.data.zipCode,
     message: purchaseDetailData.data.deliveryMessage,
+    deliveryName: purchaseDetailData.data.deliveryName,
   };
 
   function calculateTotalOriginalPrice() {
@@ -71,7 +72,7 @@ export default function OrderDetail() {
         <div className={styles.deliveryArea}>
           <h3>배송지</h3>
           <div className={styles.deliveryCard}>
-            <h4>{deliveryInfo?.recipient} 집</h4>
+            <h4>{deliveryInfo?.deliveryName}</h4>
             <span>
               {deliveryInfo?.recipient} · {deliveryInfo?.recipientPhoneNumber}
               <br />
@@ -98,6 +99,7 @@ export default function OrderDetail() {
               status={order.status as number}
               productInfo={{ ...order, stock: 3, option: order.combinationName }}
               tagText={getTagText(order.status)}
+              href={`/my/order/${purchaseId}`}
             />
           ))}
       </div>
@@ -109,6 +111,7 @@ export default function OrderDetail() {
             totalPrice={totalPrice}
             totalOriginalPrice={totalOriginalPrice}
             productCount={orderCount}
+            inOrder
           />
         </div>
         {/* <div className={styles.paymentMethod}>