Skip to content

Commit 2e80cde

Browse files
JKyEunJKyEun
committed
fix: 아이폰 스타일 이슈 해결
1 parent 72daca6 commit 2e80cde

File tree

6 files changed

+75
-96
lines changed

6 files changed

+75
-96
lines changed

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
@layer components {
1414
.card-container {
15-
@apply flex-[0_0_80vw] max-w-[480px] aspect-[3/4] rounded-[40px] bg-neutral-100 p-2 shadow-[2px_2px_8px_rgba(0,0,0,0.4)] transition-transform duration-300 ease-in-out;
15+
@apply flex-[0_0_80vw] max-w-[300px] max-h-[400px] rounded-[40px] bg-neutral-100 p-2 shadow-[2px_2px_8px_rgba(0,0,0,0.4)] transition-transform duration-300 ease-in-out;
1616
}
1717
}
1818

‎src/routes/mission/$missionId/-components/MissionNotTriedFailed.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ export default function MissionNotTriedFailed({
3030
<div className="card-container">
3131
<video
3232
src={videoUrl}
33-
className="w-full h-full object-cover"
34-
controls
33+
className="w-full h-full object-cover rounded-[32px]"
3534
playsInline
36-
>
37-
<track kind="captions" />
38-
</video>
35+
muted
36+
loop
37+
controls
38+
autoPlay
39+
/>
3940
</div>
4041
</div>
4142

‎src/routes/mission/$missionId/-components/MissionNotTriedSuccess.tsx‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -42,32 +42,23 @@ export default function MissionNotTriedSuccess({
4242
</div>
4343

4444
<div className="overflow-hidden" ref={emblaRef}>
45-
<div className="flex gap-1 px-[7.5vw]">
45+
<div className="flex items-center">
4646
{missions?.map((mission, index) => (
47-
<div
47+
<MissionGridCard
4848
key={mission.missionId}
49-
className="flex-[0_0_85vw] flex items-center justify-center"
50-
style={{
51-
transform:
52-
index === selectedIndex ? "scale(1)" : "scale(0.9)",
53-
transition: "transform 0.3s ease",
49+
sectorName={mission.sector?.name ?? ""}
50+
difficulty={convertPascalCase(mission.difficulty ?? "")}
51+
imageUrl={mission.imageUrl}
52+
onStart={() => {
53+
navigate({
54+
to: "/mission/$missionId",
55+
params: { missionId: mission.missionId?.toString() },
56+
});
57+
onStart();
5458
}}
55-
>
56-
<MissionGridCard
57-
key={mission.missionId}
58-
sectorName={mission.sector?.name ?? ""}
59-
difficulty={convertPascalCase(mission.difficulty ?? "")}
60-
imageUrl={mission.imageUrl}
61-
onStart={() => {
62-
navigate({
63-
to: "/mission/$missionId",
64-
params: { missionId: mission.missionId?.toString() },
65-
});
66-
onStart();
67-
}}
68-
type="recommendation"
69-
/>
70-
</div>
59+
type="recommendation"
60+
isSelected={index === selectedIndex}
61+
/>
7162
))}
7263
</div>
7364
</div>

‎src/routes/mission/$missionId/-components/MissionResultView.tsx‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,39 @@ import type { RouteMissionRecommendationResponse } from "@/generated/model";
77
import { cn } from "@/utils/cn";
88
import { useCarousel } from "../../-hooks/useCarousel";
99

10+
const VideoComponent = ({
11+
isSelected,
12+
videoUrl,
13+
}: {
14+
isSelected: boolean;
15+
videoUrl: string;
16+
}) => {
17+
return (
18+
<div
19+
className={cn("card-container", {
20+
"opacity-100 scale-100": isSelected,
21+
"opacity-50 scale-90": !isSelected,
22+
})}
23+
>
24+
{videoUrl ? (
25+
<video
26+
src={videoUrl}
27+
className="w-full h-full object-cover rounded-[32px] aspect-[3/4]"
28+
playsInline
29+
muted
30+
loop
31+
controls
32+
autoPlay
33+
/>
34+
) : (
35+
<div className="w-full h-full flex items-center justify-center text-neutral-400 t-p-14-m">
36+
영상이 없어요
37+
</div>
38+
)}
39+
</div>
40+
);
41+
};
42+
1043
export default function MissionResultView({
1144
status,
1245
missionData,
@@ -23,6 +56,8 @@ export default function MissionResultView({
2356
);
2457
const latestAttemptUrl = missionData?.attempts?.[0]?.videoUrl;
2558

59+
console.log(selectedIndex);
60+
2661
const handleDownload = async (url: string | undefined, filename: string) => {
2762
if (!url) return;
2863

@@ -87,55 +122,15 @@ export default function MissionResultView({
87122

88123
<div className="flex items-center gap-4 pt-6">
89124
<div className="overflow-hidden w-full" ref={emblaRef}>
90-
<div className="flex gap-1 px-[10vw]">
91-
<div
92-
className="flex-[0_0_80vw] flex items-center justify-center"
93-
style={{
94-
transform: selectedIndex === 0 ? "scale(1)" : "scale(0.9)",
95-
transition: "transform 0.3s ease",
96-
}}
97-
>
98-
<div className="card-container">
99-
{missionData?.videoUrl ? (
100-
<video
101-
src={missionData.videoUrl}
102-
className="w-full h-full object-cover rounded-[32px]"
103-
controls
104-
playsInline
105-
>
106-
<track kind="captions" />
107-
</video>
108-
) : (
109-
<div className="w-full h-full flex items-center justify-center text-neutral-400 t-p-14-m">
110-
답지 영상이 없습니다
111-
</div>
112-
)}
113-
</div>
114-
</div>
115-
<div
116-
className="flex-[0_0_80vw] flex items-center justify-center"
117-
style={{
118-
transform: selectedIndex === 1 ? "scale(1)" : "scale(0.9)",
119-
transition: "transform 0.3s ease",
120-
}}
121-
>
122-
<div className="card-container">
123-
{latestAttemptUrl ? (
124-
<video
125-
src={latestAttemptUrl}
126-
className="w-full h-full object-cover rounded-[32px]"
127-
controls
128-
playsInline
129-
>
130-
<track kind="captions" />
131-
</video>
132-
) : (
133-
<div className="w-full h-full flex items-center justify-center text-neutral-400 t-p-14-m">
134-
영상이 없습니다
135-
</div>
136-
)}
137-
</div>
138-
</div>
125+
<div className="flex items-center">
126+
<VideoComponent
127+
isSelected={selectedIndex === 0}
128+
videoUrl={missionData?.videoUrl ?? ""}
129+
/>
130+
<VideoComponent
131+
isSelected={selectedIndex === 1}
132+
videoUrl={latestAttemptUrl ?? ""}
133+
/>
139134
</div>
140135
</div>
141136
</div>

‎src/routes/mission/-components/MissionGridCard.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,14 @@ export default function MissionGridCard({
4040
<Link
4141
to={`/mission/${missionId}/${status === "not_tried" ? "" : status}`}
4242
disabled={!missionId}
43-
className={cn(
44-
"card-container",
45-
{
46-
"scale-100 opacity-100": isSelected,
47-
"scale-90 opacity-50": !isSelected,
48-
},
49-
"max-w-[300px]"
50-
)}
43+
className={cn("card-container", {
44+
"scale-100 opacity-100": isSelected,
45+
"scale-90 opacity-50": !isSelected,
46+
})}
5147
>
5248
<div
5349
className={cn(
54-
"relative h-full p-5 rounded-[32px]",
50+
"relative aspect-[3/4] h-full rounded-[32px]",
5551
status === "not_tried"
5652
? ""
5753
: "bg-neutral-100 border-[1px] border-neutral-300"
@@ -68,9 +64,9 @@ export default function MissionGridCard({
6864
<div className="absolute inset-0 bg-gradient-to-b from-[#313131] to-[#00000000] opacity-60 rounded-[32px]" />
6965
</>
7066
)}
71-
<div className="flex flex-col justify-between h-full relative z-10">
67+
<div className="flex flex-col justify-between h-full relative z-10 p-5">
7268
{(type === "main" || type === "recommendation") && (
73-
<div className="flex flex-col gap-1 xs:gap-2">
69+
<div className="flex flex-col gap-1">
7470
<div className="flex items-center justify-between gap-1">
7571
{type === "main" && (
7672
<div className="flex items-center gap-1">
@@ -166,7 +162,7 @@ export default function MissionGridCard({
166162
</div>
167163
)}
168164
{status !== "not_tried" && (
169-
<div className="flex flex-col gap-1 border-t border-neutral-300 pt-3">
165+
<div className="flex flex-col gap-1 border-t border-neutral-300 pt-2">
170166
<div className="flex justify-between items-center">
171167
<span className="t-p-16-m text-neutral-500">SECTOR</span>
172168
<span className="t-p-16-m text-neutral-500">{sectorName}</span>

‎src/routes/mission/-components/MissionLockCard.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import assetMissionIcon from "@/assets/images/ic_lock.png";
22
import assetMissionLock from "@/assets/images/ic_lock_image.png";
3-
import { cn } from "@/utils/cn";
43

54
export default function MissionLockCard() {
65
return (
7-
<div
8-
className={cn("card-container", "max-w-[300px]")}
9-
id="mission-lock-card"
10-
>
11-
<div className="relative w-full h-full rounded-[32px]">
6+
<div className="card-container">
7+
<div className="relative aspect-[3/4] w-full h-full rounded-[32px]">
128
<div className="h-full flex flex-col items-center justify-center gap-2 relative z-1 bg-neutral-400 rounded-[32px]">
139
<img
1410
src={assetMissionIcon}

0 commit comments

Comments
 (0)