[ Mobile ] [ Feat ] mobile mypage 구현 #43

apps/mobile/src/app/about/page.tsx

@@ -3,12 +3,12 @@ import hyojun from '@/shared/assets/images/rankit_developer_HJKIM.jpg';
 import seungjun from '@/shared/assets/images/rankit_developer_SJLEE.jpg';
 import wooseok from '@/shared/assets/images/rankit_developer_WSPARK.jpg';
 import ImsiImg from '@/shared/assets/svgs/imsiImg.svg';
-import Tier1 from '@/shared/assets/svgs/tier/sm/tier_1.svg';
-import Tier2 from '@/shared/assets/svgs/tier/sm/tier_2.svg';
-import Tier3 from '@/shared/assets/svgs/tier/sm/tier_3.svg';
-import Tier4 from '@/shared/assets/svgs/tier/sm/tier_4.svg';
-import Tier5 from '@/shared/assets/svgs/tier/sm/tier_5.svg';
-import Tier6 from '@/shared/assets/svgs/tier/sm/tier_6.svg';
+import Tier1 from '@/shared/assets/svgs/tier/default/tier_1.svg';
+import Tier2 from '@/shared/assets/svgs/tier/default/tier_2.svg';
+import Tier3 from '@/shared/assets/svgs/tier/default/tier_3.svg';
+import Tier4 from '@/shared/assets/svgs/tier/default/tier_4.svg';
+import Tier5 from '@/shared/assets/svgs/tier/default/tier_5.svg';
+import Tier6 from '@/shared/assets/svgs/tier/default/tier_6.svg';
 import AboutDeveloper from './_components/aboutDeveloper/aboutDeveloper';
 import {
   container,

apps/mobile/src/app/user/[userId]/UserPage.css.ts

@@ -0,0 +1,90 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '../../../shared/styles/globalTheme.css';
+
+export const flexColumnCenter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const containerStyle = style([
+  flexColumnCenter,
+  {
+    width: '100%',
+  },
+]);
+
+export const divStyle = style({
+  width: '39.3rem',
+});
+
+export const sharedDivStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap',
+
+  margin: '0 auto',
+  padding: '0 2.1rem',
+});
+
+export const topDivStyle = style({
+  paddingTop: '4rem',
+  backgroundColor: globalTheme.colors.white,
+});
+
+export const buttonDivStyle = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: '0.8rem',
+  marginTop: '8.8rem',
+  marginBottom: '8.8rem',
+});
+
+export const middleDivStyle = style({
+  backgroundColor: globalTheme.colors.gray_bg_06,
+});
+
+export const middleContentDivStyle = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '1.7rem',
+  marginTop: '10.4rem',
+  marginBottom: '8.8rem',
+});
+
+export const bottomDivStyle = style({
+  minHeight: 669,
+  backgroundColor: globalTheme.colors.white,
+});
+
+export const bottomDivHeadingStyle = style({
+  ...globalTheme.fonts.headBold24,
+  marginTop: '8.8rem',
+  color: globalTheme.colors.gray_19,
+});
+
+export const bottomDivRefreshButtonStyle = style({
+  ...globalTheme.fonts.headerReg16,
+  color: globalTheme.colors.blue_33,
+  textAlign: 'end',
+});
+
+export const listStyle = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '1.7rem',
+  justifyContent: 'space-between',
+  marginTop: '2rem',
+  marginBottom: '6.8rem',
+});
+
+export const flexColumn = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const topSectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4.4rem',
+});

apps/mobile/src/app/user/[userId]/_components/SVGTier/SVGTier.tsx

