미니 프로젝트_Day 3

하루 요약

본캠프 3일 차!!! 미니 프로젝트가 거의 완성이 되었다 😎😎😎😎😎 
뭔가 많은 기능들을 구현했고 페이지를 추가했더니 시간이 아주 빨리 흘러간 하루였다!!

제일 먼저 추가한 기능은 로그인 성공 알림과 함께 메인 페이지로 이동하는 기능이었다.

alert('로그인되셨습니다!');
window.location.href = "main.html";

단 두줄만 추가했는데 기능이 완벽하게 돌아갔다 😮😮 

그다음은 가장 중요했던 개인 페이지를 만들었다!!
팀원분들이 만들어준 뼈대에 나의 내용들로 채우면 됐는데 하나하나 채우다 보니 꾸미는 것에 욕심이 생겨서 사진도 넣고 색깔도 이쁘게 바꾸게 되었다.

<div class="FirstBox">
    <div class="Firstgreeting">
        Welcome, everyone!
    </div>
</div>

.FirstBox {
    background-image: url('https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2Ncaj%2FbtsKzaX7A6t%2F7CzEYIrZ6w4oS1SWlgKRS0%2Fimg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 95vh;
    margin: 2vh 1vh 3vh 3vh;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
}

.Firstgreeting {
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 50px;
    font-weight: bold;

    padding : 50px;
}

내 개인 페이지로 들어가면 귀여운 오리가 환영해 준다 😃😃 

<div class="SecondBox">

    <div class="UpperBox">
        <div class="firstPic">

        </div>

        <div class="container">
            <h1 class="myInfo">나의 정보</h1>
            <div class="info-box">
                <div class="minInfoBoxes">
                    <div class="info-item">이름: 이승찬</div>
                </div>
                <div class="minInfoBoxes">
                    <div class="info-item">MBTI: ISFJ</div>
                </div>
            </div>

            <div class="info-box">
                <div class="minInfoBoxes">
                    <div class="info-item">혈액형: A형</div>
                </div>
                <div class="minInfoBoxes">
                    <div class="info-item">나이 : 26살</div>
                </div>
            </div>

            <div class="greetingBox">
                <p class="greeting">낯가리는 성격이지만 사람들과 같이 지내는 걸 좋아합니다! 먼저 다가와주시면 도망가지 않고 어울릴 수 있습니다! 캠프 진행하는 동안 다들 잘 지내봐요 ㅎㅎ 잘
                    부탁드립니다~!!</p>
            </div>
        </div>
    </div>

    <div class="LowerBox">
        <div class="firstIntroBox">
            <div class="firstIntro">비전공자로 시작해서 아직 아는 것이 많이 없지만 모든 것을 쉽게쉽게 받아들이는 편입니다! 둥글둥글하지만 약간은 소심한 성격으로 제가 먼저
                다가가는 건 잘 못하지만.. 혼자 갈지말지 고민하고 있는 저를 보시면 언제든 다가와주세요 :)
                캠프 진행하는 동안 열심히 배우고 노력해서 제가 담당한 부분은 확실하게 책임지는 팀원이 되겠습니다!
            </div>
        </div>
    </div>
</div>

.SecondBox {
    background-color: #FFF0D2;
    display: block;
    width: 100%;
    height: 95vh;
    margin: 2vh 1vh 3vh 3vh;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
}

.UpperBox {
    display: flex;
    height: 45%;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2vh;
    margin-bottom: 0;
}

.firstPic {
    background-image: url('https://i.pinimg.com/236x/3d/3c/5e/3d3c5e6fe2d0ed801236840a3080db04.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    height: 100%;
    border-radius: 8px;
    display: inline-block;
    margin-right: 10vh;
    margin: 2vh;
}

.container {
    background-color: #D7A48A;
    width: 40vw;
    height: 100%;
    border-radius: 8px;
    display: inline-block;
    margin-right: 2vh;
}

.myInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #F5F5DC;
    font-size: 3vh;
    font-weight: bold;
}

