Skip to content

Commit

Permalink
Merge pull request #58 from Team-Remini/design#57
Browse files Browse the repository at this point in the history
design/#57/화면 잘림 현상
  • Loading branch information
candosh authored Dec 16, 2023
2 parents 4c24cc1 + d19f658 commit 49deda7
Show file tree
Hide file tree
Showing 27 changed files with 2,150 additions and 2,077 deletions.
1 change: 0 additions & 1 deletion src/components/WritingPageBtn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styled from "styled-components";
const WritingPageBtnWrap = styled.div`
margin-top: 50px;
margin-bottom: 90px;
height: 100dp;
.temporary_btn {
width: 190px;
Expand Down
57 changes: 33 additions & 24 deletions src/components/WritingPageWrap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,47 @@ import styled from "styled-components";

const WritingPageWrap = styled.div`
background-color: #121212;
min-height: calc(100vh - 90px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.container {
margin-top: 80px;
.all-container {
display: flex;
flex-direction: column;
align-items: center;
.title_container {
.container {
margin-top: 80px;
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 50px;
}
.title_main {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.title_content {
color: var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.temporary_btn:disabled {
/* isContentFilled가 false일 때 버튼 스타일 */
opacity: 0.6;
flex-direction: column;
.title_container {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 50px;
}
.title_main {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.title_content {
color: var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.temporary_btn:disabled {
/* isContentFilled가 false일 때 버튼 스타일 */
opacity: 0.6;
}
}
}
`;
Expand Down
206 changes: 106 additions & 100 deletions src/pages/AttachPicture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,122 +117,128 @@ export default function AttachPicture() {
<>
<Header />
<AttachPictureWrap>
<div className="titleText">
<p>첨부하고 싶은 사진이 있다면 넣어주세요</p>
</div>
<div className="preview">
{previewUrl && (
<img
src={previewUrl}
alt="Preview"
style={{ width: "300px", height: "300px", marginTop: "20px" }}
/>
)}
</div>
<div
className="picture_container"
onDragOver={onDragOver}
onDrop={onDrop}
>
<button className="picture-select" onClick={triggerFileInput}>
<div className="select-text">파일 선택</div>
</button>
{pictureFile ? (
<p className="picture_input_text">{pictureFile.name}</p>
) : (
<p className="picture_input_text">
또는 파일을 여기로 드래그 해주세요
</p>
)}
</div>
<WritingPageBtnWrap>
<button
className="completed_btn"
style={{ backgroundColor: "#79CD96" }}
onClick={createRetro}
<div className="container">
<div className="titleText">
<p>첨부하고 싶은 사진이 있다면 넣어주세요</p>
</div>
<div className="preview">
{previewUrl && (
<img
src={previewUrl}
alt="Preview"
style={{ width: "300px", height: "300px", marginTop: "20px" }}
/>
)}
</div>
<div
className="picture_container"
onDragOver={onDragOver}
onDrop={onDrop}
>
회고 완료
</button>
</WritingPageBtnWrap>
<input
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: "none" }}
onChange={handleFileSelect}
/>
<button className="picture-select" onClick={triggerFileInput}>
<div className="select-text">파일 선택</div>
</button>
{pictureFile ? (
<p className="picture_input_text">{pictureFile.name}</p>
) : (
<p className="picture_input_text">
또는 파일을 여기로 드래그 해주세요
</p>
)}
</div>
<WritingPageBtnWrap>
<button
className="completed_btn"
style={{ backgroundColor: "#79CD96" }}
onClick={createRetro}
>
회고 완료
</button>
</WritingPageBtnWrap>
<input
type="file"
accept="image/*"
ref={fileInputRef}
style={{ display: "none" }}
onChange={handleFileSelect}
/>
</div>
</AttachPictureWrap>
</>
);
}

const AttachPictureWrap = styled.div`
background-color: #121212;
height: 100%;
width: 100%;
//padding: 0px 100px;
box-sizing: border-box;
min-height: calc(100vh - 90px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.titleText {
margin-top: 90px;
margin-block: 30px;
display: inline-flex;
justify-content: center;
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.picture_container {
width: 437px;
height: 280px;
flex-shrink: 0;
border-radius: 16px;
border: 2px dashed var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
}
.titleText {
margin-top: 90px;
margin-block: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 30px;
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.picture-select {
display: inline-flex;
padding: 7px 16px;
justify-content: center;
align-items: center;
text-align: center;
gap: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: none;
margin-top: 107px;
margin-left: 176px;
}
.picture_container {
width: 437px;
height: 280px;
flex-shrink: 0;
border-radius: 16px;
border: 2px dashed var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
}
.select-text {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.picture-select {
display: inline-flex;
padding: 7px 16px;
justify-content: center;
align-items: center;
text-align: center;
gap: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: none;
margin-top: 107px;
margin-left: 176px;
}
.picture_input_text {
margin-top: 26px;
margin-bottom: 130px;
color: #fff;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.select-text {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.picture_input_text {
margin-top: 26px;
margin-bottom: 130px;
color: #fff;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.preview {
text-align: center;
margin-block: 40px;
.preview {
text-align: center;
margin-block: 40px;
}
}
`;
2 changes: 1 addition & 1 deletion src/pages/RecommendResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default function RecommendResult() {
return <FiveF />;
case "성과/수치 중심 회고":
return <Performance />;
case "Personal Retrospective":
case "개인적 회고":
return <Personal />;
case "YWT":
return <YWT />;
Expand Down
Loading

0 comments on commit 49deda7

Please sign in to comment.