프로필-세팅페이지-퍼블리싱 (#59)

* New : 술 태그 클릭시 해당 술정보로 이동 * Refactor : userInfo 카드 스켈레톤 추가 * New : 유저정보 페이지 URL 추가 * New : 로그아웃 (쿠키삭제) BFF URL추가 * New : 술 태그 클릭시 해당 술정보로 이동 * Minor : Wrapper 컴포넌트 추가 * New : 로그아웃 (쿠키삭제) route 추가 * New : 술 디테일 페이지 임시추가 * New : 프로필수정 모달 컨텍스트 추가 * Minor : App bar Sementic tag 추가 * Minor : 서버 응답 인터페이스 변경 * New : 프로필 세팅페이지 퍼블리싱
potenday-project · Nov 28, 2023 · 0288571 · 0288571
1 parent 7ea46c0
commit 0288571
Show file tree

Hide file tree

Showing 17 changed files with 293 additions and 55 deletions.
diff --git a/client/src/app/(protectedRoute)/user/setting/layout.tsx b/client/src/app/(protectedRoute)/user/setting/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+import CustomAppbar from "@/components/CustomAppbar";
+import { Container, Stack } from "@mui/material";
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+const UserInfoPageLayout = ({ children }: Props) => {
+  return (
+    <>
+      <CustomAppbar title="설정" />
+      <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+        <Stack gap={2}>{children}</Stack>
+      </Container>
+    </>
+  );
+};
+
+export default UserInfoPageLayout;
diff --git a/client/src/app/(protectedRoute)/user/setting/page.tsx b/client/src/app/(protectedRoute)/user/setting/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import UserInfoCard from "@/components/user/info/UserInfoCard";
+import UserInfoCardSkeleton from "@/components/user/info/UserInfoCardSkeleton";
+import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
+import {
+  Button,
+  ButtonBase,
+  Paper,
+  Stack,
+  Typography,
+  styled,
+} from "@mui/material";
+import PostSeeMoreIcon from "@/assets/icons/PostSeeMoreIcon.svg";
+import { axiosBff } from "@/libs/axios";
+import { LOGOUT_BFF } from "@/const/serverPath";
+
+const SettingPage = () => {
+  const { data: myInfo } = useMyInfoQuery();
+
+  return (
+    <>
+      <PaddingPaper>
+        {myInfo ? (
+          <UserInfoCard userId={myInfo.userNo} />
+        ) : (
+          <UserInfoCardSkeleton />
+        )}
+      </PaddingPaper>
+
+      <PaddingPaper>
+        <Typography variant="subtitle2">정보</Typography>
+        <ButtonBase sx={{ px: 3, py: 1.5, width: "100%" }}>
+          <RowStack>
+            <Typography>개인정보</Typography>
+            <PostSeeMoreIcon />
+          </RowStack>
+        </ButtonBase>
+      </PaddingPaper>
+      <PaddingPaper>
+        <Typography variant="subtitle2">고객센터</Typography>
+        <ButtonBase sx={{ px: 3, py: 1.5, width: "100%" }}>
+          <RowStack>
+            <Typography>고객센터</Typography>
+            <PostSeeMoreIcon />
+          </RowStack>
+        </ButtonBase>
+        <ButtonBase sx={{ px: 3, py: 1.5, width: "100%" }}>
+          <RowStack>
+            <Typography>Q&A</Typography>
+            <PostSeeMoreIcon />
+          </RowStack>
+        </ButtonBase>
+        <ButtonBase sx={{ px: 3, py: 1.5, width: "100%" }}>
+          <RowStack>
+            <Typography>사용자 의견 남기기</Typography>
+            <PostSeeMoreIcon />
+          </RowStack>
+        </ButtonBase>
+      </PaddingPaper>
+      <PaddingPaper>
+        <Typography variant="subtitle2">투파이아</Typography>
+        <RowStack>
+          <Typography>버전</Typography>
+          <Typography>1.0.0</Typography>
+        </RowStack>
+      </PaddingPaper>
+      <PaddingPaper>
+        <Typography variant="subtitle2">계정</Typography>
+        <Button
+          color="secondary"
+          onClick={() => {
+            // FIXME 추후 수정해야하는 로그아웃로직
+            localStorage.removeItem("accessToken");
+            axiosBff.post(LOGOUT_BFF).then((res) => {
+              location.reload()
+            });
+          }}
+        >
+          로그아웃
+        </Button>
+      </PaddingPaper>
+    </>
+  );
+};
+const PaddingPaper = styled(Paper)(() => ({
+  padding: 16,
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+}));
+
+const RowStack = styled(Stack)(() => ({
+  width: "100%",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+}));
+
+export default SettingPage;
diff --git a/client/src/app/api/auth/logout-internal/route.ts b/client/src/app/api/auth/logout-internal/route.ts
@@ -0,0 +1,17 @@
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  cookies().delete("accessToken");
+  return NextResponse.json(
+    { message:'success'},
+    {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+        "Access-Control-Allow-Credentials": "true",
+      },
+    }
+  );
+}
diff --git a/client/src/app/user/[userId]/layout.tsx b/client/src/app/user/[userId]/layout.tsx
@@ -1,8 +1,11 @@
 "use client";
 import CustomAppbar from "@/components/CustomAppbar";