.info-box {
    padding: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.minInfoBoxes {
    background-color: #F5F5DC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    border-radius: 10px;
}

.info-item {
    font-size: 3vh;
    margin: 5px 0;
}

.greetingBox {
    background-color: #F5F5DC;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 90%;
    height: 35%;
    margin: 2vh 3vh 1vh 3vh;
    border-radius: 10px;
    font-size: 2vh;
}

.LowerBox {
    display: block;
    width: 100%;
    height: 45%;
    align-items: center;
    margin: 2vh auto 0;
}

.firstIntroBox {
    width: 96%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    margin: auto;
    padding: 2%;
    box-sizing: border-box;
    border-radius: 8px;
}

.firstIntro {
    margin: 1% 0 0 1%;

}

.greeting {
    font-size: 1.2em;
    margin-left: 20px;
    margin-right: 20px;
    color: #555555;
}

조금만 밑으로 내리면 개인 정보들과 소개글이 적혀 있다 😎 

<div class="ThirdBox">
    <h1 class="title">My hobbies</h1>

    <div class="scattered-images">
        <div class="card">
            <img src="https://item.kakaocdn.net/do/59e8ba8bb70984483fba1a20f27cf02fce9463e040a07a9462a54df43e1d73f1"
                alt="중앙 이미지">
        </div>
        <img src="https://static.news.zumst.com/images/27/2020/08/19/b86abff880974379b8ff1517cb9ab1cf.jpg" alt="이미지 1"
            class="card1">
        <img src="https://item.kakaocdn.net/do/2bb402963b0c015f0599d54700bd3461f43ad912ad8dd55b04db6a64cddaf76d"
            alt="이미지 2" class="card2">
        <img src="https://photo.coolenjoy.co.kr/data/editor/2204/thumb-0a8302e34b2cea32a7d26d3b914ad897d1bf882a.png"
            alt="이미지 3" class="card3">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtruTfvnRZM-t8VmSdF_R9fTyxYXpEvycEYA&s"
            alt="이미지 4" class="card4">
    </div>
</div>

.ThirdBox {
    position: relative;
    background-color: #FFF0D2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 95vh;
    margin: 2vh 1vh 3vh 3vh;
    padding: 2vh;
    box-sizing: border-box;
    border-radius: 8px;
    z-index: 1;
}

.title {
    font-size: 3vh;
    color: black;
    margin-bottom: 3vh;
}

.scattered-images {

    width: 80vw;
    height: 80vh;
    position: relative;
}

.card {
    width: auto;
    height: auto;
    max-width: 20vw;
    max-height: 35vh;
    overflow: hidden;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card:hover {
    transform: translate(-50%, -60%) translateY(-10px);
    box-shadow: 0 2vh 5vh rgba(0, 0, 0, 0.3);
}

.scattered-images .card1,
.scattered-images .card2,
.scattered-images .card3,
.scattered-images .card4 {
    width: 18vh;
    height: 18vh;
    position: absolute;
    border-radius: 8px;
    object-fit: cover;
}

.card1 {
    top: 10%;
    left: 5%;
    transform: rotate(-10deg);
}

.card2 {
    top: 10%;
    right: 10%;
    transform: rotate(8deg);
}

.card3 {
    bottom: 15%;
    left: 8%;
    transform: rotate(-5deg);
}

.card4 {
    bottom: 20%;
    right: 12%;
    transform: rotate(12deg);
}

다음 부분은 나의 취미들이 사진으로 표현되고 나를 대표하는 사진이 중앙에 있다!!

<div class="ForthBox">
    <h1 class="PNF">Past & Future</h1>
    <div class="container2">
        <div class="sidebar">
            <div class="section">
                <div class="firstForth">
                    <h2>Past</h2>
                </div>

                <div class="SecondForth">
                    <div class="box">
                        <img src="https://media.istockphoto.com/id/469234234/ko/%EB%B2%A1%ED%84%B0/%EC%B9%A0%ED%8C%90-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%9A%94%EC%86%8C%EB%A5%BC.jpg?s=612x612&w=0&k=20&c=0q9ma_oHirWaeC0FZspixfAEid3P84sSJOZyAVK83Xw="
                            alt="Past Image 1">
                        <div class="description">대학교에서 열심히 공부했습니다.</div>
                    </div>
                    <div class="box">
                        <img src="https://cdn.econovill.com/news/photo/202105/531075_439468_4959.jpg"
                            alt="Past Image 2">
                        <div class="description">친구들과 같이 열심히 게임했습니다.</div>
                    </div>
                    <div class="box">
                        <img src="https://cdn.telltrip.com/news/photo/202406/1801_9885_494.jpg"
                            alt="Past Image 3">
                        <div class="description">친구들과 국내 이곳저곳 여행을 다녔습니다.</div>
                    </div>
                </div>

            </div>

            <div class="section">
                <div class="ThirdForth">
                    <h2>Future</h2>
                </div>

                <div class="ForthForth">
                    <div class="box">
                        <img src="https://ilovegangwon.com/data/file/humor/15827113263118.gif" alt="Future Image 1">
                        <div class="description">맡은 역할은 확실하게 해내는 책임감 있는 개발자가 되고 싶어요!!</div>
                    </div>
                    <div class="box">
                        <img src="https://i.pinimg.com/736x/36/52/57/36525799d3c4437f0fc9d33f79fe0108.jpg"
                            alt="Future Image 2">
                        <div class="description">취업도 성공하고 연애도 할 수 있으면 좋겠네요!!</div>
                    </div>
                    <div class="box">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSF47wqsidCX03_4tbYKljNlnYgzXHz0Z59A&s"
                            alt="Future Image 3">
                        <div class="description">운동을 꾸준하게 해서 만족할 수 있는 몸을 만들고 싶습니다 :)</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

.ForthBox {
    background-color: #FFF0D2;
    display: block;
    width: 100%;
    height: 95vh;
    margin: 2vh 1vh 3vh 3vh;
    padding: 2vh;
    box-sizing: border-box;
    border-radius: 8px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.PNF {
    font-size: 5vh;
    margin-bottom: 2vh;
    text-align: center;
}

.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    padding: 20px;
}

.section {
    width: 100%;
}

.section h2 {
    font-size: 3vh;
    text-align: left;
    position: relative;
}

.section h2::after {
    content: "";
    display: block;
    width: 30%;
    height: 0.3vh;
    background: black;
}

.SecondForth {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 2vh;
}

.ForthForth {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 2vh;
}

.box {
    aspect-ratio: 2 / 3;
    max-height: 30vh;
    width: 28vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 1vh;
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid white;
    border-radius: 10px;
    padding: 1vh;
}

.box img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75%;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 1vh;
}

