Skip to content

Commit

Permalink
feat: pages 폴더 업데이트
Browse files Browse the repository at this point in the history
  • Loading branch information
@haesol822
haesol822 committed Oct 11, 2024
1 parent 974e2e3 commit a3c80a5
Show file tree
Hide file tree
Showing 40 changed files with 2,124 additions and 1,405 deletions.
164 changes: 51 additions & 113 deletions src/pages/applyCogo/applyCogo.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,59 @@
// applyCogo.styles.tsx

import styled from "styled-components";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
import { Link } from "react-router-dom";

// 캘린더를 감싸주는 스타일
export const StyledCalendarWrapper = styled.div`
export const CalendarWrapper = styled.div`
width: 100%;
display: flex;
justify-content: center;
position: relative;
.react-calendar {
width: 100%;
border: none;
background-color: white;
}
// 비활성화된 날짜 스타일
.react-calendar__tile:disabled{
background-color: white;
color: #AEAEB2;
abbr {
color: #AEAEB2;
}
}
/* 전체 폰트 컬러 */
.react-calendar__month-view {
abbr {
font-size: 1.8rem;
font-weight: 400;
color: black;
}
}
overflow-x: auto;
padding: 1rem 0 2rem 0;
min-width: 0;
border-bottom: 1px solid #EDEDED;
`;

/* 네비게이션 가운데 정렬 */
.react-calendar__navigation {
justify-content: center;
}
// 년도와 월을 표시하는 서클
export const MonthYearCircle = styled.div`
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-right: 1.9rem;
color: #626262;
border: 1px solid #AEAEB2;
`;

/* 네비게이션 폰트 설정 */
.react-calendar__navigation button {
font-weight: 600;
font-size: 2rem;
color: black;
}
// 날짜를 표시하는 서클
export const Circle = styled.div<{ isSelected?: boolean }>`
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: ${({ isSelected }) => (isSelected ? "#000" : "#EDEDED")};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-right: 1.9rem;
color: ${({ isSelected }) => (isSelected ? "#fff" : "#626262")};
cursor: pointer;
`;

/* 네비게이션 버튼 컬러 */
.react-calendar__navigation button:focus {
background-color: white;
}
export const DateText = styled.p`
font-size: 2rem;
font-weight: 500;
`;

/* 네비게이션 비활성화 됐을때 스타일 */
.react-calendar__navigation button:disabled {
background-color: white;
color: ${(props) => props.theme.darkBlack};
}
/* 년/월 상단 네비게이션 칸 크기 줄이기 */
.react-calendar__navigation__label {
flex-grow: 0 !important;
}
/* 요일 밑줄 제거 */
.react-calendar__month-view__weekdays {
margin-bottom: 2rem;
abbr {
text-decoration: none;
font-size: 1.8rem;
font-weight: 500;
}
}
/* 일 날짜 간격 */
.react-calendar__tile {
padding: 2rem 0;
position: relative;
}
/* 선택한 날짜 스타일 적용 */
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus,
.react-calendar__tile--active {
border-radius: 20rem;
color: white;
background-color: transparent;
padding: 0;
/* abbr {
display: flex;
width: 3.6rem;
height: 3.6rem;
align-items: center;
justify-content: center;
margin: auto;
background-color: black;
border-radius: 5rem;
color: white;
font-weight: 600;
} */
}
.react-calendar__tile--now {
background-color: white;
}
.selected-date {
background-color: white;
padding: 0;
abbr {
display: flex;
width: 3.6rem;
height: 3.6rem;
align-items: center;
justify-content: center;
margin: auto;
font-weight: 600;
background-color: black !important;
color: white !important;
border-radius: 5rem;
}
}
export const DayText = styled.p`
font-size: 1.3rem;
`;

// 캘린더를 불러옴
Expand Down Expand Up @@ -185,18 +126,15 @@ export const ButtonContainer = styled.div`
export const TimeButton = styled.button<{ isSelected?: boolean }>`
padding: 1rem;
font-size: 1.7rem;
background-color: #ededed;
color: black;
background-color: ${({ isSelected }) => (isSelected ? "black" : "#EDEDED")};
color: ${({ isSelected }) => (isSelected ? "white" : "black")};
font-weight: 500;
width: 100%;
margin: 1.5rem auto 0 auto;
flex: 1;
background-color: ${(props) => (props.isSelected ? "black" : "#EDEDED")};
color: ${(props) => (props.isSelected ? "white" : "black")};
cursor: pointer;
`;

//
export const TextContainer = styled.div`
width: 100%;
display: flex;
Expand All @@ -211,7 +149,7 @@ export const MemoText = styled.textarea`
font-size: 1.6rem;
font-weight: 300;
line-height: 184%;
background-color: #F4F4F4;
background-color: #f4f4f4;
border-radius: 1.3rem;
border: none;
padding: 2rem;
Expand All @@ -221,14 +159,14 @@ export const MemoText = styled.textarea`
border: none;
}
&::placeholder {
color: #AEAEB2;
color: #aeaeb2;
}
`;

