Skip to content

Commit b64bdc3

Browse files
wldnjs990wldnjs990
committed
design:랜덤편지 페이지 퍼블리싱
1 parent 6efd0b4 commit b64bdc3

File tree

5 files changed

+176
-100
lines changed

5 files changed

+176
-100
lines changed

‎src/pages/RandomLetters/Matched.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import ResultLetter from '@/components/ResultLetter';
2+
3+
export default function Matched() {
4+
return (
5+
<div className="mt-20 flex flex-col items-center justify-center">
6+
<div className="body-m flex flex-col items-center justify-center">
7+
<p className="text-gray-60">답장까지 남은 시간</p>
8+
<p className="text-gray-80">
9+
{'00'} : {'00'} : {'00'}
10+
</p>
11+
<div className="mt-2 w-75">
12+
<ResultLetter stampName="기타" title="테스트용가리" />
13+
</div>
14+
<button
15+
className="bg-primary-3 body-m mt-12.5 w-full cursor-pointer rounded-lg py-2"
16+
onClick={() => {}}
17+
>
18+
매칭 취소하기
19+
</button>
20+
</div>
21+
</div>
22+
);
23+
}

‎src/pages/RandomLetters/MatchingSelect.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { useEffect, useState } from 'react';
2+
import { EffectCards } from 'swiper/modules';
3+
import { Swiper, SwiperSlide } from 'swiper/react';
4+
import { twMerge } from 'tailwind-merge';
5+
6+
import 'swiper/swiper-bundle.css';
7+
8+
import { restartIcon } from '@/assets/icons';
9+
import ResultLetter from '@/components/ResultLetter';
10+
11+
export default function MatchingSelect({
12+
setOpenModal,
13+
setSelectedLetter,
14+
}: {
15+
setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
16+
setSelectedLetter: React.Dispatch<React.SetStateAction<SelectedLetter>>;
17+
}) {
18+
const [selectedCategory, setSelectedCategory] = useState('전체');
19+
20+
const CATEGORY_LIST = ['전체', '위로와 공감', '축하와 응원', '고민 상담', '기타'];
21+
const DUMMY_LIST: { stampName: Stamp; title: string }[] = [
22+
{ stampName: '위로와 공감', title: '위로가 필요해요' },
23+
{ stampName: '축하와 응원', title: '저에게 미움받을 용기를 주세요' },
24+
{ stampName: '고민 상담', title: '삶이 무료해서 고민이에요' },
25+
{ stampName: '기타', title: '어제 꾼 꿈이 신기했어요' },
26+
{ stampName: '고민 상담', title: '삶이 유료해서 고민이에요' },
27+
{ stampName: '축하와 응원', title: '어제 취업했어요!!!!' },
28+
{ stampName: '축하와 응원', title: '어제 게임 신기록 세웠어요!!!!!' },
29+
{ stampName: '기타', title: '기타는 핑거스타일이 멋있는거 같아요' },
30+
{ stampName: '위로와 공감', title: '10년지기 친구가 이사를 가요' },
31+
{
32+
stampName: '기타',
33+
title:
34+
'햄부기햄북 햄북어 햄북스딱스 함부르크햄부가우가 햄비기햄부거 햄부가티햄부기온앤 온 을 차려오거라.',
35+
},
36+
];
37+
38+
return (
39+
<>
40+
<div className="mt-25 flex flex-col items-start justify-center">
41+
<button className="flex gap-1">
42+
<img src={restartIcon} alt="재시작 아이콘" />
43+
<span className="caption-sb text-gray-30" onClick={() => {}}>
44+
리스트 새로고침
45+
</span>
46+
</button>
47+
<div className="w-full max-w-[300px]">
48+
<Swiper effect={'cards'} grabCursor={true} modules={[EffectCards]} className="mySwiper">
49+
{DUMMY_LIST.map((list, idx) => {
50+
return (
51+
<SwiperSlide key={idx} className="max-w-full">
52+
<div
53+
className="w-full cursor-pointer"
54+
onClick={() => {
55+
setOpenModal(true);
56+
setSelectedLetter(() => ({ stampName: list.stampName, title: list.title }));
57+
}}
58+
>
59+
<ResultLetter stampName={list.stampName} title={list.title} />
60+
</div>
61+
</SwiperSlide>
62+
);
63+
})}
64+
</Swiper>
65+
</div>
66+
</div>
67+
68+
<div className="mt-11 flex w-60 flex-wrap items-center justify-center gap-2">
69+
{CATEGORY_LIST.map((category, idx) => {
70+
return (
71+
<button
72+
onClick={() => {
73+
setSelectedCategory(category);
74+
}}
75+
className={twMerge(
76+
`body-b text-gray-60 rounded-full bg-white px-3 py-1.5`,
77+
selectedCategory === category && 'bg-primary-1 text-white',
78+
)}
79+
key={idx}
80+
>
81+
{category}
82+
</button>
83+
);
84+
})}
85+
</div>
86+
</>
87+
);
88+
}

