fix: shop profile ui/#566

apps/mac/src/renderer/src/app/layouts/main/MainLayout.style.ts

@@ -16,6 +16,5 @@ export const MainContent = styled.main`
   flex: 1;
   padding: 2.5rem 2.5rem 2.5rem 2.5rem;
   overflow: auto;
-  scrollbar-gutter: stable;
   background-color: ${({ theme }) => theme.background.alternative};
 `;

apps/mac/src/renderer/src/app/styles/GlobalStyle.ts

@@ -7,7 +7,6 @@ export const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    scrollbar-gutter: stable;
     scrollbar-width: thin;
     scrollbar-color: ${({ theme }) => theme.line.normal} transparent;
   }

apps/mac/src/renderer/src/features/profile/ui/profile-tabs/ProfileTabs.style.ts

@@ -17,6 +17,10 @@ export const Banner = styled.div`
     grid-template-columns: 1fr;
     grid-template-rows: auto minmax(0, 1fr) clamp(12rem, 28vh, 18rem);
   }
+
+  @media (max-height: 52rem) {
+    row-gap: 0.75rem;
+  }
 `;
 
 export const RivalSection = styled.div`
@@ -61,6 +65,11 @@ export const Background = styled.div`
   @media (max-width: 40rem) {
     border-radius: 1rem;
   }
+
+  @media (max-height: 52rem) {
+    padding: 0.875rem 1rem 1rem;
+    gap: 0.75rem;
+  }
 `;
 
 export const TabHeader = styled.div`
@@ -92,6 +101,10 @@ export const Tabs = styled.div`
     padding-bottom: 1rem;
   }
 
+  @media (max-height: 52rem) {
+    padding-bottom: 0.875rem;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -128,5 +141,9 @@ export const Tab = styled.button<{ $isActive: boolean }>`
     @media (max-width: 40rem) {
       bottom: -1rem;
     }
+
+    @media (max-height: 52rem) {
+      bottom: -0.875rem;
+    }
   }
 `;

apps/mac/src/renderer/src/features/profile/ui/profile-tabs/github-activity-panel/GithubActivityPanel.style.ts

@@ -9,7 +9,7 @@ export const Panel = styled.div`
   flex-direction: column;
   flex: 1 1 auto;
   justify-content: space-between;
-  gap: clamp(1rem, 3vh, 2rem);
+  gap: clamp(0.75rem, 2vh, 2rem);
   overflow: hidden;
 `;
 

apps/mac/src/renderer/src/features/profile/ui/profile-tabs/item-panel/ItemPanel.style.ts

@@ -22,6 +22,10 @@ export const Wrapper = styled.section`
   flex-direction: column;
   gap: 1.25rem;
   overflow: hidden;
+
+  @media (max-height: 52rem) {
+    gap: 0.875rem;
+  }
 `;
 
 export const Header = styled.div`
@@ -79,7 +83,7 @@ export const GridScrollArea = styled.div`
 export const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
-  gap: 1rem;
+  gap: clamp(0.75rem, 1.4vh, 1rem);
   align-content: start;
 
   @media (max-width: 72rem) {
@@ -92,7 +96,7 @@ export const Grid = styled.div`
 `;
 
 export const CardButton = styled.button<{ $equipped: boolean }>`
-  min-height: 10.75rem;
+  min-height: clamp(8.9rem, 17vh, 10.75rem);
   border-radius: 1.35rem;
   border: 1px solid
     ${({ $equipped, theme }) => ($equipped ? theme.primary.normal : theme.line.alternative)};

apps/mac/src/renderer/src/features/profile/ui/rival-container/RivalContainer.style.ts

@@ -19,7 +19,7 @@ export const Wrapper = styled.div`
 
 export const Container = styled.div`
   display: grid;
-  grid-template-rows: repeat(4, minmax(5.25rem, 1fr));
+  grid-template-rows: repeat(4, minmax(clamp(4.35rem, 8.2vh, 5.25rem), 1fr));
   flex: 1 1 auto;
   height: 100%;
   min-height: 0;
