Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

design: 충전소 리스트 에러 컴포넌트 및 사소한 디자인 개선한다 #854

Merged
merged 5 commits into from
Oct 12, 2023
Merged

design: 충전소 리스트 에러 컴포넌트 및 사소한 디자인 개선한다 #854

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab9184b
design: 주변 충전소 없을 때 보여지는 컴포넌트 디자인 개선
feb-dain Oct 12, 2023
57db6ef
design: 사소한 디자인 개선
feb-dain Oct 12, 2023
a3f0d79
design: 상세정보창 닫기 버튼 디자인 개선
feb-dain Oct 12, 2023
03d37c8
design: infoWindow 모바일 크기 조정
feb-dain Oct 12, 2023
4d8c1c9
design: 충전소 통계 이름 변경
feb-dain Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/assets/loading.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 0 additions & 21 deletions frontend/src/assets/logo-icon.svg
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions frontend/src/assets/nothing.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/components/common/Box/Box.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const borderStyle = ({
${border === true && `border: 0.1px solid #66666666; border-radius: 4px;`}

${typeof border !== 'boolean' && `border-${border}: 0.1px solid #66666666`};
${border === 'x' && `border-right: 0.1px solid #66666666; border-left: 0.1px solid #66666666;`}
${border === 'y' && `border-top: 0.1px solid #66666666; border-bottom: 0.1px solid #66666666;`}

${borderColor !== undefined && `border-color: ${borderColor}`};
${borderWidth !== undefined && `border-width: ${addUnitForBorder(borderWidth)}`};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/common/Box/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import type { BaseProps } from '@common/types/base';
import type { CommonStyleProps } from '../styles/common';
import { StyledBox } from './Box.style';

type FourSides = 'left' | 'right' | 'top' | 'bottom';
type Sides = 'left' | 'right' | 'top' | 'bottom' | 'x' | 'y';

export interface BoxProps extends CommonStyleProps, SpacingProps, BaseProps {
/** 테두리에 둥글고(border-radius: 4px) 얇은 선(0.1px, #66666666)이 생김
* - 특정 방향(ex. 'left')을 넣으면 해당 부분만 얇은 선이 생김
* @default false
*/
border?: boolean | FourSides;
border?: boolean | Sides;
/** border 색깔 변경 가능, **border가 false가 아닐 때 사용 가능** */
borderColor?: string;
/** border 두께 변경 가능, **border가 false가 아닐 때 사용 가능**
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/common/Button/Button.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const StyledButton = styled.button<StyledButtonType>`
text-align: center;

${spacing}

${({ $noRadius }) => $noRadius && borderRadius($noRadius)};
${({ variant }) => {
switch (variant) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/MapController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const MapController = () => {
{isFetching ? (
<Loader css={{ borderBottomColor: 'blue' }} />
) : (
<BiCurrentLocation size={24} color="#0540f2" stroke="#333" aria-label="내 위치로 이동" />
<BiCurrentLocation size={24} color="#4D6CD0" stroke="#333" aria-label="내 위치로 이동" />
)}
</Button>
<Button
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,6 @@ const flexCss = css`
align-items: center;
gap: 0;
justify-content: space-around;

& > svg:first-child {
display: none;
}
}
`;

Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/ui/NotFound/NotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const NotFound = () => {
>
<Image alt="404 이미지" />
<GoHome to="/">
<ImHome />
<HomeIcon />
홈으로 돌아가기
</GoHome>
</FlexBox>
Expand Down Expand Up @@ -52,11 +52,6 @@ const GoHome = styled(Link)`
font-weight: 500;
font-size: 16px;

& > svg {
margin-right: 0.8rem;
vertical-align: bottom;
}

&:hover {
background: #333;
color: #fff;
Expand All @@ -68,4 +63,9 @@ const GoHome = styled(Link)`
}
`;

const HomeIcon = styled(ImHome)`
margin-right: 0.8rem;
vertical-align: bottom;
`;

export default NotFound;
37 changes: 22 additions & 15 deletions frontend/src/components/ui/StationDetailsWindow/StationDetailsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,23 @@ const StationDetailsView = ({ station }: StationDetailsViewProps) => {
};

return (
<Box p={5} css={stationDetailsViewContainerCss}>
<Button css={xIconCss} onClick={handleCloseDetail}>
<Box
px={5}
pt={6}
width={NAVIGATOR_PANEL_WIDTH}
height="100vh"
bgColor="#fff"
border="x"
borderWidth="0.5px"
borderColor="#e1e4eb"
css={stationDetailsViewContainerCss}
>
<Button noRadius="all" css={xIconCss} onClick={handleCloseDetail}>
<XMarkIcon width={32} />
</Button>
<Box mt={4}>
<StationInformation station={station} />
</Box>

<StationInformation station={station} />

<StationReportButton station={station} />

<ChargerList chargers={chargers} stationId={stationId} reportCount={reportCount} />
Expand All @@ -49,12 +59,7 @@ const StationDetailsView = ({ station }: StationDetailsViewProps) => {
};

export const stationDetailsViewContainerCss = css`
width: ${NAVIGATOR_PANEL_WIDTH}rem;
height: 100vh;
background-color: white;
box-shadow: 1px 1px 2px gray;
border-left: 0.5px solid #e1e4eb;
border-right: 0.5px solid #e1e4eb;
overflow: scroll;

@media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
Expand All @@ -64,14 +69,16 @@ export const stationDetailsViewContainerCss = css`
`;

const xIconCss = css`
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
display: none;
}
display: none;

@media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
display: block;
position: absolute;
right: 1rem;
top: 1rem;
right: 0.8rem;
top: 0;

padding: 1.2rem 0.8rem;
background: rgba(255, 255, 255, 0.8);
}
`;

Expand Down
16 changes: 14 additions & 2 deletions frontend/src/components/ui/StationDetailsWindow/StationDetailsViewSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,24 @@ import { stationDetailsViewContainerCss } from '@ui/StationDetailsWindow/Station
import ChargerCardSkeleton from '@ui/StationDetailsWindow/chargers/ChargerCardSkeleton';
import StationInformationSkeleton from '@ui/StationDetailsWindow/station/StationInformationSkeleton';

import { NAVIGATOR_PANEL_WIDTH } from '@constants';

const StationDetailsViewSkeleton = () => {
return (
<Box px={2} py={10} css={stationDetailsViewContainerCss}>
<Box
px={5}
pt={6}
width={NAVIGATOR_PANEL_WIDTH}
height="100vh"
bgColor="#fff"
border="x"
borderWidth="0.5px"
borderColor="#e1e4eb"
css={stationDetailsViewContainerCss}
>
<StationInformationSkeleton />
<FlexBox justifyContent="center" my={3}>
<Skeleton width="90%" height="3rem" />
<Skeleton height="3rem" />
</FlexBox>
<FlexBox>
{Array.from({ length: 10 }, (_, index) => (
Expand Down
Loading
Loading