Merge pull request #119 from wafflestudio/dev

dev -> main 반영

Author: h-seo-n

src/contexts/AuthProvider.tsx

@@ -73,6 +73,13 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 				if (restoredUser) {
 					setUser(restoredUser);
 					setIsAuthenticated(true);
+				} else if (TokenService.getToken()) {
+					try {
+						const user = await auth.getUser();
+						setUser(user); setIsAuthenticated(true);
+					} catch {
+						TokenService.clearTokens();
+					}
 				}
 			} catch (e) {
 				console.error(e);

src/contexts/SearchContext.tsx

@@ -52,9 +52,9 @@ export const SearchProvider = ({ children }: { children: ReactNode }) => {
 		[],
 	);
 
-	const emptySearchResults = () => {
+	const emptySearchResults = useCallback(() => {
 		setSearchResults(null);
-	};
+	}, []);
 
 	// useEffect(() => {
 	//     fetchSearchResult(query, page, size);

src/pages/MyPage.tsx

@@ -23,6 +23,26 @@ import Loading from "@/widgets/Loading";
 import defaultProfile from "/assets/defaultProfile.png";
 import BottomNav from "@/widgets/BottomNav";
 
+// 이름 길이 제한: 한글 1자 = 2, 그 외 1자 = 1 → 상한 20 (한글 10자 / 영어 20자)
+const MAX_NAME_WEIGHT = 20;
+
+const isKoreanChar = (char: string) => /[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(char);
+
+const getNameWeight = (value: string) =>
+	[...value].reduce((acc, char) => acc + (isKoreanChar(char) ? 2 : 1), 0);
+
+// 가중치 상한을 넘지 않도록 문자열을 잘라낸다
+const truncateToWeight = (value: string, max: number) => {
+	let weight = 0;
+	let result = "";
+	for (const char of value) {
+		weight += isKoreanChar(char) ? 2 : 1;
+		if (weight > max) break;
+		result += char;
+	}
+	return result;
+};
+
 const ProfileCard = ({ onClickInterest }: { onClickInterest: () => void }) => {
 	const { user, updateUsername, setProfileImg } = useAuth();
 	const { interestCategories } = useUserData();
@@ -40,6 +60,9 @@ const ProfileCard = ({ onClickInterest }: { onClickInterest: () => void }) => {
 	const [isEditmode, setIsEditmode] = useState<boolean>(false);
 	const navigate = useNavigate();
 
+	const nameWeight = getNameWeight(username);
+	const isNameMax = nameWeight >= MAX_NAME_WEIGHT;
+
 	const handleImageError = () => {
 		setProfilePreviewUrl(defaultProfile);
 	};
@@ -105,20 +128,38 @@ const ProfileCard = ({ onClickInterest }: { onClickInterest: () => void }) => {
 				</div>
 				<div className={styles.nameEmailCol}>
 					{isEditmode ? (
-						<input
-							className={styles.nameInput}
-							type="text"
-							value={username}
-							placeholder="이름을 입력하세요"
-							onChange={(e) => setUsername(e.currentTarget.value)}
-							onKeyDown={(e: React.KeyboardEvent) => {
-								if (e.key === "Enter" && !e.nativeEvent.isComposing) {
-									e.stopPropagation();
-									e.preventDefault();
-									handleChangesSave();
+						<div className={styles.nameInputWrapper}>
+							<input
+								className={styles.nameInput}
+								type="text"
+								value={username}
+								placeholder="이름을 입력하세요"
+								onChange={(e) =>
+									setUsername(
+										truncateToWeight(e.currentTarget.value, MAX_NAME_WEIGHT),
+									)
 								}
-							}}
-						/>
+								onKeyDown={(e: React.KeyboardEvent) => {
+									if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+										e.stopPropagation();
+										e.preventDefault();
+										handleChangesSave();
+									}
+								}}
+							/>
+							<div className={styles.nameHintRow}>
+								<span
+									className={`${styles.nameHint} ${isNameMax ? styles.nameHintMax : ""}`}
+								>
+									한글 10자 · 영어 20자 이내로 입력해주세요
+								</span>
+								<span
+									className={`${styles.nameCounter} ${isNameMax ? styles.nameHintMax : ""}`}
+								>
+									{nameWeight}/{MAX_NAME_WEIGHT}
+								</span>
+							</div>
+						</div>
 					) : (
 						<span className={styles.nameText}>{user?.username}</span>
 					)}

src/pages/auth/Home.tsx

@@ -1,5 +1,6 @@
 // Home.tsx
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
+import { useAuth } from "@contexts/AuthProvider";
 import logo from "/assets/logo.png";
 import styles from "@styles/Home.module.css";
 
@@ -15,6 +16,13 @@ const SOCIAL_LOGIN_ENTRY = {
 
 export default function Home() {
 	const navigate = useNavigate();
+	const { isAuthenticated, isLoading } = useAuth();
+
+	// 세션 복원 중에는 판단을 보류
+	if (isLoading) return null;
+
+	// 이미 로그인된 사용자는 /main 으로
+	if (isAuthenticated) return <Navigate to="/main" replace />;
 
 	const toLogin = () => navigate("/auth/login");
 	const toSignUp = () => navigate("/auth/signup");

src/pages/auth/Login/SocialLoginHandler.tsx

@@ -20,12 +20,9 @@ const LoginHandler = () => {
 		const run = async () => {
 			try {
 				await completeSocialLogin(accessToken);
-				navigate(
-					isNewUser ? "/auth/signup?step=onboarding" : "/auth/complete",
-					{
-						replace: true,
-					},
-				);
+				navigate(isNewUser ? "/auth/signup?step=onboarding" : "/main", {
+					replace: true,
+				});
 			} catch (e) {
 				console.error(e);
 				navigate("/auth/login", { replace: true });

src/pages/search/Search.tsx

@@ -28,6 +28,7 @@ const SearchView = () => {
 		setPage,
 		setSize,
 		fetchSearchResult,
+		emptySearchResults,
 		searchResults,
 		searchLoading,
 	} = useSearch();
@@ -56,10 +57,13 @@ const SearchView = () => {
 		const fetchData = async () => {
 			if (query.trim()) {
 				await fetchSearchResult(query, page, size);
+			} else {
+				// 빈 검색어로 들어오면 이전 검색 결과를 비움
+				emptySearchResults();
 			}
 		};
 		fetchData();
-	}, [fetchSearchResult, query, page, size]);
+	}, [fetchSearchResult, emptySearchResults, query, page, size]);
 
 	useEffect(() => {
 		const mq = window.matchMedia("(max-width: 576px)");

src/pages/search/SearchToolbar.tsx

@@ -44,6 +44,7 @@ const SearchToolbar = ({ viewMode, setViewMode }: SearchToolbarProps) => {
 					<div className={styles.inputWrapper}>
 						<input
 							type="text"
+							maxLength={50}
 							className={styles.searchInput}
 							placeholder="검색어를 입력해주세요"
 							value={queryState}

src/router/AppRoutes.tsx

@@ -2,7 +2,6 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import Home from "../pages/auth/Home";
 import Login from "../pages/auth/Login/Login";
 import LoginHandler from "../pages/auth/Login/SocialLoginHandler";
-import CompleteSignUp from "../pages/auth/OnBoarding/CompleteSignUp";
 import EmailSignUp from "../pages/auth/Signup/EmailSignUp";
 import CalendarView from "../pages/CalendarView";
 import MainDay from "../pages/MainDay";
@@ -23,7 +22,7 @@ export default function AppRoutes() {
 				<Route path="/" element={<Home />} />
 				<Route path="/auth/login" element={<Login />} />
 				<Route path="/auth/signup" element={<EmailSignUp />} />
-				<Route path="/auth/complete" element={<CompleteSignUp />} />
+				{/* <Route path="/auth/complete" element={<CompleteSignUp />} /> */}
 
 				{/* OAuth Redirect */}
 				<Route path="/auth/callback" element={<LoginHandler />} />

src/styles/CardView.module.css

@@ -13,6 +13,11 @@
     Roboto, "Noto Sans KR", sans-serif;
   text-align: left;
 }
+
+/* fullWidth prop이 켜지면 340px 제한 해제 */
+.cardWrapper.fullWidth {
+  max-width: none;
+}
 .mobileDateOrg,
 .mobileRow {
   padding: 0px;

src/styles/DetailView.module.css

@@ -11,6 +11,12 @@
     sans-serif;
 
   overflow-y: auto;
+
+  /* body에 걸린 user-select: none(전역)이 상속되어 선택이 막히므로
+     상세 패널 안에서는 텍스트 선택·복사를 다시 허용한다. */
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
 }
 
 .thumbnail {
@@ -119,7 +125,11 @@
   font-size: 15px;
   line-height: 1.6;
   color: #333333;
-  white-space: pre-wrap;
+  /* 렌더링된 HTML이므로 pre-wrap을 쓰면 태그 사이 들여쓰기·줄바꿈이
+     그대로 보여 레이아웃이 깨진다. 공백은 normal로 collapse시킨다. */
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
   margin-bottom: 40px;
 }
 .contentText :global(img) {
@@ -128,6 +138,11 @@
   height: auto !important;
   display: block !important;
 }
+.contentText :global(a) {
+  color: #2563eb;
+  text-decoration: underline;
+  word-break: break-all;
+}
 
 .locationRow {
   display: flex;