export const MemoTextLength = styled.span`
width: 100%;
text-align: end;
color: #AEAEB2;
color: #aeaeb2;
font-size: 1.6rem;
font-weight: 500;
`;
Expand Down Expand Up @@ -258,7 +196,7 @@ export const CompleteButton = styled.button`
export const NavFirst = styled(Link)`
font-size: 1.4rem;
font-weight: 500;
color: #AEAEB2;
color: #aeaeb2;
text-decoration: underline;
cursor: pointer;
`;
`;
69 changes: 65 additions & 4 deletions src/pages/applyCogo/applyCogoComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,69 @@ import BackButton from "../../components/button/backButton";
import moment from "moment";
import { useNavigate } from "react-router-dom";
import Coffee from "../../assets/Coffee.svg";
import axiosInstance from "../../apis/axiosInstance"; // axiosInstance 추가

export default function ApplyCogoComplete() {
const [memoText, setMemoText] = useState<string>(""); // 메모 텍스트 상태 추가
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState<boolean>(false); // 로딩 상태 추가

const handleNextButton = () => {
navigate("/cogo");
const handleNextButton = async () => {
// 로딩 상태 시작
setIsLoading(true);

try {
// localStorage에서 데이터 불러오기
const mentorIdStr = localStorage.getItem("mentorId");
const possibleDateIdStr = localStorage.getItem("possible_date_id");
const memoText = localStorage.getItem("memoText");

// 데이터 존재 여부 확인
if (!mentorIdStr || !possibleDateIdStr || !memoText) {
alert("필수 데이터가 누락되었습니다. 다시 시도해주세요.");
setIsLoading(false);
return;
}

// 문자열을 숫자로 변환
const mentorId = Number(mentorIdStr);
const possibleDateId = Number(possibleDateIdStr);

// 변환된 데이터 유효성 검사
if (isNaN(mentorId) || isNaN(possibleDateId)) {
alert("데이터 형식이 올바르지 않습니다.");
setIsLoading(false);
return;
}

// API 요청을 위한 페이로드 준비
const payload = {
mentorId: mentorId,
possibleDateId: possibleDateId,
memo: memoText,
};

console.log(payload)
// API 요청 보내기 (예시 엔드포인트 사용)
const response = await axiosInstance.post("/applications", payload);

// 요청 성공 시 처리
console.log("API 응답:", response.data);
alert("COGO 신청이 완료되었습니다!");

// 필요 시 localStorage 데이터 정리
localStorage.removeItem("mentorId");
localStorage.removeItem("possible_date_id");
localStorage.removeItem("memoText");

// 다음 페이지로 네비게이션
navigate("/cogo");
} catch (error) {
console.error("API 요청 실패:", error);
alert("COGO 신청 중 오류가 발생했습니다. 다시 시도해주세요.");
} finally {
// 로딩 상태 해제
setIsLoading(false);
}
};

return (
Expand All @@ -35,7 +91,12 @@ export default function ApplyCogoComplete() {
<S.Subtitle>COGO를 하면서 많은 성장을 기원해요!</S.Subtitle>
<S.SecondContainer>
<S.CoffeeImg src={Coffee} alt="Coffee"/>
<S.CompleteButton onClick={handleNextButton}>코고 신청 완료하기</S.CompleteButton>
<S.CompleteButton
onClick={handleNextButton}
disabled={isLoading} // 로딩 중 버튼 비활성화
>
{isLoading ? "처리 중..." : "코고 신청 완료하기"}
</S.CompleteButton>
<S.NavFirst to="/">처음으로 돌아가기</S.NavFirst>
</S.SecondContainer>
</S.BodyContainer>
Expand Down
20 changes: 8 additions & 12 deletions src/pages/applyCogo/applyCogoMemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import { useState } from "react";
import {
clubState,
nameState,
partState,
userTypeState,
} from "../../atoms/authState";
import { useRecoilValue } from "recoil";
import * as S from "./applyCogo.styles";
import {
Container,
Expand All @@ -15,18 +8,22 @@ import {
Title,
} from "../../components/global.styles";
import BackButton from "../../components/button/backButton";
import moment from "moment";
import { useNavigate } from "react-router-dom";

export default function ApplyCogoMemo() {
const [memoText, setMemoText] = useState<string>(""); // 메모 텍스트 상태 추가
const [memoText, setMemoText] = useState<string>(""); // 메모 텍스트 상태
const navigate = useNavigate();

// 글자 수를 변경하는 함수
const handleMemoChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setMemoText(event.target.value);
};

const handleNextButton = () => {
// Save memoText to localStorage
console.log(memoText);
localStorage.setItem("memoText", memoText);

navigate("/applyCogoComplete");
};

Expand All @@ -38,14 +35,13 @@ export default function ApplyCogoMemo() {
<S.BodyContainer>
<Title>멘토님께 드릴 메모를 적어보세요</Title>
<Subtitle>COGO를 하면서 많은 성장을 기원해요!</Subtitle>

</S.BodyContainer>
<S.TextContainer>
<S.MemoText
<S.MemoText
placeholder="내용을 입력해주세요"
value={memoText} // 상태 값을 텍스트 영역에 바인딩
onChange={handleMemoChange} // 텍스트 변경 시 handleMemoChange 호출
maxLength={200} // 글자 수 제한 (선택 사항)
maxLength={200} // 글자 수 제한
/>
<S.MemoTextLength>{memoText.length}/200</S.MemoTextLength>
</S.TextContainer>
Expand Down
Loading

0 comments on commit a3c80a5

Please sign in to comment.