@@ -0,0 +1,64 @@
+import { SVGAttributes, FC } from 'react';
+import Tier1DefaultIcon from '@/shared/assets/svgs/tier/default/tier_1.svg';
+import Tier2DefaultIcon from '@/shared/assets/svgs/tier/default/tier_2.svg';
+import Tier3DefaultIcon from '@/shared/assets/svgs/tier/default/tier_3.svg';
+import Tier4DefaultIcon from '@/shared/assets/svgs/tier/default/tier_4.svg';
+import Tier5DefaultIcon from '@/shared/assets/svgs/tier/default/tier_5.svg';
+import Tier6DefaultIcon from '@/shared/assets/svgs/tier/default/tier_6.svg';
+import Tier1LargeIcon from '@/shared/assets/svgs/tier/lg/tier_1.svg';
+import Tier2LargeIcon from '@/shared/assets/svgs/tier/lg/tier_2.svg';
+import Tier3LargeIcon from '@/shared/assets/svgs/tier/lg/tier_3.svg';
+import Tier4LargeIcon from '@/shared/assets/svgs/tier/lg/tier_4.svg';
+import Tier5LargeIcon from '@/shared/assets/svgs/tier/lg/tier_5.svg';
+import Tier6LargeIcon from '@/shared/assets/svgs/tier/lg/tier_6.svg';
+import Tier1SmallIcon from '@/shared/assets/svgs/tier/sm/tier_1.svg';
+import Tier2SmallIcon from '@/shared/assets/svgs/tier/sm/tier_2.svg';
+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';
+
+interface SVGTierProps extends SVGAttributes<SVGElement> {
+  size?: 'default' | 'sm' | 'lg';
+  tier?: number;
+}
+
+const defaultComponent: Record<number, FC<SVGAttributes<SVGElement>>> = {
+  1: Tier1DefaultIcon,
+  2: Tier2DefaultIcon,
+  3: Tier3DefaultIcon,
+  4: Tier4DefaultIcon,
+  5: Tier5DefaultIcon,
+  6: Tier6DefaultIcon,
+};
+
+const lgComponent: Record<number, FC<SVGAttributes<SVGElement>>> = {
+  1: Tier1LargeIcon,
+  2: Tier2LargeIcon,
+  3: Tier3LargeIcon,
+  4: Tier4LargeIcon,
+  5: Tier5LargeIcon,
+  6: Tier6LargeIcon,
+};
+
+const smComponent: Record<number, FC<SVGAttributes<SVGElement>>> = {
+  1: Tier1SmallIcon,
+  2: Tier2SmallIcon,
+  3: Tier3SmallIcon,
+  4: Tier4SmallIcon,
+  5: Tier5SmallIcon,
+  6: Tier6SmallIcon,
+};
+
+const SVGTier = ({ size = 'default', tier = 1, ...props }: SVGTierProps) => {
+  const TierComponent =
+    size === 'default'
+      ? defaultComponent[tier]
+      : size === 'lg'
+        ? lgComponent[tier]
+        : smComponent[tier];
+
+  return <TierComponent {...props} />;
+};
+
+export default SVGTier;

apps/mobile/src/app/user/[userId]/_components/cardInfo/cardInfo.css.ts

@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const containerStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 8,
+  position: 'relative',
+  width: 167,
+  height: 145,
+  color: globalTheme.colors.gray_19,
+  backgroundColor: globalTheme.colors.gray_bg_04,
+});
+
+export const headingStyle = style({
+  ...globalTheme.fonts.mobileDetailReg14,
+  position: 'absolute',
+  top: '1.6rem',
+  left: '1.6rem',
+});
+
+export const contentParagraphStyle = style({
+  ...globalTheme.fonts.mobileTitleBold28,
+});
+
+export const subContentParagraphStyle = style({
+  ...globalTheme.fonts.mobileDetailReg14,
+  position: 'absolute',
+  bottom: '1.6rem',
+  left: '1.6rem',
+});

apps/mobile/src/app/user/[userId]/_components/cardInfo/cardInfo.tsx

@@ -0,0 +1,24 @@
+import {
+  containerStyle,
+  contentParagraphStyle,
+  headingStyle,
+  subContentParagraphStyle,
+} from './cardInfo.css';
+
+interface cardInfoProps {
+  title: string;
+  content: string;
+  subContent?: string;
+}
+
+const CardInfo = ({ title, content, subContent }: cardInfoProps) => {
+  return (
+    <div className={containerStyle}>
+      <h3 className={headingStyle}>{title}</h3>
+      <p className={contentParagraphStyle}>{content}</p>
+      {subContent && <p className={subContentParagraphStyle}>{subContent}</p>}
+    </div>
+  );
+};
+
+export default CardInfo;

