From 6cbfc13f6304f9ec7af37f554095ec890f5773ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 20 Jul 2023 00:52:07 +0900 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20padding=EA=B0=92=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20star=EC=9D=98=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=EA=B0=80=20=EB=B3=80=ED=95=98=EB=8A=94=20=EC=9D=B4=EC=8A=88=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/layout.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 6660bbb1..54115a3c 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -41,9 +41,11 @@ function RootLayout({
-
-
-
+ +
+
+
+ {children} @@ -62,8 +64,12 @@ const Applayout = styled.div` overflow: hidden; height: calc(100svh - 55px); ${media.medium} { - padding-top: 37px; + padding: 40px 16px 0; } `; +const Stars = styled.div` + height: 100%; +`; + export default RootLayout; From 5141608ba89355c5298221fc29dad97581b3b605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 20 Jul 2023 16:29:59 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=ED=95=9C=20=EB=8F=84=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=EC=97=90=EC=84=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EA=B4=80=EB=A6=AC=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/{components/my => app/my/components}/MbtiSelect.tsx | 0 .../web/{components/my => app/my/components}/TabContainer.tsx | 0 .../{components/my => app/my/components}/VoteItemDesktop.tsx | 0 .../{components/my => app/my/components}/VoteItemMobile.tsx | 0 apps/web/{components/my => app/my/components}/VoteList.tsx | 0 apps/web/app/my/edit/page.tsx | 4 ++-- apps/web/app/my/page.tsx | 4 ++-- 7 files changed, 4 insertions(+), 4 deletions(-) rename apps/web/{components/my => app/my/components}/MbtiSelect.tsx (100%) rename apps/web/{components/my => app/my/components}/TabContainer.tsx (100%) rename apps/web/{components/my => app/my/components}/VoteItemDesktop.tsx (100%) rename apps/web/{components/my => app/my/components}/VoteItemMobile.tsx (100%) rename apps/web/{components/my => app/my/components}/VoteList.tsx (100%) diff --git a/apps/web/components/my/MbtiSelect.tsx b/apps/web/app/my/components/MbtiSelect.tsx similarity index 100% rename from apps/web/components/my/MbtiSelect.tsx rename to apps/web/app/my/components/MbtiSelect.tsx diff --git a/apps/web/components/my/TabContainer.tsx b/apps/web/app/my/components/TabContainer.tsx similarity index 100% rename from apps/web/components/my/TabContainer.tsx rename to apps/web/app/my/components/TabContainer.tsx diff --git a/apps/web/components/my/VoteItemDesktop.tsx b/apps/web/app/my/components/VoteItemDesktop.tsx similarity index 100% rename from apps/web/components/my/VoteItemDesktop.tsx rename to apps/web/app/my/components/VoteItemDesktop.tsx diff --git a/apps/web/components/my/VoteItemMobile.tsx b/apps/web/app/my/components/VoteItemMobile.tsx similarity index 100% rename from apps/web/components/my/VoteItemMobile.tsx rename to apps/web/app/my/components/VoteItemMobile.tsx diff --git a/apps/web/components/my/VoteList.tsx b/apps/web/app/my/components/VoteList.tsx similarity index 100% rename from apps/web/components/my/VoteList.tsx rename to apps/web/app/my/components/VoteList.tsx diff --git a/apps/web/app/my/edit/page.tsx b/apps/web/app/my/edit/page.tsx index 3f149242..56765915 100644 --- a/apps/web/app/my/edit/page.tsx +++ b/apps/web/app/my/edit/page.tsx @@ -2,8 +2,7 @@ import { Button, transitions } from "@chooz/ui"; import ImageUploadButton from "components/common/ImageUploadButton"; -import MbtiSelect from "components/my/MbtiSelect"; -import TabContainer from "components/my/TabContainer"; +import MbtiSelect from "app/my/components/MbtiSelect"; import { useGetUserInfo } from "hooks/useGetUserInfo"; import { uploadProfileImageAPI } from "lib/apis/upload"; import { updateUserInfo } from "lib/apis/user"; @@ -18,6 +17,7 @@ import styled, { css } from "styled-components"; import { media } from "styles/media"; import { Gender } from "types/user"; import { IMAGE_CATEGORY_LIST } from "types/vote"; +import TabContainer from "../components/TabContainer"; function ProfileEditPage() { const router = useRouter(); diff --git a/apps/web/app/my/page.tsx b/apps/web/app/my/page.tsx index 70f3878c..919afbae 100644 --- a/apps/web/app/my/page.tsx +++ b/apps/web/app/my/page.tsx @@ -3,8 +3,6 @@ import { media } from "@chooz/ui/styles/media"; import { useQuery } from "@tanstack/react-query"; import ImageUploadButton from "components/common/ImageUploadButton"; -import TabContainer from "components/my/TabContainer"; -import VoteList from "components/my/VoteList"; import { useGetUserInfo } from "hooks/useGetUserInfo"; import { getVoteCount, VoteListType } from "lib/apis/user"; import { MY_PAGE_VOTE_TYPE } from "lib/constants"; @@ -15,6 +13,8 @@ import { useState } from "react"; import useInfiniteMyPageVoteListService from "services/useInfiniteMyPageVoteListService"; import styled, { css } from "styled-components"; import { Gender } from "types/user"; +import TabContainer from "./components/TabContainer"; +import VoteList from "./components/VoteList"; function MyPage() { const [selectedTab, setSelectedTab] = useState("created"); From 53df136fb846879dcd2c21350320ac6e1c0cfb23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sat, 22 Jul 2023 21:20:52 +0900 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20Star=EA=B0=80=20=EA=B3=A0=EC=A0=95?= =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EA=B0=80=EC=A7=80=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 54115a3c..6fe8ac34 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -64,12 +64,12 @@ const Applayout = styled.div` overflow: hidden; height: calc(100svh - 55px); ${media.medium} { - padding: 40px 16px 0; + padding-top: 34px; } `; const Stars = styled.div` - height: 100%; + height: 6px; `; export default RootLayout; From 425129e20721ec627fbbbfa6318db0faa8ef742b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sat, 22 Jul 2023 21:22:40 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20api,=20types=EA=B0=80=20=EB=8F=85?= =?UTF-8?q?=EB=A6=BD=EB=90=9C=20=EB=8F=84=EB=A9=94=EC=9D=B8=EC=9D=84=20?= =?UTF-8?q?=EA=B0=96=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/lib/apis/my.ts | 54 +++++++++++++++++++++++++++++++++++++++ apps/web/lib/apis/user.ts | 54 +-------------------------------------- apps/web/types/my.ts | 5 ++++ apps/web/types/vote.ts | 4 --- 4 files changed, 60 insertions(+), 57 deletions(-) create mode 100644 apps/web/lib/apis/my.ts create mode 100644 apps/web/types/my.ts diff --git a/apps/web/lib/apis/my.ts b/apps/web/lib/apis/my.ts new file mode 100644 index 00000000..cf7042e2 --- /dev/null +++ b/apps/web/lib/apis/my.ts @@ -0,0 +1,54 @@ +import apiClient from "lib/apis/apiClient"; +import { MyPageVote } from "types/my"; + +export type VoteListType = "created" | "participated" | "bookmarked"; + +export interface GetMyPageVoteListRequest { + page: number; + size: number; + voteType: VoteListType; +} + +interface GetMyPageVoteListResponse { + content: MyPageVote[]; + empty: boolean; + first: boolean; + last: boolean; + number: number; + numberOfElements: number; + size: number; +} + +export const getMyPageVoteList = async ({ page, size, voteType }: GetMyPageVoteListRequest) => { + const response = await apiClient.get("api/user/mypage", { + params: { + page, + size, + voteType, + }, + }); + return response.data; +}; + +interface GetVoteCountResponse { + countCreatedVote: number; + countParticipatedVote: number; + countBookmarkedVote: number; +} + +export const getVoteCount = async () => { + const response = await apiClient.get("api/user/mypage/count"); + return response.data; +}; + +interface UpdateUserInfoRequest { + nickname: string; + // image: string; + mbti: string; + categoryList: string[]; +} + +export const updateUserInfo = async (updateUserInfoRequest: UpdateUserInfoRequest) => { + const response = await apiClient.patch("api/user/mypage/edit", updateUserInfoRequest); + return response.data; +}; diff --git a/apps/web/lib/apis/user.ts b/apps/web/lib/apis/user.ts index d19925d9..5feacf7d 100644 --- a/apps/web/lib/apis/user.ts +++ b/apps/web/lib/apis/user.ts @@ -1,5 +1,5 @@ import { GetUserInfoResponse } from "types/user"; -import { CategoryNameType, MyPageVote } from "types/vote"; +import { CategoryNameType } from "types/vote"; import apiClient from "./apiClient"; interface AddInfoRequest { @@ -30,55 +30,3 @@ export const getUserInfo = async () => { const response = await apiClient.get("api/oauth/login"); return response.data; }; - -export type VoteListType = "created" | "participated" | "bookmarked"; - -export interface GetMyPageVoteListRequest { - page: number; - size: number; - voteType: VoteListType; -} -interface GetMyPageVoteListResponse { - content: MyPageVote[]; - empty: boolean; - first: boolean; - last: boolean; - number: number; - numberOfElements: number; - size: number; -} - -// @Note api 경로에 따라 분리하는 게 맞나, 도메인에 따라 분리하는 게 맞나 -export const getMyPageVoteList = async ({ page, size, voteType }: GetMyPageVoteListRequest) => { - const response = await apiClient.get("api/user/mypage", { - params: { - page, - size, - voteType, - }, - }); - return response.data; -}; - -interface GetVoteCountResponse { - countCreatedVote: number; - countParticipatedVote: number; - countBookmarkedVote: number; -} - -export const getVoteCount = async () => { - const response = await apiClient.get("api/user/mypage/count"); - return response.data; -}; - -interface UpdateUserInfoRequest { - nickname: string; - // image: string; - mbti: string; - categoryList: string[]; -} - -export const updateUserInfo = async (updateUserInfoRequest: UpdateUserInfoRequest) => { - const response = await apiClient.patch("api/user/mypage/edit", updateUserInfoRequest); - return response.data; -}; diff --git a/apps/web/types/my.ts b/apps/web/types/my.ts new file mode 100644 index 00000000..730817d1 --- /dev/null +++ b/apps/web/types/my.ts @@ -0,0 +1,5 @@ +import { Vote } from "./vote"; + +export interface MyPageVote extends Vote { + countComment: number; +} diff --git a/apps/web/types/vote.ts b/apps/web/types/vote.ts index 2de101ed..546540ab 100644 --- a/apps/web/types/vote.ts +++ b/apps/web/types/vote.ts @@ -58,10 +58,6 @@ export interface Vote { imageB: string | null; } -export interface MyPageVote extends Vote { - countComment: number; -} - export type AorB = "A" | "B"; export type Voting = PostVotingRequest; From a61e5a56beb0fa338136fc8a6ad6a1e5ade032a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sun, 23 Jul 2023 16:52:40 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20getVoteCount=EB=A5=BC=20service?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/my/services/useGetVoteCount.ts | 29 +++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 apps/web/app/my/services/useGetVoteCount.ts diff --git a/apps/web/app/my/services/useGetVoteCount.ts b/apps/web/app/my/services/useGetVoteCount.ts new file mode 100644 index 00000000..6d163df8 --- /dev/null +++ b/apps/web/app/my/services/useGetVoteCount.ts @@ -0,0 +1,29 @@ +import { useQuery } from "@tanstack/react-query"; +import { getVoteCount } from "lib/apis/my"; + +import { reactQueryKeys } from "lib/queryKeys"; + +function useGetVoteCount() { + const { data } = useQuery(reactQueryKeys.myPageVoteCount(), getVoteCount); + + const { countCreatedVote, countParticipatedVote, countBookmarkedVote } = data || {}; + + const voteCountList = [ + { + voteTypeText: "작성한 투표", + count: countCreatedVote, + }, + { + voteTypeText: "참여한 투표", + count: countParticipatedVote, + }, + { + voteTypeText: "북마크 투표", + count: countBookmarkedVote, + }, + ]; + + return voteCountList; +} + +export default useGetVoteCount; From ebd06358bfbb77ad9c80a8dc57be2417cacfb89c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sun, 23 Jul 2023 17:13:24 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20VoteCout=EB=A5=BC=20=20containe?= =?UTF-8?q?r=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/my/components/VoteCountContainer.tsx | 44 +++++++++++++++++ apps/web/app/my/page.tsx | 49 ++----------------- .../useInfiniteMyPageVoteListService.ts | 2 +- 3 files changed, 48 insertions(+), 47 deletions(-) create mode 100644 apps/web/app/my/components/VoteCountContainer.tsx rename apps/web/{ => app/my}/services/useInfiniteMyPageVoteListService.ts (98%) diff --git a/apps/web/app/my/components/VoteCountContainer.tsx b/apps/web/app/my/components/VoteCountContainer.tsx new file mode 100644 index 00000000..b50e4df4 --- /dev/null +++ b/apps/web/app/my/components/VoteCountContainer.tsx @@ -0,0 +1,44 @@ +import styled from "styled-components"; +import useGetVoteCount from "../services/useGetVoteCount"; + +function VoteCountContainer() { + const voteCountList = useGetVoteCount(); + + return ( + + {voteCountList.map(({ voteTypeText, count }) => { + return ( + + {count} + {voteTypeText} + + ); + })} + + ); +} + +const Container = styled.section` + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin-top: 24px; +`; + +const VoteType = styled.div` + display: flex; + flex-direction: column; +`; + +const VoteCount = styled.span` + ${({ theme }) => theme.textStyle.Title_Large}; + font-family: NeoDunggeunmo, Pretendard Variable, -apple-system, BlinkMacSystemFont, system-ui, + Roboto, "Helvetica Neue"; +`; + +const VoteTypeText = styled.span` + color: ${({ theme }) => theme.palette.ink.light}; +`; + +export default VoteCountContainer; diff --git a/apps/web/app/my/page.tsx b/apps/web/app/my/page.tsx index 919afbae..da00e699 100644 --- a/apps/web/app/my/page.tsx +++ b/apps/web/app/my/page.tsx @@ -10,11 +10,12 @@ import Path from "lib/Path"; import { reactQueryKeys } from "lib/queryKeys"; import Link from "next/link"; import { useState } from "react"; -import useInfiniteMyPageVoteListService from "services/useInfiniteMyPageVoteListService"; +import useInfiniteMyPageVoteListService from "app/my/services/useInfiniteMyPageVoteListService"; import styled, { css } from "styled-components"; import { Gender } from "types/user"; import TabContainer from "./components/TabContainer"; import VoteList from "./components/VoteList"; +import CountVoteContainer from "./components/VoteCountContainer"; function MyPage() { const [selectedTab, setSelectedTab] = useState("created"); @@ -23,24 +24,16 @@ function MyPage() { setSelectedTab(e.currentTarget.value as VoteListType); }; - const loadVoteCount = () => { - const { data } = useQuery(reactQueryKeys.myPageVoteCount(), getVoteCount); - return { data }; - }; - const { voteList, subscribe } = useInfiniteMyPageVoteListService({ size: 7, voteType: selectedTab, }); const { data: userInfo } = useGetUserInfo(); - const { data: voteCount } = loadVoteCount(); if (!userInfo) return
데이터 없음
; - if (!voteCount) return
데이터 없음
; const { gender, username, age, mbti } = userInfo; - const { countCreatedVote, countParticipatedVote, countBookmarkedVote } = voteCount; return ( @@ -64,20 +57,7 @@ function MyPage() { {/* @TODO api 연결하면 map 사용 */} - - - {countCreatedVote} - 작성한 투표 - - - {countParticipatedVote} - 참여한 투표 - - - {countBookmarkedVote} - 북마크 투표 - - + theme.textStyle.Title_Large}; - font-family: NeoDunggeunmo, Pretendard Variable, -apple-system, BlinkMacSystemFont, system-ui, - Roboto, "Helvetica Neue"; -`; - -const NumberOfVoteText = styled.span` - color: ${({ theme }) => theme.palette.ink.light}; -`; - const TabContainerWrapper = styled.div` position: relative; top: -8px; diff --git a/apps/web/services/useInfiniteMyPageVoteListService.ts b/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts similarity index 98% rename from apps/web/services/useInfiniteMyPageVoteListService.ts rename to apps/web/app/my/services/useInfiniteMyPageVoteListService.ts index df3da206..4f56bc26 100644 --- a/apps/web/services/useInfiniteMyPageVoteListService.ts +++ b/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts @@ -1,6 +1,6 @@ import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteScroll } from "hooks/useInfiniteScroll"; -import { getMyPageVoteList, GetMyPageVoteListRequest } from "lib/apis/user"; +import { getMyPageVoteList, GetMyPageVoteListRequest } from "lib/apis/my"; import { reactQueryKeys } from "lib/queryKeys"; From 4b6b5ce6663d370185c48dbdfbe97d031fce55f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sun, 23 Jul 2023 17:18:42 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refactor:=20my=20page=EC=97=90=EC=84=9C=20m?= =?UTF-8?q?y=EB=A1=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/my/components/VoteItemDesktop.tsx | 4 ++-- apps/web/app/my/components/VoteItemMobile.tsx | 4 ++-- apps/web/app/my/components/VoteList.tsx | 8 ++++---- apps/web/app/my/page.tsx | 12 +++++------- apps/web/app/my/services/useGetVoteCount.ts | 3 +-- .../services/useInfiniteMyPageVoteListService.ts | 8 ++++---- apps/web/lib/apis/my.ts | 16 +++++++--------- apps/web/lib/queryKeys.ts | 10 +++++----- apps/web/types/my.ts | 4 +++- 9 files changed, 33 insertions(+), 36 deletions(-) diff --git a/apps/web/app/my/components/VoteItemDesktop.tsx b/apps/web/app/my/components/VoteItemDesktop.tsx index 40531fbe..3cf48ff4 100644 --- a/apps/web/app/my/components/VoteItemDesktop.tsx +++ b/apps/web/app/my/components/VoteItemDesktop.tsx @@ -5,10 +5,10 @@ import { timeDataProcessing } from "lib/utils/timeDataProcessing"; import Image from "next/image"; import { AIcon, BIcon } from "public/icons"; import styled, { css } from "styled-components"; -import { MyPageVote } from "types/vote"; +import { MyVote } from "types/vote"; interface Props { - vote: MyPageVote; + vote: MyVote; } function VoteItemDesktop({ vote }: Props) { diff --git a/apps/web/app/my/components/VoteItemMobile.tsx b/apps/web/app/my/components/VoteItemMobile.tsx index 766e540f..b3960e3e 100644 --- a/apps/web/app/my/components/VoteItemMobile.tsx +++ b/apps/web/app/my/components/VoteItemMobile.tsx @@ -7,10 +7,10 @@ import { timeDataProcessing } from "lib/utils/timeDataProcessing"; import Image from "next/image"; import { AIcon, BIcon, BookmarkIcon } from "public/icons"; import styled, { css } from "styled-components"; -import { MyPageVote } from "types/vote"; +import { MyVote } from "types/my"; interface Props { - vote: MyPageVote; + vote: MyVote; } function VoteItemMobile({ vote }: Props) { diff --git a/apps/web/app/my/components/VoteList.tsx b/apps/web/app/my/components/VoteList.tsx index afbdb4f0..07336189 100644 --- a/apps/web/app/my/components/VoteList.tsx +++ b/apps/web/app/my/components/VoteList.tsx @@ -1,11 +1,11 @@ import { media } from "@chooz/ui/styles/media"; import styled from "styled-components"; -import { MyPageVote } from "types/vote"; +import { MyVote } from "types/vote"; import VoteItemDesktop from "./VoteItemDesktop"; import VoteItemMobile from "./VoteItemMobile"; interface Props { - voteList: MyPageVote[]; + voteList: MyVote[]; } function VoteList({ voteList }: Props) { @@ -14,12 +14,12 @@ function VoteList({ voteList }: Props) { return ( <> - {voteList.map((vote: MyPageVote, index: number) => ( + {voteList.map((vote: MyVote, index: number) => ( ))} - {voteList.map((vote: MyPageVote, index: number) => ( + {voteList.map((vote: MyVote, index: number) => ( ))} diff --git a/apps/web/app/my/page.tsx b/apps/web/app/my/page.tsx index da00e699..2b3e08cb 100644 --- a/apps/web/app/my/page.tsx +++ b/apps/web/app/my/page.tsx @@ -1,30 +1,28 @@ "use client"; import { media } from "@chooz/ui/styles/media"; -import { useQuery } from "@tanstack/react-query"; import ImageUploadButton from "components/common/ImageUploadButton"; import { useGetUserInfo } from "hooks/useGetUserInfo"; -import { getVoteCount, VoteListType } from "lib/apis/user"; import { MY_PAGE_VOTE_TYPE } from "lib/constants"; import Path from "lib/Path"; -import { reactQueryKeys } from "lib/queryKeys"; import Link from "next/link"; import { useState } from "react"; -import useInfiniteMyPageVoteListService from "app/my/services/useInfiniteMyPageVoteListService"; import styled, { css } from "styled-components"; import { Gender } from "types/user"; import TabContainer from "./components/TabContainer"; import VoteList from "./components/VoteList"; import CountVoteContainer from "./components/VoteCountContainer"; +import { MyVoteListType } from "types/my"; +import useInfiniteMyVoteListService from "./services/useInfiniteMyPageVoteListService"; function MyPage() { - const [selectedTab, setSelectedTab] = useState("created"); + const [selectedTab, setSelectedTab] = useState("created"); const onClickSelectedTab = (e: React.MouseEvent) => { - setSelectedTab(e.currentTarget.value as VoteListType); + setSelectedTab(e.currentTarget.value as MyVoteListType); }; - const { voteList, subscribe } = useInfiniteMyPageVoteListService({ + const { voteList, subscribe } = useInfiniteMyVoteListService({ size: 7, voteType: selectedTab, }); diff --git a/apps/web/app/my/services/useGetVoteCount.ts b/apps/web/app/my/services/useGetVoteCount.ts index 6d163df8..0585b5ee 100644 --- a/apps/web/app/my/services/useGetVoteCount.ts +++ b/apps/web/app/my/services/useGetVoteCount.ts @@ -1,10 +1,9 @@ import { useQuery } from "@tanstack/react-query"; import { getVoteCount } from "lib/apis/my"; - import { reactQueryKeys } from "lib/queryKeys"; function useGetVoteCount() { - const { data } = useQuery(reactQueryKeys.myPageVoteCount(), getVoteCount); + const { data } = useQuery(reactQueryKeys.myVoteCount(), getVoteCount); const { countCreatedVote, countParticipatedVote, countBookmarkedVote } = data || {}; diff --git a/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts b/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts index 4f56bc26..fef61a18 100644 --- a/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts +++ b/apps/web/app/my/services/useInfiniteMyPageVoteListService.ts @@ -1,16 +1,16 @@ import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteScroll } from "hooks/useInfiniteScroll"; -import { getMyPageVoteList, GetMyPageVoteListRequest } from "lib/apis/my"; +import { getMyVoteList, GetMyVoteListRequest } from "lib/apis/my"; import { reactQueryKeys } from "lib/queryKeys"; -type Params = Omit; +type Params = Omit; // @Todo infinite service 합칠 수 있는 방법 고민하기 -export default function useInfiniteMyPageVoteListService(params: Params) { +export default function useInfiniteMyVoteListService(params: Params) { const { data, fetchNextPage } = useInfiniteQuery( reactQueryKeys.voteList([params.voteType]), - ({ pageParam }) => getMyPageVoteList({ ...params, page: pageParam?.page || 0 }), + ({ pageParam }) => getMyVoteList({ ...params, page: pageParam?.page || 0 }), { getNextPageParam: ({ last, number }) => { if (last) return undefined; diff --git a/apps/web/lib/apis/my.ts b/apps/web/lib/apis/my.ts index cf7042e2..22ee9461 100644 --- a/apps/web/lib/apis/my.ts +++ b/apps/web/lib/apis/my.ts @@ -1,16 +1,14 @@ import apiClient from "lib/apis/apiClient"; -import { MyPageVote } from "types/my"; +import { MyVote, MyVoteListType } from "types/my"; -export type VoteListType = "created" | "participated" | "bookmarked"; - -export interface GetMyPageVoteListRequest { +export interface GetMyVoteListRequest { page: number; size: number; - voteType: VoteListType; + voteType: MyVoteListType; } -interface GetMyPageVoteListResponse { - content: MyPageVote[]; +interface GetMyVoteListResponse { + content: MyVote[]; empty: boolean; first: boolean; last: boolean; @@ -19,8 +17,8 @@ interface GetMyPageVoteListResponse { size: number; } -export const getMyPageVoteList = async ({ page, size, voteType }: GetMyPageVoteListRequest) => { - const response = await apiClient.get("api/user/mypage", { +export const getMyVoteList = async ({ page, size, voteType }: GetMyVoteListRequest) => { + const response = await apiClient.get("api/user/mypage", { params: { page, size, diff --git a/apps/web/lib/queryKeys.ts b/apps/web/lib/queryKeys.ts index ad0f070c..86327b7c 100644 --- a/apps/web/lib/queryKeys.ts +++ b/apps/web/lib/queryKeys.ts @@ -1,6 +1,6 @@ +import { MyVoteListType } from "types/my"; import { Agetype } from "types/user"; import { GenderType } from "types/vote"; -import { VoteListType } from "./apis/user"; export const queryKeys = { USER_INFO: "userInfo" as const, @@ -12,8 +12,8 @@ export const queryKeys = { DETAIL_ANALYSIS: "analysisByVoteId" as const, DETAIL_FILTERED_ANALYSIS: "filteredAnalysisByVoteId" as const, VOTING_CHECK: "votingCheck" as const, - MY_PAGE_VOTE_LIST: "myPageVoteList" as const, - MY_PAGE_VOTE_COUNT: "myPageVoteCount" as const, + MY_VOTE_LIST: "myVoteList" as const, + MY_VOTE_COUNT: "myVoteCount" as const, }; export const reactQueryKeys = { @@ -34,6 +34,6 @@ export const reactQueryKeys = { detailFilterdAnalysis: (id: number, mbti: string, gender: string, age: string) => [queryKeys.DETAIL_FILTERED_ANALYSIS, id, mbti, gender, age] as const, votingCheck: (id: number) => [queryKeys.VOTING_CHECK, id] as const, - myPageVoteList: (params: VoteListType) => [queryKeys.MY_PAGE_VOTE_LIST, ...params] as const, - myPageVoteCount: () => [queryKeys.MY_PAGE_VOTE_COUNT] as const, + myVoteList: (params: MyVoteListType) => [queryKeys.MY_VOTE_LIST, ...params] as const, + myVoteCount: () => [queryKeys.MY_VOTE_COUNT] as const, }; diff --git a/apps/web/types/my.ts b/apps/web/types/my.ts index 730817d1..ebc3b8fc 100644 --- a/apps/web/types/my.ts +++ b/apps/web/types/my.ts @@ -1,5 +1,7 @@ import { Vote } from "./vote"; -export interface MyPageVote extends Vote { +export interface MyVote extends Vote { countComment: number; } + +export type MyVoteListType = "created" | "participated" | "bookmarked"; From 49f9331af31b137d1c99ac73f744ed462ffa904c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Sun, 23 Jul 2023 19:53:26 +0900 Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20UserInfoContainer=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/my/components/UserInfoContainer.tsx | 87 +++++++++++++++++++ apps/web/app/my/page.tsx | 79 +---------------- 2 files changed, 89 insertions(+), 77 deletions(-) create mode 100644 apps/web/app/my/components/UserInfoContainer.tsx diff --git a/apps/web/app/my/components/UserInfoContainer.tsx b/apps/web/app/my/components/UserInfoContainer.tsx new file mode 100644 index 00000000..2b7abb02 --- /dev/null +++ b/apps/web/app/my/components/UserInfoContainer.tsx @@ -0,0 +1,87 @@ +import ImageUploadButton from "components/common/ImageUploadButton"; +import { useGetUserInfo } from "hooks/useGetUserInfo"; +import Path from "lib/Path"; +import Link from "next/link"; +import { Gender } from "types/user"; +import styled, { css } from "styled-components"; +import { media } from "@chooz/ui/styles/media"; + +function UserInfoContainer() { + const { data: userInfo } = useGetUserInfo(); + + if (!userInfo) return
데이터 없음
; + + const { gender, username, age, mbti } = userInfo; + + return ( + <> + + + + + + <> + {gender === Gender.MALE ? "남" : "여"} + + {age} + + {mbti} + + + {username} + + 프로필 수정 + + + + ); +} + +const AddImageButtonWrapper = styled.div` + float: left; +`; + +const Profile = styled.div` + display: flex; + flex-direction: column; + padding-left: 17px; + + ${media.medium} { + padding-left: 28px; + } +`; + +const UserInfo = styled.span` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 86px; + background-color: ${({ theme }) => theme.palette.background.black}; + border-radius: 4px; +`; + +const Divider = styled.div` + width: 1px; + height: 8px; + margin: 0 4px; + background-color: ${({ theme }) => theme.palette.ink.base}; +`; + +const Nickname = styled.span` + margin-top: 8px; + ${({ theme }) => css` + ${theme.textStyle.Title_Small}; + color: ${theme.palette.ink.lighter}; + `}; +`; + +const ProfileModifyButton = styled.button` + width: 71px; + height: 30px; + border: 1px solid ${({ theme }) => theme.palette.border.light}; + border-radius: 4px; + margin-top: 25px; +`; + +export default UserInfoContainer; diff --git a/apps/web/app/my/page.tsx b/apps/web/app/my/page.tsx index 2b3e08cb..af741b50 100644 --- a/apps/web/app/my/page.tsx +++ b/apps/web/app/my/page.tsx @@ -1,19 +1,15 @@ "use client"; import { media } from "@chooz/ui/styles/media"; -import ImageUploadButton from "components/common/ImageUploadButton"; -import { useGetUserInfo } from "hooks/useGetUserInfo"; import { MY_PAGE_VOTE_TYPE } from "lib/constants"; -import Path from "lib/Path"; -import Link from "next/link"; import { useState } from "react"; import styled, { css } from "styled-components"; -import { Gender } from "types/user"; import TabContainer from "./components/TabContainer"; import VoteList from "./components/VoteList"; import CountVoteContainer from "./components/VoteCountContainer"; import { MyVoteListType } from "types/my"; import useInfiniteMyVoteListService from "./services/useInfiniteMyPageVoteListService"; +import UserInfoContainer from "./components/UserInfoContainer"; function MyPage() { const [selectedTab, setSelectedTab] = useState("created"); @@ -27,34 +23,10 @@ function MyPage() { voteType: selectedTab, }); - const { data: userInfo } = useGetUserInfo(); - - if (!userInfo) return
데이터 없음
; - - const { gender, username, age, mbti } = userInfo; - return ( - - - - - - <> - {gender === Gender.MALE ? "남" : "여"} - - {age} - - {mbti} - - - {username} - - 프로필 수정 - - - {/* @TODO api 연결하면 map 사용 */} + @@ -95,53 +67,6 @@ const PageInner = styled.div` } `; -const AddImageButtonWrapper = styled.div` - float: left; -`; - -const Profile = styled.div` - display: flex; - flex-direction: column; - padding-left: 17px; - - ${media.medium} { - padding-left: 28px; - } -`; - -const UserInfo = styled.span` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 86px; - background-color: ${({ theme }) => theme.palette.background.black}; - border-radius: 4px; -`; - -const Divider = styled.div` - width: 1px; - height: 8px; - margin: 0 4px; - background-color: ${({ theme }) => theme.palette.ink.base}; -`; - -const Nickname = styled.span` - margin-top: 8px; - ${({ theme }) => css` - ${theme.textStyle.Title_Small}; - color: ${theme.palette.ink.lighter}; - `}; -`; - -const ProfileModifyButton = styled.button` - width: 71px; - height: 30px; - border: 1px solid ${({ theme }) => theme.palette.border.light}; - border-radius: 4px; - margin-top: 25px; -`; - const TabContainerWrapper = styled.div` position: relative; top: -8px; From c175eb7f158ea7bfb104d20cec81475481b86b1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Tue, 25 Jul 2023 22:39:27 +0900 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/my/components/UserInfoContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/app/my/components/UserInfoContainer.tsx b/apps/web/app/my/components/UserInfoContainer.tsx index 2b7abb02..1dbddaf0 100644 --- a/apps/web/app/my/components/UserInfoContainer.tsx +++ b/apps/web/app/my/components/UserInfoContainer.tsx @@ -9,7 +9,7 @@ import { media } from "@chooz/ui/styles/media"; function UserInfoContainer() { const { data: userInfo } = useGetUserInfo(); - if (!userInfo) return
데이터 없음
; + if (!userInfo) return <>; const { gender, username, age, mbti } = userInfo;