design: 자잘한 디자인 개선 및 설명 추가한다 (#584)

[#583]
woowacourse-teams · Aug 17, 2023 · 706dfe1 · 706dfe1
1 parent 3e52a36
commit 706dfe1
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 21 deletions.
diff --git a/frontend/src/components/ui/ServerStationFilters/FilterOption.tsx b/frontend/src/components/ui/ServerStationFilters/FilterOption.tsx
@@ -34,7 +34,7 @@ const FilterSection = ({
       `}
     >
       <FlexBox justifyContent="between">
-        <Text variant={'h6'} mb={1}>
+        <Text variant={'h6'} mb={2}>
           {title}
         </Text>
         <Text variant="caption">중복선택 가능</Text>
@@ -55,5 +55,4 @@ const FilterSection = ({
     </FlexBox>
   );
 };
-
 export default FilterSection;
diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
@@ -56,13 +56,13 @@ const ServerStationFilters = () => {
   return (
     <FlexBox
       width={NAVIGATOR_PANEL_WIDTH}
-      height={'100vh'}
-      alignItems={'center'}
-      direction={'column'}
-      background={'white'}
+      height="100vh"
+      alignItems="center"
+      direction="column"
+      background="white"
       css={[overFlowCss, borderCss]}
-      nowrap={true}
-      noRadius={'all'}
+      nowrap
+      noRadius="all"
     >
       <FlexBox
         width={NAVIGATOR_PANEL_WIDTH}
@@ -80,34 +80,34 @@ const ServerStationFilters = () => {
         </ButtonNext>
       </FlexBox>
       <FilterSection
-        title={'커넥터 타입'}
+        title="커넥터 타입"
         filterOptionNames={connectorTypes.map((connectorType) => CONNECTOR_TYPES[connectorType])}
         filterOptionValues={connectorTypes}
         toggleSelectFilter={toggleConnectorTypeFilter}
         getIsFilterSelected={getIsConnectorTypeSelected}
       />
       <FilterSection
-        title={'충전 속도(kW)'}
+        title="충전 속도(kW)"
         filterOptionNames={[...capacities.map((capacity) => Number(capacity))] as Capacity[]}
         filterOptionValues={[...capacities]}
-        filterButtonVariant={'sm'}
+        filterButtonVariant="sm"
         toggleSelectFilter={toggleCapacityFilter}
         getIsFilterSelected={getIsCapacitySelected}
       />
       <FilterSection
-        title={'충전 사업자'}
+        title="충전 사업자"
         filterOptionNames={companies.map((companyKey) => COMPANIES[companyKey])}
         filterOptionValues={[...companies]}
         toggleSelectFilter={toggleCompanyFilter}
         getIsFilterSelected={getIsCompanySelected}
       />
       <Button
-        background={'#0064FF'}
+        background="#0064ff"
         css={buttonCss}
-        noRadius={'all'}
+        noRadius="all"
         onClick={handleApplySelectedFilters}
       >
-        <Text variant={'h6'}>적용하기</Text>
+        <Text variant="h6">적용하기</Text>
       </Button>
     </FlexBox>
   );

diff --git a/...tend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportConfirmation.tsx b/...tend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportConfirmation.tsx
@@ -24,7 +24,8 @@ const ChargerReportConfirmation = ({ stationId }: ChargerReportConfirmationProps
       <Text variant="title" mb={3}>
         충전기가 고장나있다면 신고해주세요.
       </Text>
-      <Text my={4}> 표시된 정보가 실제 충전기 상태와 다를 수 있습니다.</Text>
+      <Text my={4}>표시된 정보가 실제 충전기 상태와 다를 수 있습니다.</Text>
+      <Text my={4}>충전소당 한 번만 신고할 수 있습니다.</Text>
       <FlexBox justifyContent="between" nowrap>
         <ButtonNext
           variant="outlined"

diff --git a/frontend/src/components/ui/StationDetailsWindow/station/StationInformation.tsx b/frontend/src/components/ui/StationDetailsWindow/station/StationInformation.tsx
@@ -32,10 +32,12 @@ const StationInformation = ({ station }: StationInformationProps) => {
           {stationName}
         </Text>
         <Text variant="body" mb={1.5}>
-          {address?.length > 0 ? address : '도로명주소 없음'}
+          {contact?.length > 0 || !address || address === 'null' ? '주소 미확인' : address}
         </Text>
         <Text variant="caption" mb={1}>
-          {detailLocation?.length > 0 ? detailLocation : '상세주소 없음'}
+          {contact?.length > 0 || !address || detailLocation === 'null'
+            ? '상세주소 미확인'
+            : detailLocation}
         </Text>
       </Box>
       <Divider />

diff --git a/frontend/src/components/ui/StationList/EmptyStationsNotice.tsx b/frontend/src/components/ui/StationList/EmptyStationsNotice.tsx
@@ -9,7 +9,9 @@ const EmptyStationsNotice = () => {
         <Text align="center" css={{ fontSize: '20rem', fontWeight: 'bold' }} mb={7}>
           텅
         </Text>
-        <Text align="center">조회 가능한 충전소가 없습니다.</Text>
+        <Text align="center" mb={2}>
+          조회 가능한 충전소가 없습니다.
+        </Text>
         <Text align="center">화면을 조금 더 확대하거나 장소를 이동해보세요.</Text>
       </Box>
     </FlexBox>

diff --git a/frontend/src/style/index.ts b/frontend/src/style/index.ts
@@ -31,7 +31,7 @@ export const getSize = (size: string | number) => {
 export const getColor = (color?: Color) => {
   switch (color) {
     case 'primary':
-      return '#0d6efd';
+      return '#0064ff';
     case 'secondary':
       return '#212529BF';
     case 'success':
@@ -47,7 +47,7 @@ export const getColor = (color?: Color) => {
     case 'dark':
       return '#212529';
     default:
-      return '#0d6efd';
+      return '#0064ff';
   }
 };