Merge pull request #51 from codeit-sprint-part3-6team/#43_공통-컴포넌트_프로필-이미지

Author: hwiiron

.gitignore

@@ -38,3 +38,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# http
+*.http

next.config.ts

@@ -18,6 +18,9 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'], // 외부 이미지 도메인 추가
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -9,11 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.2.0",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "next": "15.0.3",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

package.json

@@ -0,0 +1,84 @@
+.user_profile {
+  display: flex;
+  align-items: center;
+}
+
+.user_img {
+  border-radius: 100%;
+  width: 38px;
+  height: 38px;
+  overflow: hidden;
+  position: relative;
+}
+
+.user_img > div {
+  width: 100%;
+  height: 100%;
+}
+
+.user_img img,
+.user_img svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user_nickname {
+  font-size: 16px;
+  font-weight: 400;
+  color: #333236;
+  margin-left: 12px;
+}
+
+.header .user_nickname {
+  font-weight: 500;
+}
+
+.dashboard_detail .user_img {
+  width: 24px;
+  height: 24px;
+}
+
+.todo_detail .user_img {
+  width: 34px;
+  height: 34px;
+}
+
+.todo_detail .user_nickname {
+  font-size: 14px;
+}
+
+.todo_create .user_img {
+  width: 26px;
+  height: 26px;
+}
+
+@media screen and (max-width: 743px) {
+  .user_img {
+    width: 34px;
+    height: 34px;
+  }
+
+  .user_nickname {
+    font-size: 14px;
+    margin-left: 8px;
+  }
+
+  .header .user_nickname {
+    display: none;
+  }
+
+  .dashboard_detail .user_img {
+    width: 22px;
+    height: 22px;
+  }
+
+  .todo_detail .user_img {
+    width: 32px;
+    height: 32px;
+  }
+
+  .todo_detail .user_nickname {
+    font-size: 12px;
+  }
+}

public/images/img_profiledefault.svg

@@ -0,0 +1,34 @@
+import styles from './UserProfile.module.css';
+import Avatar from '@mui/material/Avatar';
+
+type UserProfileProps = {
+  type?: 'header' | 'dashboard_detail' | 'todo_detail' | 'todo_create';
+  onlyImg?: boolean;
+  nickname: string;
+  profileImageUrl?: string | null;
+};
+
+function UserProfile({
+  type,
+  onlyImg,
+  nickname,
+  profileImageUrl,
+}: UserProfileProps) {
+  return (
+    <>
+      <div className={`${styles.user_profile} ${styles[type]}`}>
+        <div className={styles.user_img}>
+          {profileImageUrl ? (
+            <Avatar src={profileImageUrl} alt={nickname} />
+          ) : (
+            <Avatar>{nickname[0].toUpperCase()}</Avatar>
+          )}
+        </div>
+
+        {!onlyImg && <span className={styles.user_nickname}>{nickname}</span>}
+      </div>
+    </>
+  );
+}
+
+export default UserProfile;

src/components/common/userprofile/UserProfile.module.css

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import axios from '../../../pages/api/axios';
+import UserProfile from './UserProfile';
+
+function TestUserProfile() {
+  const [user, setUser] = useState<any>();
+
+  const getData = async () => {
+    const response = await axios.get('/users/me', {
+      headers: {
+        Authorization:
+          'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDk1MSwidGVhbUlkIjoiMTEtNiIsImlhdCI6MTczNDA4MjM2MCwiaXNzIjoic3AtdGFza2lmeSJ9.1OCu1v8l8V9qtW1sghPM-O7NmEL_LuyIDFqPgb1lhWI',
+      },
+    });
+    const data = response.data;
+    setUser(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  if (!user) {
+    return;
+  }
+
+  return (
+    <>
+      <h1>프로필 이미지를 등록하지 않은 경우</h1>
+      <UserProfile nickname={user.nickname} profileImageUrl={null} />
+
+      <br />
+
+      <h1>대시보드 수정, 생성</h1>
+      <UserProfile
+        nickname={user.nickname}
+        profileImageUrl={user.profileImageUrl}
+      />
+
+      <br />
+
+      <h1>헤더</h1>
+      <UserProfile
+        nickname={user.nickname}
+        profileImageUrl={user?.profileImageUrl}
+        type="header"
+      />
+
+      <br />
+
+      <h1>대시보드 상세</h1>
+      <UserProfile
+        nickname={user.nickname}
+        profileImageUrl={user?.profileImageUrl}
+        type="dashboard_detail"
+        onlyImg={true}
+      />
+
+      <br />
+
+      <h1>할 일 상세 모달</h1>
+      <UserProfile
+        nickname={user.nickname}
+        profileImageUrl={user?.profileImageUrl}
+        type="todo_detail"
+      />
+
+      <br />
+
+      <h1>할 일 생성 모달 </h1>
+      <UserProfile
+        nickname={user.nickname}
+        profileImageUrl={user?.profileImageUrl}
+        type="todo_create"
+      />
+    </>
+  );
+}
+
+export default TestUserProfile;