Merge branch 'main' into haram

Author: haram831

README.md

@@ -1,2 +1,146 @@
-# 23-5-team1-web
-와플스튜디오 23.5기 1조 web
+# 행샤(Hangsha): 교내 행사 캘린더 서비스
+
+[<img width="250" height="115" alt="image" src="https://github.com/user-attachments/assets/046b4994-764e-40fd-9684-3d7d9dc11d76" />
+](https://hangsha.site/
+)
+
+## 기획 의도
+[서울대 비교과관리시스템](https://extra.snu.ac.kr/)에 대해 알고 계셨나요?  
+교내 곳곳에서 열리는 특강, 공연, 공모전, 토론회 등 각종 비교과 행사 정보를 볼 수 있는 사이트입니다.  
+그러나 정보 접근을 위해 서울대 로그인 및 인증이 필요하며, 사용성이 떨어짐에 따라 실제 서울대 학생들의 이용 정도 또한 낮다는 한계가 있습니다.
+
+이에 따라 저희는 **행샤**를 통해, **직관적인 캘린더 UI**로 **개인화**된 행사 확인 서비스를 제공하고자 합니다.
+
+## 핵심 기능
+### 1. 캘린더
+- 보다 더 직관적인 월/주/일 별 캘린더 UI
+- 행사 상세 정보 조회 및 실제 신청 링크 이동
+- 제목 및 다양한 조건 필터링을 통한 검색
+
+### 2. 개인화
+- 소셜 로그인 + 아이디/비밀번호 로그인
+- 회원가입 온보딩 시 관심 행사 카테고리 설정
+- 제외 키워드 설정 (해당 키워드 포함 행사는 캘린더에서 숨김)
+- 관심 행사 북마크 및 마이페이지에서 북마크 모아보기
+
+### 3. 시간표
+- 내 시간표 생성 및 저장
+- 주별 뷰에서 시간표와 겹치지 않는 행사 확인 가능
+- (확장 가능성) SNUTT 연동으로 시간표 자동 불러오기
+
+### 4. 후기
+- 행사별 개인 후기(메모) 작성 가능
+- 태그로 작성한 메모 분류 가능
+
+## 팀원
+| 이름 | Github ID | 분야 |
+|-|-|-|
+| 허서연(PM) | @h-seo-n | Frontend, PM, UI/UX Design |
+| 김하람 | @haram831 | Frontend, UI/UX Design |
+| 김도향 | @D-hyang | Backend |
+| 이승현 | @subir-sh | Backend, Data Scraping |
+| 정혜인 | @aystoe | Backend |
+
+
+## Tech Stack
+
+| Category | Tools |
+|----------|-------|
+| Framework | React 19, TypeScript |
+| Routing | React Router DOM 7 |
+| Build | Vite 7 |
+| HTTP | Axios |
+| Date Handling | date-fns |
+| Linting & Formatting | Biome |
+| Unused Code Detection | Knip |
+| Deployment | AWS S3 + CloudFront |
+
+<br />
+<hr />
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js** ≥ 24 (see [CI config](.github/workflows/ci.yml))
+- **Yarn** package manager
+
+### Installation
+
+```bash
+git clone https://github.com/wafflestudio/23-5-team1-web.git
+cd 23-5-team1-web
+yarn install
+```
+
+### Development
+
+```bash
+yarn dev
+```
+
+This starts the Vite dev server with hot module replacement. The dev server proxies `/api` requests to the backend automatically (configured in `vite.config.ts`).
+
+### Environment Variables
+
+Create a `.env.development` file (one is already included) or set these variables for production builds:
+
+| Variable | Description |
+|----------|-------------|
+| `VITE_API_URL` | Base path for API requests (default: `/api/v1`) |
+| `VITE_KAKAO_REST_API_KEY` | Kakao OAuth API key |
+| `VITE_GOOGLE_CLIENT_ID` | Google OAuth client ID |
+| `VITE_NAVER_CLIENT_ID` | Naver OAuth client ID |
+| `VITE_KAKAO_REDIRECT_URI` | Kakao OAuth callback URL |
+| `VITE_GOOGLE_REDIRECT_URI` | Google OAuth callback URL |
+| `VITE_NAVER_REDIRECT_URI` | Naver OAuth callback URL |
+| `VITE_REST_REQUEST_URL` | Production API endpoint |
+
+### Build for Production
+
+```bash
+yarn build
+```
+
+The output is written to `dist/` and can be served as static files.
+
+## Project Structure
+
+```
+src/
+├── api/          # API service layer (auth, events, users, timetables)
+├── contexts/     # React Context providers for global state
+├── pages/        # Page components (auth, calendar, timetable, search, etc.)
+├── router/       # Route definitions
+├── widgets/      # Reusable UI components
+├── util/         # Shared types, constants, and helpers
+└── styles/       # CSS modules
+```
+
+## Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `yarn dev` | Start dev server with hot reload |
+| `yarn build` | Type-check and build for production |
+| `yarn preview` | Preview the production build locally |
+| `yarn lint` | Run Biome linter |
+| `yarn check:format` | Check code formatting |
+| `yarn check:unused` | Detect unused exports with Knip |
+| `yarn check-all` | Run all checks (lint + unused code) |
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/my-feature`)
+3. Make your changes and ensure `yarn check-all` passes
+4. Open a pull request using the [PR template](.github/PULL_REQUEST_TEMPLATE.md)
+
+## Getting Help
+
+- Open an [issue](https://github.com/wafflestudio/23-5-team1-web/issues) using one of the provided [issue templates](.github/ISSUE_TEMPLATE)
+- Reach out to the team via [Waffle Studio](https://github.com/wafflestudio)
+
+## Maintainers
+
+Built and maintained by **Waffle Studio 23.5 Team 1**.

src/api/user.ts

@@ -50,8 +50,13 @@ export const removeBookmark = async (eventId: number) => {
 
 // --- Interests ---
 export const getInterestCategories = async () => {
-	const res = await api.get<Category[]>("/users/me/interest-categories");
-	return res.data;
+	const res = await api.get<{
+		items: { category: Category; priority: number }[];
+	}>("/users/me/interest-categories");
+	const sortedCategories = res.data.items
+		.sort((a, b) => a.priority - b.priority)
+		.map((item) => item.category);
+	return sortedCategories;
 };
 
 export const addInterestCategories = async (

src/contexts/SearchContext.tsx

@@ -20,6 +20,7 @@ interface SearchContextType {
 	setSize: Dispatch<SetStateAction<number>>;
 	fetchSearchResult: (q: string, page: number, size: number) => Promise<void>;
 	searchResults: SearchResult | null;
+	emptySearchResults: ()=>void;
 	// fetchSearchResult: (q: string, page: number, size: number) => Promise<void>;
 	searchLoading: boolean;
 }
@@ -45,12 +46,16 @@ export const SearchProvider = ({ children }: { children: ReactNode }) => {
 				setSearchResults(null);
 				console.error("Error in getting search results", e);
 			} finally {
-				setSearchLoading(true);
+				setSearchLoading(false);
 			}
 		},
 		[],
 	);
 
+	const emptySearchResults = () => {
+		setSearchResults(null);
+	}
+
 	// useEffect(() => {
 	//     fetchSearchResult(query, page, size);
 	// }, [fetchSearchResult, query, page, size])
@@ -67,6 +72,7 @@ export const SearchProvider = ({ children }: { children: ReactNode }) => {
 				searchResults,
 				searchLoading,
 				fetchSearchResult,
+				emptySearchResults,
 			}}
 		>
 			{children}

src/pages/MyPage.tsx

@@ -7,15 +7,23 @@ import { useNavigate } from "react-router-dom";
 import { useTimetable } from "@/contexts/TimetableContext";
 import { useEffect, useState } from "react";
 import { RiPencilFill } from "react-icons/ri";
-import { FaCamera } from "react-icons/fa6";
+import { FaCamera, FaStar } from "react-icons/fa6";
 import { IoMdDoneAll } from "react-icons/io";
+import { useUserData } from "@/contexts/UserDataContext";
+import Onboarding from "./auth/OnBoarding/Onboarding";
+import Modal from "@/widgets/Modal";
+import Loading from "@/widgets/Loading";
+import defaultProfile from "/assets/defaultProfile.png";
 
-const ProfileCard = () => {
+const ProfileCard = ({ onClickInterest } : { onClickInterest: () => void }) => {
 	const { user, updateUsername, setProfileImg } = useAuth();
+	const { interestCategories } = useUserData();
 	const { timetables } = useTimetable();
 	const [profilePreviewUrl, setProfilePreviewUrl] = useState<string>(
-		user ? user.profileImageUrl : "/assets/defaultProfile.png",
-	);
+        (user?.profileImageUrl && user.profileImageUrl !== "") 
+            ? user.profileImageUrl 
+            : defaultProfile
+    );	
 	const [imgFile, setImgFile] = useState<File | null>(null);
 	const [, setIsDefaultProfile] = useState<boolean>(false);
 	const [username, setUsername] = useState<string>(
@@ -25,7 +33,7 @@ const ProfileCard = () => {
 	const navigate = useNavigate();
 
 	const handleImageError = () => {
-		setProfilePreviewUrl("/assets/defaultProfile.png");
+		setProfilePreviewUrl(defaultProfile);
 	};
 
 	const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,6 +57,13 @@ const ProfileCard = () => {
 		setImgFile(null);
 	};
 
+	useEffect(() => {
+        if (user?.profileImageUrl && user.profileImageUrl.trim() !== "") {
+            setProfilePreviewUrl(user.profileImageUrl);
+        } else {
+            setProfilePreviewUrl(defaultProfile);
+        }
+    }, [user?.profileImageUrl]);
 	// profile image preview url cleanup (cleanup callback is executed before next effect / component unmount)
 	useEffect(() => {
 		return () => {
@@ -63,8 +78,8 @@ const ProfileCard = () => {
 			<div className={styles.profileRow}>
 				<div className={styles.profileImgWrapper}>
 					<img
-						src={profilePreviewUrl}
 						alt="profile img"
+						src={profilePreviewUrl}
 						onError={handleImageError}
 					/>
 					{isEditmode && (
@@ -121,6 +136,26 @@ const ProfileCard = () => {
 					/>
 				)}
 			</div>
+			<button className={styles.preferenceCol} type='button' onClick={onClickInterest}>
+				<div className={styles.preferenceHeader}>
+					<FaStar size={24} color="#828282" style={{ marginRight: 12 }}/>
+					<span>행사 보기 우선순위</span>
+				</div>
+					{(interestCategories && interestCategories.length > 0) ? (
+					<div>
+						<ul className={styles.preferenceChips}>
+					{interestCategories.map((cat, idx) => (
+						<li className={`${styles.preferenceChip} ${cat.groupId === 3 && styles.category} ${cat.groupId === 2 && styles.organization}`} key={cat.id}>
+							{`${idx+1}순위: ${cat.name}`}
+						</li>
+					))}
+					</ul>
+				</div>
+				) : (
+					<span className={styles.notYetText}>클릭해서 우선순위로 확인할 행사를 설정해보세요!</span>
+				)
+				}
+			</button>
 			<button
 				type="button"
 				className={styles.timeTableBtn}
@@ -146,21 +181,42 @@ const ProfileCard = () => {
 };
 
 const MyPage = () => {
-	const { user } = useAuth();
+	const { user, isLoading } = useAuth();
+	const [isEditingInterest, setIsEditingInterest] = useState<boolean>(false);
+	const navigate = useNavigate();
 
 	return (
 		<div className={styles.main}>
 			<Navigationbar />
-			{user ? (
-				<div className={styles.mypageContainer}>
-					<ProfileCard />
-					<div className={styles.widgetsWrapper}>
-						<BookmarkWidget />
-						<MemoWidget />
-					</div>
-				</div>
+			{isLoading ?
+			(
+			<Loading />
+			)
+			: (
+			isEditingInterest ? (
+				<Onboarding isEditing={true} onFinishEdit={()=>setIsEditingInterest(false)} />
 			) : (
-				<div className={styles.notFound}>{/* Login modal */}</div>
+				user ? (
+					<div className={styles.mypageContainer}>
+						<ProfileCard onClickInterest={() => setIsEditingInterest(()=>true)}/>
+						<div className={styles.widgetsWrapper}>
+							<BookmarkWidget />
+							<MemoWidget />
+						</div>
+					</div>
+				) : (
+					<div className={styles.notFound}>
+						<Modal
+							content="마이페이지 이용을 위해서는 로그인을 해주세요."
+							leftText="로그인"
+							rightText="회원가입"
+							onLeftClick={()=>navigate('/auth/login')}
+							onRightClick={()=>navigate('/auth/signup')}
+							onClose={null}
+						/>
+					</div>
+				)
+			)
 			)}
 		</div>
 	);

src/pages/auth/OnBoarding/Onboarding.tsx

@@ -4,13 +4,16 @@ import { getCategoryGroups, getOrganizations } from "@api/event";
 import { addInterestCategories } from "@api/user";
 import type { Category } from "@types";
 import styles from "@styles/Onboarding.module.css";
+import { useUserData } from "@/contexts/UserDataContext";
+
+export default function Onboarding({ isEditing=false, onFinishEdit } : { isEditing?: boolean; onFinishEdit?: () => void }) {
+	const { refreshUserData, interestCategories } = useUserData();
 
-export default function Onboarding() {
 	const [, setSearchParams] = useSearchParams();
 
 	const [categories, setCategories] = useState<Category[]>([]);
 	const [selectedPreferences, setSelectedPreferences] = useState<Category[]>(
-		[],
+		interestCategories || [],
 	);
 	const [organizations, setOrganizations] = useState<Category[] | null>(null);
 
@@ -65,6 +68,10 @@ export default function Onboarding() {
 
 			await addInterestCategories(items);
 
+			if (isEditing && onFinishEdit) {
+				refreshUserData();
+				onFinishEdit();
+			}
 			setSearchParams((prev) => {
 				const next = new URLSearchParams(prev);
 				next.set("step", "complete");
@@ -77,7 +84,7 @@ export default function Onboarding() {
 	};
 
 	return (
-		<div className={styles.onbPage}>
+		<div className={`${styles.onbPage} ${isEditing ? styles.inMypage : ''}`}>
 			<header className={styles.onbHeader}>
 				<h1 className={styles.onbTitle}>관심사 설정</h1>
 				<p className={styles.onbSubtitle}>