@@ -39,11 +39,11 @@ export const AddRivalButton = styled.button`
   height: 100%;
   border-radius: 0.75rem;
   background-color: ${({ theme }) => theme.background.alternative};
-  padding: 1rem 0.75rem;
+  padding: clamp(0.75rem, 1.4vh, 1rem) 0.75rem;
   ${flexCol};
   justify-content: flex-start;
   cursor: pointer;
-  min-height: 5.25rem;
+  min-height: clamp(4.35rem, 8.2vh, 5.25rem);
 
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.primary.normal};

apps/mac/src/renderer/src/features/profile/ui/rival-container/rival-card/RivalCard.style.ts

@@ -7,12 +7,12 @@ import { ProfileAvatar } from "@/shared/ui/profile-avatar";
 export const RivalBox = styled.div`
   width: 100%;
   height: 100%;
-  min-height: 5.25rem;
+  min-height: clamp(4.35rem, 8.2vh, 5.25rem);
   max-height: 100%;
   flex: 0 0 auto;
   border-radius: 0.75rem;
   background: ${({ theme }) => theme.background.alternative};
-  padding: 0.875rem clamp(1rem, 2vw, 2rem);
+  padding: clamp(0.7rem, 1.4vh, 0.875rem) clamp(1rem, 2vw, 2rem);
   display: flex;
   align-items: center;
   justify-content: space-between;

apps/mac/src/renderer/src/features/profile/ui/top-profile/TopProfile.style.ts

@@ -37,6 +37,10 @@ export const Banner = styled.div<{ $bgImage?: string }>`
   @media (max-width: 56rem) {
     border-radius: 0.875rem;
   }
+
+  @media (max-height: 52rem) {
+    padding: 0.875rem 1rem;
+  }
 `;
 
 export const Button = styled.div`
@@ -48,12 +52,12 @@ export const Button = styled.div`
 
 export const ProfileCard = styled.div`
   height: 100%;
-  min-height: clamp(8.5rem, 16vw, 9.75rem);
+  min-height: clamp(7rem, 14vh, 9.75rem);
 `;
 
 export const ProfileImgWrapper = styled.div`
   position: absolute;
-  bottom: clamp(-4.25rem, -38%, -3rem);
+  bottom: clamp(-4rem, -7vh, -2.75rem);
   left: clamp(1rem, 13%, 7rem);
 
   @media (max-width: 56rem) {
@@ -69,9 +73,9 @@ export const ProfileImgWrapper = styled.div`
 
 export const ProfileImgContainer = styled.div`
   position: relative;
-  width: clamp(5rem, 10vw, 6.25rem);
-  height: clamp(5rem, 10vw, 6.25rem);
-  margin-bottom: clamp(0.7rem, 1.5vw, 0.95rem);
+  width: clamp(4.6rem, 8vh, 6.25rem);
+  height: clamp(4.6rem, 8vh, 6.25rem);
+  margin-bottom: clamp(0.55rem, 1vh, 0.95rem);
 `;
 
 export const ProfileAvatarWrap = styled(ProfileAvatar)`
@@ -145,7 +149,7 @@ export const UserInfo = styled.div`
 
 export const DisplayNameWrap = styled.div`
   margin-left: 0.5rem;
-  margin-top: 0.5rem;
+  margin-top: clamp(0.25rem, 0.8vh, 0.5rem);
   max-width: min(60vw, 16rem);
 
   @media (max-width: 56rem) {

apps/mac/src/renderer/src/features/shop/ui/card/ProductCard.style.ts

@@ -56,8 +56,8 @@ export const ProductImage = styled.div<{ $imgUrl: string }>`
 
 export const OwnedBadge = styled.span`
   position: absolute;
-  top: 1.65rem;
-  right: 1.75rem;
+  top: 1rem;
+  right: 1rem;
   z-index: 2;
   padding: 0.22rem 0.6rem;
   border-radius: 999px;

apps/mac/src/renderer/src/features/shop/ui/detail-panel/ProductDetailPanel.tsx

@@ -26,10 +26,7 @@ export const ProductDetailPanel = ({
   handleOpenPurchase,
 }: ProductDetailPanelProps) => {
   const originalPrice = selectedProduct.price.toLocaleString();
-  const discountedPrice = calculateDiscountedPrice(
-    selectedProduct.price,
-    selectedProduct.discount
-  );
+  const discountedPrice = calculateDiscountedPrice(selectedProduct.price, selectedProduct.discount);
 
   return (
     <S.DetailPanel>
@@ -66,9 +63,7 @@ export const ProductDetailPanel = ({
 
         <S.PurchaseBtn $isBought={selectedProduct.isBought} onClick={handleOpenPurchase}>
           {!selectedProduct.isBought && <S.CookieIcon />}
-          {selectedProduct.isBought
-            ? "이미 구매한 상품입니다."
-            : `${discountedPrice}에 구매하기`}
+          {selectedProduct.isBought ? "이미 소유한 상품입니다." : `${discountedPrice}에 구매하기`}
         </S.PurchaseBtn>
       </S.DetailPanelSticky>
     </S.DetailPanel>

apps/mac/src/renderer/src/features/shop/ui/products/Products.style.ts

@@ -247,7 +247,7 @@ export const PurchaseBtn = styled.div<{ $isBought?: boolean }>`
   border-radius: 0.5rem;
   background-color: ${({ theme, $isBought }) =>
     $isBought ? theme.fill.neutral : theme.primary.normal};
