From 09eb7cc70b228fe5d62461e3b449168d45b6e521 Mon Sep 17 00:00:00 2001 From: chaeyn Date: Sun, 5 Apr 2026 22:53:17 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20=EC=9A=B0=EC=B8=A1=20?= =?UTF-8?q?=ED=8C=A8=EB=94=A9=EC=B2=98=EB=9F=BC=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/mac/src/renderer/src/app/layouts/main/MainLayout.style.ts | 1 - apps/mac/src/renderer/src/app/styles/GlobalStyle.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/apps/mac/src/renderer/src/app/layouts/main/MainLayout.style.ts b/apps/mac/src/renderer/src/app/layouts/main/MainLayout.style.ts index 1c596ba6..2585e235 100644 --- a/apps/mac/src/renderer/src/app/layouts/main/MainLayout.style.ts +++ b/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}; `; diff --git a/apps/mac/src/renderer/src/app/styles/GlobalStyle.ts b/apps/mac/src/renderer/src/app/styles/GlobalStyle.ts index 6bfb6aa8..871e7a14 100644 --- a/apps/mac/src/renderer/src/app/styles/GlobalStyle.ts +++ b/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; } From e3f54dccefe67379b023dd71580d0212499972c0 Mon Sep 17 00:00:00 2001 From: chaeyn Date: Sun, 5 Apr 2026 22:58:47 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EA=B8=B0=EB=B3=B8=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=82=AC=EC=A7=84=EC=9D=B4=20=EA=B9=A8?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/shared/ui/profile-avatar/ProfileAvatar.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/mac/src/renderer/src/shared/ui/profile-avatar/ProfileAvatar.style.ts b/apps/mac/src/renderer/src/shared/ui/profile-avatar/ProfileAvatar.style.ts index aeddb92c..a335f3a0 100644 --- a/apps/mac/src/renderer/src/shared/ui/profile-avatar/ProfileAvatar.style.ts +++ b/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; From b74d6d27e187f148eaffd44ec274a159b2cab65b Mon Sep 17 00:00:00 2001 From: chaeyn Date: Sun, 5 Apr 2026 23:00:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=82=B4=EB=B6=80=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/features/shop/ui/card/ProductCard.style.ts | 4 ++-- .../features/shop/ui/detail-panel/ProductDetailPanel.tsx | 9 ++------- .../src/features/shop/ui/products/Products.style.ts | 2 +- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/apps/mac/src/renderer/src/features/shop/ui/card/ProductCard.style.ts b/apps/mac/src/renderer/src/features/shop/ui/card/ProductCard.style.ts index a1eec10c..6546472c 100644 --- a/apps/mac/src/renderer/src/features/shop/ui/card/ProductCard.style.ts +++ b/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; diff --git a/apps/mac/src/renderer/src/features/shop/ui/detail-panel/ProductDetailPanel.tsx b/apps/mac/src/renderer/src/features/shop/ui/detail-panel/ProductDetailPanel.tsx index 951f2b9e..fe1ce08c 100644 --- a/apps/mac/src/renderer/src/features/shop/ui/detail-panel/ProductDetailPanel.tsx +++ b/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 ( @@ -66,9 +63,7 @@ export const ProductDetailPanel = ({ {!selectedProduct.isBought && } - {selectedProduct.isBought - ? "이미 구매한 상품입니다." - : `${discountedPrice}에 구매하기`} + {selectedProduct.isBought ? "이미 소유한 상품입니다." : `${discountedPrice}에 구매하기`} diff --git a/apps/mac/src/renderer/src/features/shop/ui/products/Products.style.ts b/apps/mac/src/renderer/src/features/shop/ui/products/Products.style.ts index 367fb0bf..93677a17 100644 --- a/apps/mac/src/renderer/src/features/shop/ui/products/Products.style.ts +++ b/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")}; `; From 3e97d7b57d705afcea473d76d6e134fd424bc30d Mon Sep 17 00:00:00 2001 From: chaeyn Date: Sun, 5 Apr 2026 23:07:00 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=EB=B0=94=EC=9D=98?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=BB=A4=EC=84=9C=EA=B0=80=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=BB=A4=EC=84=9C=EB=A1=9C=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/search-input/SearchInput.style.ts | 22 +++++++++++++--- .../shared/ui/search-input/SearchInput.tsx | 25 +++++++++++++++++-- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.style.ts b/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.style.ts index c98b8823..daf282c8 100644 --- a/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.style.ts +++ b/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 { diff --git a/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.tsx b/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.tsx index d805ec6e..09deb32b 100644 --- a/apps/mac/src/renderer/src/shared/ui/search-input/SearchInput.tsx +++ b/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,6 +7,7 @@ export interface SearchInputProps extends InputHTMLAttributes inputSize?: ButtonSize; variant?: SearchInputVariant; fullWidth?: boolean; + onIconClick?: () => void; } export const SearchInput = ({ @@ -14,18 +15,38 @@ export const SearchInput = ({ inputSize = "md", variant = "light", fullWidth = false, + onIconClick, ...props }: SearchInputProps) => { + const inputRef = useRef(null); + + const handleIconMouseDown = (event: MouseEvent) => { + event.preventDefault(); + }; + + const handleIconClick = () => { + inputRef.current?.focus(); + onIconClick?.(); + }; + return ( - + + + ); }; From 4605e7ec58b89872096c47b7d88a27e2fbfd4931 Mon Sep 17 00:00:00 2001 From: chaeyn Date: Sun, 5 Apr 2026 23:12:02 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20height=20=EB=B3=80=ED=99=94?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/profile-tabs/ProfileTabs.style.ts | 17 +++++++++++++++++ .../GithubActivityPanel.style.ts | 2 +- .../profile-tabs/item-panel/ItemPanel.style.ts | 8 ++++++-- .../ui/rival-container/RivalContainer.style.ts | 6 +++--- .../rival-card/RivalCard.style.ts | 4 ++-- .../profile/ui/top-profile/TopProfile.style.ts | 16 ++++++++++------ .../src/pages/profile/ProfilePage.style.ts | 5 +++++ 7 files changed, 44 insertions(+), 14 deletions(-) diff --git a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/ProfileTabs.style.ts b/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/ProfileTabs.style.ts index bcbf64a0..7e6c0029 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/ProfileTabs.style.ts +++ b/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; + } } `; diff --git a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/github-activity-panel/GithubActivityPanel.style.ts b/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/github-activity-panel/GithubActivityPanel.style.ts index 8e43638a..a0005268 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/github-activity-panel/GithubActivityPanel.style.ts +++ b/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; `; diff --git a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/item-panel/ItemPanel.style.ts b/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/item-panel/ItemPanel.style.ts index bcda0e36..24f1bc83 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/profile-tabs/item-panel/ItemPanel.style.ts +++ b/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)}; diff --git a/apps/mac/src/renderer/src/features/profile/ui/rival-container/RivalContainer.style.ts b/apps/mac/src/renderer/src/features/profile/ui/rival-container/RivalContainer.style.ts index 472cc296..244d2473 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/rival-container/RivalContainer.style.ts +++ b/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}; diff --git a/apps/mac/src/renderer/src/features/profile/ui/rival-container/rival-card/RivalCard.style.ts b/apps/mac/src/renderer/src/features/profile/ui/rival-container/rival-card/RivalCard.style.ts index af79c6ab..97bcbcfb 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/rival-container/rival-card/RivalCard.style.ts +++ b/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; diff --git a/apps/mac/src/renderer/src/features/profile/ui/top-profile/TopProfile.style.ts b/apps/mac/src/renderer/src/features/profile/ui/top-profile/TopProfile.style.ts index 61082d26..335c5452 100644 --- a/apps/mac/src/renderer/src/features/profile/ui/top-profile/TopProfile.style.ts +++ b/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) { diff --git a/apps/mac/src/renderer/src/pages/profile/ProfilePage.style.ts b/apps/mac/src/renderer/src/pages/profile/ProfilePage.style.ts index 89aa0c60..8a27025b 100644 --- a/apps/mac/src/renderer/src/pages/profile/ProfilePage.style.ts +++ b/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`