Skip to content

Commit 1e8bd4a

Browse files
hyeongjun3hyeongjun3
committed
Merge branch 'feature/Base-Style'
2 parents 0e43092 + c332a96 commit 1e8bd4a

File tree

17 files changed

+351
-161
lines changed

17 files changed

+351
-161
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"scripts": {
77
"dev": "vite --mode dev",
88
"build": "vite build --mode production",
9-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
9+
"lint": "eslint . ",
1010
"preview": "vite preview",
1111
"lint-ts": "tsc --noEmit"
1212
},
@@ -23,6 +23,7 @@
2323
"react-dom": "^18.2.0",
2424
"react-hook-form": "^7.51.3",
2525
"react-router-dom": "^6.22.3",
26+
"tailwind-merge": "^2.6.0",
2627
"ua-parser-js": "^1.0.37"
2728
},
2829
"devDependencies": {

‎src/components/Card/Card.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { mergeClassName } from "@Utils/styleExtension";
22
import { TemplateType } from "@Utils/templateManager";
33
import { ComponentProps } from "react";
4+
import { twMerge } from "tailwind-merge";
45

56
export interface CardProps
67
extends Omit<ComponentProps<"button">, "id" | "title">,
@@ -25,13 +26,25 @@ export default function Card({
2526
disabled={disabled}
2627
{...restProps}
2728
>
28-
<img className="w-full" src={thumbnailSrc} />
29-
<div className="absolute bottom-[12px] left-[12px] right-[19px] flex flex-col gap-[8px] items-start text-left">
30-
<p className="font-yClover font-bold text-white leading-5">{title}</p>
29+
<img className={twMerge("w-full")} src={thumbnailSrc} />
30+
<div
31+
className={twMerge(
32+
"absolute bottom-[12px] left-[12px] right-[19px] flex flex-col gap-[8px] items-start text-left"
33+
)}
34+
>
35+
<p className={twMerge("font-yClover font-bold text-white leading-5")}>
36+
{title}
37+
</p>
3138
</div>
3239
{disabled && (
33-
<div className="absolute w-full h-full bg-[rgba(0,0,0,0.7)] flex items-center justify-center">
34-
<p className="font-yClover text-[#DCDCDC] font-bold">준비 중이다냥</p>
40+
<div
41+
className={twMerge(
42+
"absolute w-full h-full bg-[rgba(0,0,0,0.7)] flex items-center justify-center"
43+
)}
44+
>
45+
<p className={twMerge("font-yClover text-[#DCDCDC] font-bold")}>
46+
준비 중이다냥
47+
</p>
3548
</div>
3649
)}
3750
</button>

‎src/components/layout/CheatLayout.tsx‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { STORAGE_KEYS } from "@Constant/storageKeys";
2020
import MotionJson from "@Assets/motion/motion.json";
2121
import { download } from "@Utils/download";
2222
import getCurrentDate from "@Utils/dateExtension";
23+
import { twMerge } from "tailwind-merge";
2324

2425
interface CheatLayoutProps {
2526
children: ReactNode;
@@ -29,7 +30,7 @@ export default function CheatLayout({ children }: CheatLayoutProps) {
2930
return (
3031
<>
3132
{createPortal(
32-
<div className="absolute top-1 right-5 py-3 flex w-fit">
33+
<div className={twMerge("absolute top-1 right-5 py-3 flex w-fit")}>
3334
<MotionSettingButton />
3435
</div>,
3536
document.body
@@ -76,10 +77,18 @@ function MotionSettingModal({ isOpen, onClose }: MotionSettingModalProps) {
7677
<>
7778
{createPortal(
7879
<FormProvider {...form}>
79-
<div className="absolute bg-[rgb(209,213,219)] top-1 flex w-[calc(100%-16px)] left-0 right-0 m-auto py-4 px-2 rounded-lg flex-col gap-2 z-10">
80-
<div className="flex justify-between w-full items-center">
81-
<p className="font-yClover text-base font-bold">모션 설정</p>
82-
<div className="flex gap-2">
80+
<div
81+
className={twMerge(
82+
"absolute bg-[rgb(209,213,219)] top-1 flex w-[calc(100%-16px)] left-0 right-0 m-auto py-4 px-2 rounded-lg flex-col gap-2 z-10"
83+
)}
84+
>
85+
<div
86+
className={twMerge("flex justify-between w-full items-center")}
87+
>
88+
<p className={twMerge("font-yClover text-base font-bold")}>
89+
모션 설정
90+
</p>
91+
<div className={twMerge("flex gap-2")}>
8392
<Button variant={"primary"} onClick={form.handleSubmit(store)}>
8493
저장
8594
</Button>
@@ -97,7 +106,9 @@ function MotionSettingModal({ isOpen, onClose }: MotionSettingModalProps) {
97106
</Button>
98107
</div>
99108
</div>
100-
<form className="flex flex-col h-[500px] overflow-auto gap-1">
109+
<form
110+
className={twMerge("flex flex-col h-[500px] overflow-auto gap-1")}
111+
>
101112
{Object.entries(motionJson).map(([key, value]) => {
102113
return (
103114
<SettingArea
@@ -129,9 +140,15 @@ function SettingArea<T extends MotionJsonKeyType>({
129140
});
130141

131142
return (
132-
<div className="flex flex-col gap-2 rounded-sm border border-sky-100 border-solid py-2 px-1">
133-
<div className="flex flex-row items-center w-full gap-4">
134-
<p className="font-yClover font-normal text-[14px] w-[180px]">
143+
<div
144+
className={twMerge(
145+
"flex flex-col gap-2 rounded-sm border border-sky-100 border-solid py-2 px-1"
146+
)}
147+
>
148+
<div className={twMerge("flex flex-row items-center w-full gap-4")}>
149+
<p
150+
className={twMerge("font-yClover font-normal text-[14px] w-[180px]")}
151+
>
135152
{keyName}
136153
</p>
137154
<Button variant={"primary"} onClick={() => append({})}>
@@ -152,11 +169,13 @@ function SettingArea<T extends MotionJsonKeyType>({
152169
/>
153170
<SettingInput label="originX" {...register(`${keyName}.originX`)} />
154171
<SettingInput label="originY" {...register(`${keyName}.originY`)} />
155-
<div className="border-sky-100 border-solid flex flex-col gap-2">
172+
<div
173+
className={twMerge("border-sky-100 border-solid flex flex-col gap-2")}
174+
>
156175
{fields.map((item, idx) => {
157176
return (
158-
<div key={item.id} className="flex flex-row gap-2">
159-
<div className="flex flex-col">
177+
<div key={item.id} className={twMerge("flex flex-row gap-2")}>
178+
<div className={twMerge("flex flex-col")}>
160179
{["x", "y", "rotate", "opacity", "ease", "scale"].map((key) => {
161180
const formName = `${keyName}.to[${idx}].${key}` as const;
162181
return (
@@ -186,9 +205,14 @@ interface SettingInputProps extends ComponentProps<"input"> {
186205
const SettingInput = forwardRef<HTMLInputElement, SettingInputProps>(
187206
({ label, ...props }, ref) => {
188207
return (
189-
<div className="flex gap-2 items-center">
190-
<label className="w-[80px] font-yClover">{label}</label>
191-
<input ref={ref} className="p-1" placeholder="입력" {...props} />
208+
<div className={twMerge("flex gap-2 items-center")}>
209+
<label className={twMerge("w-[80px] font-yClover")}>{label}</label>
210+
<input
211+
ref={ref}
212+
className={twMerge("p-1")}
213+
placeholder="입력"
214+
{...props}
215+
/>
192216
</div>
193217
);
194218
}

‎src/components/layout/MobileLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export default function MobileLayout() {
77
const outlet = useOutlet();
88

99
return (
10-
<div className="w-screen bg-[##FFF] h-dvh flex justify-center">
10+
<div className={twMerge("w-screen bg-[##FFF] h-dvh flex justify-center")}>
1111
<section
1212
id="mobile-layout"
13-
className="w-[375px] relative h-full overflow-hidden"
13+
className={twMerge("w-[375px] relative h-full overflow-hidden")}
1414
>
1515
<AnimatePresence initial={false}>
1616
{outlet && cloneElement(outlet, { key: pathname })}

‎src/components/video/VideoPlayer.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { shareRef } from "@Utils/reactExtension";
33
import { mergeClassName } from "@Utils/styleExtension";
44
import { AnimatePresence, motion } from "framer-motion";
55
import { ComponentProps, forwardRef, useEffect, useRef, useState } from "react";
6+
import { twMerge } from "tailwind-merge";
67

78
export interface VideoPlayerProps extends ComponentProps<"video"> {}
89

@@ -58,7 +59,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
5859
}, []);
5960

6061
return (
61-
<div className="relative w-full aspect-[9/16]">
62+
<div className={twMerge("relative w-full aspect-[9/16]")}>
6263
<video
6364
ref={shareRef(videoRef, ref)}
6465
className={mergeClassName("w-full h-full", className)}
@@ -70,7 +71,11 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
7071
{...restProps}
7172
/>
7273

73-
<div className="absolute top-0 bottom-0 left-0 right-0 m-auto w-fit h-fit">
74+
<div
75+
className={twMerge(
76+
"absolute top-0 bottom-0 left-0 right-0 m-auto w-fit h-fit"
77+
)}
78+
>
7479
<AnimatePresence>
7580
{isVisible && (
7681
<motion.div
@@ -93,16 +98,28 @@ VideoPlayer.displayName = "VideoPlayer";
9398

9499
function PauseButton() {
95100
return (
96-
<button className="flex items-center justify-center w-[100px] h-[100px] bg-[#FFFFFF40] rounded-full gap-[8px]">
97-
<div className="w-[16px] h-[40px] rounded-[6px] bg-[#FFFFFF]" />
98-
<div className="w-[16px] h-[40px] rounded-[6px] bg-[#FFFFFF]" />
101+
<button
102+
className={twMerge(
103+
"flex items-center justify-center w-[100px] h-[100px] bg-[#FFFFFF40] rounded-full gap-[8px]"
104+
)}
105+
>
106+
<div
107+
className={twMerge("w-[16px] h-[40px] rounded-[6px] bg-[#FFFFFF]")}
108+
/>
109+
<div
110+
className={twMerge("w-[16px] h-[40px] rounded-[6px] bg-[#FFFFFF]")}
111+
/>
99112
</button>
100113
);
101114
}
102115

103116
function StartButton() {
104117
return (
105-
<button className="flex items-center justify-center w-[100px] h-[100px] bg-[#FFFFFF40] rounded-full gap-[8px]">
118+
<button
119+
className={twMerge(
120+
"flex items-center justify-center w-[100px] h-[100px] bg-[#FFFFFF40] rounded-full gap-[8px]"
121+
)}
122+
>
106123
<IconPlay />
107124
</button>
108125
);

‎src/pages/choose/Choose.page.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,18 @@ export default function ChoosePage() {
1414

1515
return (
1616
<motion.div
17-
className="flex flex-col w-full h-full absolute"
17+
className={twMerge("flex flex-col w-full h-full absolute")}
1818
initial={{ y: "100%" }}
1919
animate={motionContent.to}
2020
transition={motionContent.options}
2121
style={motionContent.styles}
2222
>
2323
<Top />
24-
<div className="flex flex-col px-[24px] overflow-y-auto gap-[32px]">
24+
<div
25+
className={twMerge(
26+
"flex flex-col px-[24px] overflow-y-auto gap-[32px]"
27+
)}
28+
>
2529
<Middle />
2630
<Content />
2731
</div>
@@ -31,9 +35,9 @@ export default function ChoosePage() {
3135

3236
function Top() {
3337
return (
34-
<div className=" pt-[24px] pb-[8px] pr-[16px] flex gap-[26px]">
38+
<div className={twMerge(" pt-[24px] pb-[8px] pr-[16px] flex gap-[26px]")}>
3539
<div
36-
className="w-full"
40+
className={twMerge("w-full")}
3741
style={{
3842
backgroundImage: createRepeatBackground(
3943
Base64.rectange,
@@ -48,7 +52,7 @@ function Top() {
4852
transform: "scale(-1,-1)",
4953
}}
5054
/>
51-
<button className="min-w-[16px]">
55+
<button className={twMerge("min-w-[16px]")}>
5256
<IconMenu />
5357
</button>
5458
</div>
@@ -76,13 +80,21 @@ function IconMenu() {
7680

7781
function Middle() {
7882
return (
79-
<div className="mt-[16px] flex flex-row gap-[24px]">
80-
<div className="w-[80px] h-[80px] rounded-full bg-[#DAD9D9] overflow-hidden">
81-
<img src={CatImage2} className="scale-[1.3]" />
83+
<div className={twMerge("mt-[16px] flex flex-row gap-[24px]")}>
84+
<div
85+
className={twMerge(
86+
"w-[80px] h-[80px] rounded-full bg-[#DAD9D9] overflow-hidden"
87+
)}
88+
>
89+
<img src={CatImage2} className={twMerge("scale-[1.3]")} />
8290
</div>
83-
<div className="flex flex-col justify-center gap-[8px] font-yClover font-bold text-[#FCD55F]">
84-
<span className="text-[24px]">@ catsch</span>
85-
<span className="text-[16px]">너도 찍어볼래냥?</span>
91+
<div
92+
className={twMerge(
93+
"flex flex-col justify-center gap-[8px] font-yClover font-bold text-[#FCD55F]"
94+
)}
95+
>
96+
<span className={twMerge("text-[24px]")}>@ catsch</span>
97+
<span className={twMerge("text-[16px]")}>너도 찍어볼래냥?</span>
8698
</div>
8799
</div>
88100
);
@@ -113,7 +125,7 @@ function Content() {
113125
};
114126

115127
return (
116-
<div className="flex flex-row gap-[8px]">
128+
<div className={twMerge("flex flex-row gap-[8px]")}>
117129
{separatedTemplates.map((templates, idx) => {
118130
const margin = idx === 1 ? "mt-[88px]" : "";
119131
return (

‎src/pages/confirm/Confirm.page.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,46 @@ export default function ConfirmPage() {
2626
const goNext = () => navigate(`/result`);
2727

2828
return (
29-
<div className="w-full h-full flex flex-col justify-between">
30-
<div className="relative w-full overflow-hidden max-h-full">
29+
<div className={twMerge("w-full h-full flex flex-col justify-between")}>
30+
<div className={twMerge("relative w-full overflow-hidden max-h-full")}>
3131
<VideoPlayer src={objectUrl} muted={false} autoPlay={false} />
3232

33-
<div className="absolute top-0 flex flex-col w-full h-full py-[24px] px-[16px] justify-between pointer-events-none">
34-
<div className="flex flex-row justify-between">
33+
<div
34+
className={twMerge(
35+
"absolute top-0 flex flex-col w-full h-full py-[24px] px-[16px] justify-between pointer-events-none"
36+
)}
37+
>
38+
<div className={twMerge("flex flex-row justify-between")}>
3539
<button
36-
className="flex flex-row items-center gap-[8px] pointer-events-auto"
40+
className={twMerge(
41+
"flex flex-row items-center gap-[8px] pointer-events-auto"
42+
)}
3743
onClick={goBack}
3844
>
3945
<div>
4046
<BackIcon />
4147
</div>
42-
<div className="font-yClover text-white font-bold">뒤로가기</div>
48+
<div className={twMerge("font-yClover text-white font-bold")}>
49+
뒤로가기
50+
</div>
4351
</button>
4452
</div>
4553
</div>
4654
</div>
47-
<div className="absolute w-full bottom-[25px] flex flex-row items-center pt-[52px] pb-[40px] px-[16px] gap-[16px] justify-center">
55+
<div
56+
className={twMerge(
57+
"absolute w-full bottom-[25px] flex flex-row items-center pt-[52px] pb-[40px] px-[16px] gap-[16px] justify-center"
58+
)}
59+
>
4860
<Button
49-
className="w-full h-[56px]"
61+
className={twMerge("w-full h-[56px]")}
5062
variant={"primary"}
5163
onClick={goBack}
5264
>
5365
재촬영
5466
</Button>
5567
<Button
56-
className="w-full h-[56px] bg-[#9CA3AF]"
68+
className={twMerge("w-full h-[56px] bg-[#9CA3AF]")}
5769
variant={"primary"}
5870
onClick={goNext}
5971
>

0 commit comments

Comments
 (0)