-
);
};
diff --git a/src/components/cafe/CafeCard.css b/src/components/card/CafeCard.css
similarity index 76%
rename from src/components/cafe/CafeCard.css
rename to src/components/card/CafeCard.css
index 0039b73..6ac1bc8 100644
--- a/src/components/cafe/CafeCard.css
+++ b/src/components/card/CafeCard.css
@@ -1,16 +1,34 @@
+:root {
+ --bg: #FFF7ED; /* 따뜻한 크림 베이스 */
+ --highlight: #FFE4D6;
+ --primary: #E4AFAF; /* 말린장미 포인트 */
+ --border: #E9D5CA;
+ --text: #5A4A42;
+}
/* ============================
CafeCard 전체 컨테이너
============================ */
.cafe-card {
width: 100%;
- padding: 10px 0;
+ padding: 10px 10px;
border-bottom: 1px solid #eee;
+ background-color: white;
+ border-radius: 12px;
+ border: 1px solid #E4AFAF;
+ margin-top: 10px;
+ /* margin-bottom: 10px; */
}
+
+/* 카페 이용 목적 마우스 오버 */
+
.cafe-card:hover {
- opacity: 0.95;
+ transform: scale(1.02);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+ background-color: var(--highlight);
+ cursor: pointer;
+ transition: all 0.3s ease;
}
-
/* 카드 내부 가로 배치 */
.cafe-card-div {
display: flex;
@@ -26,6 +44,7 @@
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
+ border: 1px solid #ddd;
}
.cafe-thumbnail {
diff --git a/src/components/cafe/CafeCard.tsx b/src/components/card/CafeCard.tsx
similarity index 71%
rename from src/components/cafe/CafeCard.tsx
rename to src/components/card/CafeCard.tsx
index 0f3f8cd..4721f23 100644
--- a/src/components/cafe/CafeCard.tsx
+++ b/src/components/card/CafeCard.tsx
@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./CafeCard.css";
export interface CafeCardData {
id: number;
name: string;
- category?: string;
- purpose?: string[];
- imageList?: { imageUrl: string; index: number }[];
+ category: string;
+ purpose: string[];
+ imageList: { imageUrl: string; index: number }[];
location?: string[];
rating?: number;
startingTime?: string;
@@ -15,6 +15,8 @@ export interface CafeCardData {
tags?: string[];
}
+const IMAGE_BASE_URL = "https://tmp.studyspot.kr";
+
interface CafeCardProps {
cafe: CafeCardData;
}
@@ -23,6 +25,14 @@ const CafeCard: React.FC navigate("/timer")}
- >
- alarm
- 타이머
-
- navigate("/")}
- >
- home
- 홈
-
- navigate("/search")}
- >
- search
- 검색
-
+ {navItems.map((item) => (
+ navigate(item.path)}
+ >
+ {item.icon}
+ {item.label}
+
+ ))}
{cafe.name}
-⭐ {cafe.rating}
+⭐ {cafe.rating ?? "N/A"}
📍 {cafe.location?.join(", ")}
++ 📍 {cafe.location?.length ? cafe.location.join(", ") : "정보없음"} +
{openStatus === "OPEN"
@@ -77,7 +91,7 @@ const CafeCard: React.FC = ({ cafe }) => {
- {cafe.purpose?.map((tag) => (
+ {(cafe.purpose?.length ? cafe.purpose : cafe.tags)?.map((tag) => (
{tag}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..e78f327
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+interface CardProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function Card({ children, className }: CardProps) {
+ return
-
-
-
);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
diff --git a/src/pages/CafeDetail.tsx b/src/pages/CafeDetail.tsx
new file mode 100644
index 0000000..f0fd5cb
--- /dev/null
+++ b/src/pages/CafeDetail.tsx
@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getCafeDetail, getCafeReviews, postCafeReview } from "../api/cafeApi";
+import "../styles/CafeDetail.css";
+
+interface Cafe {
+ id: number;
+ name: string;
+ location: string;
+ tags: string[];
+ thumbnail?: string;
+}
+
+interface Review {
+ id: number;
+ rating: number;
+ comment: string;
+ author: string;
+ createdAt?: string;
+}
+
+const CafeDetail: React.FC = () => {
+ const { cafeId } = useParams<{ cafeId: string }>();
+ const [cafe, setCafe] = useState(null);
+ const [reviews, setReviews] = useState([]);
+ const [newRating, setNewRating] = useState(0);
+ const [newComment, setNewComment] = useState("");
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ if (!cafeId) return;
+
+ const fetchData = async () => {
+ try {
+ const [cafeData, reviewData] = await Promise.all([
+ getCafeDetail(cafeId!), // string 그대로 전달, !로 undefined 제외
+ getCafeReviews(cafeId!),
+ ]);
+
+ setCafe(cafeData);
+ setReviews(
+ reviewData.map((r: any) => ({ ...r, author: r.author ? r.author : "익명" }))
+ );
+ } catch (err) {
+ console.error("카페 상세정보 불러오기 실패:", err);
+ } finally {
+ setLoading(false);
+ }
+};
+
+
+ fetchData();
+ }, [cafeId]);
+
+ const handleReviewSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!cafeId) return;
+
+ try {
+ await postCafeReview(cafeId!, { rating: newRating, comment: newComment });
+
+ const updatedReviews = await getCafeReviews(cafeId!);
+ setReviews(
+ updatedReviews.map((r: any) => ({ ...r, author: r.author ? r.author : "익명" }))
+ );
+
+ setNewRating(0);
+ setNewComment("");
+ } catch (err) {
+ console.error("리뷰 등록 실패:", err);
+ }
+};
+
+
+ if (loading) return
{children}
;
+}
+
+export function CardContent({ children, className }: CardProps) {
+ return {children}
;
+}
diff --git a/src/components/utils/normalizeCafe.ts b/src/components/utils/normalizeCafe.ts
new file mode 100644
index 0000000..eec1700
--- /dev/null
+++ b/src/components/utils/normalizeCafe.ts
@@ -0,0 +1,66 @@
+// 서버에서 받은 데이터(c: any)를 CafeCardData 형태로 변환
+export const normalizeCafe = (c: any) => {
+ return {
+ id: c.id,
+ name: c.name,
+
+ // 카테고리 (없으면 기본값)
+ category: c.category || "기타",
+
+ // 목적(purpose는 추천카페 API에는 없음 → 기본 [])
+ purpose: c.purpose || [],
+
+ // 이미지 처리
+ // 추천카페 API → imageUrl
+ // 상세페이지 API → imageList: [{ imageUrl, sequence }]
+ imageList: c.imageList
+ ? c.imageList.map((img: any, idx: number) => ({
+ imageUrl: img.imageUrl,
+ index: img.sequence ?? idx,
+ }))
+ : c.imageUrl
+ ? [{ imageUrl: c.imageUrl, index: 0 }]
+ : [],
+
+ // 위치 처리 (추천카페는 address, 상세페이지는 location [lat, lng])
+ location: Array.isArray(c.location)
+ ? c.location.map((l: any) => String(l))
+ : c.address
+ ? [c.address]
+ : [],
+
+ // 평점
+ rating: c.averageStarRating ?? c.rating ?? 0,
+
+ startingTime: c.startingTime,
+ closingTime: c.closingTime,
+
+ // 태그
+ // 추천카페 → tags: ["콘센트 많음", "주차 가능"]
+ // 상세페이지 → tags: { powerOutletLevel: "...", ... }
+ tags: Array.isArray(c.tags)
+ ? c.tags // 추천카페
+ : c.tags
+ ? Object.values(c.tags) // 상세페이지
+ : [],
+
+ // 상세페이지용 값들 추가 (추천카페에는 없지만 있어도 문제X)
+ phoneNumber: c.phoneNumber || "",
+ limitTime: c.limitTime ?? null,
+ menuList: c.menuList || [],
+ };
+};
+
+
+export interface CafeCardData {
+ id: number;
+ name: string;
+ category: string;
+ purpose: string[];
+ imageList: { imageUrl: string; index: number }[];
+ location?: string[];
+ rating?: number;
+ startingTime?: string;
+ closingTime?: string;
+ tags?: string[];
+}
\ No newline at end of file
diff --git a/src/config/api.ts b/src/config/api.ts
new file mode 100644
index 0000000..9360f93
--- /dev/null
+++ b/src/config/api.ts
@@ -0,0 +1,8 @@
+// API 설정 파일
+// 환경 변수에서 API Base URL 가져오기
+
+export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || "https://studyspot.kr/api";
+
+// 네이버 맵 API 클라이언트 ID
+export const NAVER_MAP_CLIENT_ID = process.env.REACT_APP_NAVER_MAP_CLIENT_ID || "d8111nt3ma";
+
diff --git a/src/index.tsx b/src/index.tsx
index 03f0956..bc4abdd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,22 +8,10 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
-
로딩 중...
;
+ if (!cafe) return 카페 정보를 불러오지 못했습니다.
;
+
+ return (
+
+ 
}
+
{cafe.name}
+ {cafe.thumbnail &&{cafe.location}
+{cafe.tags.map((tag, i) => #{tag})}
+
+ 리뷰
+-
+ {reviews.map((review) => (
+
- + ⭐ {review.rating} - {review.comment} - {review.author} + + ))} +