Skip to content

Commit

Permalink
feat: 핀 색깔 변하게
Browse files Browse the repository at this point in the history
  • Loading branch information
@gitaehee
gitaehee committed Jan 22, 2024
1 parent ce92538 commit 850bed8
Show file tree
Hide file tree
Showing 7 changed files with 517 additions and 84 deletions.
4 changes: 4 additions & 0 deletions front-end/public/images/envelope.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions front-end/public/images/우표2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 124 additions & 4 deletions front-end/src/components/MyLetterbox/Answer1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,100 @@ const WhiteLetterContainer = styled.div`
width: 846px;
height: 506.42908px;
margin: 70px 537px 0 537px;
overflow: auto; //자식 마진 탑 오류 때문에 오토처리
position: relative; //우표랑 겹치게
`;

const ContentContainer = styled.div`
width: 772px;
height: 421.04908px;
margin: 43.91px 37px 41.47px 37px; // 탑 에러나서 부모에 오토처리
`;

//닉네임에게
const ToContainer = styled.div`
width: 88px;
height: 20px;
display: flex;
`;

//'닉네임'(나)
const ToMyNickname = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 20px */
letter-spacing: 0.4px;
white-space: nowrap; //줄바꿈 안 되게
`;

//에게
const To = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 20px */
letter-spacing: 0.4px;
white-space: nowrap;
`;

const Content = styled.div`
color: #000;
font-family: "Gowun Dodum";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
letter-spacing: -0.2px;
margin-top: 50.08px;
`;

const Stamp = styled.div`
background-image: url("/images/우표2.svg");
background-size: cover;
float: right;
width: 137.40875px;
height: 183.21165px;
position: absolute; //우표가 내용위로 겹치게
right: 37px;
top: 43.91px;
`;

//닉네임이
const FromContainer = styled.div`
width: 71px;
height: 20px;
margin: 50.96px 0 0 688.41px;
display: flex;
`;

//'닉네임'(다른 사용자)
const FromNickname = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 20px */
letter-spacing: 0.4px;
white-space: nowrap;
`;

//이
const From = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 20px */
letter-spacing: 0.4px;
white-space: nowrap;
`;

//주의사항 설명 글
Expand All @@ -59,7 +153,7 @@ const ExplanationText = styled.div`
margin: 13.57px 0 0 537px;
color: var(--Grey-Dark, #757575);
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 12px;
font-style: normal;
font-weight: 400;
Expand Down Expand Up @@ -105,7 +199,7 @@ const Arrow1 = styled.div`

const Prev = styled.div`
color: #FFF;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand All @@ -126,7 +220,7 @@ const StoreButton = styled.div`
cursor: pointer;
color: #000;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand Down Expand Up @@ -154,7 +248,7 @@ const Arrow2 = styled.div`

const Next = styled.div`
color: #FFF;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand Down Expand Up @@ -193,6 +287,32 @@ const Answer1 = () => {
</TextContainer>

<WhiteLetterContainer>
<ContentContainer>
<ToContainer>
<ToMyNickname>
닉네임
</ToMyNickname>
<To>
에게
</To>
</ToContainer>

<Content>
편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작 성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명 으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지 는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.
</Content>
<Stamp>
</Stamp>

<FromContainer>
<FromNickname>
닉네임
</FromNickname>
<From>
이
</From>
</FromContainer>

</ContentContainer>
</WhiteLetterContainer>

<ExplanationText>
Expand Down
131 changes: 127 additions & 4 deletions front-end/src/components/MyLetterbox/Answer2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,112 @@ const LetterConatiner = styled.div`
display: flex; //자식 가로배치
`;

//왼쪽 컨테이너
const WhiteLetterContainer = styled.div`
background-image: url("/images/더흰편지지.svg");
background-size: cover;
width: 480px;
height: 287.33566px;
margin: 134px 0 0 38px;
position: relative;
`;

const ContentContainer = styled.div`
width: 438.01419px;
height: 238.54566px;
margin: 24.91px 20.99px 23.88px 20.99px; // 탑 에러나서 부모에 오토처리
`;

//닉네임에게
const ToContainer = styled.div`
width: 50px;
height: 11px;
display: flex;
`;

//'닉네임'(나)
const ToMyNickname = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 11.348px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11.348px */
letter-spacing: 0.227px;
white-space: nowrap; //줄바꿈 안 되게
`;

//에게
const To = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 11.348px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11.348px */
letter-spacing: 0.227px;
white-space: nowrap;
`;

const Content = styled.div`
width: 438.01419px;
height: 161px;
color: #000;
font-family: "Gowun Dodum";
font-size: 11.348px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 22.695px */
letter-spacing: -0.113px;
word-break: break-all;
margin-top: 28.76px;
`;

const Stamp = styled.div`
background-image: url("/images/우표2.svg");
background-size: cover;
float: right;
width: 78.03125px;
height: 104.03989px;
position: absolute; //우표가 내용위로 겹치게
right: 24.7px;
top: 20.86px;
`;

//닉네임이
const FromContainer = styled.div`
width: 40px;
height: 11px;
margin: 26.78px 0 0 388.25px;
display: flex;
`;

//'닉네임'(다른 사용자)
const FromNickname = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 11.348px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11.348px */
letter-spacing: 0.227px;
white-space: nowrap;
`;

//이
const From = styled.div`
color: #000;
font-family: 'NanumGothic';
font-size: 11.348px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11.348px */
letter-spacing: 0.227px;
white-space: nowrap;
`;

//오른쪽 컨테이너 스크롤 되는 전체 영역
const ScrollBoxContainer = styled.div`
width: 638px;
height: 464px;
Expand Down Expand Up @@ -104,7 +202,7 @@ const Arrow1 = styled.div`

const Prev = styled.div`
color: #FFF;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand All @@ -125,7 +223,7 @@ const StoreButton = styled.div`
cursor: pointer;
color: #000;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand Down Expand Up @@ -153,7 +251,7 @@ const Arrow2 = styled.div`

const Next = styled.div`
color: #FFF;
font-family: Pretendard;
font-family: 'Pretendard';
font-size: 18px;
font-style: normal;
font-weight: 500;
Expand Down Expand Up @@ -193,10 +291,35 @@ const Answer2 = () => {

<LetterConatiner>
<WhiteLetterContainer>
<ContentContainer>
<ToContainer>
<ToMyNickname>
닉네임
</ToMyNickname>
<To>
에게
</To>
</ToContainer>

<Content>
편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작성 돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익 명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.
</Content>
<Stamp>
</Stamp>

<FromContainer>
<FromNickname>
닉네임
</FromNickname>
<From>
이
</From>
</FromContainer>

</ContentContainer>
</WhiteLetterContainer>

<ScrollBoxContainer>

</ScrollBoxContainer>
</LetterConatiner>

Expand Down
Loading

0 comments on commit 850bed8

Please sign in to comment.