Merge pull request #105 from oodd-team/feat/OD-149

[OD-149] 회원가입 페이지 & 이용약관 동의 페이지 변수 명명 규칙 점검 및 코드 순서 정리

Author: gustn99

src/apis/user/index.ts

@@ -3,7 +3,7 @@ import { newRequest } from '../core';
 import { EmptySuccessResponse } from '../core/dto';
 
 // 유저 정보 수정 api
-export const patchUserInfoApi = (data: PatchUserInfoRequest, userId: number) =>
+export const patchUserInfoApi = (data: Partial<PatchUserInfoRequest>, userId: number) =>
 	newRequest.patch<PatchUserInfoResponse>(`/user/${userId}`, data);
 
 // 유저 탈퇴 api

src/components/TopBar/styles.tsx

@@ -6,7 +6,7 @@ export const TopbarLayout = styled.header<TopbarLayoutProps>`
 	display: flex;
 	position: sticky;
 	top: 0; /* 부모 요소의 상단에 붙도록 설정 */
-	z-index: 1;
+	z-index: 99;
 	background-color: white;
 	width: 100%; /* 부모 너비에 맞춤 */
 	align-items: center;

src/pages/SignUp/index.tsx

@@ -1,40 +1,49 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { OODDFrame } from '../../components/Frame/Frame';
-import BottomButton from '../../components/BottomButton';
-import Modal from '../../components/Modal';
+import { patchUserInfoApi } from '@/apis/user';
+import type { PatchUserInfoRequest } from '@/apis/user/dto';
+import { handleError } from '@/apis/util/handleError';
 
-import { StyledText } from '../../components/Text/StyledText';
-import { SignUpContainer, LogoWrapper, IntroWrapper, NickNameContainer, NickName, TapStyled, LogoImg } from './style';
+import OODDlogo from '@/assets/default/oodd.svg';
 
-import OODDlogo from '../../assets/default/oodd.svg';
+import { OODDFrame } from '@/components/Frame/Frame';
+import { StyledText } from '@/components/Text/StyledText';
+import BottomButton from '@/components/BottomButton';
+import Modal from '@/components/Modal';
 
-import { patchUserInfoApi } from '../../apis/user';
-import { handleError } from '../../apis/util/handleError';
-import { PatchUserInfoRequest } from '../../apis/user/dto';
+import { getCurrentUserId } from '@/utils/getCurrentUserId';
+
+import {
+	SignUpLayout,
+	LogoWrapper,
+	SignupStepContainer,
+	InputContainer,
+	InputValue,
+	TapToEdit,
+	LogoImg,
+} from './style';
 
 type PartialUserInfoRequest = Pick<PatchUserInfoRequest, 'name' | 'birthDate' | 'phoneNumber' | 'nickname'>;
 
 const SignUp: React.FC = () => {
-	const navigate = useNavigate();
-
-	const my_id = Number(localStorage.getItem('my_id'));
-	const token = localStorage.getItem('new_jwt_token');
-
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [modalMessage, setModalMessage] = useState('');
 	const [modalType, setModalType] = useState('');
 
 	const [currentStep, setCurrentStep] = useState(1);
 	const [formData, setFormData] = useState<PartialUserInfoRequest>({
-		// 이름, 생년월일 등 개별적으로 상태 관리하지 않고 통합
 		name: '',
 		birthDate: '',
 		phoneNumber: '',
 		nickname: '', //초기 값
 	});
 
+	const navigate = useNavigate();
+
+	const currentUserId = getCurrentUserId();
+	const token = localStorage.getItem('new_jwt_token');
+
 	const handleInputChange = (field: keyof PatchUserInfoRequest) => (e: React.ChangeEvent<HTMLInputElement>) => {
 		setFormData((prevData) => ({ ...prevData, [field]: e.target.value }));
 	};
@@ -106,19 +115,20 @@ const SignUp: React.FC = () => {
 
 		if (currentStep < steps.length) {
 			setCurrentStep(currentStep + 1);
-		} else if (my_id && token) {
+		} else if (currentUserId && token) {
 			const requestData: PartialUserInfoRequest = {
 				name: formData.name,
 				nickname: formData.nickname,
 				birthDate: formData.birthDate,
 				phoneNumber: formData.phoneNumber,
 			};
-			await patchUserInfo(requestData, my_id);
+			await patchUserInfo(requestData, currentUserId);
 		}
 	};
-	const patchUserInfo = async (requestData: any, my_id: number) => {
+
+	const patchUserInfo = async (requestData: PartialUserInfoRequest, currentUserId: number) => {
 		try {
-			const response = await patchUserInfoApi(requestData, my_id);
+			const response = await patchUserInfoApi(requestData, currentUserId);
 			console.log('수정 성공:', response.data);
 			setModalMessage('회원가입에 성공했습니다!');
 			setIsModalOpen(true);
@@ -135,11 +145,12 @@ const SignUp: React.FC = () => {
 	const handleModalClose = () => {
 		setIsModalOpen(false);
 		if (modalType === 'success') {
-			navigate('/terms-agreement'); // 회원가입 정보 입력 되면, 이용약관 동의 페이지로
+			navigate('/signup/terms-agreement'); // 회원가입 정보 입력 되면, 이용약관 동의 페이지로
 		} else if (modalType === 'fail') {
 			navigate('/login');
 		}
 	};
+
 	const handleKeyDown = (event: React.KeyboardEvent) => {
 		if (event.key === 'Enter') {
 			handleNextClick();
@@ -148,36 +159,36 @@ const SignUp: React.FC = () => {
 
 	return (
 		<OODDFrame>
-			<SignUpContainer>
+			<SignUpLayout>
 				<LogoWrapper>
 					<LogoImg src={OODDlogo} />
 				</LogoWrapper>
-				<IntroWrapper>
+				<SignupStepContainer>
 					<StyledText $textTheme={{ style: { mobile: 'title3-bold', tablet: 'title2-bold', desktop: 'title1-bold' } }}>
 						{label}
 					</StyledText>
-					<NickNameContainer>
-						<NickName
+					<InputContainer>
+						<InputValue
 							type={type}
 							value={value}
 							onChange={onChange}
 							placeholder={placeholder}
 							onKeyDown={handleKeyDown}
 						/>
 						{value === '' && (
-							<TapStyled
+							<TapToEdit
 								$textTheme={{
 									style: { mobile: 'body1-regular', tablet: 'heading1-medium', desktop: 'heading1-medium' },
 								}}
 							>
 								탭하여 수정해 주세요!
-							</TapStyled>
+							</TapToEdit>
 						)}
-					</NickNameContainer>
-				</IntroWrapper>
+					</InputContainer>
+				</SignupStepContainer>
 				<BottomButton content={currentStep < steps.length ? '다음' : '완료'} onClick={handleNextClick} />
 				{isModalOpen && <Modal content={modalMessage} onClose={handleModalClose} />}
-			</SignUpContainer>
+			</SignUpLayout>
 		</OODDFrame>
 	);
 };

src/pages/SignUp/style.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { StyledText } from '../../components/Text/StyledText';
+import { StyledText } from '@/components/Text/StyledText';
 
-export const SignUpContainer = styled.main`
+export const SignUpLayout = styled.main`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -35,7 +35,7 @@ export const LogoImg = styled.img`
 	width: 100%;
 `;
 
-export const IntroWrapper = styled.div`
+export const SignupStepContainer = styled.div`
 	display: flex;
 	flex-direction: column;
 	max-width: 21.875rem;
@@ -44,7 +44,7 @@ export const IntroWrapper = styled.div`
 	text-align: center;
 `;
 
-export const NickNameContainer = styled.section`
+export const InputContainer = styled.section`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -53,7 +53,7 @@ export const NickNameContainer = styled.section`
 	margin: 5rem auto 0; /* 중앙 정렬을 위한 auto */
 `;
 
-export const NickName = styled.input`
+export const InputValue = styled.input`
 	width: 100%;
 	max-width: 300px;
 	height: 3.25rem;
@@ -68,7 +68,7 @@ export const NickName = styled.input`
 	margin: 0 auto; /* 중앙 정렬 */
 `;
 
-export const TapStyled = styled(StyledText)`
+export const TapToEdit = styled(StyledText)`
 	width: 100%;
 	height: 1.3125rem;
 	margin: 1.25rem auto 0; /* 중앙 정렬을 위한 auto */

src/pages/TermsAgreement/index.tsx

@@ -1,28 +1,31 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { OODDFrame } from '../../components/Frame/Frame';
-import BottomButton from '../../components/BottomButton';
-import TopBar from '../../components/TopBar';
-import Modal from '../../components/Modal';
+import { postTermsAgreementApi } from '@/apis/user';
+import { handleError } from '@/apis/util/handleError';
 
-import { LogoWrapper, LogoImg } from '../SignUp/style';
-import { TermsAgreementContainer, StyledTitle, CheckboxWrapper, CheckboxItem, CheckboxInput, Divider } from './styles';
-import { StyledText } from '../../components/Text/StyledText';
+import Back from '@/assets/arrow/left.svg';
+import OODDlogo from '@/assets/default/oodd.svg';
 
-import Back from '../../assets/arrow/left.svg';
-import OODDlogo from '../../assets/default/oodd.svg';
+import { OODDFrame } from '@/components/Frame/Frame';
+import { StyledText } from '@/components/Text/StyledText';
+import BottomButton from '@/components/BottomButton';
+import TopBar from '@/components/TopBar';
+import Modal from '@/components/Modal';
 
-import { postTermsAgreementApi } from '../../apis/user';
-import { handleError } from '../../apis/util/handleError';
+import { getCurrentUserId } from '@/utils/getCurrentUserId';
 
-const TermsAgreement: React.FC = () => {
-	const my_id = Number(localStorage.getItem('my_id'));
-	const navigate = useNavigate();
+import { LogoWrapper, LogoImg } from '@/pages/SignUp/style';
 
+import { TermsAgreementLayout, StyledTitle, CheckboxList, CheckboxItem, CheckboxInput, Divider } from './styles';
+
+const TermsAgreement: React.FC = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [modalMessage, setModalMessage] = useState('');
 
+	const navigate = useNavigate();
+	const currentUserId = getCurrentUserId();
+
 	const [agreements, setAgreements] = useState({
 		all: false,
 		terms: false,
@@ -55,15 +58,16 @@ const TermsAgreement: React.FC = () => {
 		});
 	};
 
-	const handleFinalClick = async () => {
-		if (!my_id) {
+	// 완료 버튼을 눌렀을 때 실행되는 함수
+	const handleCompletedClick = async () => {
+		if (!currentUserId) {
 			setModalMessage('회원 정보가 없습니다.\n로그인 해 주세요!');
 			setIsModalOpen(true);
 			return;
 		}
 
 		try {
-			const response = await postTermsAgreementApi(my_id);
+			const response = await postTermsAgreementApi(currentUserId);
 			console.log(response);
 			navigate('/'); // 성공 시 홈으로 이동
 		} catch (error) {
@@ -73,14 +77,15 @@ const TermsAgreement: React.FC = () => {
 			setIsModalOpen(true);
 		}
 	};
+
 	const navigateToLogin = () => {
 		navigate('/login');
 	};
 
 	return (
 		<OODDFrame>
 			<TopBar LeftButtonSrc={Back} onLeftClick={navigateToLogin} />
-			<TermsAgreementContainer>
+			<TermsAgreementLayout>
 				<LogoWrapper>
 					<LogoImg src={OODDlogo} />
 				</LogoWrapper>
@@ -91,7 +96,7 @@ const TermsAgreement: React.FC = () => {
 				>
 					OODD에 오신 것을 환영해요 🥳
 				</StyledTitle>
-				<CheckboxWrapper>
+				<CheckboxList>
 					<CheckboxItem>
 						<CheckboxInput
 							type="checkbox"
@@ -103,7 +108,7 @@ const TermsAgreement: React.FC = () => {
 							<StyledText $textTheme={{ style: 'body1-medium' }}>약관 전체 동의</StyledText>
 						</label>
 					</CheckboxItem>
-
+					{/*전체 동의와 개별 동의 구분*/}
 					<Divider />
 					{checkboxData.map(({ key, label }) => (
 						<CheckboxItem key={key}>
@@ -118,14 +123,14 @@ const TermsAgreement: React.FC = () => {
 							</label>
 						</CheckboxItem>
 					))}
-				</CheckboxWrapper>
+				</CheckboxList>
 				<BottomButton
 					content="OODD 시작하기"
-					onClick={handleFinalClick}
+					onClick={handleCompletedClick}
 					disabled={!agreements.terms || !agreements.privacy}
 				/>
 				{isModalOpen && <Modal content={modalMessage} onClose={navigateToLogin} />}
-			</TermsAgreementContainer>
+			</TermsAgreementLayout>
 		</OODDFrame>
 	);
 };

src/pages/TermsAgreement/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { StyledText } from '../../components/Text/StyledText';
+import { StyledText } from '@/components/Text/StyledText';
 
-export const TermsAgreementContainer = styled.main`
+export const TermsAgreementLayout = styled.main`
 	display: flex;
 	flex-direction: column;
 	padding: 1.875rem;
@@ -13,7 +13,7 @@ export const BackButton = styled.img`
 	cursor: pointer;
 `;
 
-export const CheckboxWrapper = styled.div`
+export const CheckboxList = styled.div`
 	margin-top: 1.25rem;
 `;