From 2a21a0ed962819965367be11d9bc24858d200da8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Sun, 29 Dec 2024 10:41:24 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Refact:=20=EA=B3=B5=ED=86=B5=20PostItem=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=AC=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PostItem/index.tsx | 13 +++++++------ src/components/PostItem/style.tsx | 15 ++++----------- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx index 4beb8355..e6e60d3a 100644 --- a/src/components/PostItem/index.tsx +++ b/src/components/PostItem/index.tsx @@ -5,9 +5,10 @@ import theme from '@styles/theme'; import PinIcon from '@assets/default/pin.svg'; import Like from '@components/Icons/Like'; import Message from '@components/Icons/Message'; +import { StyledText } from '@components/Text/StyledText'; import type { PostItemProps } from './dto'; -import { PostItemLayout, PostImageContainer, PostImage, LikesCountStyledText, LikesOverlay, Pin } from './style'; +import { PostItemLayout, PostImageContainer, PostImage, LikesOverlay, Pin } from './style'; const PostItem: React.FC = ({ post, isMyPost = true }) => { const navigate = useNavigate(); @@ -25,13 +26,13 @@ const PostItem: React.FC = ({ post, isMyPost = true }) => { {post.isRepresentative && } - + {post.postLikesCount} - - - + + + {post.postCommentsCount} - + diff --git a/src/components/PostItem/style.tsx b/src/components/PostItem/style.tsx index 398fce4c..7260fdf0 100644 --- a/src/components/PostItem/style.tsx +++ b/src/components/PostItem/style.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { StyledText } from '@components/Text/StyledText'; export const PostItemLayout = styled.article` flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */ @@ -43,20 +42,14 @@ export const PostImage = styled.img` export const LikesOverlay = styled.div` position: absolute; - bottom: 0; /* 하단에 배치 */ + bottom: 0.625rem; /* 하단에 배치 */ + right: 0.625rem; width: 100%; display: flex; - align-items: center; justify-content: flex-end; + align-items: center; box-sizing: border-box; -`; - -export const Icon = styled.img` - margin-bottom: 0.5rem; -`; - -export const LikesCountStyledText = styled(StyledText)` - margin: 0 8px 0.5rem 4px; + gap: 5px; `; export const Pin = styled.img` From 7b8057f519241d517bd621968b4bb449f338d582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Sun, 29 Dec 2024 11:03:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Refact:=20TopBar=20=EC=BB=AC=EB=9F=AC?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TopBar/index.tsx | 2 +- src/components/TopBar/styles.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index 2b18fe08..d7b5ea3b 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -30,7 +30,7 @@ const TopBar: React.FC = ({ > 뒤로가기 - + {text} ` display: flex; position: sticky; top: 0; /* 부모 요소의 상단에 붙도록 설정 */ z-index: 99; - background-color: white; + background-color: ${theme.colors.background.primary}; width: 100%; /* 부모 너비에 맞춤 */ align-items: center; padding: 0.5rem 1.25rem; ${({ $withBorder, theme }) => $withBorder && ` - border-bottom: solid 0.0625rem ${theme.colors.gray2}; + border-bottom: solid 0.0625rem ${theme.colors.border.divider}; `} `; From 31444c96b53769c9897339d8f1188134f7384c1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EB=AF=BC=EC=9E=AC?= Date: Sun, 29 Dec 2024 14:36:43 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Refact:=20=EC=9D=B4=EC=9A=A9=EC=95=BD?= =?UTF-8?q?=EA=B4=80=20=EB=8F=99=EC=9D=98=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=20=EC=BB=AC=EB=9F=AC=EC=8B=9C=EC=8A=A4=ED=85=9C=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 --- src/components/UserProfile/index.tsx | 2 +- src/pages/Login/SocialLoginButton/index.tsx | 2 +- src/pages/Login/SocialLoginButton/style.tsx | 7 +++---- src/pages/Login/index.tsx | 2 +- src/pages/SignUp/style.tsx | 2 +- src/pages/TermsAgreement/styles.tsx | 9 +++++---- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx index 3db8059a..214eb105 100644 --- a/src/components/UserProfile/index.tsx +++ b/src/components/UserProfile/index.tsx @@ -13,7 +13,7 @@ const UserProfile: React.FC = React.memo(({ userImg, bio = '', {nickname} - + {truncatedBio} diff --git a/src/pages/Login/SocialLoginButton/index.tsx b/src/pages/Login/SocialLoginButton/index.tsx index b448688e..55bfecd5 100644 --- a/src/pages/Login/SocialLoginButton/index.tsx +++ b/src/pages/Login/SocialLoginButton/index.tsx @@ -27,7 +27,7 @@ const SocialLoginButton: React.FC = ({ bgColor, logoSrc, altTe {buttonText} diff --git a/src/pages/Login/SocialLoginButton/style.tsx b/src/pages/Login/SocialLoginButton/style.tsx index 044dff37..d9448f2a 100644 --- a/src/pages/Login/SocialLoginButton/style.tsx +++ b/src/pages/Login/SocialLoginButton/style.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { StyledText } from '@components/Text/StyledText'; -export const SocialLoginContainer = styled.button<{ $bgColor: string; $border?: boolean }>` +export const SocialLoginContainer = styled.button<{ $bgColor: string }>` display: flex; align-items: center; width: calc(100% - 3.5rem); @@ -9,7 +9,6 @@ export const SocialLoginContainer = styled.button<{ $bgColor: string; $border?: height: 3.5rem; background-color: ${({ $bgColor }) => $bgColor}; border-radius: 0.5rem; - border: ${({ $border }) => ($border ? '1px solid #000' : 'none')}; cursor: pointer; margin-bottom: 0.5rem; box-sizing: border-box; @@ -28,10 +27,10 @@ export const LogoImage = styled.img` max-height: 100%; `; -export const StyledTextWrapper = styled(StyledText)<{ $left?: string }>` +export const StyledTextWrapper = styled(StyledText)` display: flex; width: 12.5rem; - padding-left: ${({ $left }) => $left || '1.2rem'}; + padding-left: 1.2rem; align-items: center; margin: 0 auto; `; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index fa3ce121..377ec972 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -14,7 +14,7 @@ const Login: React.FC = () => { return ( - + {'반가워요! \n계정을 선택해주세요.'}