Merge pull request #270 from Computer-Research-Association/feat/#235

Feat/#235

Author: chanhk-im

src/api/account.tsx

@@ -1,5 +1,14 @@
 import { client } from './client';
 
+interface FindUsernameParams {
+  studentId: string;
+  name: string;
+  email: string;
+}
+interface ChangePasswordParams {
+  code: string;
+  password: string;
+}
 // email 인증 요청
 export const emailRequest = async (email: string): Promise<number> => {
   const response = await client.post<void>(
@@ -15,3 +24,45 @@ export const emailCode = async (emailCode: string): Promise<number> => {
   );
   return response.status;
 };
+<<<<<<< HEAD
+
+// PW 재설정
+export const changePassword = async ({
+  code,
+  password,
+}: ChangePasswordParams): Promise<number> => {
+  const response = await client.put<void>('/user/password-change', {
+    code,
+    password,
+  });
+  return response.status;
+};
+
+// PW 재설정 인증 요청
+export const pwEmailRequest = async (username: String): Promise<number> => {
+  const response = await client.post<void>(
+    `/account/password-change?username=${username}`,
+  );
+  return response.status;
+};
+
+// ID 찾기 요청
+export const findId = async (params: FindUsernameParams): Promise<string> => {
+  try {
+    const response = await client({
+      method: 'get',
+      url: '/account/find/username',
+      params: {
+        name: params.name,
+        email: params.email,
+        studentId: params.studentId,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Find ID API Error:', error);
+    throw error;
+  }
+};
+=======
+>>>>>>> f6dda5ae4326dd6085f6b5a9f1742fd6af896a45

src/components/User/Info/UserInfo.tsx

@@ -22,13 +22,12 @@ function UserInfo() {
     <div className={styles.container}>
       <div className={styles.title}>마이페이지</div>
       <div className={styles.profile}>
-        <p>프로필 사진 </p>
         <div>
           <img src={imgUrl} className={styles.preview} />
         </div>
       </div>
-      <div className={styles.info}>
-        <p>이름 </p>
+      <div className={styles.name}>
+        {/* <p>이름 </p> */}
         {name}
       </div>
       <div className={styles.info}>

src/components/User/UserPage.module.css

@@ -73,6 +73,15 @@
   margin-bottom: 3rem;
 }
 
+.name {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40px;
+  font-family: 'Pretendard Bold';
+  margin-top: 1.5rem;
+}
+
 .info {
   margin-top: 2rem;
   font-family: 'Pretendard SemiBold';
@@ -142,11 +151,17 @@
   margin-bottom: 3rem;
 }
 
+.profile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .preview {
   width: 350px;
   height: 350px;
-  border-radius: 50%;
-  border: 2px solid var(--color-bright-text);
+  border-radius: 40%;
+  border: 1px solid var(--color-bright-text);
   object-fit: cover;
 }
 

src/pages/Login/ID/IDSearchCompletePage.tsx

@@ -1,13 +1,20 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import BlueCheck from '~/assets/images/Blue-Check.png';
 import styled from 'styled-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  margin-top: 20rem;
+  justify-content: center;
+  width: 100%;
+  max-width: 1600px;
+  margin-bottom: 4rem;
+  padding-top: 5rem;
+  padding-bottom: 12rem;
+  @media (max-width: 768px) {
+    width: 80%;
+  }
 `;
 
 const Img = styled.img`
@@ -33,16 +40,15 @@ const Content = styled.div`
 
 const Context = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   margin: 2rem 0;
-`;
-
-const Black = styled.p`
-  color: var(--color-dark-text);
+  width: 100%;
 `;
 
 const SkyBlue = styled.p`
   color: var(--color-primary);
+  text-align: center;
+  width: 100%;
 `;
 
 const Buttons = styled.div`
@@ -76,18 +82,21 @@ const LoginBtn = styled.button`
 
 function IDSearchCompletePage() {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // URL에서 id 값을 가져오기
+  const queryParams = new URLSearchParams(location.search);
+  const userId = queryParams.get('id') || '알 수 없음'; // id가 없으면 기본값 설정
+
   return (
     <Container>
       <Img src={BlueCheck} />
       <Title>아이디 찾기 완료</Title>
       <Content>
         <Context>
-          <Black>가입일</Black>
-          <Black>2025. 01. 15</Black>
-        </Context>
-        <Context>
-          <SkyBlue>아이디</SkyBlue>
-          <SkyBlue>dnwnchlrkd206</SkyBlue>
+          <SkyBlue>
+            회원님의 아이디는 &nbsp;&nbsp; {userId} &nbsp;&nbsp; 입니다.
+          </SkyBlue>
         </Context>
       </Content>
       <Buttons>