FEAT ui 스타일링 관련 수정 (#develop)

Author: createhb21

services/ahhachul.com/src/components/common/comment/commentActions/CommentActions.styled.ts

@@ -107,7 +107,6 @@ export const DefaultViewHeader = styled.header`
   display: flex;
   height: 72px;
   align-items: center;
-  border-bottom: 1px solid #f7f7f7;
   padding-left: 8px;
   margin-bottom: 16px;
 `;

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.component.tsx

@@ -48,9 +48,11 @@ const DrawerFilter: React.FC<DrawerFilterProps> = ({ label, drawerTitle }) => {
               <S.SearchIconWrapper>
                 <SearchIcon />
               </S.SearchIconWrapper>
-              <S.SearchInput placeholder="사용자 필터링" />
+              <S.SearchInput placeholder="사용자 검색" />
             </S.SearchContainer>
-            <S.ContentArea />
+            <S.ContentArea>
+              <span>검색중...</span>
+            </S.ContentArea>
           </S.ContentWrapper>
         </Drawer.Content>
       </Drawer.Portal>

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.styled.tsx

@@ -107,7 +107,7 @@ export const SearchInput = styled.input`
     color: ${theme.colors.gray[90]};
     background-color: ${theme.colors.gray[20]};
     padding: 0 12px 0 30px;
-    font-size: 16px;
+    font-size: 14px;
     caret-color: ${theme.colors['key-color']};
     border-radius: 12px;
 
@@ -125,6 +125,12 @@ export const SearchInput = styled.input`
 
 export const ContentArea = styled.div`
   background-color: ${({ theme }) => theme.colors.gray[20]};
-  height: 500px;
+  height: 360px;
   border-radius: 12px;
+  padding: 24px;
+
+  & > span {
+    ${({ theme }) => theme.fonts.labelMedium};
+    color: ${({ theme }) => theme.colors.gray[90]};
+  }
 `;

services/ahhachul.com/src/components/common/subwayLinePicker/SubwayLinePicker.component.tsx

@@ -3,13 +3,30 @@ import React, { useReducer } from 'react';
 import { Drawer } from 'vaul';
 
 import { ChevronIcon } from '@/assets/icons/system';
-import { subwayLineOptions } from '@/constants';
 import type { SubwayLineType } from '@/types';
 
 import * as S from './SubwayLinePicker.styled';
 
 import { SelectMolecules } from '../form/molecules';
 
+const subwayLineOptions = {
+  '1': '1호선',
+  '2': '2호선',
+  '3': '3호선',
+  '4': '4호선',
+  '5': '5호선',
+  '6': '6호선',
+  '7': '7호선',
+  '8': '8호선',
+  '9': '9호선',
+  '11': '경의중앙선',
+  '13': '공항철도',
+  '15': '서해선',
+  '16': '수인분당선',
+  '18': '신분당선',
+  '20': '우이신설경전철',
+};
+
 interface SubwayLinePickerProps {
   name: string;
   title: string;
@@ -36,13 +53,17 @@ const SubwayLinePicker: React.FC<SubwayLinePickerProps> = ({
   return (
     <Drawer.Root
       open={isOpen}
-      shouldScaleBackground
+      shouldScaleBackground={false}
       repositionInputs={false}
       onOpenChange={toggleOpen}
     >
       <Drawer.Trigger asChild>
         <S.SelectButton isActive={!!selectedLine} aria-invalid={!!errorMsg}>
-          <span>{selectedLine ? subwayLineOptions[selectedLine] : buttonLabel}</span>
+          <span>
+            {selectedLine
+              ? subwayLineOptions[selectedLine as keyof typeof subwayLineOptions]
+              : buttonLabel}
+          </span>
           <ChevronIcon />
         </S.SelectButton>
       </Drawer.Trigger>

services/ahhachul.com/src/components/common/subwayLinePicker/SubwayLinePicker.styled.ts

@@ -28,6 +28,7 @@ export const overlay = css`
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.4);
+  z-index: 999999990;
 `;
 
 export const drawerContainer = css`
@@ -85,4 +86,8 @@ export const subwayList = css`
   gap: 8px;
   justify-items: center;
   padding: 16px 0;
+
+  & > button {
+    min-width: 109px;
+  }
 `;

services/ahhachul.com/src/components/layout/ComposedLayout.component.tsx

@@ -9,16 +9,18 @@ interface ComposedLayoutProps extends ComponentProps<typeof AppScreen> {
   children: ReactNode;
   outerChildren?: ReactNode;
   navigationSlot?: boolean;
+  shouldShowBackground?: boolean;
 }
 
 const ComposedLayout = ({
   children,
   outerChildren,
   navigationSlot = true,
+  shouldShowBackground = true,
   ...props
 }: ComposedLayoutProps) => {
   return (
-    <S.ComposedLayout data-vaul-drawer-wrapper="true">
+    <S.ComposedLayout data-vaul-drawer-wrapper={shouldShowBackground}>
       {outerChildren}
       <LayoutComponent.Base navigationSlot={navigationSlot} {...props}>
         {children}

services/ahhachul.com/src/pages/community/new.tsx

@@ -15,7 +15,7 @@ const NewCommunityPage: ActivityComponentType = () => {
   const { methods, isPending, handleImageUpload, handleImageDelete, submit } = useCommunityForm();
 
   return (
-    <LayoutComponent.Composed>
+    <LayoutComponent.Composed navigationSlot={false}>
       <FormProvider {...methods}>
         <S.FormContainer onSubmit={submit}>
           <FormComponent.ImageUpload

services/ahhachul.com/src/pages/complaint/new.tsx

@@ -29,7 +29,7 @@ const NewComplaintPage: ActivityComponentType<ComplaintFormProps> = ({
     useComplaintForm(slug);
 
   return (
-    <LayoutComponent.Composed>
+    <LayoutComponent.Composed navigationSlot={false} shouldShowBackground={false}>
       <FormProvider {...methods}>
         <S.FormContainer onSubmit={submit}>
           <FormComponent.ImageUpload

services/ahhachul.com/src/pages/lostFound/new.tsx

@@ -15,7 +15,7 @@ const NewLostFoundPage: ActivityComponentType = () => {
   const { methods, isPending, handleImageUpload, handleImageDelete, submit } = useLostFoundForm();
 
   return (
-    <LayoutComponent.Composed>
+    <LayoutComponent.Composed navigationSlot={false}>
       <FormProvider {...methods}>
         <S.FormContainer onSubmit={submit}>
           <FormComponent.ImageUpload

services/ahhachul.com/src/pages/my/setting.tsx

@@ -103,23 +103,22 @@ const SettingPage: ActivityComponentType = () => {
 
   return (
     <LayoutComponent.Base>
+      <S.Fixed>
+        <S.Headline>
+          <b>즐겨찾는 역</b>을 설정해주세요
+        </S.Headline>
+        <S.Desc>최대 4개까지 등록할 수 있어요</S.Desc>
+
+        <SearchWrapper>
+          <SearchInputIcon />
+          <SearchInput
+            placeholder="검색어를 입력해주세요"
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        </SearchWrapper>
+      </S.Fixed>
       <S.Container>
-        <S.Fixed>
-          <S.Headline>
-            <b>즐겨찾는 역</b>을 설정해주세요
-          </S.Headline>
-          <S.Desc>최대 4개까지 등록할 수 있어요</S.Desc>
-
-          <SearchWrapper>
-            <SearchInputIcon />
-            <SearchInput
-              placeholder="검색어를 입력해주세요"
-              value={searchTerm}
-              onChange={handleSearchChange}
-            />
-          </SearchWrapper>
-        </S.Fixed>
-
         <SearchResults $isPending={isPending}>
           {displayStations.map((name, idx) => (
             <StationContainer key={`${name}_${idx}`}>
@@ -249,10 +248,9 @@ const S = {
   `,
   Fixed: styled.div`
     position: fixed;
-    top: 0;
+    top: 20px;
     left: 0;
     width: 100%;
-    padding-top: 20px;
     background-color: white;
   `,
   Headline: styled.h1`