Skip to content

Commit 26344c0

Browse files
mtm-git1018mtm-git1018
committed
Merge remote-tracking branch 'origin/dev' into feat/mypage#106
2 parents a756403 + 189226e commit 26344c0

File tree

15 files changed

+168
-46
lines changed

15 files changed

+168
-46
lines changed

‎src/app/recommend/page.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1+
'use client';
2+
13
import ChatSection from '@/domains/recommend/components/ChatSection';
24
import Bg from '@/shared/assets/images/recommend_bg.webp';
5+
import { useAuthStore } from '@/domains/shared/store/auth';
6+
import ChatPreview from '@/domains/recommend/components/ChatPreview';
37

48
function Page() {
9+
const { user } = useAuthStore();
10+
511
return (
612
<div
713
className="relative bg-repeat bg-auto w-full flex flex-col"
814
style={{ backgroundImage: `url(${Bg.src})` }}
915
>
1016
<h1 className="sr-only">취향추천하기</h1>
11-
<ChatSection />
17+
{user ? <ChatSection /> : <ChatPreview />}
1218
</div>
1319
);
1420
}

‎src/domains/login/components/LoginRedirectHandler.tsx‎

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

33
import Spinner from '@/shared/components/spinner/Spinner';
44
import WelcomeModal from '@/domains/login/components/WelcomeModal';
5-
import { useLoginRedirect } from '../hook/useAuthHooks';
5+
import { useLoginRedirect } from '../hook/useLoginRedirect';
66

