[FRONTEND] 초기 설정화면 리뉴얼 (#111)

yuhoyeong · web-flow · commit 271e9e0a8dd8 · 2025-11-24T18:46:31.000+09:00
## 📝작업 내용

초기 설정 화면에서 현재 로그인된 이메일 주소 확인하고 로그아웃까지 할 수 있게 추가
현재 설정 진행 상태 저장해서 이후 로그인시에도 해당 단계로 자동 라우팅 + 설정안하고 다음 단계로 넘어가면 이전 단계로 강제
라우팅

## 💬리뷰 요구사항(선택)

 뒤로 가기 버튼도 필요할지
diff --git a/frontend/src/components/common/setting/NextButton/nextButton.module.css b/frontend/src/components/common/setting/NextButton/nextButton.module.css
@@ -1,4 +1,4 @@
-.nextBtn{
+.nextBtn {
     width: 145px;
     height: 50px;
     border-radius: 999px;
@@ -9,6 +9,7 @@
     font-weight: bold;
 }
 
-.able{
+.able {
     background-color: #ff5525;
+    cursor: pointer;
 }
diff --git a/frontend/src/components/common/setting/interestSelector/InterestSelector.tsx b/frontend/src/components/common/setting/interestSelector/InterestSelector.tsx
@@ -5,8 +5,19 @@ import AddInterestButton from "../AddInterestButton/AddInterestButton";
 import { useState, useEffect } from "react";
 import { useProfileSetupStore } from "../../../../stores/useProfileSetupStore";
 
-// 임시 데이터 (dummy_interest.json이 없으므로)
-const data: InterestItem[] = [];
+// 관심사 데이터
+const data: InterestItem[] = [
+  { id: 1, interest: "게임" },
+  { id: 2, interest: "프로그래밍" },
+  { id: 3, interest: "디자인" },
+  { id: 4, interest: "영상 편집" },
+  { id: 5, interest: "음악" },
+  { id: 6, interest: "사진" },
+  { id: 7, interest: "3D 모델링" },
+  { id: 8, interest: "문서 작업" },
+  { id: 9, interest: "데이터 분석" },
+  { id: 10, interest: "AI/머신러닝" },
+];
 
 type InterestItem = {
   id: number;
@@ -88,16 +99,16 @@ export default function InterestSelector({
     <div className={style.container}>
       {data.map((interestItem: InterestItem) => (
         <InterestButton
-          key={interestItem.interest}
+          key={`interest-${interestItem.id}`}
           onClick={() => handleClick(interestItem.interest)}
           selected={selectedInterests.includes(interestItem.interest)}
         >
           <div className={style.inputContainer}>{interestItem.interest}</div>
         </InterestButton>
       ))}
-      {customInterests.map((interest: string) => (
+      {customInterests.map((interest: string, index: number) => (
         <InterestButton
-          key={interest}
+          key={`custom-${index}-${interest}`}
           onClick={() => handleClick(interest)}
           selected={selectedInterests.includes(interest)}
         >
diff --git a/frontend/src/components/layout/ExpertVerifyLayout.tsx b/frontend/src/components/layout/ExpertVerifyLayout.tsx
@@ -11,19 +11,26 @@ import { useNavigate } from "react-router";
 import Button from "../common/Button/Button";
 import { useProfileSetupStore } from "@/stores/useProfileSetupStore";
 import { useEffect } from "react";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export default function ExpertVerifyLayout() {
   const { mutate: logout } = useLogout();
   const navigate = useNavigate();
   const { data: certifications, isLoading } = useCertificationGet();
   const { mutate: deleteCertification } = useCertificationDelete();
-  const { setCurrentStep } = useProfileSetupStore();
+  const { setCurrentStep, tempRole } = useProfileSetupStore();
+  const { user } = useAuthStore();
 
   useEffect(() => {
+    // tempRole이 EXPERT가 아니면 Setting 페이지로 리다이렉트
+    if (tempRole !== "EXPERT") {
+      navigate("/setting");
+      return;
+    }
+
     // 페이지 진입 시 현재 단계 저장
     setCurrentStep("expert-verify");
-  }, [setCurrentStep]);
-
+  }, [tempRole, setCurrentStep, navigate]);
   const instructionItems = [
     "컴퓨터공학 관련 학위증명서",
     "IT 관련 자격증 (정보처리기사, 컴활 등)",
@@ -66,10 +73,12 @@ export default function ExpertVerifyLayout() {
       title="전문가 인증"
       description="전문가임을 인증할 수 있는 다음 중 하나의 문서를 첨부해주세요."
     >
-      <button onClick={handleLogout} className={styles.logoutBtn}>
-        로그아웃
-      </button>
-
+      <div className={styles.userInfo}>
+        <button onClick={handleLogout} className={styles.logoutBtn}>
+          로그아웃
+        </button>
+        {user?.email && <span className={styles.userEmail}>{user.email}</span>}
+      </div>
       {isLoading ? (
         <div className={styles.loadingContainer}>
           <p>인증 상태를 확인하는 중...</p>
diff --git a/frontend/src/components/layout/SecondSettingLayout.tsx b/frontend/src/components/layout/SecondSettingLayout.tsx
@@ -8,21 +8,29 @@ import { useInitializeUser } from "../../api/services/useInitializeUser";
 import { useProfileSetupStore } from "../../stores/useProfileSetupStore";
 import { useLogout } from "@/api/services/useLogout";
 import Button from "../common/Button/Button";
+import { useAuthStore } from "@/stores/useAuthStore";
+import { useNavigate } from "react-router";
 
 export default function SecondSettingLayout() {
   const [count, setCount] = useState(0);
   const initializeMutation = useInitializeUser();
   const { tempRole, tempInterestIds, setCurrentStep } = useProfileSetupStore();
   const { mutate: logout } = useLogout();
+  const { user } = useAuthStore();
+  const navigate = useNavigate();
 
   useEffect(() => {
+    // tempRole이 없으면 Setting 페이지로 리다이렉트
+    if (!tempRole) {
+      navigate("/setting");
+      return;
+    }
+
     // 페이지 진입 시 현재 단계 저장
     setCurrentStep("interest-selection");
-  }, [setCurrentStep]);
-
+  }, [tempRole, setCurrentStep, navigate]);
   const handleNext = () => {
     if (count > 0 && tempRole) {
-      console.log("🎯 사용자 초기화 시작");
       initializeMutation.mutate({
         role: tempRole,
         interest_ids: tempInterestIds,
@@ -45,7 +53,7 @@ export default function SecondSettingLayout() {
         <InterestSelector count={count} setCount={setCount} />
       </div>
       <div className={style.interestFooter}>
-        <div className={style.leftSection}>
+        <div className={style.userInfo}>
           <div className={style.logoutBtnWrapper}>
             <Button
               color="white"
@@ -55,6 +63,7 @@ export default function SecondSettingLayout() {
               size="md"
             />
           </div>
+          {user?.email && <span className={style.userEmail}>{user.email}</span>}
           <div className={style.interestCount}>선택된 관심사: {count}개</div>
         </div>
         <NextButton
diff --git a/frontend/src/components/layout/SettingLayout.tsx b/frontend/src/components/layout/SettingLayout.tsx
@@ -11,6 +11,7 @@ import { useState, useEffect } from "react";
 import { useProfileSetupStore } from "../../stores/useProfileSetupStore";
 import { useLogout } from "@/api/services/useLogout";
 import Button from "../common/Button/Button";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export default function SettingLayout() {
   const [abled, setAbled] = useState(false);
@@ -22,9 +23,9 @@ export default function SettingLayout() {
   const navigate = useNavigate();
   const { setTempRole, setCurrentStep } = useProfileSetupStore();
   const { mutate: logout } = useLogout();
+  const { user } = useAuthStore();
 
   useEffect(() => {
-    // 페이지 진입 시 현재 단계 저장
     setCurrentStep("role-selection");
   }, [setCurrentStep]);
 
@@ -82,14 +83,19 @@ export default function SettingLayout() {
           />
         </div>
         <div className={style.btnContainer}>
-          <div className={style.logoutBtnWrapper}>
-            <Button
-              color="white"
-              backgroundColor="#f5f5f5"
-              content="로그아웃"
-              onClick={handleLogout}
-              size="md"
-            />
+          <div className={style.userInfo}>
+            <div className={style.logoutBtnWrapper}>
+              <Button
+                color="white"
+                backgroundColor="#f5f5f5"
+                content="로그아웃"
+                onClick={handleLogout}
+                size="md"
+              />
+            </div>
+            {user?.email && (
+              <span className={style.userEmail}>{user.email}</span>
+            )}
           </div>
           <NextButton btnAbled={abled} onClick={handleNext} text="다음" />
         </div>
diff --git a/frontend/src/components/layout/expertVerifyLayout.module.css b/frontend/src/components/layout/expertVerifyLayout.module.css
@@ -7,10 +7,25 @@
     max-width: 800px;
 }
 
-.logoutBtn {
+.userInfo {
     position: absolute;
-    top: 50px;
-    left: 50px;
+    bottom: 50px;
+    left: 150px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.userEmail {
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    padding: 8px 16px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+}
+
+.logoutBtn {
     padding: 12px 24px;
     background-color: #f5f5f5;
     border: 1px solid #ddd;
diff --git a/frontend/src/components/layout/secondSettingLayout.module.css b/frontend/src/components/layout/secondSettingLayout.module.css
@@ -22,12 +22,20 @@
     align-items: center;
 }
 
-.leftSection {
+.userInfo {
     display: flex;
     align-items: center;
     gap: 20px;
 }
 
+.userEmail {
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    padding: 8px 16px;
+    border-radius: 8px;
+}
+
 .logoutBtnWrapper button {
     background-color: #f5f5f5 !important;
     color: #666 !important;
diff --git a/frontend/src/components/layout/settingLayout.module.css b/frontend/src/components/layout/settingLayout.module.css
@@ -40,6 +40,20 @@
     justify-content: space-between;
 }
 
+.userInfo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.userEmail {
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    padding: 8px 16px;
+    border-radius: 8px;
+}
+
 .logoutBtnWrapper button {
     background-color: #f5f5f5 !important;
     color: #666 !important;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.nextBtn{`
	`1`	`+.nextBtn {`
`2`	`2`	`width: 145px;`
`3`	`3`	`height: 50px;`
`4`	`4`	`border-radius: 999px;`
`@@ -9,6 +9,7 @@`
`9`	`9`	`font-weight: bold;`
`10`	`10`	`}`
`11`	`11`
`12`		`-.able{`
	`12`	`+.able {`
`13`	`13`	`background-color: #ff5525;`
	`14`	`+ cursor: pointer;`
`14`	`15`	`}`