-  ${font.headline2.bold};
+  ${font.headline2.medium};
   cursor: ${({ $isBought }) => ($isBought ? "default" : "pointer")};
   pointer-events: ${({ $isBought }) => ($isBought ? "none" : "auto")};
 `;

apps/mac/src/renderer/src/pages/profile/ProfilePage.style.ts

@@ -28,6 +28,11 @@ export const Background = styled.div`
   @media (max-width: 64rem) {
     border-radius: 0.75rem;
   }
+
+  @media (max-height: 52rem) {
+    gap: 1rem;
+    padding: 0.875rem 1rem 1rem;
+  }
 `;
 
 export const BodyRow = styled.div`

apps/mac/src/renderer/src/shared/ui/profile-avatar/ProfileAvatar.style.ts

@@ -58,7 +58,7 @@ export const PlaceholderBody = styled.div`
   position: absolute;
   left: 50%;
   bottom: 13%;
-  width: 47%;
+  width: 60%;
   height: 25%;
   transform: translateX(-50%);
   background: currentColor;

apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.style.ts

@@ -5,15 +5,29 @@ import { palette } from "@clash/design-tokens/theme";
 import Search from "@/features/home/assets/home/search.svg";
 
 export const SearchIcon = styled(Search)`
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
   width: 1.85rem;
   height: 1.85rem;
   pointer-events: none;
 `;
 
+export const SearchIconButton = styled.button`
+  position: absolute;
+  right: 0.45rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  line-height: 0;
+  cursor: pointer;
+`;
+
 export type SearchInputVariant = "light" | "dark";
 
 interface SearchInputProps {

apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes } from "react";
+import { type InputHTMLAttributes, type MouseEvent, useRef } from "react";
 import * as S from "./SearchInput.style";
 import { SearchInputVariant } from "./SearchInput.style";
 import { ButtonSize } from "@/shared/ui";
@@ -7,25 +7,46 @@ export interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement>
   inputSize?: ButtonSize;
   variant?: SearchInputVariant;
   fullWidth?: boolean;
+  onIconClick?: () => void;
 }
 
 export const SearchInput = ({
   placeholder,
   inputSize = "md",
   variant = "light",
   fullWidth = false,
+  onIconClick,
   ...props
 }: SearchInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleIconMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  const handleIconClick = () => {
+    inputRef.current?.focus();
+    onIconClick?.();
+  };
+
   return (
     <S.Wrapper $fullWidth={fullWidth}>
       <S.SearchInput
+        ref={inputRef}
         placeholder={placeholder}
         $inputSize={inputSize}
         $variant={variant}
         $fullWidth={fullWidth}
         {...props}
       />
-      <S.SearchIcon />
+      <S.SearchIconButton
+        type="button"
+        aria-label="검색"
+        onMouseDown={handleIconMouseDown}
+        onClick={handleIconClick}
+      >
+        <S.SearchIcon />
+      </S.SearchIconButton>
     </S.Wrapper>
   );
 };