refactor: 초대하기 버튼 위치 변경 #274

woowacourse-teams · Sep 19, 2024 · ad3f7a6 · ad3f7a6
1 parent 34c14d8
commit ad3f7a6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts b/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts
@@ -32,10 +32,13 @@ export const membersContainer = css`
 `;
 
 export const totalNumber = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding-left: 2rem;
 
   font-weight: 900;
-  font-size: 1.6rem;
+  font-size: 2rem;
 `;
 
 export const memberList = css`
@@ -45,15 +48,11 @@ export const memberList = css`
 `;
 
 export const inviteButton = css`
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  width: 100%;
+  width: 12rem;
+  height: 4rem;
   border-radius: ${getBorderRadius('medium')};
 
   background-color: ${Theme.color.peanut400};
-
-  font-size: 1rem;
 `;
 
 export const memberItem = css`

diff --git a/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx b/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx
@@ -15,7 +15,6 @@ import {
 import InviteModal from '../common/InviteModal/InviteModal';
 
 import crownIcon from '@/assets/images/crownIcon.png';
-import plusIcon from '@/assets/images/plusIcon.png';
 import SillyDdangkong from '@/assets/images/sillyDdangkong.png';
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import useModal from '@/hooks/useModal';
@@ -35,17 +34,14 @@ const ReadyMembersContainer = () => {
 
   return (
     <section css={readyMembersContainerLayout}>
-      <p css={totalNumber}>총 인원 {members.length}명</p>
+      <div css={totalNumber}>
+        <div>총 인원 {members.length}명</div>
+        <button css={inviteButton} onClick={show}>
+          초대하기
+        </button>
+      </div>
       <section css={membersContainer}>
         <ul css={memberList}>
-          <li>
-            <button css={inviteButton} onClick={show}>
-              <div css={profileBox}>
-                <img src={plusIcon} alt="추가 아이콘" />
-              </div>
-              <div>초대하기</div>
-            </button>
-          </li>
           {members.map((member) => (
             <li css={memberItem} key={member.memberId}>
               <div css={profileBox}>