From 10750354207d75fa5b54d8ee3d5565b1b2f5eed6 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 16 Oct 2024 16:34:37 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=AA=A8=EC=9E=84,=20=EC=95=88?=
 =?UTF-8?q?=EB=82=B4=EB=A9=B4=EC=A7=84=EB=8B=A4=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B0=B8=EC=97=AC=EC=9E=90=20?=
 =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20=EA=B8=B8=EC=9D=B4=EC=97=90=20?=
 =?UTF-8?q?=EC=9D=98=ED=95=B4=20UI=20=EA=B9=A8=EC=A7=80=EB=8A=94=20?=
 =?UTF-8?q?=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

---
 .../ProfileFrame/ProfileFrame.style.ts        | 30 +++++++++--------
 frontend/src/hooks/useNicknameWidthEffect.ts  | 32 +++++++++++++++++++
 .../ProfileCard/ProfileCard.style.ts          | 10 +++---
 .../ProfileList/ProfileCard/ProfileCard.tsx   | 14 ++++++--
 .../CommentCard/CommentCard.style.ts          |  8 +++--
 .../CommentList/CommentCard/CommentCard.tsx   | 24 +++++++++-----
 .../ProfileCard/ProfileCard.style.ts          | 11 ++++---
 .../ProfileList/ProfileCard/ProfileCard.tsx   | 14 ++++++--
 8 files changed, 107 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/hooks/useNicknameWidthEffect.ts

diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
index 6a89cfee4..021015b6f 100644
--- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
+++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
@@ -4,7 +4,18 @@ type Size = number;
 
 export const profileBox = () => {
   return css`
-    width: fit-content;
+    position: relative;
+  `;
+};
+
+export const profileCrown = (width: Size) => {
+  return css`
+    position: absolute;
+    top: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    width: ${3 * (width / 8)}rem;
   `;
 };
 
@@ -27,22 +38,13 @@ export const profileImage = (
   props: { isLoaded?: boolean } = { isLoaded: true },
 ) => {
   return css`
-    ${!props.isLoaded && 'display: none;'}
+    ${!props.isLoaded && 'display: none;'};
     width: 100%;
     height: 100%;
+
+    object-fit: cover;
     background-image: url(${EmptyProfile});
-    background-size: cover;
     background-position: center;
-    object-fit: cover;
-  `;
-};
-
-// 크라운 이미지를 가운데 정렬하기 위한 css
-export const profileCrown = (width: Size) => {
-  return css`
-    position: relative;
-    top: 1rem;
-    left: ${width / 2 - (3 * (width / 8)) / 2}rem;
-    width: ${3 * (width / 8)}rem;
+    background-size: cover;
   `;
 };
diff --git a/frontend/src/hooks/useNicknameWidthEffect.ts b/frontend/src/hooks/useNicknameWidthEffect.ts
new file mode 100644
index 000000000..2e1b70346
--- /dev/null
+++ b/frontend/src/hooks/useNicknameWidthEffect.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+
+export default function useNicknameWidthEffect({
+  nickname,
+  maxNicknameWidth,
+}: {
+  nickname: string;
+  maxNicknameWidth: number;
+}) {
+  const nicknameRef = useRef<HTMLDivElement>(null);
+  const [formattedNickname, setFormattedNickname] = useState(nickname);
+
+  useEffect(() => {
+    const nicknameEl = nicknameRef.current;
+    if (!nicknameEl) {
+      return;
+    }
+
+    const nicknameWidth = nicknameEl.offsetWidth;
+    if (nicknameWidth > maxNicknameWidth) {
+      const midpoint = Math.ceil(nickname.length / 2);
+      const firstPart = nickname.slice(0, midpoint);
+      const secondPart = nickname.slice(midpoint);
+      setFormattedNickname(`${firstPart}\n${secondPart}`);
+    }
+  }, [nickname, maxNicknameWidth]);
+
+  return {
+    nicknameRef,
+    formattedNickname,
+  };
+}
diff --git a/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts b/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
index a3a9ef677..3df34accc 100644
--- a/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
+++ b/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
@@ -1,16 +1,18 @@
 import { css, Theme } from '@emotion/react';
 
-export const ProfileCard = css`
+export const profileCard = css`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
   width: auto;
   width: fit-content;
 `;
 
-export const ProfileName = (props: { theme: Theme }) => css`
-  ${props.theme.typography.s2}
+export const profileNickname = (props: { theme: Theme }) => css`
+  ${props.theme.typography.c2}
+  text-align: center;
+  white-space: pre-line;
 `;
diff --git a/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
index 88ec89f43..ff0c74c21 100644
--- a/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Bet/BetDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -2,17 +2,27 @@ import * as S from './ProfileCard.style';
 import { useTheme } from '@emotion/react';
 import { Participant } from '@_types/index';
 import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame';