apps/mobile/src/app/user/[userId]/_components/cardProfile/cardProfile.css.ts

@@ -0,0 +1,53 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const containerStyle = style({
+  border: `1px solid ${globalTheme.colors.gray_stroke}`,
+  borderRadius: 8,
+  width: '16.7rem',
+  overflow: 'hidden',
+});
+
+export const imageDivStyle = style({
+  borderRadius: 8,
+  width: '16.7rem',
+  height: '16.7rem',
+});
+
+export const imageStyle = style({
+  objectFit: 'cover',
+});
+
+export const contentDivStyle = style({
+  paddingTop: '0.73rem',
+  paddingLeft: '1rem',
+  paddingRight: '1rem',
+});
+
+export const languageParagraphStyle = style({
+  ...globalTheme.fonts.mobileDetailSemiBold14,
+  color: globalTheme.colors.blue_main,
+  marginBottom: '0.36rem',
+});
+
+export const titleDivStyle = style({
+  ...globalTheme.fonts.mobileHeadSemiBold18,
+  display: 'flex',
+  alignItems: 'row',
+  gap: '0.3rem',
+});
+
+export const labelDivStyle = style({
+  display: 'flex',
+  gap: '0.5em',
+});
+
+export const labelStyle = style({
+  ...globalTheme.fonts.detailMed12,
+  marginTop: '1.0rem',
+  marginBottom: '1.36rem',
+  borderRadius: 4,
+  padding: '0.4rem 0.8rem',
+  color: globalTheme.colors.blue_66,
+  backgroundColor: globalTheme.colors.gray_bg_04,
+});

apps/mobile/src/app/user/[userId]/_components/cardProfile/cardProfile.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+import SVGTier from '../SVGTier/SVGTier';
+import {
+  containerStyle,
+  contentDivStyle,
+  imageDivStyle,
+  labelDivStyle,
+  labelStyle,
+  languageParagraphStyle,
+  titleDivStyle,
+} from './cardProfile.css';
+
+interface CardProfileProps {
+  profileSrc?: string;
+  language: string;
+  tier: number;
+  userName: string;
+  school: string;
+  region: string;
+}
+
+const CardProfile = ({
+  profileSrc = 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  language,
+  tier,
+  userName,
+  school,
+  region,
+}: CardProfileProps) => {
+  return (
+    <div className={containerStyle}>
+      <div className={imageDivStyle}>
+        <Image
+          src={profileSrc}
+          width={460}
+          height={460}
+          alt={`${userName} 프로필 이미지`}
+          className={imageDivStyle}
+        />
+      </div>
+
+      <div className={contentDivStyle}>
+        <p className={languageParagraphStyle}>{language}</p>
+
+        <div className={titleDivStyle}>
+          <SVGTier size="default" tier={tier} />
+          <h3>{userName}</h3>
+        </div>
+
+        <div className={labelDivStyle}>
+          <span className={labelStyle}>{school}</span>
+          <span className={labelStyle}>{region}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardProfile;

apps/mobile/src/app/user/[userId]/_components/introduction/introduction.css.ts

@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const headingTitleStyle = style({
+  ...globalTheme.fonts.headBold36,
+  color: globalTheme.colors.gray_19,
+  width: '100%',
+  whiteSpace: 'normal',
+});
+
+export const headingSubTitleStyle = style({
+  ...globalTheme.fonts.mobileTitleSemiBold20,
+  color: globalTheme.colors.gray_19,
+});
+
+export const paragraphContentStyle = style({
+  ...globalTheme.fonts.mobileBodyReg16,
+  color: globalTheme.colors.blue_33,
+});
+
+export const contentDivStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4.8rem',
+  marginTop: '4.3rem',
+});
+
+export const contentStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+});