From 97f8bc0b502c17f6baf5153a410132716455299f Mon Sep 17 00:00:00 2001 From: chysis Date: Fri, 27 Dec 2024 20:12:32 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/github.svg | 10 +++++ .../components/profile/ProfileInfo/index.tsx | 37 +++++++++++++++++ .../components/profile/ProfileInfo/styles.ts | 41 +++++++++++++++++++ 3 files changed, 88 insertions(+) create mode 100644 frontend/src/assets/github.svg create mode 100644 frontend/src/components/profile/ProfileInfo/index.tsx create mode 100644 frontend/src/components/profile/ProfileInfo/styles.ts diff --git a/frontend/src/assets/github.svg b/frontend/src/assets/github.svg new file mode 100644 index 000000000..c2228ced7 --- /dev/null +++ b/frontend/src/assets/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/components/profile/ProfileInfo/index.tsx b/frontend/src/components/profile/ProfileInfo/index.tsx new file mode 100644 index 000000000..3949d5e25 --- /dev/null +++ b/frontend/src/components/profile/ProfileInfo/index.tsx @@ -0,0 +1,37 @@ +import { useRef, useState } from 'react'; + +import DownArrowIcon from '@/assets/downArrow.svg'; +import GitHubIcon from '@/assets/github.svg'; + +import ProfileTab from '../ProfileTab'; + +import * as S from './styles'; + +interface ProfileInfoProps { + profileImageSrc?: string; + profileId: string; +} + +const ProfileInfo = ({ profileImageSrc, profileId }: ProfileInfoProps) => { + const [isOpened, setIsOpened] = useState(false); + const containerRef = useRef(null); + + const handleContainerClick = () => { + setIsOpened((prev) => !prev); + }; + + return ( + + + + 프로필 사진 + + {profileId} + + + {isOpened && } + + ); +}; + +export default ProfileInfo; diff --git a/frontend/src/components/profile/ProfileInfo/styles.ts b/frontend/src/components/profile/ProfileInfo/styles.ts new file mode 100644 index 000000000..25927e83c --- /dev/null +++ b/frontend/src/components/profile/ProfileInfo/styles.ts @@ -0,0 +1,41 @@ +import styled from '@emotion/styled'; + +interface DropdownStyleProps { + $isOpened: boolean; +} + +export const ProfileSection = styled.section` + cursor: pointer; + position: relative; + width: fit-content; + padding: 0 1rem; +`; + +export const ProfileContainer = styled.div` + display: flex; + gap: 1rem; + align-items: center; +`; + +export const ProfileImageWrapper = styled.div` + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + + width: 4rem; + height: 4rem; + + border-radius: 2rem; +`; + +export const ProfileId = styled.p` + font-weight: ${({ theme }) => theme.fontWeight.semibold}; +`; + +export const ArrowIcon = styled.img` + transform: ${({ $isOpened }) => ($isOpened ? 'rotate(180deg)' : 'rotate(0deg)')}; + width: 2rem; + height: 2rem; + transition: transform 0.3s ease-in-out; +`; From 3c31f0af632e25d6d0648f1f9a9aa52a0c7bf590 Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 01:51:53 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=83=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/profile/ProfileTab/index.tsx | 26 +++++++++ .../components/profile/ProfileTab/styles.ts | 58 +++++++++++++++++++ frontend/src/types/profile.ts | 10 ++++ 3 files changed, 94 insertions(+) create mode 100644 frontend/src/components/profile/ProfileTab/index.tsx create mode 100644 frontend/src/components/profile/ProfileTab/styles.ts create mode 100644 frontend/src/types/profile.ts diff --git a/frontend/src/components/profile/ProfileTab/index.tsx b/frontend/src/components/profile/ProfileTab/index.tsx new file mode 100644 index 000000000..f9bfbeb78 --- /dev/null +++ b/frontend/src/components/profile/ProfileTab/index.tsx @@ -0,0 +1,26 @@ +import { ProfileTabElement } from '@/types/profile'; + +import * as S from './styles'; + +interface ProfileTabProps { + items: ProfileTabElement[]; +} + +const ProfileTab = ({ items }: ProfileTabProps) => { + return ( + + {items.map((item) => { + switch (item.elementType) { + case 'readonly': + return {item.content}; + case 'action': + return {item.content}; + case 'divider': + return ; + } + })} + + ); +}; + +export default ProfileTab; diff --git a/frontend/src/components/profile/ProfileTab/styles.ts b/frontend/src/components/profile/ProfileTab/styles.ts new file mode 100644 index 000000000..b27ed42a2 --- /dev/null +++ b/frontend/src/components/profile/ProfileTab/styles.ts @@ -0,0 +1,58 @@ +import styled from '@emotion/styled'; + +export const ProfileTabContainer = styled.div` + position: absolute; + z-index: ${({ theme }) => theme.zIndex.profileTab}; + top: 5rem; + right: 0; + + display: flex; + flex-direction: column; + + width: max-content; + min-width: 100%; + height: fit-content; + padding: 1rem; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: 0.8rem; + box-shadow: + 0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.2), + 0 0.8rem 1rem 0.1rem rgba(0, 0, 0, 0.14), + 0 0.3rem 1.4rem 0.2rem rgba(0, 0, 0, 0.12); +`; + +export const ReadonlyItemWrapper = styled.div` + cursor: default; + + display: flex; + align-items: center; + + height: 3rem; + padding: 1rem; +`; + +export const ActionItemWrapper = styled.div` + cursor: pointer; + + display: flex; + align-items: center; + + height: 3rem; + padding: 1rem; + + border-radius: 0.8rem; + + :hover { + background-color: ${({ theme }) => theme.colors.lightGray}; + } +`; + +export const Divider = styled.hr` + width: 100%; + height: 0; + margin: 0.5rem 0; + padding: 0; + + border: 0.1rem solid ${({ theme }) => theme.colors.placeholder}; +`; diff --git a/frontend/src/types/profile.ts b/frontend/src/types/profile.ts new file mode 100644 index 000000000..f58800112 --- /dev/null +++ b/frontend/src/types/profile.ts @@ -0,0 +1,10 @@ +export type SocialType = 'github'; + +export type ProfileTabElementType = 'readonly' | 'action' | 'divider'; + +export interface ProfileTabElement { + elementType: ProfileTabElementType; + isDisplayedOnlyMobile: boolean; // true: 모바일만, false: 전체 + content?: React.ReactNode; // divider 제외 지정 + handleClick?: () => void; // action일 때 지정 +} From 5c5c52986c667d714fe48b38e11d69aa4d6a6836 Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 01:52:41 +0900 Subject: [PATCH 3/9] =?UTF-8?q?chore:=20=EA=B3=B5=ED=86=B5=20theme?= =?UTF-8?q?=EC=9D=98=20zIndex=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index d3370a64e..9553a8883 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -77,7 +77,8 @@ export const colors: ThemeProperty = { export const zIndex: ThemeProperty = { main: 1, - dropdown: 998, + dropdown: 997, + profileTab: 998, modal: 999, }; From 0c1bc79291c883aa080b9e458f670a27cf8aece4 Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 02:17:56 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=83=AD=20=EC=83=81=ED=83=9C=20=EB=B0=8F=20=EC=99=B8=EB=B6=80?= =?UTF-8?q?=20=EC=9A=94=EC=86=8C=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?=EB=8B=AB=ED=9E=88=EA=B2=8C=20=ED=95=98=EB=8A=94=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile/ProfileTab/hooks/useProfile.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 frontend/src/components/profile/ProfileTab/hooks/useProfile.tsx diff --git a/frontend/src/components/profile/ProfileTab/hooks/useProfile.tsx b/frontend/src/components/profile/ProfileTab/hooks/useProfile.tsx new file mode 100644 index 000000000..a96347ca8 --- /dev/null +++ b/frontend/src/components/profile/ProfileTab/hooks/useProfile.tsx @@ -0,0 +1,28 @@ +import { useEffect, useRef, useState } from 'react'; + +const useProfile = () => { + const [isOpened, setIsOpened] = useState(false); + const containerRef = useRef(null); + + const handleClickOutside = (event: MouseEvent) => { + if (containerRef.current && !containerRef.current.contains(event.target as Node)) { + setIsOpened(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [containerRef]); + + const handleContainerClick = () => { + setIsOpened((prev) => !prev); + }; + + return { isOpened, containerRef, handleContainerClick }; +}; + +export default useProfile; From 1bda6a382b1d39143f59f3e8ffc368f70ee4229a Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 02:18:47 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=83=AD=EC=97=90=20=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=EB=A5=BC=20=EA=B4=80=EB=A6=AC=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/github.svg | 11 +-- frontend/src/assets/logout.svg | 3 + frontend/src/assets/menu.svg | 3 + frontend/src/assets/openedBook.svg | 3 + frontend/src/assets/user.svg | 3 + .../hooks/useProfileTabElements.tsx | 96 +++++++++++++++++++ 6 files changed, 110 insertions(+), 9 deletions(-) create mode 100644 frontend/src/assets/logout.svg create mode 100644 frontend/src/assets/menu.svg create mode 100644 frontend/src/assets/openedBook.svg create mode 100644 frontend/src/assets/user.svg create mode 100644 frontend/src/components/profile/ProfileTab/hooks/useProfileTabElements.tsx diff --git a/frontend/src/assets/github.svg b/frontend/src/assets/github.svg index c2228ced7..518b64d8a 100644 --- a/frontend/src/assets/github.svg +++ b/frontend/src/assets/github.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/frontend/src/assets/logout.svg b/frontend/src/assets/logout.svg new file mode 100644 index 000000000..4cb4c48a4 --- /dev/null +++ b/frontend/src/assets/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/menu.svg b/frontend/src/assets/menu.svg new file mode 100644 index 000000000..8c279f0a2 --- /dev/null +++ b/frontend/src/assets/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/openedBook.svg b/frontend/src/assets/openedBook.svg new file mode 100644 index 000000000..233c9d6fe --- /dev/null +++ b/frontend/src/assets/openedBook.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/user.svg b/frontend/src/assets/user.svg new file mode 100644 index 000000000..9a80b77a0 --- /dev/null +++ b/frontend/src/assets/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/profile/ProfileTab/hooks/useProfileTabElements.tsx b/frontend/src/components/profile/ProfileTab/hooks/useProfileTabElements.tsx new file mode 100644 index 000000000..d278b895b --- /dev/null +++ b/frontend/src/components/profile/ProfileTab/hooks/useProfileTabElements.tsx @@ -0,0 +1,96 @@ +import { useNavigate } from 'react-router'; + +import GitHubIcon from '@/assets/github.svg'; +import LogoutIcon from '@/assets/logout.svg'; +import MenuIcon from '@/assets/menu.svg'; +import OpenedBookIcon from '@/assets/openedBook.svg'; +import UserIcon from '@/assets/user.svg'; +import { ProfileTabElement, SocialType } from '@/types/profile'; + +interface UseProfileTabElementsProps { + profileId: string; + socialType: SocialType; +} + +const useProfileTabElements = ({ profileId, socialType }: UseProfileTabElementsProps) => { + const navigate = useNavigate(); + + const handleReviewLinkControl = () => { + // 리뷰 링크 관리 페이지로 이동 + console.log('리뷰 링크 관리 클릭'); + }; + + const handleCheckWrittenReviews = () => { + // 작성한 리뷰 확인 페이지로 이동 + console.log('작성한 리뷰 확인 클릭'); + }; + + const handleLogout = () => { + // 로그아웃 로직 + console.log('로그아웃 클릭'); + }; + + const profileTabElements: ProfileTabElement[] = [ + { + elementType: 'readonly', + isDisplayedOnlyMobile: false, + content: socialType === 'github' && ( +
+ 소셜 아이콘 + GitHub 계정 +
+ ), + }, + { + elementType: 'readonly', + isDisplayedOnlyMobile: true, + content: ( +
+ 사람 아이콘 + {profileId} +
+ ), + }, + { + elementType: 'action', + isDisplayedOnlyMobile: false, + content: ( +
+ 메뉴 아이콘 + 리뷰 링크 관리 +
+ ), + handleClick: handleReviewLinkControl, + }, + { + elementType: 'action', + isDisplayedOnlyMobile: false, + content: ( +
+ 펼쳐진 책 아이콘 + 작성한 리뷰 확인 +
+ ), + handleClick: handleCheckWrittenReviews, + }, + { + elementType: 'divider', + isDisplayedOnlyMobile: false, + }, + { + elementType: 'action', + isDisplayedOnlyMobile: false, + content: ( +
+ 펼쳐진 책 아이콘 + 로그아웃 +
+ ), + handleClick: handleLogout, + }, + ]; + + return { profileTabElements }; +}; + +export default useProfileTabElements; From 94e2b43c2d0a8e18638bfae89ca280cb18c9bcaf Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 02:19:43 +0900 Subject: [PATCH 6/9] =?UTF-8?q?chore:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=9B=85=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=9A=94=EC=86=8C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?= =?UTF-8?q?=EB=B6=88=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/profile/ProfileInfo/index.tsx | 37 ++++++++++--------- .../components/profile/ProfileInfo/styles.ts | 3 +- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/profile/ProfileInfo/index.tsx b/frontend/src/components/profile/ProfileInfo/index.tsx index 3949d5e25..15333439c 100644 --- a/frontend/src/components/profile/ProfileInfo/index.tsx +++ b/frontend/src/components/profile/ProfileInfo/index.tsx @@ -1,35 +1,36 @@ -import { useRef, useState } from 'react'; - import DownArrowIcon from '@/assets/downArrow.svg'; import GitHubIcon from '@/assets/github.svg'; +import UndraggableWrapper from '@/components/common/UndraggableWrapper'; +import { SocialType } from '@/types/profile'; import ProfileTab from '../ProfileTab'; +import useProfile from '../ProfileTab/hooks/useProfile'; +import useProfileTabElements from '../ProfileTab/hooks/useProfileTabElements'; import * as S from './styles'; interface ProfileInfoProps { profileImageSrc?: string; profileId: string; + socialType: SocialType; } -const ProfileInfo = ({ profileImageSrc, profileId }: ProfileInfoProps) => { - const [isOpened, setIsOpened] = useState(false); - const containerRef = useRef(null); - - const handleContainerClick = () => { - setIsOpened((prev) => !prev); - }; +const ProfileInfo = ({ profileImageSrc, profileId, socialType }: ProfileInfoProps) => { + const { isOpened, containerRef, handleContainerClick } = useProfile(); + const { profileTabElements } = useProfileTabElements({ profileId, socialType }); return ( - - - - 프로필 사진 - - {profileId} - - - {isOpened && } + + + + + 프로필 사진 + + {profileId} + + + + {isOpened && } ); }; diff --git a/frontend/src/components/profile/ProfileInfo/styles.ts b/frontend/src/components/profile/ProfileInfo/styles.ts index 25927e83c..afaf2b185 100644 --- a/frontend/src/components/profile/ProfileInfo/styles.ts +++ b/frontend/src/components/profile/ProfileInfo/styles.ts @@ -8,13 +8,13 @@ export const ProfileSection = styled.section` cursor: pointer; position: relative; width: fit-content; - padding: 0 1rem; `; export const ProfileContainer = styled.div` display: flex; gap: 1rem; align-items: center; + padding: 0 1rem; `; export const ProfileImageWrapper = styled.div` @@ -26,6 +26,7 @@ export const ProfileImageWrapper = styled.div` width: 4rem; height: 4rem; + background-color: gray; border-radius: 2rem; `; From c7f9e4833aa0a5553e396f62736fb72c888d8a76 Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 02:49:16 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=83=AD=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/profile/ProfileInfo/styles.ts | 10 +++++++ .../components/profile/ProfileTab/index.tsx | 25 +++++++++++++--- .../components/profile/ProfileTab/styles.ts | 30 +++++++++++++++---- 3 files changed, 56 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/profile/ProfileInfo/styles.ts b/frontend/src/components/profile/ProfileInfo/styles.ts index afaf2b185..3469508a8 100644 --- a/frontend/src/components/profile/ProfileInfo/styles.ts +++ b/frontend/src/components/profile/ProfileInfo/styles.ts @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import media from '@/utils/media'; + interface DropdownStyleProps { $isOpened: boolean; } @@ -32,6 +34,10 @@ export const ProfileImageWrapper = styled.div` export const ProfileId = styled.p` font-weight: ${({ theme }) => theme.fontWeight.semibold}; + + ${media.small} { + display: none; + } `; export const ArrowIcon = styled.img` @@ -39,4 +45,8 @@ export const ArrowIcon = styled.img` width: 2rem; height: 2rem; transition: transform 0.3s ease-in-out; + + ${media.small} { + display: none; + } `; diff --git a/frontend/src/components/profile/ProfileTab/index.tsx b/frontend/src/components/profile/ProfileTab/index.tsx index f9bfbeb78..01910f19a 100644 --- a/frontend/src/components/profile/ProfileTab/index.tsx +++ b/frontend/src/components/profile/ProfileTab/index.tsx @@ -9,14 +9,31 @@ interface ProfileTabProps { const ProfileTab = ({ items }: ProfileTabProps) => { return ( - {items.map((item) => { + {items.map((item, index) => { switch (item.elementType) { case 'readonly': - return {item.content}; + return ( + + {item.content} + + ); case 'action': - return {item.content}; + return ( + + {item.content} + + ); case 'divider': - return ; + return ( + + ); } })} diff --git a/frontend/src/components/profile/ProfileTab/styles.ts b/frontend/src/components/profile/ProfileTab/styles.ts index b27ed42a2..7a727cfab 100644 --- a/frontend/src/components/profile/ProfileTab/styles.ts +++ b/frontend/src/components/profile/ProfileTab/styles.ts @@ -1,5 +1,11 @@ import styled from '@emotion/styled'; +import media from '@/utils/media'; + +interface ProfileTabStyleProps { + $isDisplayedOnlyMobile: boolean; +} + export const ProfileTabContainer = styled.div` position: absolute; z-index: ${({ theme }) => theme.zIndex.profileTab}; @@ -22,20 +28,24 @@ export const ProfileTabContainer = styled.div` 0 0.3rem 1.4rem 0.2rem rgba(0, 0, 0, 0.12); `; -export const ReadonlyItemWrapper = styled.div` +export const ReadonlyItemWrapper = styled.div` cursor: default; - display: flex; + display: ${({ $isDisplayedOnlyMobile }) => ($isDisplayedOnlyMobile ? 'none' : 'flex')}; align-items: center; height: 3rem; padding: 1rem; + + ${media.small} { + display: ${({ $isDisplayedOnlyMobile }) => $isDisplayedOnlyMobile && 'flex'}; + } `; -export const ActionItemWrapper = styled.div` +export const ActionItemWrapper = styled.div` cursor: pointer; - display: flex; + display: ${({ $isDisplayedOnlyMobile }) => ($isDisplayedOnlyMobile ? 'none' : 'flex')}; align-items: center; height: 3rem; @@ -46,13 +56,23 @@ export const ActionItemWrapper = styled.div` :hover { background-color: ${({ theme }) => theme.colors.lightGray}; } + + ${media.small} { + display: ${({ $isDisplayedOnlyMobile }) => $isDisplayedOnlyMobile && 'flex'}; + } `; -export const Divider = styled.hr` +export const Divider = styled.hr` + display: ${({ $isDisplayedOnlyMobile }) => ($isDisplayedOnlyMobile ? 'none' : 'block')}; + width: 100%; height: 0; margin: 0.5rem 0; padding: 0; border: 0.1rem solid ${({ theme }) => theme.colors.placeholder}; + + ${media.small} { + display: ${({ $isDisplayedOnlyMobile }) => $isDisplayedOnlyMobile && 'block'}; + } `; From 799d3d6207c802ab1923d224263bc922f337e6a8 Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 03:05:51 +0900 Subject: [PATCH 8/9] =?UTF-8?q?chore:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20src=EA=B0=80=20=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=ED=9A=8C=EC=83=89=20=EB=B0=B0=EA=B2=BD?= =?UTF-8?q?=EC=9D=84=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/profile/ProfileInfo/index.tsx | 3 +-- frontend/src/components/profile/ProfileInfo/styles.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/profile/ProfileInfo/index.tsx b/frontend/src/components/profile/ProfileInfo/index.tsx index 15333439c..af2de6bc7 100644 --- a/frontend/src/components/profile/ProfileInfo/index.tsx +++ b/frontend/src/components/profile/ProfileInfo/index.tsx @@ -1,5 +1,4 @@ import DownArrowIcon from '@/assets/downArrow.svg'; -import GitHubIcon from '@/assets/github.svg'; import UndraggableWrapper from '@/components/common/UndraggableWrapper'; import { SocialType } from '@/types/profile'; @@ -24,7 +23,7 @@ const ProfileInfo = ({ profileImageSrc, profileId, socialType }: ProfileInfoProp - 프로필 사진 + {profileImageSrc && 프로필 사진} {profileId} diff --git a/frontend/src/components/profile/ProfileInfo/styles.ts b/frontend/src/components/profile/ProfileInfo/styles.ts index 3469508a8..0a2d3ba76 100644 --- a/frontend/src/components/profile/ProfileInfo/styles.ts +++ b/frontend/src/components/profile/ProfileInfo/styles.ts @@ -28,7 +28,7 @@ export const ProfileImageWrapper = styled.div` width: 4rem; height: 4rem; - background-color: gray; + background-color: ${({ theme }) => theme.colors.gray}; border-radius: 2rem; `; From 86806d1d806d4f6a6f9b392545c46fb91154d4ac Mon Sep 17 00:00:00 2001 From: chysis Date: Sat, 28 Dec 2024 03:06:15 +0900 Subject: [PATCH 9/9] =?UTF-8?q?chore:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=83=AD=EC=9D=98=20=EB=AA=A8=EB=93=A0=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=EA=B0=80=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=ED=95=A0=20=EC=88=98?= =?UTF-8?q?=20=EC=97=86=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/profile/ProfileTab/index.tsx | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/profile/ProfileTab/index.tsx b/frontend/src/components/profile/ProfileTab/index.tsx index 01910f19a..7ebf3bbbc 100644 --- a/frontend/src/components/profile/ProfileTab/index.tsx +++ b/frontend/src/components/profile/ProfileTab/index.tsx @@ -1,3 +1,4 @@ +import UndraggableWrapper from '@/components/common/UndraggableWrapper'; import { ProfileTabElement } from '@/types/profile'; import * as S from './styles'; @@ -9,33 +10,35 @@ interface ProfileTabProps { const ProfileTab = ({ items }: ProfileTabProps) => { return ( - {items.map((item, index) => { - switch (item.elementType) { - case 'readonly': - return ( - - {item.content} - - ); - case 'action': - return ( - - {item.content} - - ); - case 'divider': - return ( - - ); - } - })} + + {items.map((item, index) => { + switch (item.elementType) { + case 'readonly': + return ( + + {item.content} + + ); + case 'action': + return ( + + {item.content} + + ); + case 'divider': + return ( + + ); + } + })} + ); };