.description {
    padding: 1vh;
    font-size: 1.5vh;
    color: black;
    text-align: center;
}

가장 밑에 있는 부분은 내가 과거에 무엇을 했는지, 내일배움캠프가 끝나고 난 시점에 어떻게 하고 싶은지를 나타내는 부분이다!!

그리고 나의 추가적인 정보들은

<div class="box contact-box">
    <div class="content" style="width: 18rem;">
        <div class="card-body">
            <p class="content-text" style="text-align: center;">더 많은 정보는~</p>
            <div class="contactButtons">
                <button>
                    <a href ="https://carrot0911.tistory.com/" class="content-button1" role="button" aria-disabled="true">Blog</a>
                </button>
                <button>
                    <a href="https://github.com/tmdcksdl" class="content-button2" role="button" aria-disabled="true">Github</a>
                </button>
                <button>
                    <a href="https://www.instagram.com/chan_09_11/" class="content-button3" role="button" aria-disabled="true">Insta</a>
                </button>
            </div>
        </div>
    </div>
</div>

사진마다 가장 밑에 있는 작은 박스에 있다. 블로그 주소, Github 주소, Insta 페이지를 넣어놨다 😎😎 

나의 개인 페이지를 완성한 후에 메인 페이지에서 로그인 페이지로 이동할 수 있는 기능을 추가했다.
메인 페이지 버튼 옆에 로그인하기를 추가해서 클릭 시 로그인 페이지로 넘어갈 수 있도록 하였다.

document.getElementById("goLogin").addEventListener("click", function () {
    // 로그인 페이지로 이동하도록 설정
    window.location.href = "login.html";
});

로그인 페이지로 이동할 수 있도록 도와주는 코드이다!

그다음은 Firebase가 내 계정으로 연결되어 있었는데 팀장님의 Firebase 계정으로 바꿔주었다.
이 부분은 Firebase에 나와있는 코드를 복사해서 붙여 넣으면 되서 아주 간단하게 끝났다!

다음으로 a 태그를 이용해서 회원가입, 로그인 페이지에서 제목을 클릭하면 메인 페이지로 이동할 수 있게 했다.

<a href="main.html" style="text-decoration: none; color: black;">
    <h1 class="h1">래프트(from garbage)</h1>
</a>

다음 코드를 회원가입, 로그인 페이지에 각각 추가해 주었다.

메인 페이지에 3개의 박스가 있고 모두 내용을 안 넣어서 텅텅 빈 상태였다.
여기서 팀원들과 상의한 끝에 팀 목표, ground rule, 팀 스케줄을 넣기로 했다. 먼저 팀 스케줄부터 작성했는데 메모장에 먼저 내용을 정리해서 적어두고 li 태그를 이용해서 깔끔하게 정리할 수 있었다.

