저희 B팀은 새로운 아이디어를 기획하고 디자인, 퍼블리싱 및 API연결 까지 맡았습니다.
<aside> 💡
기획 단계에서는 태훈이와 함계 여러 아이디어를 생각했습니다.
추모리스트, 명언 모음, 성향테스트, 신문, 퀴즈, 명대사, 알림창 등 총 7개 정도의 아이디어가 나왔습니다. 이 중에서 선배님들의 의견을 반영하여 현재 있으면 가장 좋을 것 같은 아이디어로 기일 알림창을 개발 하기로 계획 하였습니다.
구체화 단계에서는 위에서 정한 기일알림창 아이디어를 세밀하게 구체화를 하였습니다.
그래서 기일 알림창 뿐만 아니라 고인과 추모관 알림을 추가로 더 띄우기로 하였습니다.
최애의 사인은 window94 모델로 디자인을 하였으므로 window94에 있는 매모장을 참고하여 알림창의 디자인을 생각했습니다.
기일이 겹치는 애니메이션캐릭터가 있다면 계단형식으로 쌓이면서 알림이 계속 쌓이는 형식으로 디자인을 해봤습니다.
장점 : 알림창이 눈에 돋보임
단점 : 기일이 겹치면 화면 밖에 나갈 수 있고 window94의 디자인과 맞지 않음
계단 형식이 아닌 위로 쌓아올리는 형식으로 디자인
장점 : 글자를 왼쪽 정렬하여 계단식 알림창보다 깔끔해보임
단점 : 눈에 잘 띄지 않음
알림창 클릭시 화면 중아에 애니메이션 캐릭터의 명대사와 추모과으로 바로 방문 할 수 있도록 디자인
장점 : 그냥 기일을 알리는 것 보다 명대사가 있으니 호기심에 추모관을 방문 해보고 싶음
단점 : 많은 추모관이 등록될 텐데 한명한명 명대사를 찾아서 DB에 넣는게 번거러울 수 있음
알림창이 더 돋보이도록 위에 배치하였고 추모관과 고인 알람까지 추가함 기일이 여러명 일 때 케러셀로 이름이 옆으로 이동할 예정
장점 : 알림창을 위에 배치하여 더 돋보임 깔끔하고 명확하게 알림을 전달함
단점 : 추모관과 고인에 대한 기준을 명확히 정햐야함
오늘은 ‘에이스’의 기일입니다. 라는 글자를 누르면 바로 밑에 창이 뜨고 명대사만 뜨고 추모관으로 바로 방문 할 수 있도록 디자인 함
장점 : 바로 밑에 떠서 번거럽지 않고 깔금함
단점 : 위와 마찬가지로 명대사 작성의 어려움
</aside>
<aside> 💡
일단 기일창, 추모관 창, 고인 창 총 3개의 창을 띄우기 위해서 applicationList 파일에 아래와 같이 창 3개를 만들었습니다.
useEffect(() => {
if (isLogIned === 'true' || isLogIned === 'guest') {
const anniversaryTask: TaskType = {
component: (
<Suspense fallback={null}>
<AnniversaryWindow />
</Suspense>
),
type: 'App',
id: 9996,
name: '오늘의 기일',
layer: undefined,
appSetup: {
Image: 'default',
minWidth: 800,
minHeight: 81,
setUpWidth: 370,
setUpHeight: 81,
},
visible: false,
};
setTimeout(() => {
addTask(discover);
addTask(anniversaryTask);
}, 200);
} else {
setTimeout(() => {
addTask(logIn);
}, 200);
}
}, [isLogIned]);
로그인이 되었을 때 알림창을 자동으로 띄우기 위한 로직입니다. windowManger에서 uesEffect를 활용하여 isLogIned라면 알림창을 뛰우도록 코드를 만들었습니다. 추모관 창과 고인 창도 똑같은 로직으로 코드를 만들었습니다.
if (props.type === 'App') {
return (
<_.Window
style={window}
onMouseDown={() => setFocus(props.name)}
>
<_.WindowHeader {...moveManager()}>
<_.TitleContainer>
{props.setUpHeight>=81?
<_.HeartImg
src={props.name=="오늘의 기일" ? scal : Heart}
draggable='false'
/>
:
<_.HeartImg
src={props.name=="오늘의 추모관" ? flower:Heart}
draggable='false'
/>
}
이 코드는 @정현태의 도움을 좀 많이 받아서 작성을 하였습니다. props.setUpHeight >= 81 → 높이 값이 81 이상이면 첫 번째 <_.scal>를,
작으면 두 번째 <_.Heart>를 렌더링합니다. 차이점을 활용하여 구분하고 아이콘을 변경하려고 처음에는 고유하게 가지고 있는게 다른 id를 활용하여 변경하려 했으나 id가 무슨 이유에서인지 되지않아 일단은 하나의 높이를 1px를 다르게 변경하여 구분될 수 있도록 코드를 만들었습니다. 추후에 수정하여 바꾸도록 하겠습니다.
const customWindow={...window, top:10, left:885 }
useEffect(()=>{setWindow(customWindow)},[])
알림창이 원래는 중앙에 생성되었는데 저희의 디자인은 오른쪽 위에 띄우는 것이므로 layout을 불러와서 위치를 다 조절하였습니다.
</aside>
<aside> 💡
</aside>
<aside>
</aside>