Skip to content

Commit f852a05

Browse files
mtm-git1018mtm-git1018
committed
[style] 메인페이지 슬라이드 반응형
1 parent e693077 commit f852a05

File tree

10 files changed

+146
-81
lines changed

10 files changed

+146
-81
lines changed

‎src/domains/community/api/fetchComment.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export const postComments = async (postId: number | ParamValue, content: string)
3232
credentials: 'include',
3333
body: JSON.stringify({ content }),
3434
});
35-
3635
const text = await res.text();
3736

3837
if (!res.ok) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface Props {
99

1010
function MainSlideDummyCard({ src, cocktailName }: Props) {
1111
return (
12-
<div className="relative flex flex-col w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
12+
<div className="relative flex flex-col w-50 sm:w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
1313
<div className="relative w-full h-[100px]">
1414
<Image src={src} fill className="object-cover" alt="" sizes="100px" priority />
1515
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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-fit min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
51+
<div 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,6 +60,7 @@ 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+
6364
)}
6465
>
6566
<span className="text-xs">{message}</span>

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

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ import Ssury4 from '@/shared/assets/ssury/ssury_level4.webp';
55
import Ssury5 from '@/shared/assets/ssury/ssury_level5.webp';
66
import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
77
import MainSsuryDrunk from '../MainSsuryDrunk';
8+
import Add from '@/shared/assets/icons/add_24.svg';
9+
import clsx from 'clsx';
10+
import { useState } from 'react';
811

912
function MobileAbv() {
13+
14+
const [isClick,setIsClick] = useState(false)
1015
const SSURY_DRUNK = [
1116
{
1217
id: 1,
@@ -41,31 +46,49 @@ function MobileAbv() {
4146
];
4247

4348
return (
44-
<section className="bg-[#84739e] rounded-[30px] p-12 flex flex-col justify-center">
45-
<div className="flex flex-col gap-5 lg:gap-0">
46-
<span className="font-black text-xl md:text-2xl">3</span>
49+
<section className="bg-[#84739e] rounded-2xl sm:rounded-[30px] p-4 sm:p-12 flex flex-col justify-center">
50+
<article className="flex flex-col gap-5 lg:gap-0">
51+
<span className="hidden sm:block font-black text-xl md:text-2xl">3</span>
4752
<div className="flex flex-col gap-5">
48-
<h2 className="text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
49-
내 알콜도수 UP
50-
</h2>
51-
<p className="text-md md:text-xl font-normal leading-[1.5]">
52-
5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
53-
알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
54-
</p>
55-
</div>
56-
<div className="flex flex-col gap-2">
57-
<ul className="flex gap-[5%] xl:gap-[10%]">
58-
{SSURY_DRUNK.map(({ id, src, abv }) => (
59-
<li key={id}>
60-
<MainSsuryDrunk src={src} abv={abv} />
61-
</li>
62-
))}
63-
</ul>
64-
<div className="w-full h-3 border border-gray rounded-full relative">
65-
<span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
53+
<header className="flex justify-between">
54+
<h2 className="text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
55+
내 알콜도수 UP
56+
</h2>
57+
<button
58+
type="button"
59+
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
60+
onClick={() => setIsClick(!isClick)}
61+
>
62+
<Add />
63+
</button>
64+
</header>
65+
<div
66+
className={clsx(
67+
`overflow-hidden flex flex-col gap-5 transition-all duration-500 `,
68+
isClick
69+
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
70+
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
71+
)}
72+
>
73+
<p className="text-md md:text-xl font-normal leading-[1.5]">
74+
5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
75+
알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
76+
</p>
77+
<div className="flex flex-col gap-2">
78+
<ul className="flex gap-[5%] md:gap-[8%]">
79+
{SSURY_DRUNK.map(({ id, src, abv }) => (
80+
<li key={id}>
81+
<MainSsuryDrunk src={src} abv={abv} />
82+
</li>
83+
))}
84+
</ul>
85+
<div className="w-full h-3 border border-gray rounded-full relative">
86+
<span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
87+
</div>
88+
</div>
6689
</div>
6790
</div>
68-
</div>
91+
</article>
6992
</section>
7093
);
7194
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import Image from 'next/image';
1+
22
import background from '@/shared/assets/images/main_slide.webp';
33
import MobileSlideTest from './MobileSlideTest';
44
import MobileSlideCommunity from './MobileSlideCommunity';
55
import MobileAbv from './MobileAbv';
66

77
function MobileSlide() {
88
return (
9-
<div>
10-
<Image src={background} alt="" fill className="-z-1"></Image>
11-
<h2 className="md:text-3xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
9+
<div className='sticky p-4 sm:p-12'
10+
style={{ backgroundImage: `url(${background.src})`, backgroundAttachment: 'fixed' }}>
11+
12+
<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)]">
1213
칵테일 <br /> 누구나 쉽게 즐길 수 있어요
1314
</h2>
14-
<p className="md:text-2xl font-normal">
15+
<p className="text-md md:text-2xl font-normal">
1516
SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
1617
</p>
1718
<div className="flex flex-col gap-10 mt-8">

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

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
1+
import Add from '@/shared/assets/icons/add_24.svg';
2+
import clsx from 'clsx';
3+
import { useState } from 'react';
4+
15
function MobileSlideCommunity() {
6+
const [isClick,setIsClick] = useState(false)
27
return (
3-
<section className="p-12 bg-[#77688d] rounded-[30px] flex flex-col justify-center">
4-
<div className="flex flex-col gap-5">
5-
<span className="text-xl md:text-2xl font-black">2</span>
6-
<div className="flex flex-col gap-5">
7-
<h2 className="text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
8-
술술 즐기는, 커뮤니티
9-
</h2>
10-
<p className="text-md md:text-xl text-secondary font-normal leading-[1.5]">
8+
<section className="p-4 sm:p-12 bg-[#77688d] rounded-2xl sm:rounded-[30px] flex flex-col justify-center">
9+
<article className="flex flex-col gap-5">
10+
<span className="hidden sm:block text-xl md:text-2xl font-black">2</span>
11+
<article className="flex flex-col gap-5">
12+
<header className='flex justify-between'>
13+
<h2 className="text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
14+
술술 즐기는, 커뮤니티
15+
</h2>
16+
<button
17+
type="button"
18+
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
19+
onClick={() => setIsClick(!isClick)}
20+
>
21+
<Add />
22+
</button>
23+
</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+
)}>
1130
칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
1231
초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
1332
<br />
1433
회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
1534
</p>
16-
</div>
17-
</div>
35+
</article>
36+
</article>
1837
</section>
1938
);
2039
}

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

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { useState } from 'react';
12
import MainTestDummy from '../MainTestDummy';
2-
3+
import Add from '@/shared/assets/icons/add_24.svg'
4+
import clsx from 'clsx';
35
const DUMMY_TEST = [
46
{
57
id: 1,
@@ -14,34 +16,55 @@ const DUMMY_TEST = [
1416
];
1517

1618
function MobileSlideTest() {
19+
const [isClick,setIsClick] = useState(false)
1720
return (
18-
<section className="p-12 bg-[#645a72] rounded-[30px] flex flex-col justify-center">
19-
<span className=" text-xl md:text-2xl font-black text-secondary">1</span>
20-
<div className="flex flex-col">
21-
<div className="flex flex-col gap-5">
22-
<h2 className="text-2xl md:text-3xl font-black text-secondary text-shadow text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
23-
AI기반 취향테스트
24-
</h2>
25-
<p className="text-md md:text-xl leading-[1.5] font-normal text-secondary">
26-
복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
27-
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
28-
</p>
29-
</div>
30-
<ul className="flex flex-col md:flex-row gap-8">
31-
<MainTestDummy
32-
message={
33-
<>
34-
안녕하세요! 🍹바텐더 쑤리에요.
35-
<br />
36-
취향에 맞는 칵테일을 추천해드릴게요. <br />
37-
어떤 유형으로 찾아드릴까요?
38-
</>
39-
}
40-
option={DUMMY_TEST}
41-
type="option"
42-
/>
43-
<MainTestDummy type="text" />
44-
</ul>
21+
<section className="p-4 sm:p-12 bg-[#645a72] rounded-2xl sm:rounded-[30px] flex flex-col sm:justify-center">
22+
<span className=" hidden sm:text-xl sm:block md:text-2xl font-black text-secondary">1</span>
23+
<div className="flex flex-col gap-3">
24+
<article className="flex flex-col gap-5">
25+
<header className="flex justify-between items-center">
26+
<h2 className="text-xl sm:text-2xl md:text-3xl font-black text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
27+
AI기반 취향테스트
28+
</h2>
29+
<button
30+
type="button"
31+
className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
32+
onClick={() => setIsClick(!isClick)}
33+
>
34+
<Add />
35+
</button>
36+
</header>
37+
<article
38+
className={clsx(
39+
`overflow-hidden flex flex-col gap-5 transition-all duration-500 `,
40+
isClick
41+
? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
42+
: 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
43+
)}
44+
>
45+
<div>
46+
<p className="text-md sm:text-md leading-[1.5] font-normal text-secondary">
47+
복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
48+
AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
49+
</p>
50+
</div>
51+
<ul className="flex flex-col lg:flex-row gap-8">
52+
<MainTestDummy
53+
message={
54+
<>
55+
안녕하세요! 🍹바텐더 쑤리에요.
56+
<br />
57+
취향에 맞는 칵테일을 추천해드릴게요. <br />
58+
어떤 유형으로 찾아드릴까요?
59+
</>
60+
}
61+
option={DUMMY_TEST}
62+
type="option"
63+
/>
64+
<MainTestDummy type="text" />
65+
</ul>
66+
</article>
67+
</article>
4568
</div>
4669
</section>
4770
);

‎src/domains/recipe/components/details/DetailsHeader.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ function DetailsHeader({ id, favor }: { id: number; favor: boolean | null }) {
2020
const url = async () => {
2121
const res = await fetch(`${getApi}/cocktails/${id}/share`);
2222
const json = await res.json();
23-
console.log(json.data);
2423
setMeta(json.data);
2524
};
2625

‎src/domains/recipe/components/details/RecipeComment.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,26 +26,26 @@ function RecipeComment({ cocktailId }: Props) {
2626
toastInfo('로그인 후 이용 가능합니다');
2727
return;
2828
}
29+
const body = {
30+
cocktailId,
31+
content:content
32+
}
2933

30-
try {
3134
const res = await fetch(`${getApi}/cocktails/${cocktailId}/comments`, {
3235
method: 'POST',
3336
headers: { 'Content-Type': 'application/json' },
3437
credentials: 'include',
35-
body: JSON.stringify({ content }),
38+
body: JSON.stringify(body),
3639
});
40+
3741
const text = await res.text();
38-
3942
if (!res.ok) {
4043
toastInfo('댓글은 한 개만 작성가능합니다');
4144
return;
4245
}
4346

4447
const data = JSON.parse(text);
4548
return data;
46-
} catch (err) {
47-
console.error(err);
48-
}
4949
};
5050

5151
const {

‎src/domains/recipe/components/main/Cocktails.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ function Cocktails() {
4444
: `전체 ${data.length}`;
4545

4646
// 초기 로드 시 검색어가 있으면 검색 실행
47-
// useEffect(() => {
48-
// const readyForFirstLoad = !isSearching && hasNextPage && lastId == null && data.length === 0;
47+
useEffect(() => {
48+
const readyForFirstLoad = !isSearching && hasNextPage && lastId == null && data.length === 0;
4949

50-
// if (readyForFirstLoad) {
51-
// fetchData();
52-
// }
53-
// }, [hasNextPage, lastId]);
50+
if (readyForFirstLoad) {
51+
fetchData();
52+
}
53+
}, [hasNextPage, lastId]);
5454

5555
// 검색어 변경 시
5656
useEffect(() => {

0 commit comments

Comments
 (0)