<div class="팀카드">
    <h2>팀 스케쥴</h2>
    <ul>
        <li>9 : 00 - 출석 & 잠 깨기</li>
        <li>9 : 30 - 데일리 스크럼</li>
        <li>13 : 00 ~ 14 : 00 - 점심시간</li>
        <li>18 : 00 ~ 19 : 00 - 저녁 시간</li>
        <li>20 : 30 ~ 21 : 00 - 회고</li>
    </ul>
</div>

사진처럼 팀 스케줄 내용들이 잘 들어간 것을 확인할 수 있다.
다음은 Ground Rule을 작성하기 위해 Spring docs에 있는 Groud Rule을 참고하여 작성하였다.

<div class="팀카드">
    <h2>Ground Rule</h2>
    <ul>
        <li>주 100시간 이상 코딩합니다</li>
        <li>협업하고 도움을 주고 받으며 성장하세요</li>
        <li>좋은 매너로 말합니다</li>
        <li>나와 팀에 대해 최선을 다합니다</li>
        <li>문제를 해결하는 과정을 즐깁니다</li>
    </ul>
</div>

사진처럼 Ground Rule도 잘 적용된 것을 확인할 수 있다.
마지막으로 팀 목표를 작성해서 메인 페이지에 추가했다. 중요한 부분에는 글씨를 진하게 해서 강조해 두었다.

<div class="팀카드">
    <p>저희 팀의 목표는 <b>단순히 개발자로서의 지식을 쌓는 것에 그치지 않고, 실제로 활용 가능한 프로젝트를 완성하는 것</b>입니다.<br>
        그 과정에서 배우고 성장하며, 각자의 장점과 역량을 결합해 협업의 중요성을 깨닫고, 문제 해결 능력을 키워가고 있습니다.<br>
        비전공자라는 시작점에서 출발했지만, 그만큼 창의적이고 새로운 시각을 가지고 있으며, 끊임없이 발전하는 개발자가 되기 위해 노력하고 있습니다.<br>
        <b>저희 팀은 앞으로도 개발자의 꿈을 현실로 만들어 가는 여정을 계속하며, 도전과 성취의 순간들을 함께 나누고자 합니다.</b></p>
</div>

사진처럼 팀 목표까지 잘 들어간 것을 확인할 수 있다.
내가 작성했으니 3개의 박스 전체도 같이 기록해 둬야지😃😃😃

다음으로 각각 개인 페이지로 이동할 수 있도록 전에 설정해 두었던 멤버 카드의 a 태그에 주소를 추가해 주었다.
모두 추가한 후 페이지를 통해 확인해 보니 모두 잘 들어가 지는 것을 확인할 수 있었다!

마지막으로 팀 소개 부분이 약간 지저분하게 적혀 있어서 실시간으로 바꾸면서 깔끔하게 바꿔주었다!!!

br 태그를 이용해서 줄 바꿈을 잘 적용해서 내용이 깔끔하게 보일 수 있도록 정리했다!

 

프로젝트하면서 느낀 점 🤨 

처음에는 막막하게만 느껴졌던 프로젝트가 진행됨에 따라 페이지의 변화를 눈에 볼 수 있어서 뿌듯했다 😎
코드를 작성하는 부분은 여전히 어렵고, git을 활용하는 부분도 버벅거리지만 프로젝트하는 동안 조금은 성장한 나를 볼 수 있었다.

새로 알게 되었던 깃 메시지와 깃모지를 열심히 활용하여 commit 메시지를 작성했고, 하나의 기능이 끝날 때마다 Github에 push 하려고 노력했다.
금요일에 발표해서 아직 시간적으로는 여유롭다고 생각한다. 내일은 페이지를 확인하면서 조금씩 수정하고 완벽한 페이지를 만들 수 있도록 노력해야겠다!!!

프로젝트 기간 동안 계속 성장하고 있는 나를 볼 수 있어서 좋은 것 같다 😃😃😃 

(GPT 무료 버전을 쓰고 있었는데 무료 버전과 유료 버전의 답이 확연하게 다르다는 점을 오늘 팀원분에게 듣고 바로 유료 버전을 결제했다..... 내 3만원이 아깝지 않게 유용하게 사용해야겠다!!!!!!!!)