Skip to content

Commit

Permalink
feat: apply slope status in slope page
Browse files Browse the repository at this point in the history
  • Loading branch information
Najeong-Kim committed Nov 2, 2024
1 parent babd1fa commit 04a6486
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/entities/slope/model/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export type { Slope, Webcam, SlopeResponse } from './model';
export type { Level, Slope, Webcam, SlopeResponse } from './model';
10 changes: 9 additions & 1 deletion src/entities/slope/model/model.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
export type Level =
| '초급'
| '초중급'
| '중급'
| '중상급'
| '상급'
| '최상급';

export type Slope = {
name: string,
difficulty: string,
difficulty: Level,
isDayOperating: true,
isNightOperating: true,
isLateNightOperating: true,
Expand Down
51 changes: 51 additions & 0 deletions src/entities/slope/ui/level-chip.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';
import { cn } from '../../../shared/lib';
import type { Level } from '../model';

const LEVEL: Record<Level, { text: string; color: string }> = {
초급: {
text: '초급',
color: 'bg-sub-2',
},
초중급: {
text: '초중급',
color: 'bg-sub-2',
},
중급: {
text: '중급',
color: 'bg-sub-4',
},
중상급: {
text: '중상급',
color: 'bg-sub-4',
},
상급: {
text: '상급',
color: 'bg-gray-70',
},
최상급: {
text: '최상급',
color: 'bg-gray-70',
},
};

interface LevelChipProps {
className?: string;
level: Level;
}

const LevelChip = ({ level, className }: LevelChipProps) => {
return (
<div
className={cn(
'flex h-[25px] w-[56px] items-center justify-center rounded-[6px] border-[1px] border-white border-opacity-10',
LEVEL[level].color,
className
)}
>
<p className="body1-semibold text-white">{LEVEL[level].text}</p>
</div>
);
};

export default LevelChip;
33 changes: 13 additions & 20 deletions src/features/slop/ui/slop-status-list.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import React from 'react';
import type { Level } from '@/entities/slop/model/model';
import LevelChip from '@/entities/slop/ui/level-chip';
import type { Slope } from '@/entities/slope';
import LevelChip from '@/entities/slope/ui/level-chip';
import CheckIcon from '@/shared/icons/check';
import CloseIcon from '@/shared/icons/close';
import { cn } from '@/shared/lib';
import useSlopStore from '../hooks/useSlopStore';

interface SlopStatusListProps {
list: {
key: string;
name: string;
level: Level;
isOpenDuringDay: boolean;
isOpenDuringWeek: boolean;
isOpenDuringNight: boolean;
}[];
slopes?: Slope[];
}

const SlopStatusList = ({ list }: SlopStatusListProps) => {
const SlopStatusList = ({ slopes }: SlopStatusListProps) => {
const { selectedSlop, setSelectedSlop } = useSlopStore();

const handleSlopClick = ({ id }: { id: string }) => {
Expand Down Expand Up @@ -47,26 +40,26 @@ const SlopStatusList = ({ list }: SlopStatusListProps) => {
</tr>
</thead>
<tbody>
{list.map((item) => (
{slopes?.map((slope) => (
<tr
key={item.key}
className={cn(selectedSlop === item.key && 'bg-main-5')}
onClick={() => handleSlopClick({ id: item.key })}
key={slope.name}
className={cn(selectedSlop === slope.name && 'bg-main-5')}
onClick={() => handleSlopClick({ id: slope.name })}
>
<td className={cn('body1-semibold py-[12px] pl-5 text-left text-gray-80')}>
{item.name}
{slope.name}
</td>
<td className={cn('text-center')}>
<LevelChip level={item.level} className={cn('m-auto')} />
<LevelChip level={slope.difficulty} className={cn('m-auto')} />
</td>
<td className={cn('text-center')}>
<StatusIcon isOpen={item.isOpenDuringDay} className={cn('m-auto')} />
<StatusIcon isOpen={slope.isDayOperating} className={cn('m-auto')} />
</td>
<td className={cn('text-center')}>
<StatusIcon isOpen={item.isOpenDuringWeek} className={cn('m-auto')} />
<StatusIcon isOpen={slope.isNightOperating} className={cn('m-auto')} />
</td>
<td className={cn('pr-5 text-center')}>
<StatusIcon isOpen={item.isOpenDuringNight} className={cn('m-auto')} />
<StatusIcon isOpen={slope.isLateNightOperating} className={cn('m-auto')} />
</td>
</tr>
))}
Expand Down
3 changes: 1 addition & 2 deletions src/views/slop-status/ui/slop-status-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ const SlopStatusPage = ({
const { ref, style, containerRef } = useMapPinch();

const { data: slopeData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 1));
console.log(slopeData);

const { data } = useQuery(slopQueries.list(params?.key ?? 'jisan'));

Expand All @@ -37,7 +36,7 @@ const SlopStatusPage = ({
slops={RESORT_DOMAIN[data.key].slops}
/>
</section>
<SlopStatusList list={data.slopes} />
<SlopStatusList slopes={slopeData?.slopes} />
</main>
);
};
Expand Down

0 comments on commit 04a6486

Please sign in to comment.