Skip to content

Commit

Permalink
Merge branch 'FE' of https://github.com/JNU-econovation/econo-error i…
Browse files Browse the repository at this point in the history 
…nto FE
  • Loading branch information
@mlnwns
mlnwns committed Jul 26, 2024
2 parents ebf55b8 + e163347 commit 2ba1e11
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 165 deletions.
10 changes: 9 additions & 1 deletion FE/error/src/components/EconoCalendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import CreateModal from "./scheduleCreate/CreateModal";
import CheckCalendar from "./scheduleCheck/CheckCalendar";

const EconoCalendar = ({
updateDeleteFilter,
isLoggedIn,
setIsLoggedIn,
setEvents,
Expand Down Expand Up @@ -70,8 +71,15 @@ const EconoCalendar = ({
// }
//TODO: 추후 아래 코드로 변경
} else {
window.location.href = "/login";
const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성
localStorage.setItem("slackToken", newToken);
setToken(newToken);
setIsLoggedIn(true);
}
//TODO: 추후 아래 코드로 변경
// } else {
// window.location.href = "/login";
// }
};

return (
Expand Down
6 changes: 5 additions & 1 deletion FE/error/src/pages/MainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,10 @@ const MainPage = () => {
<ScrollableContent>
<ProfileBar />
<FilterFrame>
<PublicFilter />
<PublicFilter
filterLists={filterGroupLists}
addNewFilter={addNewGroupFilter}
/>
{isLoggedIn && (
<>
<GroupFilter
Expand All @@ -132,6 +135,7 @@ const MainPage = () => {
filterLists={filterIndividualLists}
addNewFilter={addNewIndividualFilter}
onFilterChange={handleFilterChange}
updateDeleteFilter={updateDeleteFilter}
/>
</>
)}
Expand Down
198 changes: 35 additions & 163 deletions FE/error/src/pages/ProfilePage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import styled from "styled-components";
import { FaRandom } from "react-icons/fa";
import { useNavigate } from "react-router-dom";
import * as S from "../styles/ProfilePage.js";

const ProfilePage = () => {
const [selectedImage, setSelectedImage] = useState(null);
Expand Down Expand Up @@ -44,169 +44,41 @@ const ProfilePage = () => {
};

return (
<PageContainer>
<ContentWrapper>
<Header>
<Title>프로필 선택</Title>
</Header>
<ProfilePictureContainer>
<ProfilePicture
src={
selectedImage !== null
? `/${images[selectedImage]}`
: "/Profile.png"
}
alt="Profile"
/>
</ProfilePictureContainer>
<MainContent>
<ImageShuffle>
<FaRandom />
<RandomButton>랜덤 이미지 생성</RandomButton>
</ImageShuffle>
<ImageGrid>
{images.map((image, index) => (
<ImageContainer
key={index}
onClick={() => selectImage(index)}
selected={selectedImage === index}
>
<Image src={`/${image}`} alt={`option-${index}`} />
</ImageContainer>
))}
</ImageGrid>
<ButtonContainer>
<CancelButton onClick={() => navigate("/")}>취소</CancelButton>
<SaveButton onClick={handleSave}>저장</SaveButton>
</ButtonContainer>
</MainContent>
</ContentWrapper>
</PageContainer>
<>
<S.HeaderContainer>
<S.TitleBox>프로필 선택</S.TitleBox>
<S.ProfilePicture
src={
selectedImage !== null
? `/${images[selectedImage]}`
: "/Profile.png"
}
alt="Profile"
/>
</S.HeaderContainer>
<S.Container>
<S.ImageShuffle>
<FaRandom />
<S.RandomButton>랜덤 이미지 생성</S.RandomButton>
</S.ImageShuffle>
<S.ImageGridItem>
{images.map((image, index) => (
<S.ImageContainer
key={index}
onClick={() => selectImage(index)}
selected={selectedImage === index}
>
<S.Image src={`/${image}`} alt={`option-${index}`} />
</S.ImageContainer>
))}
</S.ImageGridItem>
<S.ButtonContainer>
<S.CancleButton onClick={() => navigate("/")}>취소</S.CancleButton>
<S.SaveButton onClick={handleSave}>저장</S.SaveButton>
</S.ButtonContainer>
</S.Container>
</>
);
};

export default ProfilePage;

const PageContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
box-sizing: border-box;
`;

const ContentWrapper = styled.div`
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
`;

const Header = styled.div`
width: 100%;
text-align: left;
`;

const Title = styled.h1`
font-size: 2rem;
`;

const ProfilePictureContainer = styled.div`
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 1rem;
`;

const ProfilePicture = styled.img`
width: 13rem;
height: 13rem;
border-radius: 50%;
`;

const MainContent = styled.div`
width: 100%;
`;

const ImageShuffle = styled.div`
display: flex;
align-items: center;
margin-bottom: 1rem;
`;

const RandomButton = styled.div`
padding: 0 0.5rem;
cursor: pointer;
`;

const ImageGrid = styled.div`
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
`;

const ImageContainer = styled.div`
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
border: ${(props) =>
props.selected ? "2px solid #007bff" : "2px solid transparent"};
border-radius: 50%;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
`;

const Image = styled.img`
max-width: 100%;
max-height: 100%;
object-fit: cover;
/* border-radius: 6px; */
border-radius: 50%;
`;

const ButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 0.5rem;
`;

const Button = styled.button`
padding: 0.5rem 4rem;
background-color: white;
color: #333;
border: 1px solid #cbcbcb;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
}
`;

const CancelButton = styled(Button)`
&:hover {
background-color: #dc3545;
border-color: #dc3545;
}
`;

const SaveButton = styled(Button)`
&:hover {
background-color: #28a745;
border-color: #28a745;
}
`;
86 changes: 86 additions & 0 deletions FE/error/src/styles/ProfilePage.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import styled from "styled-components";

export const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
padding: 0 4rem;
`;

export const HeaderContainer = styled.div`
display: flex;
width: 52%;
padding: 2rem 4rem 0 4rem;
justify-content: space-between;
`;

export const TitleBox = styled.h1`
font-size: 2rem;
margin-right: 2rem;
`;

export const ProfilePicture = styled.img`
display: flex;
justify-content: center;
width: 13rem;
height: 13rem;
border-radius: 50%;
margin-bottom: 1rem;
`;

export const RandomButton = styled.div`
padding: 0 0.5rem;
cursor: pointer;
align-self: flex-start;
`;

export const ImageGridItem = styled.div`
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
`;

export const ImageContainer = styled.div`
width: 9.8rem;
height: 9.8rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
`;

export const Image = styled.img`
max-width: 100%;
max-height: 100%;
`;

export const SaveButton = styled.button`
padding: 0.5rem 4rem;
align-self: flex-end;
background-color: white;
border: 1px solid #cbcbcb;
border-radius: 4px;
`;

export const ImageShuffle = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
align-self: flex-start;
`;

export const ButtonContainer = styled.div`
display: flex;
align-self: flex-end;
gap: 0.8rem;
margin-top: 0.5rem;
`;

export const CancleButton = styled.button`
padding: 0.5rem 4rem;
background-color: white;
border: 1px solid #cbcbcb;
border-radius: 4px;
`;

0 comments on commit 2ba1e11

Please sign in to comment.