[Web] [Feat] MyPage, 설정, 소개 api 연동 (#30)

capstone-kw-jjiggle · Nov 9, 2024 · 158ecca · 158ecca
1 parent d39bf55
commit 158ecca
Show file tree

Hide file tree

Showing 35 changed files with 1,083 additions and 179 deletions.
diff --git a/apps/mobile/next.config.mjs b/apps/mobile/next.config.mjs
@@ -41,6 +41,12 @@ const nextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -41,6 +41,12 @@ const nextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

diff --git a/apps/web/src/app/(main)/page.tsx b/apps/web/src/app/(main)/page.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { Flex, Spinner } from '@radix-ui/themes';
 import Link from 'next/link';
-import { useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
 import Button from '@/shared/components/button/button';
 import Input from '@/shared/components/input/input';
 import { useGetUserList } from '@/shared/apis/main/queries';
@@ -28,6 +28,7 @@ import {
 } from './mainPage.css';
 
 export default function MainPage() {
+  const router = useRouter();
   const [유저검색키워드, set유저검색키워드] = useState('');
 
   const { data } = useGetUserList({ searchedname: 유저검색키워드 });

diff --git a/apps/web/src/app/auth/_components/authCompletion/authCompletion.tsx b/apps/web/src/app/auth/_components/authCompletion/authCompletion.tsx
@@ -20,7 +20,7 @@ const AuthCompletion = () => {
 
   const handleHomeClick = () => {
     queryClient.invalidateQueries({ queryKey: ['userInfo'] });
-    router.push('/');
+    window.location.href = '/';
   };
 
   return (

diff --git a/apps/web/src/app/auth/_components/authRedirect/authRedirect.tsx b/apps/web/src/app/auth/_components/authRedirect/authRedirect.tsx
@@ -28,10 +28,10 @@ const AuthRedirect = ({ handleNextStep }: AuthRedirectProps) => {
       console.error('토큰이 제공되지 않았습니다.');
       return;
     }
-    console.log(isRegistered);
+
     if (isRegistered) {
       queryClient.invalidateQueries({ queryKey: ['userInfo'] });
-      router.replace('/', { scroll: false });
+      window.location.href = '/';
     } else {
       handleNextStep('school');
     }

diff --git a/apps/web/src/app/auth/_components/authRegion/authRegion.tsx b/apps/web/src/app/auth/_components/authRegion/authRegion.tsx
@@ -39,10 +39,10 @@ const AuthRegion = ({ handleNextStep, 대학교 }: AuthRegionProps) => {
     set지역검색키워드(region);
   };
 
-  console.log(대학교, 지역검색키워드);
   const handle회원가입 = () => {
+    console.log(대학교, 지역검색키워드);
     mutate(
-      { univName: 대학교, regionName: 지역검색키워드 },
+      { univName: 대학교, region: 지역검색키워드 },
       {
         onSuccess: () => {
           handleNextStep('completion');

diff --git a/apps/web/src/app/board/_components/board.tsx b/apps/web/src/app/board/_components/board.tsx
@@ -19,8 +19,10 @@ const Board = () => {
       </div>
 
       <ul className={boardListStyle}>
-        {data?.map(({ userId, profileImg, boardContent }) => (
-          <li key={userId} className={boardRowStyle}>
+        {data?.map(({ userId, profileImg, boardContent }, index) => (
+          <li
+            key={`${userId}-${boardContent}-${index}`}
+            className={boardRowStyle}>
             <CircleImage src={profileImg} />
             <p>{boardContent}</p>
           </li>

diff --git a/apps/web/src/app/board/page.tsx b/apps/web/src/app/board/page.tsx
@@ -1,12 +1,10 @@
 'use client';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { useIsMutating } from '@tanstack/react-query';
 import Input from '@/shared/components/input/input';
 import { usePostGuestBook } from '@/shared/apis/board/queries';
 import { getAuthHeader } from '@/shared/utils/auth';
 import Board from './_components/board';
-import useDebounce from './_hooks/useDebounce';
 import {
   containerStyle,
   headingStyle,

diff --git a/apps/web/src/app/user/[userId]/UserPage.css.ts b/apps/web/src/app/user/[userId]/UserPage.css.ts
@@ -96,3 +96,19 @@ export const topSectionStyle = style({
   display: 'flex',
   marginBottom: '8.8rem',
 });
+
+export const spinnerTopDiveStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '46.2rem',
+});
+
+export const spinnerMiddleDivStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '33.9rem',
+});
diff --git a/apps/web/src/app/user/[userId]/_components/SVGTier/SVGTier.tsx b/apps/web/src/app/user/[userId]/_components/SVGTier/SVGTier.tsx
@@ -11,31 +11,36 @@ import Tier3SmallIcon from '@/shared/assets/svgs/tier/sm/tier_3.svg';
 import Tier4SmallIcon from '@/shared/assets/svgs/tier/sm/tier_4.svg';
 import Tier5SmallIcon from '@/shared/assets/svgs/tier/sm/tier_5.svg';
 import Tier6SmallIcon from '@/shared/assets/svgs/tier/sm/tier_6.svg';
+import { TierTypes } from '../profile/_types';
 
 interface SVGTierProps extends SVGAttributes<SVGElement> {
   size?: 'default' | 'sm';
-  tier?: number;
+  tier?: TierTypes;
 }
 
-const defaultComponent: Record<number, FC<SVGAttributes<SVGElement>>> = {
-  1: Tier1DefaultIcon,
-  2: Tier2DefaultIcon,
-  3: Tier3DefaultIcon,
-  4: Tier4DefaultIcon,
-  5: Tier5DefaultIcon,
-  6: Tier6DefaultIcon,
+const defaultComponent: Record<TierTypes, FC<SVGAttributes<SVGElement>>> = {
+  YELLOW: Tier1DefaultIcon,
+  GREEN: Tier2DefaultIcon,
+  BLUE: Tier3DefaultIcon,
+  RED: Tier4DefaultIcon,
+  GREY: Tier5DefaultIcon,
+  PURPLE: Tier6DefaultIcon,
 };
 
-const smComponent: Record<number, FC<SVGAttributes<SVGElement>>> = {
-  1: Tier1SmallIcon,
-  2: Tier2SmallIcon,
-  3: Tier3SmallIcon,
-  4: Tier4SmallIcon,
-  5: Tier5SmallIcon,
-  6: Tier6SmallIcon,
+const smComponent: Record<TierTypes, FC<SVGAttributes<SVGElement>>> = {
+  YELLOW: Tier1SmallIcon,
+  GREEN: Tier2SmallIcon,
+  BLUE: Tier3SmallIcon,
+  RED: Tier4SmallIcon,
+  GREY: Tier5SmallIcon,
+  PURPLE: Tier6SmallIcon,
 };
 
-const SVGTier = ({ size = 'default', tier = 1, ...props }: SVGTierProps) => {
+const SVGTier = ({
+  size = 'default',
+  tier = 'YELLOW',
+  ...props
+}: SVGTierProps) => {
   const TierComponent =
     size === 'default' ? defaultComponent[tier] : smComponent[tier];
 

diff --git a/apps/web/src/app/user/[userId]/_components/cardProfile/cardProfile.tsx b/apps/web/src/app/user/[userId]/_components/cardProfile/cardProfile.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import SVGTier from '../SVGTier/SVGTier';
+import { TierTypes } from '../profile/_types';
 import {
   containerStyle,
   contentDivStyle,
@@ -11,30 +12,30 @@ import {
 } from './cardProfile.css';
 
 interface CardProfileProps {
-  profileSrc?: string;
+  profileImg?: string;
   language: string;
-  tier: number;
-  userName: string;
-  school: string;
-  region: string;
+  grade: TierTypes;
+  username: string;
+  schoolName: string;
+  regionName: string;
 }
 
 const CardProfile = ({
-  profileSrc = 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  profileImg = 'https://avatars.githubusercontent.com/u/127329855?v=4',
   language,
-  tier,
-  userName,
-  school,
-  region,
+  grade,
+  username,
+  schoolName,
+  regionName,
 }: CardProfileProps) => {
   return (
     <div className={containerStyle}>
       <div className={imageDivStyle}>
         <Image
-          src={profileSrc}
+          src={profileImg}
           width={460}
           height={460}
-          alt={`${userName} 프로필 이미지`}
+          alt={`${username} 프로필 이미지`}
           className={imageDivStyle}
         />
       </div>
@@ -43,13 +44,13 @@ const CardProfile = ({
         <p className={languageParagraphStyle}>{language}</p>
 
         <div className={titleDivStyle}>
-          <SVGTier size="sm" tier={tier} />
-          <h3>{userName}</h3>
+          <SVGTier size="sm" tier={grade} />
+          <h3>{username}</h3>
         </div>
 
         <div className={labelDivStyle}>
-          <span className={labelStyle}>{school}</span>
-          <span className={labelStyle}>{region}</span>
+          <span className={labelStyle}>{schoolName}</span>
+          <span className={labelStyle}>{regionName}</span>
         </div>
       </div>
     </div>

diff --git a/apps/web/src/app/user/[userId]/_components/introduction/introduction.css.ts b/apps/web/src/app/user/[userId]/_components/introduction/introduction.css.ts
@@ -1,19 +1,54 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { globalTheme } from '@/shared/styles/globalTheme.css';
 
-export const headingTitleStyle = style({
-  ...globalTheme.fonts.headBold36,
-  color: globalTheme.colors.gray_19,
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+});
+
+export const headingTitleStyle = styleVariants({
+  default: {
+    ...globalTheme.fonts.headBold36,
+    padding: '0 1.2rem',
+    boxSizing: 'border-box',
+    color: globalTheme.colors.gray_19,
+    border: '1px solid transparent',
+  },
+  edit: {
+    ...globalTheme.fonts.headBold36,
+    padding: '0 1.2rem',
+    boxSizing: 'border-box',
+    color: globalTheme.colors.gray_19,
+    backgroundColor: globalTheme.colors.gray_bg_05,
+    border: `1px solid ${globalTheme.colors.blue_main}`,
+    borderRadius: 8,
+  },
 });
 
 export const headingSubTitleStyle = style({
   ...globalTheme.fonts.subheadBold20,
+  padding: '0 1.2rem',
   color: globalTheme.colors.gray_19,
 });
 
-export const paragraphContentStyle = style({
-  ...globalTheme.fonts.bodyReg16,
-  color: globalTheme.colors.blue_33,
+export const paragraphContentStyle = styleVariants({
+  default: {
+    ...globalTheme.fonts.bodyReg16,
+    color: globalTheme.colors.blue_33,
+    padding: '0.9rem 1.2rem',
+    boxSizing: 'border-box',
+    border: '1px solid transparent',
+  },
+  edit: {
+    ...globalTheme.fonts.bodyReg16,
+    padding: '0.9rem 1.2rem',
+    boxSizing: 'border-box',
+    color: globalTheme.colors.blue_33,
+    backgroundColor: globalTheme.colors.gray_bg_05,
+    border: `1px solid ${globalTheme.colors.blue_main}`,
+    borderRadius: 8,
+  },
 });
 
 export const contentDivStyle = style({