Merge pull request #336 from KakaoFunding/feat/324

Feat/324
KakaoFunding · Jun 3, 2024 · 3b8d6c2 · 3b8d6c2
2 parents 4deee48 + 81c118a
commit 3b8d6c2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/src/layouts/Home/Receiver/index.tsx b/src/layouts/Home/Receiver/index.tsx
@@ -8,6 +8,8 @@ import { useKakaoPicker } from 'hooks/useKakaoPicker';
 import { useLogin } from 'hooks/useLogin';
 import { getSessionStorageItem } from 'utils/sessionStorage';
 
+import DefaultImgUrl from 'assets/bg_profile_default.png';
+
 import FriendFunding from './FriendFunding';
 import FriendWish from './FriendWish';
 
@@ -32,7 +34,8 @@ const Receiver = () => {
     (state) => state.clearSelectedFriends,
   );
   const { isLoggedIn, login, confirmLogin } = useLogin();
-  const PROFILE_IMAGE = isLoggedIn && isSelfSelected ? profileUrl : getImgUrl();
+  const PROFILE_IMAGE =
+    isLoggedIn && isSelfSelected ? profileUrl : getImgUrl(DefaultImgUrl);
   const isKakaoConnected = window.Kakao?.isInitialized();
 
   const getTitle = () => {

diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss b/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss
@@ -47,13 +47,18 @@
   .btn_gift {
     @include size(40%, 60px, 0 0 0 5px, 0);
 
-    .img_profile {
+    .wrapper_profile {
       @include size(32px, 32px, 0, 0);
 
       position: relative;
       margin-right: 6px;
-      background-image: url('assets/profile_noimg.png');
-      background-size: cover;
+
+      .img_profile {
+        @include masking;
+
+        width: 100%;
+        object-fit: cover;
+      }
     }
 
     .ico_profile {

diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx b/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
@@ -4,13 +4,18 @@ import { Button } from 'components/ui/Button';
 import FundingModal from 'components/ui/Modal/FundingModal';
 import WishModal from 'components/ui/Modal/WishModal';
 
+import { useSelectedFriendsStore } from 'store/useSelectedFriendsStore';
+
+import { useKakaoPicker } from 'hooks/useKakaoPicker';
 import { useLogin } from 'hooks/useLogin';
 import { useModal } from 'hooks/useModal';
 import { formatNumberWithPlus } from 'utils/format';
 
 import { RequestOrderPreview } from 'types/payment';
 import { OptionDetail, ProductDescriptionResponse } from 'types/product';
 
+import DefaultProfileImage from 'assets/profile_noimg.png';
+
 import styles from './index.module.scss';
 
 const mockData = {
@@ -34,6 +39,9 @@ const ButtonBundles = ({
     productDescription;
   const navigate = useNavigate();
   const { isLoggedIn, login, confirmLogin } = useLogin();
+  const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
+    useSelectedFriendsStore();
+  const { openKakaoPicker } = useKakaoPicker();
 
   const {
     isOpen: isFundingOpen,
@@ -107,12 +115,27 @@ const ButtonBundles = ({
   // 친구에게 선물하기 버튼 핸들러
   const handleClickGiftForFriend = () => {
     checkLoginBeforeAction(() => {
-      // TODO: 친구를 선택하지 않은 경우 피커 오픈
-      // 친구를 선택한 경우 선물 결제 페이지로 이동
-      navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
+      if (!isSelected) {
+        openKakaoPicker();
+        return;
+      }
+
+      if (isSelfSelected) {
+        navigate('/bill/gift', { state: { orderInfos, giftFor: 'me' } });
+      } else if (selectedFriends.length === 1) {
+        navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
+      } else {
+        alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
+      }
     });
   };
 
+  // 친구 프로필 이미지 클릭 핸들러
+  const handleClickProfile = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    openKakaoPicker();
+  };
+
   // 선물상자 담기 버튼 핸들러
   const handleClickCart = () => {
     // console.log('선물상자 담기');
@@ -171,10 +194,14 @@ const ButtonBundles = ({
           onClick={handleClickGiftForFriend}
           className={styles.btn_gift}
         >
-          <span className={styles.img_profile}>
-            {/* TODO : 로그인 되었을 때만 보이게 */}
+          <div className={styles.wrapper_profile} onClick={handleClickProfile}>
+            <img
+              src={getImgUrl(DefaultProfileImage)}
+              alt="선물할 친구 프로필 사진"
+              className={styles.img_profile}
+            />
             <span className={styles.ico_profile} />
-          </span>
+          </div>
           선물하기
         </Button>
       </section>

diff --git a/src/store/useSelectedFriendsStore.ts b/src/store/useSelectedFriendsStore.ts
@@ -3,7 +3,6 @@ import { persist } from 'zustand/middleware';
 
 import { PickerResponseData, User } from 'types/user';
 
-import defaultImgUrl from 'assets/bg_profile_default.png';
 import friendsDefaultImgUrl from 'assets/profile_default.png';
 import peopleImgUrl from 'assets/profile_people.png';
 
@@ -20,7 +19,7 @@ type SelectedFriendsAction = {
     name: User['name'],
     providerId: User['providerId'],
   ) => void;
-  getImgUrl: () => string;
+  getImgUrl: (defaultImgUrl: string) => string;
   clearSelectedFriends: () => void;
 };
 
@@ -54,7 +53,7 @@ export const useSelectedFriendsStore = create<
           selectedHeadCount: 0,
         }),
 
-      getImgUrl: () => {
+      getImgUrl: (defaultImgUrl: string) => {
         const selectCount = get().selectedHeadCount;
 
         if (selectCount > 1) return peopleImgUrl;