77
function LoginRedirectHandler() {
88
const { loading, welcomeModalOpen, handleCloseWelcomeModal, user } = useLoginRedirect();

‎src/domains/login/components/LogoutConfirm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
2-
import { useLogout } from '../hook/useAuthHooks';
2+
import { useLogout } from '../hook/useLogout';
33

44
interface Props {
55
open: boolean;

‎src/domains/login/hook/useAuthHooks.ts‎ renamed to ‎src/domains/login/hook/useLoginRedirect.ts‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,9 @@
11
import { useAuthStore } from '@/domains/shared/store/auth';
2-
import { useCallback } from 'react';
32
import { useEffect, useState } from 'react';
43
import { usePathname, useRouter } from 'next/navigation';
54
import { getCookie, removeCookie } from '@/domains/shared/auth/utils/cookie';
65
import { useToast } from '@/shared/hook/useToast';
76

8-
export const useLogout = () => {
9-
const logout = useAuthStore((state) => state.logout);
10-
const { toastSuccess, toastError } = useToast();
11-
12-
const handleLogout = useCallback(async () => {
13-
try {
14-
await logout();
15-
toastSuccess('로그아웃 되었습니다.');
16-
} catch (err) {
17-
console.error('로그아웃 실패', err);
18-
toastError('로그아웃 실패 ❌ 다시 시도해주세요.');
19-
}
20-
}, [logout, toastSuccess, toastError]);
21-
22-
return handleLogout;
23-
};
24-
257
export const useLoginRedirect = () => {
268
const router = useRouter();
279
const pathname = usePathname();

‎src/domains/login/hook/useLogout.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useAuthStore } from '@/domains/shared/store/auth';
2+
import { useToast } from '@/shared/hook/useToast';
3+
import { useCallback } from 'react';
4+
import { useRouter } from 'next/navigation';
5+
6+
export const useLogout = () => {
7+
const logout = useAuthStore((state) => state.logout);
8+
const { toastSuccess, toastError } = useToast();
9+
const router = useRouter();
10+
11+
const handleLogout = useCallback(async () => {
12+
try {
13+
await logout();
14+
toastSuccess('로그아웃 되었습니다.');
15+
16+
// 마이페이지 일 시 메인페이지로 이동
17+
if (window.location.pathname.startsWith('/mypage')) {
18+
router.push('/');
19+
}
20+
} catch (err) {
21+
console.error('로그아웃 실패', err);
22+
toastError('로그아웃 실패 ❌ 다시 시도해주세요.');
23+
}
24+
}, [logout, toastSuccess, toastError, router]);
25+
26+
return handleLogout;
27+
};

‎src/domains/mypage/components/pages/my-bar/MyBar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ function MyBar() {
2929
<div>
3030
{myCocktail.length !== 0 ? (
3131
<div
32-
className="grid grid-cols-1 justify-items-center mt-10 gap-8 sm:[grid-template-columns:repeat(2,minmax(0,320px))] sm:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]
32+
className="
33+
grid gap-8 md:justify-between justify-center
34+
[grid-template-columns:repeat(1,minmax(0,250px))]
35+
sm:[grid-template-columns:repeat(2,minmax(0,250px))]
36+
md:[grid-template-columns:repeat(3,minmax(0,250px))]
3337
"
3438
>
3539
{myCocktail.map(({ cocktailId, cocktailName, imageUrl }) => (

‎src/domains/recipe/main/CocktailList.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,23 @@ function CocktailList({ cocktails, RecipeFetch, hasNextPage, lastId, onItemClick
2727

2828
return (
2929
<ul
30-
className="place-content-between
31-
grid gap-8 justify-items-center
32-
grid-cols-1 sm:justify-items-stretch
33-
sm:[grid-template-columns:repeat(2,minmax(0,320px))] sm:gap-8 md:[grid-template-columns:repeat(3,minmax(0,250px))]
34-
lg:[grid-template-columns:repeat(4,minmax(0,250px))]
30+
className="
31+
grid gap-8 lg:justify-between justify-center
32+
[grid-template-columns:repeat(1,minmax(0,250px))]
33+
sm:[grid-template-columns:repeat(2,minmax(0,250px))]
34+
md:[grid-template-columns:repeat(3,minmax(0,250px))]
35+
lg:[grid-template-columns:repeat(4,minmax(0,250px))]
3536
"
3637
>
3738
{cocktails.map(
3839
({ cocktailImgUrl, cocktailId, cocktailName, cocktailNameKo, alcoholStrength }) => (
39-
<li key={cocktailId} onClick={onItemClick}>
40+
<li key={cocktailId} onClick={onItemClick} className="w-full">
4041
<Link
4142
href={`/recipe/${cocktailId}`}
4243
onClick={() => {
4344
sessionStorage.setItem('listScrollY', String(window.scrollY));
4445
}}
46+
className="block"
4547
>
4648
<CocktailCard
4749
id={cocktailId}

‎src/domains/recommend/components/ChatPreview.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import Ssury from '@/shared/assets/ssury/ssury_shaker.webp';
2+
import Image from 'next/image';
3+
import Send from '@/shared/assets/icons/send_36.svg';
4+
import Link from 'next/link';
5+
import { setPreLoginPath } from '@/domains/shared/auth/utils/setPreLoginPath';
6+
7+
function ChatPreview() {
8+
return (
9+
<section className="relative flex-1 flex flex-col w-full">
10+
<div className="page-layout max-w-1024 py-12">
11+
<article aria-label="취향추천 챗봇 메시지" className="">
12+
<header className="flex items-end">
13+
<div className="relative w-15 md:w-20 h-15 md:h-20">
14+
<Image
15+
src={Ssury}
16+
alt="쑤리아바타"
17+
width={80}
18+
height={80}
19+
className="object-cover w-15 h-15 md:w-20 md:h-20"
20+
/>
21+
</div>
22+
<p>쑤리</p>
23+
</header>
24+
25+
{/* 메시지 그룹 */}
26+
<div className="flex flex-col gap-3 mt-3 pl-3">
27+
<div>
28+
<div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black opacity-0 animate-fadeIn">
29+
<div>
30+
<p className="whitespace-pre-line">취향에 맞는 칵테일, 저와 함께 찾아볼까요?</p>
31+
<Link
32+
href="/login"
33+
onNavigate={async () => {
34+
await setPreLoginPath(window.location.pathname);
35+
}}
36+
className="block p-2 mt-3 flex-center font-semibold bg-gray-light rounded-3xl hover:bg-secondary hover:shadow-[inset_0_0_6px_rgba(255,196,1,1)] active:bg-secondary active:shadow-[inset_0_0_6px_rgba(255,196,1,1)]"
37+
>
38+
간편 로그인으로 빠르게 이용하기
39+
</Link>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</article>
45+
46+
<div className="fixed left-0 bottom-0 w-full px-3 py-4 flex-center bg-primary">
47+
<form onSubmit={(e) => e.preventDefault()} className="w-full max-w-[64rem]">
48+
<div className="flex items-end gap-2">
49+
<label htmlFor="chatInput" className="sr-only">
50+
질문 입력창
51+
</label>
52+
<textarea
53+
id="chatInput"
54+
name="chatInput"
55+
placeholder={'로그인 후 이용해주세요.'}
56+
disabled
57+
className={`
58+
w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5
59+
rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px]
60+
bg-white text-primary placeholder:text-gray-dark resize-none outline-none
61+
disabled:bg-gray disabled:text-gray-dark disabled:cursor-not-allowed
62+
`}
63+
/>
64+
<button
65+
type="button"
66+
aria-label="보내기"
67+
className="flex-center w-10 md:w-13 h-10 md:h-13 rounded-xl border-1 border-white bg-secondary/20"
68+
>
69+
<Send className="text-secondary" />
70+
</button>
71+
</div>
72+
</form>
73+
</div>
74+
</div>
75+
</section>
76+
);
77+
}
78+
export default ChatPreview;

‎src/domains/recommend/components/ChatSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import { useState } from 'react';
44
import MessageInput from './user/MessageInput';
55
import { fetchSendStepMessage, fetchSendTextMessage } from '../api/chat';
6-
import { useAuthStore } from '@/domains/shared/store/auth';
76
import { ChatMessage, stepPayload } from '../types/recommend';
87
import ChatList from './ChatList';
98
import { useChatInit } from '../hook/useChatInit';
109
import { useSelectedOptions } from '../hook/useSelectedOptions';
10+
import { useAuthStore } from '@/domains/shared/store/auth';
1111

1212
function ChatSection() {
1313
const [messages, setMessages] = useState<ChatMessage[]>([]);

‎src/domains/shared/components/cocktail-card/CocktailCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function CocktailCard({
3636
<div className="flex flex-col gap-4">
3737
<div
3838
className={tw(
39-
`${!className && 'w-80 h-75 md:w-62.5 '} rounded-xl overflow-hidden relative`,
39+
`${!className && 'w-full max-w-[15.625rem] h-75'} rounded-xl overflow-hidden relative`,
4040
className
4141
)}
4242
>

0 commit comments

Comments
 (0)