✨feat: 프로필 이미지 선택 구현 및 Axios 모듈화 완료feat: 프로필 이미지 선택 구현 및 Axios 모듈화 완료

✨feat: 프로필 이미지 선택 구현 및 Axios 모듈화 완료feat: 프로필 이미지 선택 구현 및 Axios 모듈화 완료

Author: minimo-9

eslint.config.js

@@ -46,13 +46,13 @@ const config = [
       'import/no-anonymous-default-export': [
         'error',
         {
-          allowArrowFunction: false,
+          allowArrowFunction: true,
           allowAnonymousFunction: false,
           allowAnonymousClass: false,
         },
       ],
 
-      'func-style': ['warn', 'declaration', { allowArrowFunctions: false }],
+      'func-style': ['warn', 'declaration', { allowArrowFunctions: true }],
     },
     settings: {
       react: {

src/App.jsx

@@ -1,7 +1,6 @@
 import './assets/styles/base.scss';
 import { Route, Routes } from 'react-router-dom';
 import Header from './components/layout/Header/Header';
-import Test from './pages/List-page/Test';
 import Home from './pages/Home/home';
 
 export default function App() {
@@ -10,7 +9,6 @@ export default function App() {
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/" element={<Test />} />
       </Routes>
     </>
   );

src/api/api.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  headers: { 'Content-Type': 'application/json' },
+  timeout: 5000,
+});
+
+api.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    const status = error.response?.status;
+    if (status === 404) {
+      alert('요청한 자원을 찾을 수 없습니다.');
+    } else if (status === 500) {
+      alert('서버에 문제가 발생했습니다.');
+    } else {
+      alert('문제가 발생했습니다.');
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default api;

src/api/fetchProfileImages.js.js

@@ -0,0 +1,6 @@
+import api from './api';
+
+export default async function fetchProfileImages() {
+  const res = await api.get('/profile-images/');
+  return res.data.imageUrls;
+}

src/components/common/Button.jsx

@@ -1,13 +1,18 @@
 import styles from './Button.module.scss';
 
-export default function Button({ text, type = 'primary', onClick, disabled }) {
+export default function Button({
+  children,
+  type = 'primary',
+  onClick,
+  disabled,
+}) {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       className={`${styles.button} ${styles[`button--${type}`]}`}
     >
-      {text}
+      {children}
     </button>
   );
 }

src/components/user-profile/UserProFileSelector.jsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import fetchProfileImages from '../../api/fetchProfileImages.js';
+import DEFAULT_PROFILE_IMAGE from '../../constants/image.js';
+import styles from './UserProFileSelector.module.scss';
+
+export default function UserProfileSelector({ onSelect }) {
+  const [profileImages, setProfileImages] = useState([]);
+  const [selectedImage, setSelectedImage] = useState(DEFAULT_PROFILE_IMAGE);
+
+  useEffect(() => {
+    const loadImages = async () => {
+      try {
+        const images = await fetchProfileImages();
+        setProfileImages(images);
+      } catch (_) {
+        setProfileImages([]);
+      }
+    };
+    loadImages();
+  }, []);
+
+  const handleSelect = (url) => {
+    setSelectedImage(url);
+    onSelect?.(url);
+  };
+
+  return (
+    <div className={styles['profile-select']}>
+      <h2 className={styles['profile-select__title']}>프로필 이미지</h2>
+      <div className={styles['profile-select__content']}>
+        <img
+          src={selectedImage}
+          alt="선택된 프로필"
+          className={styles['profile-select__selected-image']}
+        />
+        <div className={styles['profile-select__right']}>
+          <p className={styles['profile-select__description']}>
+            프로필 이미지를 선택해주세요!
+          </p>
+          <div className={styles['profile-select__image-list']}>
+            {profileImages.map((url, idx) => (
+              <img
+                key={idx}
+                src={url}
+                alt={`profile-${idx}`}
+                className={`${styles['profile-select__image']} ${
+                  selectedImage === url
+                    ? styles['profile-select__image--selected']
+                    : ''
+                }`}
+                onClick={() => handleSelect(url)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/user-profile/UserProFileSelector.module.scss

@@ -0,0 +1,59 @@
+@use '../../assets/styles/variables.scss' as *;
+
+.profile-select {
+  display: flex;
+  flex-direction: column;
+  width: 71.7rem;
+  height: 14.2rem;
+  gap: 12px;
+
+  &__title {
+    width: 12.9rem;
+    height: 3.6rem;
+    margin: 0;
+    @include font-24-bold;
+    color: $gray-900;
+    white-space: nowrap;
+  }
+
+  &__selected-image {
+    width: 8rem;
+    height: 8rem;
+    border-radius: 100px;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    height: 9.4rem;
+    gap: 32px;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: column;
+    width: 60.5rem;
+    gap: 12px;
+  }
+
+  &__description {
+    width: 19rem;
+    height: 2.6rem;
+    @include font-16-regular;
+    color: $gray-500;
+
+    white-space: nowrap;
+  }
+  &__image-list {
+    display: flex;
+    height: 5.6rem;
+    gap: 4px;
+  }
+
+  &__image {
+    width: 5.6rem;
+    height: 5.6rem;
+    border: 1px solid $gray-200;
+    border-radius: 100px;
+  }
+}

src/constants/image.js

@@ -0,0 +1,4 @@
+const DEFAULT_PROFILE_IMAGE =
+  'https://learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com/sprint-proj-image/default_avatar.png';
+
+export default DEFAULT_PROFILE_IMAGE;