+import { SETTING_PAGE } from "@/const/clientPath";
 import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
+import UserPageContext from "@/store/user/UserPageContext";
 import { Container, Paper } from "@mui/material";
-import React, { useMemo } from "react";
+import { useRouter } from "next/navigation";
+import React, { useMemo, useState } from "react";
 
 type Props = {
   children: React.ReactNode;
@@ -13,21 +16,23 @@ const UserInfoPageLayout = ({ children, params }: Props) => {
   const { data: userInfo } = useMyInfoQuery();
   const isMyProfile = useMemo(
     () => String(userInfo?.userNo) === String(params.userId),
-    [userInfo,params.userId]
+    [userInfo, params.userId]
   );
+  const [isEditing, setIsEditing] = useState(false);
+  const router = useRouter()
 
   return (
-    <Paper>
+    <UserPageContext.Provider value={{ isEditing, setIsEditing }}>
       <CustomAppbar
         buttonComponent={isMyProfile ? "설정" : undefined}
         onClickButton={() => {
-          if(!isMyProfile){
-            return
+          if (!isMyProfile) {
+            return;
           }
-          console.log("눌림");
+          router.push(SETTING_PAGE)
         }}
       />
-      <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+      <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
         <Paper
           sx={{
             display: "flex",
@@ -40,7 +45,7 @@ const UserInfoPageLayout = ({ children, params }: Props) => {
           {children}
         </Paper>
       </Container>
-    </Paper>
+    </UserPageContext.Provider>
   );
 };
 

diff --git a/client/src/app/wiki/[alcoholNo]/page.tsx b/client/src/app/wiki/[alcoholNo]/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {}
+
+const AlcoholDetailPage = (props: Props) => {
+  return (
+    <div>AlcoholDetailPage</div>
+  )
+}
+
+export default AlcoholDetailPage
diff --git a/client/src/app/wiki/layout.tsx b/client/src/app/wiki/layout.tsx
@@ -10,9 +10,8 @@ const layout = ({ children }: { children: ReactNode }) => {
 
   return (
     <WikiPageContext.Provider value={{ isSearching, setIsSearching }}>
-      <Paper>
         <WikiAppbar />
-        <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+        <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
           <Paper
             sx={{
               display: "flex",
@@ -26,7 +25,6 @@ const layout = ({ children }: { children: ReactNode }) => {
             {children}
           </Paper>
         </Container>
-      </Paper>
     </WikiPageContext.Provider>
   );
 };

diff --git a/client/src/components/CustomAppbar.tsx b/client/src/components/CustomAppbar.tsx
@@ -11,7 +11,6 @@ interface CustomAppbarInterface {
   onClickButton?: MouseEventHandler<HTMLButtonElement>;
 }
 
-
 const CustomAppbar = ({
   title,
   buttonComponent,
@@ -24,12 +23,12 @@ const CustomAppbar = ({
     <AppBar position={"static"}>
       <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
         <IconButton onClick={() => router.back()}>
-          <GoBackIcon/>
+          <GoBackIcon />
         </IconButton>
-        <Typography variant="subtitle2" fontWeight={"bold"}>
+        <Typography component="h1" variant="subtitle2" fontWeight={"bold"}>
           {title}
         </Typography>
-        {buttonComponent && (
+        {buttonComponent ? (
           <Button
             disabled={disableButton}
             onClick={onClickButton}
@@ -38,6 +37,8 @@ const CustomAppbar = ({
           >
             {buttonComponent}
           </Button>
+        ) : (
+          <div style={{ width: "40px" }} />
         )}
       </Toolbar>
     </AppBar>

diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -19,7 +19,7 @@ import ShareIcon from "@/assets/icons/ShareIcon.svg";
 import LikeIcon from "@/assets/icons/LikeIcon.svg";
 import CommentIcon from "@/assets/icons/CommentIcon.svg";
 import QuoteIcon from "@/assets/icons/QuoteIcon.svg";
-import AlcoleNameTag from "@/components/wiki/AlcoholNameTag";
+import AlcoholNameTag from "@/components/wiki/AlcoholNameTag";
 import dayjs from "dayjs";
 import useLikePostMutation from "@/queries/post/useLikePostMutation";
 import useUnLikePostMutation from "@/queries/post/useUnLikePostMutation";
@@ -48,6 +48,7 @@ const PostCard = ({
   commentCount,
   likedByMe,
   quoteCount,
+  alcoholNo,
 }: PostInterface) => {
   const openPostDetailPage = useOpenPostDetailPage();
   const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
@@ -106,7 +107,11 @@ const PostCard = ({
         </Stack>
 
         {alcoholName && (
-          <AlcoleNameTag alcoholName={alcoholName} alcoholType={alcoholType} />
+          <AlcoholNameTag
+            alcoholNo={alcoholNo}
+            alcoholName={alcoholName}
+            alcoholType={alcoholType}
+          />
         )}
 
         <CardContent sx={{ px: 0 }}>

diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx
@@ -40,27 +40,29 @@ function PostCardList(props: UseGetPostListQueryInterface) {
 
   return (
     <postcardContext.Provider value={{ searchKeyword, searchUserNos }}>
-      {hasResult &&
-        isSuccess &&
-        // 검색결과가 있을시
-        data?.pages.map((page) =>
-          page.list.map((post) => <PostCard {...post} key={post.postNo} />)
+      <div>
+        {hasResult &&
+          isSuccess &&
+          // 검색결과가 있을시
+          data?.pages.map((page) =>
+            page.list.map((post) => <PostCard {...post} key={post.postNo} />)
+          )}
+        {isSuccess && !hasResult && (
+          // 검색결과 없을 시
+          <Stack justifyContent="center" alignItems="center" py={8}>
+            <Image src={NoResult} alt="no result alert" />
+          </Stack>
         )}
-      {isSuccess && !hasResult && (
-        // 검색결과 없을 시
-        <Stack justifyContent="center" alignItems="center" py={8}>
-          <Image src={NoResult} alt="no result alert" />
-        </Stack>
-      )}
-      {/* 로딩창 */}
-      {isFetchingNextPage || isLoading ? (
-        <Box sx={{ width: "100%", textAlign: "center", py: 1 }}>
-          <CircularProgress />
-        </Box>
-      ) : (
-        // 인터섹션옵저버
-        <div style={{ height: 60 }} ref={ref}></div>
-      )}
+        {/* 로딩창 */}
+        {isFetchingNextPage || isLoading ? (
+          <Box sx={{ width: "100%", textAlign: "center", py: 1 }}>
+            <CircularProgress />
+          </Box>
+        ) : (
+          // 인터섹션옵저버
+          <div style={{ height: 60 }} ref={ref}></div>
+        )}
+      </div>
     </postcardContext.Provider>
   );
 }

diff --git a/client/src/components/user/info/UserInfoCard.tsx b/client/src/components/user/info/UserInfoCard.tsx
@@ -6,7 +6,9 @@ import { UserInfoInterface } from "@/types/user/userInfoInterface";
 import useUserInfoQuery from "@/queries/user/useUserInfoQuery";
 import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
 import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
-import { useMemo } from "react";
+import { useContext, useMemo } from "react";
+import UserPageContext from "@/store/user/UserPageContext";
+import UserInfoCardSkeleton from "./UserInfoCardSkeleton";
 
 type Props = {
   initialData?: UserInfoInterface;
@@ -22,14 +24,16 @@ const UserInfo = ({ initialData, userId }: Props) => {
   );
 
   const token = getTokenFromLocalStorage();
+  const { setIsEditing } = useContext(UserPageContext);
 
   const { data } = useUserInfoQuery({
     userId,
     initialData,
     config: { headers: { Authorization: token } },
   });
+
   if (!data) {
-    return <></>;
+    return <UserInfoCardSkeleton/>;
   }
 
   const {
@@ -67,7 +71,19 @@ const UserInfo = ({ initialData, userId }: Props) => {
         <Typography color="text.secondary">팔로잉</Typography>
       </Stack>
       {isMyProfile ? (
-        <Button fullWidth>설정</Button>
+        <Button
+          onClick={() => setIsEditing(true)}
+          sx={{
+            backgroundColor: "#F6EAFB",
+            color: "primary.main",
+            ":hover": {
+              backgroundColor: "#F6EAFB",
+            },
+          }}
+          fullWidth
+        >
+          프로필 수정하기
+        </Button>
       ) : (
         <FollowUserBtn userId={userId} isFollowing={isFollowing} fullWidth />
       )}