Skip to content

Commit d2645a8

Browse files
mtm-git1018mtm-git1018
committed
[style] 시맨틱구조
1 parent a08aac6 commit d2645a8

File tree

14 files changed

+74
-67
lines changed

14 files changed

+74
-67
lines changed

‎src/domains/main/components/mainSlide/components/MainSlide.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ function MainSlide() {
162162
return (
163163
<>
164164
{isMobile ? (
165-
<StarBg className=''>
165+
<StarBg className="">
166166
<MobileSlide key="mobile" />
167167
</StarBg>
168168
) : (

‎src/domains/main/components/mainSlide/components/MainSlideAbv.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function MainSlideAbv() {
4141
];
4242

4343
return (
44-
<div className="slide-content w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
44+
<section className="slide-content w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
4545
<div className="flex flex-col gap-15">
4646
<span className="font-black text-[32px]">3</span>
4747
<div className="flex flex-col gap-5">
@@ -66,7 +66,7 @@ function MainSlideAbv() {
6666
</div>
6767
</div>
6868
</div>
69-
</div>
69+
</section>
7070
);
7171
}
7272
export default MainSlideAbv;

‎src/domains/main/components/mainSlide/components/MainSlideCommunity.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
function MainSlideCommunity() {
22
return (
3-
<div className="slide-content w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
3+
<section className="slide-content w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
44
<div className="flex flex-col justify-center">
55
<div className="flex flex-col gap-15">
66
<span className="text-[32px] font-black">2</span>
7-
<div className="flex flex-col gap-5">
7+
<header className="flex flex-col gap-5">
88
<h2 className="text-5xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
99
술술 즐기는, 커뮤니티
1010
</h2>
@@ -14,11 +14,10 @@ function MainSlideCommunity() {
1414
<br />
1515
회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
1616
</p>
17-
</div>
17+
</header>
1818
</div>
19-
2019
</div>
21-
</div>
20+
</section>
2221
);
2322
}
2423
export default MainSlideCommunity;

‎src/domains/main/components/mainSlide/components/MainSlideIntro.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import Image from 'next/image';
33

44
function MainSlideIntro() {
55
return (
6-
<div className="relative w-full p-12 h-full">
6+
<article className="relative w-full p-12 h-full">
77
<Image src={background} alt="" fill className="-z-1 object-right object-contain" />
8-
<div className="flex flex-col gap-8">
8+
<header className="flex flex-col gap-8">
99
<h2 className="text-3xl lg:text-5xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
1010
칵테일 <br /> 누구나 쉽게 즐길 수 있어요
1111
</h2>
1212
<p className="text-2xl font-normal">
1313
SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
1414
</p>
15-
</div>
16-
</div>
15+
</header>
16+
</article>
1717
);
1818
}
1919
export default MainSlideIntro;

‎src/domains/main/components/mainSlide/components/MainSlideTest.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,37 +15,41 @@ const DUMMY_TEST = [
1515

1616
function MainSlideTest() {
1717
return (
18-
<div className="slide-content w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
18+
<section className="slide-content w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
1919
<div className="flex flex-col gap-15">
2020
<span className="text-[32px] font-black text-secondary">1</span>
2121
<div className="flex flex-col gap-15">
22-
<div className="flex flex-col gap-5">
22+
<header className="flex flex-col gap-5">
2323
<h2 className=" text-5xl font-black text-secondary text-shadow text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
2424
AI기반 취향테스트
2525
</h2>
2626
<p className="text-2xl leading-[1.5] font-normal text-secondary">
2727
복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
2828
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
2929
</p>
30-
</div>
30+
</header>
3131
<ul className="flex gap-8">
32-
<MainTestDummy
33-
message={
34-
<>
35-
안녕하세요! 🍹바텐더 쑤리에요.
36-
<br />
37-
취향에 맞는 칵테일을 추천해드릴게요. <br />
38-
어떤 유형으로 찾아드릴까요?
39-
</>
40-
}
41-
option={DUMMY_TEST}
42-
type="option"
43-
/>
44-
<MainTestDummy type="text" />
32+
<li>
33+
<MainTestDummy
34+
message={
35+
<>
36+
안녕하세요! 🍹바텐더 쑤리에요.
37+
<br />
38+
취향에 맞는 칵테일을 추천해드릴게요. <br />
39+
어떤 유형으로 찾아드릴까요?
40+
</>
41+
}
42+
option={DUMMY_TEST}
43+
type="option"
44+
/>
45+
</li>
46+
<li>
47+
<MainTestDummy type="text" />
48+
</li>
4549
</ul>
4650
</div>
4751
</div>
48-
</div>
52+
</section>
4953
);
5054
}
5155
export default MainSlideTest;

‎src/domains/main/components/mainSlide/components/MainSsuryDrunk.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function MainSsuryDrunk({ src, abv }: Props) {
3131
<span className="text-xs text-primary">%~</span>
3232
)}
3333
</p>
34-
<Image src={src} alt="" width={60} height={60} className="object-contain"/>
34+
<Image src={src} alt="" width={60} height={60} className="object-contain" />
3535
</div>
3636
);
3737
}

‎src/domains/main/components/mainSlide/components/MainTestDummy.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DUMMY_CARD = [
3434

3535
function MainTestDummy({ message, option, type }: Props) {
3636
return (
37-
<li className="flex flex-col justify-end gap-2">
37+
<section className="flex flex-col justify-end gap-2">
3838
<header className="flex items-end">
3939
<div className="relative ">
4040
<Image
@@ -48,7 +48,7 @@ function MainTestDummy({ message, option, type }: Props) {
4848
<p className="tesx-xs">쑤리</p>
4949
</header>
5050
{message && (
51-
<div className="flex flex-col w-[215px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
51+
<section className="flex flex-col w-[215px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
5252
<p className="text-xs">{message}</p>
5353

5454
<div className="flex flex-col gap-2">
@@ -60,14 +60,13 @@ function MainTestDummy({ message, option, type }: Props) {
6060
className={clsx(
6161
'w-full rounded-3xl px-2 py-1 text-center',
6262
active ? 'bg-secondary' : 'bg-gray-light'
63-
6463
)}
6564
>
6665
<span className="text-xs">{message}</span>
6766
</span>
6867
))}
6968
</div>
70-
</div>
69+
</section>
7170
)}
7271
{type == 'text' && (
7372
<div className="flex flex-col sm:flex-row gap-2">
@@ -76,7 +75,7 @@ function MainTestDummy({ message, option, type }: Props) {
7675
))}
7776
</div>
7877
)}
79-
</li>
78+
</section>
8079
);
8180
}
8281
export default MainTestDummy;

‎src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import clsx from 'clsx';
1010
import { useState } from 'react';
1111

1212
function MobileAbv() {
13-
14-
const [isClick,setIsClick] = useState(false)
13+
const [isClick, setIsClick] = useState(false);
1514
const SSURY_DRUNK = [
1615
{
1716
id: 1,

‎src/domains/main/components/mainSlide/components/mobile/MobileSlide.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
21
import background from '@/shared/assets/images/cocktailBg.webp';
32
import MobileSlideTest from './MobileSlideTest';
43
import MobileSlideCommunity from './MobileSlideCommunity';
54
import MobileAbv from './MobileAbv';
65

76
function MobileSlide() {
87
return (
9-
<div className='sticky p-4 sm:p-12'
10-
style={{ backgroundImage: `url(${background.src})`, backgroundAttachment: 'fixed', backgroundSize: 'contain' }}>
11-
8+
<div
9+
className="sticky p-4 sm:p-12"
10+
style={{
11+
backgroundImage: `url(${background.src})`,
12+
backgroundAttachment: 'fixed',
13+
backgroundSize: 'contain',
14+
}}
15+
>
1216
<h2 className="text-xl md:text-3xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
1317
칵테일 <br /> 누구나 쉽게 즐길 수 있어요
1418
</h2>

‎src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import clsx from 'clsx';
33
import { useState } from 'react';
44

55
function MobileSlideCommunity() {
6-
const [isClick,setIsClick] = useState(false)
6+
const [isClick, setIsClick] = useState(false);
77
return (
88
<section className="p-4 sm:p-12 bg-[#77688d] rounded-2xl sm:rounded-[30px] flex flex-col justify-center">
99
<article className="flex flex-col gap-5">
1010
<span className="hidden sm:block text-xl md:text-2xl font-black">2</span>
1111
<article className="flex flex-col gap-5">
12-
<header className='flex justify-between'>
12+
<header className="flex justify-between">
1313
<h2 className="text-xl sm:text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
1414
술술 즐기는, 커뮤니티
1515
</h2>
@@ -21,12 +21,14 @@ function MobileSlideCommunity() {
2121
<Add />
2222
</button>
2323
</header>
24-
<p className={clsx(
25-
`overflow-hidden text-md md:text-xl text-secondary font-normal leading-[1.5] flex flex-col gap-5 transition-all duration-500 `,
26-
isClick
27-
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
28-
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
29-
)}>
24+
<p
25+
className={clsx(
26+
`overflow-hidden text-md md:text-xl text-secondary font-normal leading-[1.5] flex flex-col gap-5 transition-all duration-500 `,
27+
isClick
28+
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
29+
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
30+
)}
31+
>
3032
칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
3133
초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
3234
<br />

0 commit comments

Comments
 (0)