- 국밥 공을기
- 중식당
+ {name}
+ {category}
- {isOpen && (
-
-
두번째 방문인데 여전히 학교 주변에 숨겨진 맛집. 주인 아주머니가 친절하시고 가격도 싸다. 자주 방문할 것 같다.두번째 방문인데 여전히 학교 주변에 숨겨진 맛집. 주인 아주머니가 친절하시고 가격도 싸다. 자주 방문할 것 같다.
-
-
02/22
-
|
-
-
-
4.0
+ {!isLoading && reviews.map((review) => (
+ isOpen && (
+
+
{review.content}
+
+
{review.createdAt}
+
|
+
+
+
+ {parseFloat(review.rate.toString()).toFixed(1)}
+
+
-
- )}
+ )
+ ))}
);
}
export default function MoileBoard({ posts }:MobileBoardProps) {
+ const { getTotal } = useMyProfile();
return (
- {posts.length !== 0 ? (
+ {posts ? (
<>
-
총 120개의 리뷰
- {posts.map(() => (
- <>
-
+
{`총 ${getTotal()}개의 리뷰`}
+ {posts.map((post) => (
+
))}
) : (
@@ -65,7 +81,6 @@ export default function MoileBoard({ posts }:MobileBoardProps) {
)}
-
);
}
diff --git a/src/pages/MyPage/components/MyPost/index.tsx b/src/pages/MyPage/components/MyPost/index.tsx
index 25cbf541..e9ab9270 100644
--- a/src/pages/MyPage/components/MyPost/index.tsx
+++ b/src/pages/MyPage/components/MyPost/index.tsx
@@ -5,6 +5,7 @@ import filledHamberger from 'assets/svg/mypage/hamberger-filled.svg';
import hamberger from 'assets/svg/mypage/hamberger.svg';
import useMediaQuery from 'utils/hooks/useMediaQuery';
import notExist from 'assets/svg/mypage/not-exist.svg';
+import useReviwedShops from 'pages/MyPage/hooks/useReviewedShops';
import styles from './MyPost.module.scss';
import CheckerBoard from '../Checkerboard';
import DUMMY from './dummy';
@@ -13,10 +14,12 @@ import MobileBoard from '../MobileBoard';
export default function MyPost() {
const [viewType, setType] = useState('CHECKERBOARD');
+ const { isLoading, isError, shops } = useReviwedShops();
+ console.log(isLoading, isError, shops);
const { isMobile } = useMediaQuery();
return (
- {DUMMY.length !== 0 ? (
+ {!isLoading && !isError && shops?.length !== 0 ? (
<>
{!isMobile && viewType === 'CHECKERBOARD' &&
}
{!isMobile && viewType === 'HAMBERGER' &&
}
- {isMobile &&
}
+ {isMobile &&
}
) : (
+ !isMobile
+ && (
둥록된 리뷰가 없어요.
@@ -38,6 +43,7 @@ export default function MyPost() {
+ )
)}
diff --git a/src/pages/MyPage/hooks/useMyProfile.ts b/src/pages/MyPage/hooks/useMyProfile.ts
new file mode 100644
index 00000000..9960b736
--- /dev/null
+++ b/src/pages/MyPage/hooks/useMyProfile.ts
@@ -0,0 +1,18 @@
+import { getMe } from 'api/user';
+import { User } from 'api/user/entity';
+import { useQuery } from 'react-query';
+
+type Profile = User & {
+ profileImage?: {
+ url: string
+ },
+};
+const useMyProfile = () => {
+ const { data, isLoading } = useQuery('profile', getMe);
+ const profile:Profile | null = data ? data.data : null;
+ const getTotal = () => (data ? data.data.userCountResponse.reviewCount : 0);
+
+ return { profile, isLoading, getTotal };
+};
+
+export default useMyProfile;
diff --git a/src/pages/MyPage/hooks/useReviewedShops.ts b/src/pages/MyPage/hooks/useReviewedShops.ts
new file mode 100644
index 00000000..873bc245
--- /dev/null
+++ b/src/pages/MyPage/hooks/useReviewedShops.ts
@@ -0,0 +1,10 @@
+import { getReviewedShops } from 'api/mypage';
+import { useQuery } from 'react-query';
+
+const useReviwedShops = () => {
+ const { isLoading, isError, data } = useQuery('reviewedShops', () => getReviewedShops());
+ const shops = data ? data.data.content : [];
+ return { isLoading, isError, shops };
+};
+
+export default useReviwedShops;
diff --git a/src/pages/MyPage/hooks/useReviews.ts b/src/pages/MyPage/hooks/useReviews.ts
new file mode 100644
index 00000000..0b0a67d7
--- /dev/null
+++ b/src/pages/MyPage/hooks/useReviews.ts
@@ -0,0 +1,10 @@
+import { getReviews } from 'api/mypage';
+import { useQuery } from 'react-query';
+
+const useReviwes = (placeId:string) => {
+ const { isLoading, isError, data } = useQuery(['reviews', placeId], () => getReviews(placeId));
+ const reviews = data ? data.data.content : [];
+ return { isLoading, isError, reviews };
+};
+
+export default useReviwes;
From 78bbee045ec83d1071ecd0912ee6b9666db9ee2f Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Thu, 3 Aug 2023 22:07:22 +0900
Subject: [PATCH 13/45] =?UTF-8?q?feat:=20=ED=8E=BC=EC=B9=98=EA=B8=B0=20?=
=?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20label?=
=?UTF-8?q?=EB=A1=9C=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/MyPage/components/MobileBoard/index.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/pages/MyPage/components/MobileBoard/index.tsx b/src/pages/MyPage/components/MobileBoard/index.tsx
index 8e174b60..2dcfde46 100644
--- a/src/pages/MyPage/components/MobileBoard/index.tsx
+++ b/src/pages/MyPage/components/MobileBoard/index.tsx
@@ -23,15 +23,15 @@ function Review({
const { reviews, isLoading } = useReviwes(placeId);
return (
-
+
+
{!isLoading && reviews.map((review) => (
isOpen && (
From ce8174665163afdd6fe7053f6e94aa77aabc4f01 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sat, 5 Aug 2023 17:42:27 +0900
Subject: [PATCH 14/45] =?UTF-8?q?feat:=20=EB=B6=81=EB=A7=88=ED=81=AC=20api?=
=?UTF-8?q?=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mypage/entity.ts | 13 ++++++++++++
src/api/mypage/index.ts | 8 +++++---
src/api/mypage/mypageApiClient.ts | 2 +-
.../MyPage/components/BookMark/index.tsx | 20 +++++++++----------
src/pages/MyPage/hooks/useScraps.ts | 10 ++++++++++
5 files changed, 39 insertions(+), 14 deletions(-)
create mode 100644 src/pages/MyPage/hooks/useScraps.ts
diff --git a/src/api/mypage/entity.ts b/src/api/mypage/entity.ts
index ae541be5..09ad08c8 100644
--- a/src/api/mypage/entity.ts
+++ b/src/api/mypage/entity.ts
@@ -20,3 +20,16 @@ export type Review = {
export interface ReviewsResPonse {
content: Review[]
}
+
+export type Scrap = {
+ placeId: string,
+ category: string,
+ name:string,
+ photo: string,
+ ratingCount: number,
+ scrapId: number,
+ totalRating: number
+};
+export interface ScrapResponse {
+ content: Scrap[]
+}
diff --git a/src/api/mypage/index.ts b/src/api/mypage/index.ts
index 4852a8ea..a8a60b3b 100644
--- a/src/api/mypage/index.ts
+++ b/src/api/mypage/index.ts
@@ -1,6 +1,8 @@
-import { ReviewedShopsResponse, ReviewsResPonse } from './entity';
+import { ReviewedShopsResponse, ReviewsResPonse, ScrapResponse } from './entity';
import myPageApi from './mypageApiClient';
-export const getReviewedShops = async () => myPageApi.get
('/shops');
+export const getReviewedShops = async () => myPageApi.get('/review/shops');
-export const getReviews = async (placeId:string) => myPageApi.get(`/shop/${placeId}`);
+export const getReviews = async (placeId:string) => myPageApi.get(`/review/shop/${placeId}`);
+
+export const getScraps = async () => myPageApi.get('/scraps');
diff --git a/src/api/mypage/mypageApiClient.ts b/src/api/mypage/mypageApiClient.ts
index b8490629..03b38f50 100644
--- a/src/api/mypage/mypageApiClient.ts
+++ b/src/api/mypage/mypageApiClient.ts
@@ -2,7 +2,7 @@ import { API_PATH } from 'config/constants';
import axios from 'axios';
const myPageApi = axios.create({
- baseURL: `${API_PATH}/review`,
+ baseURL: `${API_PATH}`,
timeout: 2000,
});
diff --git a/src/pages/MyPage/components/BookMark/index.tsx b/src/pages/MyPage/components/BookMark/index.tsx
index 505335eb..3ef386e7 100644
--- a/src/pages/MyPage/components/BookMark/index.tsx
+++ b/src/pages/MyPage/components/BookMark/index.tsx
@@ -1,27 +1,28 @@
import filledStar from 'assets/svg/mypage/star-filled.svg';
import defaultImage from 'assets/images/search/default-image.png';
import notExist from 'assets/svg/mypage/not-exist.svg';
-import DUMMY from '../MyPost/dummy';
+import useScraps from 'pages/MyPage/hooks/useScraps';
import styles from './BookMark.module.scss';
export default function BookMark() {
+ const { scraps, isLoading } = useScraps();
return (
- {DUMMY.length !== 0 ? (
+ {!isLoading && scraps.length !== 0 ? (
<>
-
{`총 ${DUMMY.length}개의 음식점`}
- {DUMMY.map(() => (
-
+
{`총 ${scraps.length}개의 음식점`}
+ {scraps.map((scrap) => (
+
- 국밥 공을기
- 중식당
+ {scrap.name}
+ {scrap.category}
-
4.0
+
{parseFloat((scrap.totalRating / scrap.ratingCount).toString()).toFixed(1)}
-
+
))}
@@ -35,7 +36,6 @@ export default function BookMark() {
)}
-
-
- 둥록된 리뷰가 없어요.
- 다녀온 음식점의 리뷰를 작성해 보세요!
-
-
-
+
+ 둥록된 리뷰가 없어요.
+ 다녀온 음식점의 리뷰를 작성해 보세요!
+
+
+
-
+
+
{profile?.nickname}
@@ -41,7 +46,6 @@ export default function Information() {
)}
{isMobile &&
}
-
);
}
diff --git a/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
new file mode 100644
index 00000000..d635e71c
--- /dev/null
+++ b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
@@ -0,0 +1,99 @@
+.phrase {
+ display: block;
+ color: #000000;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 22.46px;
+ margin-bottom: 30px;
+}
+
+.form {
+ &__upload {
+ background: inherit;
+ border: none;
+ box-shadow: none;
+ border-radius: 0;
+ padding: 0;
+ display: block;
+ margin: 0 auto;
+ margin-bottom: 25px;
+
+ &--image {
+ position: relative;
+ }
+
+ &--profile {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ }
+
+ &--plus {
+ position: absolute;
+ bottom: 3px;
+ right: 3px;
+ border-radius: 50%;
+ }
+ }
+
+ &__name {
+ position: relative;
+ margin: 0 auto;
+ width: 48%;
+ margin-bottom: 50px;
+ }
+
+ &__buttons {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ margin: 0 auto;
+
+ &--cancle {
+ all: unset;
+ width: 45%;
+ height: 40px;
+ font-size: 16px;
+ color: #ffffff;
+ background-color: #c4c4c4;
+ outline: 0;
+ text-align: center;
+ border-radius: 999px;
+ }
+
+ &--complete {
+ all: unset;
+ width: 45%;
+ height: 40px;
+ font-size: 16px;
+ color: #ffffff;
+ background-color: #ff7f23;
+ outline: 0;
+ text-align: center;
+ border-radius: 999px;
+ }
+ }
+}
+
+.name {
+ &__input {
+ display: block;
+ width: calc(100% - 40px);
+ border: none;
+ margin: 0 auto;
+ border-bottom: 1px solid #c4c4c4;
+ padding: 4px 10px;
+ padding-right: 30px;
+ position: relative;
+ outline: none;
+ }
+
+ &__length {
+ display: block;
+ width: 20px;
+ right: 3px;
+ top: 5px;
+ position: absolute;
+ font-size: 10px;
+ }
+}
diff --git a/src/pages/MyPage/components/ProfileModal/index.tsx b/src/pages/MyPage/components/ProfileModal/index.tsx
new file mode 100644
index 00000000..ea0f823a
--- /dev/null
+++ b/src/pages/MyPage/components/ProfileModal/index.tsx
@@ -0,0 +1,46 @@
+import defaultImage from 'assets/images/follow/default-image.png';
+import plus from 'assets/svg/mypage/plus.svg';
+import { toast } from 'react-toastify';
+import { useState } from 'react';
+import styles from './ProfileModal.module.scss';
+
+interface ProfileModalProps {
+ imgUrl:string | undefined
+}
+
+export default function ProfileModal({ imgUrl }:ProfileModalProps) {
+ const [nameLength, setName] = useState(7);
+ const changeName = (e:React.ChangeEvent
) => {
+ if (e.target.value.length <= 10) {
+ setName(e.target.value.length);
+ }
+ };
+ const closeModal = () => {
+ toast.dismiss();
+ };
+ return (
+
+
+ 이병건이올씨다님,
+
+ 프로필을 변경하시겠어요?
+
+
+
-
+
+
{board === 'MYPOST' && }
{board === 'BOOKMARK' && }
{isMobile &&
}
+ {isOpen &&
}
);
}
From 17281f55ad27d78ec20c32e3db45481e54a210bb Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:45:38 +0900
Subject: [PATCH 17/45] =?UTF-8?q?sylte:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
=?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=AA=A8=EB=8B=AC=20height=20=EB=B3=80?=
=?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/MyPage/MyPage.module.scss | 11 +++++++----
.../components/ProfileModal/ProfileModal.module.scss | 2 +-
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss
index 46f1f419..a750e391 100644
--- a/src/pages/MyPage/MyPage.module.scss
+++ b/src/pages/MyPage/MyPage.module.scss
@@ -17,18 +17,21 @@
position: fixed;
top: 0;
left: 0;
- width: 100vw;
- height: 100vh;
+ right: 0;
+ bottom: 0;
+
+ // width: 200vw;
+ // height: 100vh;
background-color: rgb(0 0 0 / 50%);
opacity: 1;
}
.bottom-sheet {
- height: 50vh;
+ height: 400px;
padding: 28px 24px 35px 28px;
border-radius: 10% 10% 0 0;
@media (max-height: 500px) {
- height: 70vh;
+ height: 300px;
}
}
diff --git a/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
index d635e71c..8332cab3 100644
--- a/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
+++ b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
@@ -92,7 +92,7 @@
display: block;
width: 20px;
right: 3px;
- top: 5px;
+ top: 7px;
position: absolute;
font-size: 10px;
}
From 6133c2869e1a2683a88997fa40e4cac246ada8f9 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 9 Aug 2023 20:10:50 +0900
Subject: [PATCH 18/45] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
=?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD=20api=20?=
=?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mypage/entity.ts | 9 ++++
src/api/mypage/index.ts | 16 +++++-
.../ProfileModal/ProfileModal.module.scss | 7 +++
.../MyPage/components/ProfileModal/index.tsx | 14 ++++--
src/pages/MyPage/hooks/useChangeProfile.ts | 49 +++++++++++++++++++
5 files changed, 90 insertions(+), 5 deletions(-)
create mode 100644 src/pages/MyPage/hooks/useChangeProfile.ts
diff --git a/src/api/mypage/entity.ts b/src/api/mypage/entity.ts
index 09ad08c8..6eb36de8 100644
--- a/src/api/mypage/entity.ts
+++ b/src/api/mypage/entity.ts
@@ -33,3 +33,12 @@ export type Scrap = {
export interface ScrapResponse {
content: Scrap[]
}
+
+export interface PatchProfileImageResponse {
+ profileImage: {
+ id: number,
+ originalName: string,
+ path: string,
+ url: string
+ }
+}
diff --git a/src/api/mypage/index.ts b/src/api/mypage/index.ts
index a8a60b3b..9ebd1532 100644
--- a/src/api/mypage/index.ts
+++ b/src/api/mypage/index.ts
@@ -1,4 +1,6 @@
-import { ReviewedShopsResponse, ReviewsResPonse, ScrapResponse } from './entity';
+import {
+ PatchProfileImageResponse, ReviewedShopsResponse, ReviewsResPonse, ScrapResponse,
+} from './entity';
import myPageApi from './mypageApiClient';
export const getReviewedShops = async () => myPageApi.get
('/review/shops');
@@ -6,3 +8,15 @@ export const getReviewedShops = async () => myPageApi.get
export const getReviews = async (placeId:string) => myPageApi.get(`/review/shop/${placeId}`);
export const getScraps = async () => myPageApi.get('/scraps');
+
+export const patchProfileImage = async (image:FormData | null) => myPageApi.patch('/user/profile', image, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+});
+
+export const patchDefaultImage = async () => myPageApi.patch('/user/profile', {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+});
diff --git a/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
index 8332cab3..48d637ef 100644
--- a/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
+++ b/src/pages/MyPage/components/ProfileModal/ProfileModal.module.scss
@@ -8,6 +8,10 @@
}
.form {
+ &__image-input {
+ display: none;
+ }
+
&__upload {
background: inherit;
border: none;
@@ -19,6 +23,9 @@
margin-bottom: 25px;
&--image {
+ width: 100px;
+ height: 100px;
+ margin: 0 auto;
position: relative;
}
diff --git a/src/pages/MyPage/components/ProfileModal/index.tsx b/src/pages/MyPage/components/ProfileModal/index.tsx
index ea0f823a..87943c7a 100644
--- a/src/pages/MyPage/components/ProfileModal/index.tsx
+++ b/src/pages/MyPage/components/ProfileModal/index.tsx
@@ -2,6 +2,7 @@ import defaultImage from 'assets/images/follow/default-image.png';
import plus from 'assets/svg/mypage/plus.svg';
import { toast } from 'react-toastify';
import { useState } from 'react';
+import useChangeProfile from 'pages/MyPage/hooks/useChangeProfile';
import styles from './ProfileModal.module.scss';
interface ProfileModalProps {
@@ -18,6 +19,9 @@ export default function ProfileModal({ imgUrl }:ProfileModalProps) {
const closeModal = () => {
toast.dismiss();
};
+ const {
+ onChange, onclick, previewUrl,
+ } = useChangeProfile();
return (
@@ -25,13 +29,15 @@ export default function ProfileModal({ imgUrl }:ProfileModalProps) {
프로필을 변경하시겠어요?
-