‎src/pages/RandomLetters/MatchingSelectModal.tsx‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1+
import ModalOverlay from '@/components/ModalOverlay';
2+
import ResultLetter from '@/components/ResultLetter';
3+
14
function MatchingSelectModal({
25
setOpenModal,
6+
selectedLetter,
37
}: {
48
setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
9+
selectedLetter: SelectedLetter;
510
}) {
611
return (
7-
<div className="absolute top-0 left-0 flex h-full w-full flex-col items-center justify-center bg-black/60">
8-
<div className="body-sb flex flex-col items-center gap-1 text-white">
9-
<span>이 편지에 답장 하시겠어요?</span>
10-
<span>수락한 편지는 5분이 지나면 취소할 수 없습니다.</span>
12+
<ModalOverlay>
13+
<div className="flex-col items-center justify-center">
14+
<div className="body-sb flex flex-col items-center gap-1 text-white">
15+
<span>이 편지에 답장 하시겠어요?</span>
16+
<span>수락한 편지는 5분이 지나면 취소할 수 없습니다.</span>
17+
</div>
18+
<div className="mt-4 w-full">
19+
<ResultLetter stampName={selectedLetter.stampName} title={selectedLetter.title} />
20+
</div>
21+
<div className="mt-12.5 flex w-[300px] gap-4">
22+
<button
23+
className="bg-primary-4 body-m h-10 w-[calc(50%-8px)] rounded-lg text-gray-50"
24+
onClick={() => {
25+
setOpenModal(false);
26+
}}
27+
>
28+
거부하기
29+
</button>
30+
<button
31+
className="bg-primary-3 body-m h-10 w-[calc(50%-8px)] rounded-lg"
32+
onClick={() => {
33+
setOpenModal(false);
34+
}}
35+
>
36+
승인하기
37+
</button>
38+
</div>
1139
</div>
12-
<div className="bg-accent-3 mt-4 h-50 w-75"></div>
13-
<div className="mt-12.5 flex w-[300px] gap-4">
14-
<button
15-
className="bg-primary-4 body-m h-10 w-[calc(50%-8px)] rounded-lg text-gray-50"
16-
onClick={() => {
17-
setOpenModal(false);
18-
}}
19-
>
20-
거부하기
21-
</button>
22-
<button
23-
className="bg-primary-3 body-m h-10 w-[calc(50%-8px)] rounded-lg"
24-
onClick={() => {
25-
setOpenModal(false);
26-
}}
27-
>
28-
승인하기
29-
</button>
30-
</div>
31-
</div>
40+
</ModalOverlay>
3241
);
3342
}
3443
export default MatchingSelectModal;

‎src/pages/RandomLetters/index.tsx‎

Lines changed: 28 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,41 @@
11
import { useState } from 'react';
2-
import { EffectCards } from 'swiper/modules';
3-
import { Swiper, SwiperSlide } from 'swiper/react';
4-
import { twMerge } from 'tailwind-merge';
5-
6-
import 'swiper/swiper-bundle.css';
7-
8-
import { restartIcon } from '@/assets/icons';
9-
import BgItem from '@/assets/images/field-4.png';
10-
import ResultLetter from '@/components/ResultLetter';
11-
2+
import MatchingSelect from './MatchingSelect';
123
import MatchingSelectModal from './MatchingSelectModal';
4+
import Matched from './Matched';
5+
import BgItem from '@/assets/images/field-4.png';
6+
import LetterDetail from '@/components/LetterDetail';
137

