♻️ 모각코 게시글 작성자를 'hostUser'로 지칭하도록 수정

boostcampwm2023 · Nov 23, 2023 · 9bb0215 · 9bb0215
1 parent 4283737
commit 9bb0215
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
@@ -23,20 +23,20 @@ export function DetailHeader({
   userHosted,
   userParticipated,
 }: DetailHeaderProps) {
-  const [user, setUser] = useState<UserInfo | null>(null);
+  const [hostUser, setHostUser] = useState<UserInfo | null>(null);
 
   useEffect(() => {
-    if (user) {
+    if (hostUser) {
       return;
     }
 
     const getUser = async () => {
       const data = await member.userInfoById(memberId);
-      setUser(data);
+      setHostUser(data);
     };
 
     getUser();
-  }, [user, memberId]);
+  }, [hostUser, memberId]);
 
   return (
     <div className={styles.header}>
@@ -50,9 +50,12 @@ export function DetailHeader({
           />
         </div>
       </div>
-      <div className={styles.writer}>
-        {user && (
-          <UserChip username={user.nickname} profileSrc={user.profilePicture} />
+      <div className={styles.hostUser}>
+        {hostUser && (
+          <UserChip
+            username={hostUser.nickname}
+            profileSrc={hostUser.profilePicture}
+          />
         )}
         <span>부스트캠프 웹·모바일 8기</span>
       </div>

diff --git a/app/frontend/src/components/MogacoDetail/index.css.ts b/app/frontend/src/components/MogacoDetail/index.css.ts
@@ -31,6 +31,15 @@ export const horizontalLine = style({
   margin: 0,
 });
 
+export const hostUser = style([
+  sansBold16,
+  {
+    display: 'flex',
+    gap: '1.6rem',
+    color: vars.color.grayscale200,
+  },
+]);
+
 export const info = style({
   display: 'flex',
   flexDirection: 'column',
@@ -43,6 +52,8 @@ export const infoItem = style({
   alignItems: 'center',
 });
 
+const shown = style({});
+
 export const map = style({
   width: '32rem',
   height: '20rem',
@@ -51,8 +62,6 @@ export const map = style({
   imageRendering: 'crisp-edges',
 });
 
-const shown = style({});
-
 export const participants = style({
   display: 'none',
   gap: '0.8rem',
@@ -94,12 +103,3 @@ export const wrapper = style({
   flexDirection: 'column',
   alignItems: 'center',
 });
-
-export const writer = style([
-  sansBold16,
-  {
-    display: 'flex',
-    gap: '1.6rem',
-    color: vars.color.grayscale200,
-  },
-]);