크루 생성 페이지 UI 수정 (#306)

* fix: 활동하는 지역 선택 모달 타이틀 추가 * style: 활동지역 모달 가로 스크롤 hidden 처리
Java-and-Script · Nov 24, 2023 · 9fac16b · 9fac16b
1 parent 83cb8e8
commit 9fac16b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/src/pages/CreateCrewPage/CreateCrewPage.styles.ts b/src/pages/CreateCrewPage/CreateCrewPage.styles.ts
@@ -33,13 +33,6 @@ export const StyledModalHeader = styled.div`
   margin-bottom: 32px;
 `;
 
-export const ScrollBox = styled.div`
-  height: 300px;
-  width: 300px;
-  overflow: scroll;
-  border-radius: 30px;
-`;
-
 export const StyledSelectedLocationButton = styled(Button)<{
   isSelected?: boolean;
 }>`
@@ -59,6 +52,7 @@ export const StyledSelectBox = styled(SelectBox)`
   border-radius: 8%;
   border: 1px solid ${({ theme }) => theme.PALETTE.GRAY_900};
   overflow: scroll;
+  overflow-x: hidden;
 `;
 
 export const StyledToggleButton = styled(ToggleButton)<{
@@ -73,4 +67,5 @@ export const StyledToggleButton = styled(ToggleButton)<{
 
 export const StyledModalContent = styled(Modal.Content)`
   ${({ theme }) => theme.STYLES.FLEX_CENTER}
+  padding: 30px;
 `;
diff --git a/src/pages/CreateCrewPage/CreateCrewPage.tsx b/src/pages/CreateCrewPage/CreateCrewPage.tsx
@@ -18,7 +18,6 @@ import { theme } from '@styles/theme';
 import {
   PageLayout,
   PageWrapper,
-  ScrollBox,
   StyledCreateForm,
   StyledEmptyContainer,
   StyledModalContent,
@@ -114,23 +113,21 @@ export const CreateCrewPage = () => {
             >
               <StyledModalHeader>
                 <Text size={20} weight={700}>
-                  {}
+                  {CREATE_CREW_STRINGS.CREW_LOCATION}
                 </Text>
               </StyledModalHeader>
               <StyledModalContent>
-                <ScrollBox>
-                  <StyledSelectBox border="none">
-                    {locations.addressDepth2List.map((location) => (
-                      <StyledToggleButton
-                        key={location}
-                        value={location}
-                        isActive={selectedLocations.includes(location)}
-                        border="none"
-                        onToggle={handleToggleLocation}
-                      />
-                    ))}
-                  </StyledSelectBox>
-                </ScrollBox>
+                <StyledSelectBox border="none">
+                  {locations.addressDepth2List.map((location) => (
+                    <StyledToggleButton
+                      key={location}
+                      value={location}
+                      isActive={selectedLocations.includes(location)}
+                      border="none"
+                      onToggle={handleToggleLocation}
+                    />
+                  ))}
+                </StyledSelectBox>
               </StyledModalContent>
             </Modal>
             <TextArea