Skip to content

Commit

Permalink
feat: 주류 상세 페이지 컴포넌트 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@y-ngm-n
y-ngm-n committed Nov 1, 2024
1 parent 077a647 commit 1a7ce18
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 139 deletions.
8 changes: 4 additions & 4 deletions src/app/liquors/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import LiquorInfoCardComponent from "@/components/LiquorInfoCardComponent/LiquorInfoCardComponent";
import LiquorUserTastingComponent from "@/components/LiquorUserTastingComponent/LiquorUserTastingComponent";
import {
Backdrop,
Box,
Button,
Divider,
Expand All @@ -10,11 +11,10 @@ import {
Typography,
} from "@mui/material";
import Image from "next/image";
import FloatingButton from "@/components/FloatingButton/FloatingButton";
import { Edit } from "@mui/icons-material";
import PageTitleComponent from "@/components/LayoutComponents/PageTitleComponent";
import PriceInfo from "@/components/PriceInfo/PriceInfo";
import { translateWhiskyNameToJapenese } from "@/utils/translateWhiskyNameToJapenese";
import CreateNoteDial from "@/components/FloatingButton/CreateNoteDial";

/** 주류 상세정보 API 요청 함수 */
const getLiquorInfo = async (id: string) => {
Expand Down Expand Up @@ -118,8 +118,8 @@ export default async function LiquorDetailPage({
<LiquorUserTastingComponent liquorId={id} />
</Stack>

{/* 테이스팅 리뷰 작성 버튼 */}
<FloatingButton link={`/tasting-notes/new?liquorId=${id}`} />
{/* 노트 작성 다이얼 */}
<CreateNoteDial liquorId={+id} offset={false} />
</Stack>
</Stack>
);
Expand Down
14 changes: 0 additions & 14 deletions src/app/mypage/[uuid]/liquor/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,6 @@ export default function MypageLiquorPage({
}: {
params: { uuid: string; id: string };
}) {
// 노트 작성 다이얼 옵션
const [dialOpen, setDialOpen] = useState(false);
// 다이얼 상태 변경 함수
const handleDialOpen = () => {
setDialOpen(true);
};
const handleDialClose = () => {
setDialOpen(false);
};

// 노트 목록 api query
const { data, status } = useQuery({
queryKey: ["userLiquorNoteList", id],
Expand Down Expand Up @@ -96,11 +86,7 @@ export default function MypageLiquorPage({
) : null}

{/* 노트 작성 다이얼 */}
<Backdrop open={dialOpen} />
<CreateNoteDial
dialOpen={dialOpen}
handleDialOpen={handleDialOpen}
handleDialClose={handleDialClose}
liquorId={
status == "success"
? data[0].type == "PURCHASE"
Expand Down
18 changes: 1 addition & 17 deletions src/app/notes-feed/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,6 @@ export default function NotesFeedPage() {

// 노트 유형 옵션 상태 관리
const [typeOption, setTypeOption] = useState("ALL");
// 노트 작성 다이얼 옵션
const [dialOpen, setDialOpen] = useState(false);

// useInfiniteQuery 설정
const { data, fetchNextPage, isFetchingNextPage, status } = useInfiniteQuery({
Expand Down Expand Up @@ -127,14 +125,6 @@ export default function NotesFeedPage() {
newTypeOption: string
) => setTypeOption(newTypeOption);

/** 다이얼 상태 변경 함수 */
const handleDialOpen = () => {
setDialOpen(true);
};
const handleDialClose = () => {
setDialOpen(false);
};

// return
return (
<ContainerBox>
Expand Down Expand Up @@ -197,13 +187,7 @@ export default function NotesFeedPage() {
)}

{/* 노트 작성 다이얼 */}
<Backdrop open={dialOpen} />
<CreateNoteDial
dialOpen={dialOpen}
handleDialOpen={handleDialOpen}
handleDialClose={handleDialClose}
offset
/>
<CreateNoteDial offset />
</ContainerBox>
);
}
Expand Down
17 changes: 13 additions & 4 deletions src/components/FloatingButton/CreateNoteDial.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
"use client";

import { ShoppingCartOutlined, WineBarOutlined } from "@mui/icons-material";
import { SpeedDial, SpeedDialAction, SpeedDialIcon } from "@mui/material";
import { useRouter } from "next/navigation";
import { useState } from "react";

interface CreateNoteDialProps {
dialOpen: boolean;
handleDialOpen: () => void;
handleDialClose: () => void;
liquorId?: number;
offset: boolean;
}

export default function CreateNoteDial(props: CreateNoteDialProps) {
// 노트 작성 다이얼 옵션
const [dialOpen, setDialOpen] = useState(false);
// 다이얼 상태 변경 함수
const handleDialOpen = () => {
setDialOpen(true);
};
const handleDialClose = () => {
setDialOpen(false);
};
const router = useRouter();
const { dialOpen, handleDialOpen, handleDialClose, liquorId, offset } = props;
const { liquorId, offset } = props;

/** 노트 작성 다이얼 옵션 */
const dialAction = [
Expand Down
202 changes: 102 additions & 100 deletions src/components/LiquorUserTastingComponent/LiquorUserTastingComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Image from "next/image";
import { useQuery } from "react-query";
import Link from "next/link";
import SingleTastingComponent from "../SingleTastingComponent/SingleTastingComponent";
import TastingNoteCard from "../NoteCard/TastingNoteCard";

/** 주류 유저 테이스팅 리뷰 목록 API 요청 함수 */
const getLiquorTastingList = async (id: number) => {
Expand All @@ -33,110 +34,111 @@ export default function LiquorUserTastingComponent({
<Stack sx={{ marginBottom: "10px", padding: "20px 0", gap: "15px" }}>
{status == "success" &&
(data && data.length ? (
data.map(({ type, tastingNote }) =>
data.map(({ type, tastingNote }, idx) =>
type == "TASTING" ? (
<Link
key={tastingNote.id}
href={`/tasting-notes/${tastingNote.id}`}
style={{ textDecoration: "none", color: "inherit" }}
>
<Stack
sx={{
border: "solid 1px #dddddd",
borderRadius: "5px 5px",
padding: "15px 25px",
gap: "15px",
}}
>
{/* 카드 헤더 */}
<Box
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
{/* 작성자 정보 */}
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "20px",
}}
>
<Image
src={
tastingNote.user.profileThumbnailImage || "default"
}
width={40}
height={40}
alt="user profile image"
style={{ borderRadius: "15px" }}
/>
<Stack sx={{ justifyContent: "center" }}>
<Typography sx={{ fontWeight: "500" }}>
{tastingNote.user.profileNickname}
</Typography>
<Typography sx={{ color: "gray", fontSize: "13px" }}>
{formatDateTime(tastingNote.createdAt)}
</Typography>
</Stack>
</Box>
{/* 작성자 총점 */}
<Box
sx={{
paddingRight: "5px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
{tastingNote.score && <Chip label={tastingNote.score} />}
</Box>
</Box>
<TastingNoteCard key={idx} note={tastingNote} />
) : // <Link
// key={tastingNote.id}
// href={`/tasting-notes/${tastingNote.id}`}
// style={{ textDecoration: "none", color: "inherit" }}
// >
// <Stack
// sx={{
// border: "solid 1px #dddddd",
// borderRadius: "5px 5px",
// padding: "15px 25px",
// gap: "15px",
// }}
// >
// {/* 카드 헤더 */}
// <Box
// sx={{
// display: "flex",
// flexDirection: "row",
// justifyContent: "space-between",
// alignItems: "center",
// }}
// >
// {/* 작성자 정보 */}
// <Box
// sx={{
// display: "flex",
// flexDirection: "row",
// alignItems: "center",
// gap: "20px",
// }}
// >
// <Image
// src={
// tastingNote.user.profileThumbnailImage || "default"
// }
// width={40}
// height={40}
// alt="user profile image"
// style={{ borderRadius: "15px" }}
// />
// <Stack sx={{ justifyContent: "center" }}>
// <Typography sx={{ fontWeight: "500" }}>
// {tastingNote.user.profileNickname}
// </Typography>
// <Typography sx={{ color: "gray", fontSize: "13px" }}>
// {formatDateTime(tastingNote.createdAt)}
// </Typography>
// </Stack>
// </Box>
// {/* 작성자 총점 */}
// <Box
// sx={{
// paddingRight: "5px",
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// }}
// >
// {tastingNote.score && <Chip label={tastingNote.score} />}
// </Box>
// </Box>

<Divider />
// <Divider />

{/* 테이스팅 리뷰 내용: 상세 */}
<Stack sx={{ gap: "5px" }}>
<SingleTastingComponent
keyContent="Nose"
valueContent="테이스팅 노트입니다."
detailContent={tastingNote.nose ? tastingNote.nose : ""}
keyMinWidth={50}
/>
<SingleTastingComponent
keyContent="Palate"
valueContent="테이스팅 노트입니다."
detailContent={tastingNote.nose ? tastingNote.nose : ""}
keyMinWidth={50}
/>
<SingleTastingComponent
keyContent="Finish"
valueContent="테이스팅 노트입니다."
detailContent={tastingNote.nose ? tastingNote.nose : ""}
keyMinWidth={50}
/>
</Stack>
// {/* 테이스팅 리뷰 내용: 상세 */}
// <Stack sx={{ gap: "5px" }}>
// <SingleTastingComponent
// keyContent="Nose"
// valueContent="테이스팅 노트입니다."
// detailContent={tastingNote.nose ? tastingNote.nose : ""}
// keyMinWidth={50}
// />
// <SingleTastingComponent
// keyContent="Palate"
// valueContent="테이스팅 노트입니다."
// detailContent={tastingNote.nose ? tastingNote.nose : ""}
// keyMinWidth={50}
// />
// <SingleTastingComponent
// keyContent="Finish"
// valueContent="테이스팅 노트입니다."
// detailContent={tastingNote.nose ? tastingNote.nose : ""}
// keyMinWidth={50}
// />
// </Stack>

{/* 테이스팅 리뷰 내용: 총평 */}
<Stack>
<Typography
sx={{
// overflow: "hidden",
// whiteSpace: "nowrap",
// textOverflow: "ellipsis",
fontSize: "15px",
}}
>
&nbsp;{tastingNote.content}
</Typography>
</Stack>
</Stack>
</Link>
) : null
// {/* 테이스팅 리뷰 내용: 총평 */}
// <Stack>
// <Typography
// sx={{
// // overflow: "hidden",
// // whiteSpace: "nowrap",
// // textOverflow: "ellipsis",
// fontSize: "15px",
// }}
// >
// &nbsp;{tastingNote.content}
// </Typography>
// </Stack>
// </Stack>
// </Link>
null
)
) : (
<Stack sx={{ padding: "30px 0", gap: "5px" }}>
Expand Down

0 comments on commit 1a7ce18

Please sign in to comment.