design: 수정 버튼 모집 중, 방장일 때만 띄우기

woowacourse-teams · Nov 14, 2024 · 83623e0 · 83623e0
1 parent 372c407
commit 83623e0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 30 deletions.
diff --git a/frontend/src/components/roomForm/RoomFormLayout.style.ts b/frontend/src/components/roomForm/RoomFormLayout.style.ts
@@ -77,8 +77,8 @@ export const RequiredLabel = styled.span`
 
 export const ContentInput = styled.div`
   display: flex;
-  flex-direction: row;
-  gap: 2rem;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
 `;
 
@@ -88,7 +88,7 @@ export const ContentWrapper = styled.div`
   gap: 1rem;
   align-items: center;
 
-  padding: 0.5rem 0;
+  padding: 1rem 0;
 `;
 
 export const ContentRadioInput = styled.input`

diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx
@@ -330,28 +330,24 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
 
           <S.RowContainer>
             <S.ContentLabel>방 공개 여부</S.ContentLabel>
-            <S.ContentInput>
-              <S.ContentWrapper>
-                <S.ContentRadioInput
-                  type="radio"
-                  id="yes"
-                  name="isPrivate"
-                  checked={formState.isPrivate}
-                  onChange={() => handleInputChange("isPrivate", true)}
-                />
-                <S.RadioLabel htmlFor="yes">예</S.RadioLabel>
-              </S.ContentWrapper>
-              <S.ContentWrapper>
-                <S.ContentRadioInput
-                  type="radio"
-                  id="no"
-                  name="isPrivate"
-                  checked={!formState.isPrivate}
-                  onChange={() => handleInputChange("isPrivate", false)}
-                />
-                <S.RadioLabel htmlFor="no">아니요</S.RadioLabel>
-              </S.ContentWrapper>
-            </S.ContentInput>
+            <S.ContentWrapper>
+              <S.ContentRadioInput
+                type="radio"
+                id="yes"
+                name="isPrivate"
+                checked={formState.isPrivate}
+                onChange={() => handleInputChange("isPrivate", true)}
+              />
+              <S.RadioLabel htmlFor="yes">예</S.RadioLabel>
+              <S.ContentRadioInput
+                type="radio"
+                id="no"
+                name="isPrivate"
+                checked={!formState.isPrivate}
+                onChange={() => handleInputChange("isPrivate", false)}
+              />
+              <S.RadioLabel htmlFor="no">아니요</S.RadioLabel>
+            </S.ContentWrapper>
           </S.RowContainer>
         </S.SubSection>
 

diff --git a/frontend/src/pages/roomDetail/RoomDetailPage.style.ts b/frontend/src/pages/roomDetail/RoomDetailPage.style.ts
@@ -24,6 +24,7 @@ export const ImgWithError = styled.div`
 
 export const EditButtonWrapper = styled.div`
   position: absolute;
+  top: 8px;
   left: 100px;
 `;
 

diff --git a/frontend/src/pages/roomDetail/RoomDetailPage.tsx b/frontend/src/pages/roomDetail/RoomDetailPage.tsx
@@ -96,11 +96,13 @@ const RoomDetailPage = () => {
       </ConfirmModal>
 
       <ContentSection title="미션 정보" {...buttonProps}>
-        <S.EditButtonWrapper>
-          <S.EditButton onClick={() => navigate(`/rooms/edit/${roomId}`)}>
-            <Icon kind="edit" /> <span>수정</span>
-          </S.EditButton>
-        </S.EditButtonWrapper>
+        {roomInfo.roomStatus === "OPEN" && roomInfo.participationStatus === "MANAGER" && (
+          <S.EditButtonWrapper>
+            <S.EditButton onClick={() => navigate(`/rooms/edit/${roomId}`)}>
+              <Icon kind="edit" /> <span>수정</span>
+            </S.EditButton>
+          </S.EditButtonWrapper>
+        )}
         <RoomInfoCard roomInfo={roomInfo} />
       </ContentSection>