148
const RandomLettersPage = () => {
15-
const categoryList = ['전체', '위로와 공감', '축하와 응원', '고민 상담', '기타'];
16-
const [selectedCategory, setSelectedCategory] = useState('전체');
179
const [openModal, setOpenModal] = useState<boolean>(false);
10+
const [selectedLetter, setSelectedLetter] = useState<SelectedLetter>({
11+
stampName: '기타',
12+
title: 'error',
13+
});
1814

19-
const DUMMY_LIST: { stampName: Stamp; title: string }[] = [
20-
{ stampName: '위로와 공감', title: '위로가 필요해요' },
21-
{ stampName: '축하와 응원', title: '저에게 미움받을 용기를 주세요' },
22-
{ stampName: '고민 상담', title: '삶이 무료해서 고민이에요' },
23-
{ stampName: '기타', title: '어제 꾼 꿈이 신기했어요' },
24-
{ stampName: '고민 상담', title: '삶이 유료해서 고민이에요' },
25-
{ stampName: '축하와 응원', title: '어제 취업했어요!!!!' },
26-
{ stampName: '축하와 응원', title: '어제 게임 신기록 세웠어요!!!!!' },
27-
{ stampName: '기타', title: '기타는 핑거스타일이 멋있는거 같아요' },
28-
{ stampName: '위로와 공감', title: '10년지기 친구가 이사를 가요' },
29-
{
30-
stampName: '기타',
31-
title:
32-
'햄부기햄북 햄북어 햄북스딱스 함부르크햄부가우가 햄비기햄부거 햄부가티햄부기온앤 온 을 차려오거라.',
33-
},
34-
];
15+
const DUMMY = {
16+
title: '나에게 햄버거 햄부기우기우가 햄북스따스 함부르크 햄버거링고를 대령하거라 ',
17+
text: '이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다.영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를 받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다. 나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디 대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요. 이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. ',
18+
};
3519

3620
return (
3721
<>
38-
{openModal && <MatchingSelectModal setOpenModal={setOpenModal} />}
39-
<div className="flex flex-col items-center">
40-
<span className="text-gray-60 body-b mt-20 rounded-full bg-white px-6 py-4">
41-
답장하고 싶은 편지를 선택해주세요!
42-
</span>
43-
<div className="mt-25 flex flex-col items-start gap-1.5">
44-
<button className="flex items-center gap-1">
45-
<img src={restartIcon} alt="재시작 아이콘" />
46-
<span className="caption-sb text-gray-30" onClick={() => {}}>
47-
리스트 새로고침
48-
</span>
49-
</button>
50-
<div className="mx-auto w-full max-w-75">
51-
<Swiper effect={'cards'} grabCursor={true} modules={[EffectCards]} className="mySwiper">
52-
{DUMMY_LIST.map((list, idx) => {
53-
return (
54-
<SwiperSlide key={idx}>
55-
<div className="w-full cursor-pointer" onClick={() => setOpenModal(true)}>
56-
<ResultLetter stampName={list.stampName} title={list.title} />
57-
</div>
58-
</SwiperSlide>
59-
);
60-
})}
61-
</Swiper>
62-
</div>
63-
</div>
64-
<div className="mt-11 flex w-60 flex-wrap items-center justify-center gap-2">
65-
{categoryList.map((category, idx) => {
66-
return (
67-
<button
68-
onClick={() => {
69-
setSelectedCategory(category);
70-
}}
71-
className={twMerge(
72-
`body-b text-gray-60 rounded-full bg-white px-3 py-1.5`,
73-
selectedCategory === category && 'bg-primary-1 text-white',
74-
)}
75-
key={idx}
76-
>
77-
{category}
78-
</button>
79-
);
80-
})}
22+
{false && (
23+
<div className="flex grow flex-col items-center overflow-hidden">
24+
<span className="text-gray-60 body-b mt-20 rounded-full bg-white px-6 py-4">
25+
답장하고 싶은 편지를 선택해주세요!
26+
</span>
27+
<MatchingSelect setOpenModal={setOpenModal} setSelectedLetter={setSelectedLetter} />
28+
{/* <Matched /> */}
29+
<div
30+
className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center opacity-70"
31+
style={{ '--bg-image': `url(${BgItem})` } as React.CSSProperties}
32+
/>
33+
{openModal && (
34+
<MatchingSelectModal setOpenModal={setOpenModal} selectedLetter={selectedLetter} />
35+
)}
8136
</div>
82-
<div
83-
className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center opacity-70"
84-
style={{ '--bg-image': `url(${BgItem})` } as React.CSSProperties}
85-
/>
86-
</div>
37+
)}
38+
<LetterDetail title={DUMMY.title} text={DUMMY.text}></LetterDetail>
8739
</>
8840
);
8941
};

‎src/types/random.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
interface SelectedLetter {
2+
stampName: Stamp;
3+
title: string;
4+
}

0 commit comments

Comments
 (0)