+import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 
 interface ProfileCardProps {
   info: Participant;
 }
 export default function ProfileCard(props: ProfileCardProps) {
   const { info } = props;
+
+  const { nicknameRef, formattedNickname } = useNicknameWidthEffect({
+    nickname: info.nickname,
+    maxNicknameWidth: 70,
+  });
+
   const theme = useTheme();
+
   return (
-    <div css={S.ProfileCard}>
+    <div css={S.profileCard}>
       <ProfileFrame width={7} height={7} src={info.profileUrl} />
-      <div css={S.ProfileName({ theme })}>{info.nickname}</div>
+      <div ref={nicknameRef} css={S.profileNickname({ theme })}>
+        {formattedNickname}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
index 13eec61f6..d464b8e48 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
@@ -33,7 +33,7 @@ export const commnetBox = () => css`
 export const commnetHeader = () => css`
   display: flex;
   gap: 5px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 
   width: 100%;
@@ -42,7 +42,11 @@ export const commnetHeader = () => css`
 export const commentHeaderLeft = () => css`
   display: flex;
   gap: 0.7rem;
-  align-items: center;
+  align-items: flex-start;
+`;
+
+export const commentNickname = () => css`
+  white-space: pre-line;
 `;
 
 export const commentHeaderRight = (props: { theme: Theme }) => css`
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
index 2f9577c94..09d2b1509 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
@@ -4,6 +4,7 @@ import { Comment } from '@_types/index';
 import { HTMLProps } from 'react';
 import { useTheme } from '@emotion/react';
 import ProfileFrame from '@_components/ProfileFrame/ProfileFrame';
+import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 
 export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
   comment: Comment;
@@ -13,7 +14,6 @@ export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
 }
 
 export default function CommentCard(props: CommentCardProps) {
-  const theme = useTheme();
   const {
     comment: { profile, nickname, dateTime, content, children },
     onWriteClick,
@@ -21,19 +21,27 @@ export default function CommentCard(props: CommentCardProps) {
     isChild = false,
   } = props;
 
+  const { nicknameRef, formattedNickname } = useNicknameWidthEffect({
+    nickname,
+    maxNicknameWidth: 100,
+  });
+
+  const theme = useTheme();
+
   return (
     <div css={S.commentContainer()}>
       <div css={S.commentWrapper({ theme, isChecked })}>
-        <ProfileFrame
-          width={3}
-          height={3}
-          borderWidth={0}
-          src={profile}
-        ></ProfileFrame>
+        <ProfileFrame width={3} height={3} borderWidth={0} src={profile} />
+
         <div css={S.commnetBox()}>
           <div css={S.commnetHeader}>
             <div css={S.commentHeaderLeft}>
-              <div css={theme.typography.small}>{nickname}</div>
+              <div
+                ref={nicknameRef}
+                css={[S.commentNickname, theme.typography.small]}
+              >
+                {formattedNickname}
+              </div>
               <div css={S.timestamp({ theme })}>{dateTime}</div>
             </div>
             {!isChild && (
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
index a3a9ef677..92c9ce193 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
@@ -1,16 +1,19 @@
 import { css, Theme } from '@emotion/react';
 
-export const ProfileCard = css`
+export const profileCard = css`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
   width: auto;
   width: fit-content;
+  padding-top: 14px;
 `;
 
-export const ProfileName = (props: { theme: Theme }) => css`
-  ${props.theme.typography.s2}
+export const profileName = (props: { theme: Theme }) => css`
+  ${props.theme.typography.c2}
+  text-align: center;
+  white-space: pre-line;
 `;
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
index f85caed6c..cd2344dec 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -2,17 +2,27 @@ import * as S from './ProfileCard.style';
 import { useTheme } from '@emotion/react';
 import { Participation } from '@_types/index';
 import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame';
+import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 
 interface ProfileCardProps {
   info: Participation;
 }
 export default function ProfileCard(props: ProfileCardProps) {
   const { info } = props;
+
+  const { nicknameRef, formattedNickname } = useNicknameWidthEffect({
+    nickname: info.nickname,
+    maxNicknameWidth: 70,
+  });
+
   const theme = useTheme();
+
   return (
-    <div css={S.ProfileCard}>
+    <div css={S.profileCard}>
       <ProfileFrame width={7} height={7} src={info.profile} role={info.role} />
-      <div css={S.ProfileName({ theme })}>{info.nickname}</div>
+      <div ref={nicknameRef} css={S.profileName({ theme })}>
+        {formattedNickname}
+      </div>
     </div>
   );
 }

From 0f7c7a406eac669c2b8534cfb9b4ef56e3547d65 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 16 Oct 2024 21:16:43 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=95=88=EB=82=B4=EB=A9=B4=EC=A7=84?=
 =?UTF-8?q?=EB=8B=A4=20=EC=A0=9C=EB=AA=A9=20=EA=B8=B8=20=EB=95=8C=20UI=20?=
 =?UTF-8?q?=EA=B9=A8=EC=A7=80=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

---
 .../src/pages/Bet/BetDetailPage/BetDetailPage.style.ts     | 5 +++--
 .../components/BetCardList/BetCard/BetCard.style.ts        | 7 +++++++
 .../BetListPage/components/BetCardList/BetCard/BetCard.tsx | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts
index b89887e68..56c88776f 100644
--- a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts
+++ b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts
@@ -8,8 +8,9 @@ export const containerStyle = css`
 
 export const titleBox = () => css`
   display: flex;
-  gap: 1rem;
-  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
 `;
 
 export const title = (props: { theme: Theme }) => css`
diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts
index c1fb3ab15..4c604da96 100644
--- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts
+++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts
@@ -27,3 +27,10 @@ export const count = ({ theme }: { theme: Theme }) => css`
   ${theme.typography.b3}
   color: ${theme.colorPalette.black[30]};
 `;
+
+export const tagBox = css`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-width: 80px;
+`;
diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx
index 6b6712b60..45ab76c48 100644
--- a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx
+++ b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx
@@ -19,7 +19,7 @@ export default function BetCard(props: BetCardProps) {
         <div css={S.title({ theme })}>{bet.title}</div>
         <div css={S.count({ theme })}>현재 {bet.currentParticipants}명</div>
       </div>
-      <div>
+      <div css={S.tagBox}>
         <Tag isAnnounced={bet.isAnnounced} deadline={bet.deadline} />
       </div>
     </div>